:root {
  --ink: #121a36;
  --muted: #5c6680;
  --cream: #fbfaf7;
  --paper: rgba(255, 255, 255, 0.91);
  --line: rgba(20, 30, 60, 0.12);
  --sky-top: #6eafff;
  --sky-bottom: #d8f0ff;
  --blue: #3869ff;
  --violet: #7657ff;
  --peach: #ff9c68;
  --peach-soft: #ffe2cf;
  --green: #39bd6c;
  --green-dark: #177b48;
  --yellow: #ffd64a;
  --red: #ef3f45;
  --brick: #d96e36;
  --brick-dark: #8e3d25;
  --ground-h: clamp(118px, 18vh, 172px);
  --world-width: 10000px;
  --world-x: 0px;
  --cloud-back-x: 0px;
  --cloud-front-x: 0px;
  --hero-x: 680px;
  --hero-y: 0px;
  --shadow-scale: 1;
  --shadow-opacity: 0.22;
  --hero-scale: 1;
  --hero-tilt: 0deg;
  --hero-dir: 1;
  --night: 0;
  --stage-opacity: 1;
  --progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--cream);
  color: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  color: inherit;
}

a {
  text-decoration: none;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 30px rgba(14, 22, 45, 0.18);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.experience {
  position: relative;
  isolation: isolate;
}

.topbar {
  position: fixed;
  z-index: 30;
  top: 14px;
  left: 18px;
  right: 18px;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(150px, 0.8fr) auto minmax(300px, 1.25fr);
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 40px rgba(24, 49, 94, 0.12);
  backdrop-filter: blur(16px) saturate(1.15);
  transition: background 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

body.after-game .topbar {
  background: rgba(251, 250, 247, 0.94);
  border-color: rgba(20, 30, 60, 0.1);
  box-shadow: 0 8px 26px rgba(20, 30, 60, 0.08);
}

.brand {
  display: inline-flex;
  align-items: flex-start;
  width: max-content;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 2.3vw, 38px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.brand b {
  margin: -1px 0 0 5px;
  color: #00b85a;
  font-family: ui-sans-serif, sans-serif;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 15px rgba(0, 184, 90, 0.3);
}

.chapter-readout {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  overflow: hidden;
}

.chapter-readout span {
  flex: 0 0 auto;
  color: var(--violet);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.chapter-readout strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.control-button,
.projects-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(20, 30, 60, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.62);
  color: #27314f;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.control-button {
  padding: 0 11px;
}

.projects-button {
  padding: 0 14px;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.control-button:hover,
.projects-button:hover {
  transform: translateY(-1px);
}

.control-button[aria-pressed="true"] {
  background: #f1efff;
  border-color: rgba(118, 87, 255, 0.28);
  color: #4d38b8;
}

.control-button:focus-visible,
.projects-button:focus-visible,
.chapter-card a:focus-visible,
.project-card a:focus-visible {
  outline: 3px solid rgba(56, 105, 255, 0.35);
  outline-offset: 3px;
}

.progress-rail {
  position: fixed;
  z-index: 31;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
}

.progress-rail span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #7259ff, #ff8f6c 48%, #ffcb45 72%, #00b85a);
  box-shadow: 0 0 16px rgba(118, 87, 255, 0.45);
}

.stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: var(--stage-opacity);
  background: #78baff;
  pointer-events: none;
  transition: opacity 380ms ease;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body.after-game .stage {
  visibility: hidden;
}

body.after-game .stage *,
body.after-game .stage *::before,
body.after-game .stage *::after {
  animation-play-state: paused !important;
}

.sky {
  position: absolute;
  inset: 0;
}

.sky-day {
  background:
    radial-gradient(circle at 76% 21%, rgba(255, 255, 255, 0.48) 0 3%, transparent 15%),
    linear-gradient(180deg, var(--sky-top) 0%, #98ceff 45%, var(--sky-bottom) 100%);
}

.sky-neural {
  opacity: var(--night);
  background:
    radial-gradient(circle at 78% 26%, rgba(255, 175, 120, 0.45), transparent 18%),
    radial-gradient(circle at 30% 22%, rgba(119, 84, 255, 0.32), transparent 26%),
    linear-gradient(180deg, #20224b 0%, #4d4383 47%, #efb99e 100%);
}

.sun-orbit {
  position: absolute;
  z-index: 1;
  top: 13vh;
  right: 12vw;
  width: clamp(70px, 7vw, 110px);
  aspect-ratio: 1;
  opacity: calc(1 - (var(--night) * 0.65));
  transform: translate3d(calc(var(--progress) * -2vw), calc(var(--progress) * 5vh), 0);
}

.sun {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: #fff7b8;
  box-shadow: 0 0 0 11px rgba(255, 247, 184, 0.2), 0 0 58px 22px rgba(255, 242, 168, 0.42);
}

.cloud-layer {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 4600px;
  transform: translate3d(var(--cloud-back-x), 0, 0);
  will-change: transform;
}

.cloud-layer--front {
  z-index: 2;
  width: 6200px;
  transform: translate3d(var(--cloud-front-x), 0, 0);
}

.cloud {
  position: absolute;
  width: 134px;
  height: 45px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    18px -24px 0 -3px rgba(255, 255, 255, 0.94),
    51px -38px 0 7px rgba(255, 255, 255, 0.94),
    89px -21px 0 1px rgba(255, 255, 255, 0.94),
    22px 10px 0 -7px rgba(255, 255, 255, 0.58);
  filter: drop-shadow(0 14px 16px rgba(45, 100, 165, 0.08));
}

.cloud--small {
  transform: scale(0.68);
  opacity: 0.78;
}

.cloud--large {
  transform: scale(1.28);
  opacity: 0.88;
}

.neuron-field {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: var(--night);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 196, 151, 0.9) 0 1px, transparent 2px);
  background-position: 11vw 18vh, 27vw 28vh;
  background-size: 160px 120px, 110px 88px;
  mask-image: linear-gradient(to bottom, #000 0 68%, transparent 94%);
}

.neuron-field::before,
.neuron-field::after {
  content: "";
  position: absolute;
  top: 19%;
  left: 78%;
  width: 170px;
  height: 3px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 206, 163, 0.72) 55%, #fff 100%);
  filter: drop-shadow(0 0 5px rgba(255, 215, 177, 0.8));
  animation: shootingStar 5.8s ease-in-out infinite;
}

.neuron-field::after {
  top: 43%;
  left: 34%;
  width: 120px;
  animation-delay: 2.65s;
  animation-duration: 6.7s;
}

@keyframes shootingStar {
  0%, 62% { opacity: 0; transform: translate3d(80px, -50px, 0) rotate(-25deg) scaleX(0.2); }
  66% { opacity: 1; }
  77% { opacity: 0; transform: translate3d(-230px, 150px, 0) rotate(-25deg) scaleX(1); }
  100% { opacity: 0; transform: translate3d(-230px, 150px, 0) rotate(-25deg) scaleX(1); }
}

.world {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: var(--world-width);
  height: 100%;
  transform: translate3d(var(--world-x), 0, 0);
  will-change: transform;
}

.world-scenery,
.world-objects {
  position: absolute;
  inset: 0;
}

.ground {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ground-h);
  border-top: 9px solid #d7f076;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%) 0 0 / 32px 32px,
    linear-gradient(315deg, rgba(56, 69, 36, 0.12) 25%, transparent 25%) 0 0 / 32px 32px,
    #a4673a;
  box-shadow: inset 0 12px 0 #57b94f, inset 0 19px 0 #318f42;
}

.ground::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 12px;
  background: repeating-linear-gradient(90deg, #287a3c 0 18px, #46a64c 18px 32px, #75c957 32px 45px);
  opacity: 0.9;
}

.hill {
  position: absolute;
  z-index: 0;
  bottom: var(--ground-h);
  width: 380px;
  height: 215px;
  overflow: hidden;
  border-radius: 56% 56% 0 0 / 82% 82% 0 0;
  background: linear-gradient(135deg, #71dd77, #2fba66);
  box-shadow: inset -28px -16px 0 rgba(16, 106, 66, 0.15);
}

.hill::before,
.hill::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 126, 74, 0.24);
}

.hill::before {
  left: 32%;
  top: 32%;
}

.hill::after {
  right: 22%;
  top: 52%;
  height: 25px;
}

.hill--small {
  width: 260px;
  height: 145px;
  background: linear-gradient(135deg, #98df72, #4fc965);
}

.bush {
  position: absolute;
  z-index: 3;
  bottom: calc(var(--ground-h) - 2px);
  width: 122px;
  height: 54px;
  border-radius: 50% 50% 14px 14px;
  background: #35a75a;
  box-shadow: 37px -18px 0 3px #41bb62, 76px -3px 0 0 #2e9f55, inset 0 -9px 0 rgba(21, 115, 62, 0.2);
}

.pipe {
  position: absolute;
  z-index: 5;
  bottom: calc(var(--ground-h) - 1px);
  width: 82px;
  height: 114px;
  border: 5px solid #126f3d;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(90deg, #2aa95a 0 18%, #5bdd78 18% 35%, #2cb65f 35% 72%, #148446 72% 100%);
  box-shadow: inset -8px 0 0 rgba(5, 85, 42, 0.22), 0 7px 0 rgba(38, 51, 25, 0.15);
}

.pipe::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -14px;
  width: 100px;
  height: 34px;
  border: 5px solid #126f3d;
  border-radius: 7px;
  background: linear-gradient(90deg, #2aa95a 0 18%, #6be584 18% 38%, #2cb65f 38% 72%, #148446 72% 100%);
}

.platform {
  position: absolute;
  z-index: 4;
  height: 61px;
  border: 0;
  background: url("assets/runner/brick-tile.png") left bottom / 61px 61px repeat-x;
  box-shadow: 0 8px 0 rgba(99, 48, 32, 0.18);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.platform--cloud {
  height: 34px;
  border: 5px solid #d7c7ff;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff, #e9e5ff);
  box-shadow: 0 8px 0 rgba(84, 65, 160, 0.12);
}

.event-object {
  position: absolute;
  z-index: 8;
  width: 86px;
  height: 240px;
  bottom: calc(var(--ground-h) + 24px);
}

.event-object--air {
  bottom: 48vh;
}

.question-block {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 6px solid #9c5a17;
  border-radius: 7px;
  background:
    radial-gradient(circle at 12px 12px, #fff2a9 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #fff2a9 0 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #8f4b12 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8f4b12 0 3px, transparent 4px),
    linear-gradient(135deg, #ffe55e, #f6a82b);
  color: #fff7bd;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 48px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 5px 0 #b36919;
  box-shadow: inset 5px 5px 0 rgba(255, 255, 255, 0.36), inset -6px -6px 0 rgba(169, 87, 13, 0.18), 0 8px 0 rgba(76, 43, 20, 0.2);
  transform-origin: center bottom;
}

.question-block::after {
  content: "";
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(255, 233, 118, 0.62);
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.8);
}

.question-block.is-ready {
  animation: blockShimmer 1.2s steps(2, end) infinite;
}

.question-block.is-hit {
  animation: blockHit 260ms ease both;
}

.question-block.is-used {
  color: transparent;
  text-shadow: none;
  background:
    radial-gradient(circle at 12px 12px, #d6c9b0 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #d6c9b0 0 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #8e806d 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8e806d 0 3px, transparent 4px),
    linear-gradient(135deg, #b7aa94, #8f806b);
  border-color: #6e6251;
}

.question-block.is-hit::after {
  animation: blockRing 420ms ease-out both;
}

@keyframes blockShimmer {
  50% { filter: brightness(1.13); }
}

@keyframes blockHit {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(calc(-1 * var(--block-bounce-lift, 14px))); }
}

@keyframes blockRing {
  to { opacity: 0; transform: scale(1.3); }
  35% { opacity: 1; }
}

.powerup {
  position: absolute;
  z-index: 9;
  left: 10px;
  bottom: 78px;
  width: 58px;
  height: 58px;
  opacity: 0;
  transform-origin: center center;
  filter: drop-shadow(0 8px 7px rgba(51, 37, 28, 0.2));
}

.mushroom {
  width: 62px;
  height: 58px;
}

.mushroom-cap {
  position: absolute;
  left: 3px;
  top: 0;
  width: 56px;
  height: 38px;
  border: 5px solid #7e2024;
  border-radius: 50% 50% 13px 13px;
  background:
    radial-gradient(circle at 17px 14px, #fff 0 7px, transparent 8px),
    radial-gradient(circle at 42px 10px, #fff 0 5px, transparent 6px),
    linear-gradient(135deg, #ff5c60, #d62f3a);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.25);
}

.mushroom-stem {
  position: absolute;
  left: 17px;
  top: 32px;
  width: 30px;
  height: 25px;
  border: 4px solid #7c5638;
  border-radius: 6px 6px 10px 10px;
  background: #f4d1a1;
}

.mushroom-stem::before,
.mushroom-stem::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 4px;
  height: 8px;
  background: #332820;
}

.mushroom-stem::before { left: 5px; }
.mushroom-stem::after { right: 5px; }

.brain-power,
.brain-token {
  display: grid;
  place-items: center;
}

.brain-power svg,
.brain-token svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 11px rgba(255, 111, 137, 0.62));
}

.brain-power .brain-fill,
.brain-token .brain-fill {
  fill: #ff8a9d;
}

.brain-power .brain-shadow,
.brain-token .brain-shadow {
  fill: #d95174;
}

.brain-power .brain-line,
.brain-token .brain-line {
  fill: none;
  stroke: #69234b;
  stroke-width: 3;
  stroke-linecap: round;
}

.brain-power .brain-spark,
.brain-token .brain-spark {
  fill: #fff6ad;
}

.brain-power::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px dashed rgba(255, 242, 171, 0.9);
  border-radius: 50%;
  animation: haloSpin 2.5s linear infinite;
}

@keyframes haloSpin {
  to { transform: rotate(360deg); }
}

.world-sign {
  position: absolute;
  z-index: 6;
  width: min(430px, 42vw);
  min-width: 300px;
  padding: 18px 20px;
  border: 4px solid rgba(20, 30, 60, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 9px 9px 0 rgba(20, 30, 60, 0.22);
}

.world-sign::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -24px;
  height: 24px;
  background: linear-gradient(90deg, transparent 0 14%, #2a3150 14% 18%, transparent 18% 82%, #2a3150 82% 86%, transparent 86%);
}

.world-sign small {
  display: block;
  margin-bottom: 6px;
  color: var(--violet);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.world-sign strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.1vw, 36px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.world-sign span {
  display: block;
  margin-top: 5px;
  color: #5d6680;
  font-size: 12px;
  line-height: 1.45;
}

.enemy {
  position: absolute;
  z-index: 7;
  bottom: calc(var(--ground-h) + 3px);
  width: 67px;
  height: 61px;
  transform-origin: center bottom;
  animation: enemyWaddle 560ms steps(2, end) infinite;
}

.enemy--chained {
  bottom: calc(var(--ground-h) - 3px);
  width: 144px;
  height: 106px;
  animation: none;
}

.enemy-sprite {
  display: block;
  width: 144px;
  height: 106px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 6px 0 rgba(31, 38, 46, 0.18));
}

.enemy--chained .enemy-label {
  bottom: 112px;
  border-color: #30323d;
  color: #30323d;
}

.enemy-body {
  position: absolute;
  left: 5px;
  top: 4px;
  width: 57px;
  height: 45px;
  border: 5px solid #5a2f22;
  border-radius: 50% 50% 24% 24%;
  background: linear-gradient(135deg, #a85c38, #713821);
  box-shadow: inset 0 6px 0 rgba(255, 188, 118, 0.18);
}

.enemy-body::before,
.enemy-body::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 8px;
  height: 11px;
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 4px 0 0 #1b1620;
}

.enemy-body::before { left: 11px; transform: rotate(12deg); }
.enemy-body::after { right: 11px; transform: rotate(-12deg); }

.enemy-foot {
  position: absolute;
  bottom: 1px;
  width: 31px;
  height: 14px;
  border: 4px solid #4e2920;
  border-radius: 50% 50% 4px 4px;
  background: #7d422c;
}

.enemy-foot--left { left: 0; }
.enemy-foot--right { right: 0; }

.enemy-label {
  position: absolute;
  left: 50%;
  bottom: 72px;
  padding: 5px 8px;
  border: 2px solid #6f3d2c;
  border-radius: 7px;
  background: #fff7e8;
  color: #5a2f22;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transform: translateX(-50%);
}

@keyframes enemyWaddle {
  50% { transform: rotate(-4deg) translateY(-2px); }
}

.focus-object {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  transform-origin: center bottom;
}

.focus-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 7px 0 rgba(31, 38, 46, 0.16));
}

.focus-object--art-sign {
  width: 148px;
  height: 206px;
}

#distraction-warning {
  width: 120px;
  height: 154px;
}

#task-warning {
  width: 142px;
  height: 222px;
}

.focus-object--lure {
  width: 92px;
  height: 150px;
}

.focus-object--lure::after {
  display: none;
}

.focus-object--lure .lure-base,
.focus-object--lure .lure-orb {
  position: absolute;
  inset: 0;
}

.focus-object--lure .lure-orb {
  z-index: 2;
  opacity: var(--lure-opacity, 1);
  transform: translate3d(var(--lure-x, 0), var(--lure-y, 0), 0) scale(var(--lure-scale, 1));
  transform-origin: 50% 24%;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 13px rgba(207, 72, 255, 0.92));
  animation: lureBlink 760ms steps(2, end) infinite;
}

.focus-object--frog {
  width: 164px;
  height: 164px;
}

.focus-object--frog img {
  transform: scaleX(-1);
  animation: frogBreathe 920ms steps(2, end) infinite;
}

.focus-object--task-pile {
  z-index: 8;
  width: 166px;
  height: 145px;
  animation: taskPileFloat 1.8s ease-in-out infinite alternate;
}

.focus-object--task-monster {
  z-index: 9;
  width: 176px;
  height: 224px;
  animation: taskMonsterHover 1.2s steps(2, end) infinite;
}

.focus-object--task-monster::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 72px;
  height: 13px;
  border-radius: 50%;
  background: rgba(34, 41, 54, 0.17);
  transform: translateX(-50%);
  filter: blur(2px);
}

@keyframes lureBlink {
  50% { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 21px rgba(230, 79, 255, 1)); }
}

@keyframes frogBreathe {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-2px); }
}

@keyframes taskPileFloat {
  to { transform: translateY(-7px) rotate(0.7deg); }
}

@keyframes taskMonsterHover {
  50% { transform: translateY(-8px) rotate(-1deg); }
}

.brain-gate {
  position: absolute;
  z-index: 5;
  bottom: calc(var(--ground-h) - 2px);
  width: 430px;
  height: 430px;
  display: grid;
  place-items: center;
  opacity: 0.98;
}

.brain-gate::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 340px;
  height: 95px;
  border: 7px solid #342d62;
  border-radius: 20px 20px 0 0;
  background:
    linear-gradient(90deg, transparent 0 28%, rgba(255, 255, 255, 0.14) 28% 32%, transparent 32% 68%, rgba(255, 255, 255, 0.14) 68% 72%, transparent 72%),
    #6756a0;
  transform: translateX(-50%);
  box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.15);
}

.brain-gate svg {
  position: relative;
  z-index: 2;
  width: 310px;
  height: 310px;
  overflow: visible;
  filter: drop-shadow(0 0 24px rgba(255, 149, 143, 0.58));
  animation: brainFloat 2.8s ease-in-out infinite alternate;
}

.brain-gate .brain-fill { fill: #ff9b8c; }
.brain-gate .brain-shadow { fill: #d65e7f; }
.brain-gate .brain-line { fill: none; stroke: #562855; stroke-width: 2.2; stroke-linecap: round; }
.brain-gate .brain-spark { fill: #fff2a3; }

.brain-gate .node {
  fill: #fff;
  transform-origin: center;
  animation: nodePulse 1.1s ease-in-out infinite alternate;
}

.brain-gate .node:nth-of-type(2n) { animation-delay: 300ms; }
.brain-gate .node:nth-of-type(3n) { animation-delay: 600ms; }

@keyframes brainFloat {
  to { transform: translateY(-14px) rotate(1.5deg); }
}

@keyframes nodePulse {
  to { opacity: 0.35; transform: scale(0.7); }
}

.hero-wrap {
  position: fixed;
  z-index: 12;
  left: 0;
  bottom: calc(var(--ground-h) - 2px);
  width: 112px;
  height: 132px;
  transform: translate3d(var(--hero-x), var(--hero-y), 0);
  transform-origin: center bottom;
  will-change: transform;
}

.hero-shadow {
  position: absolute;
  left: 17px;
  bottom: -6px;
  width: 78px;
  height: 17px;
  border-radius: 50%;
  background: rgba(22, 44, 58, 1);
  opacity: var(--shadow-opacity);
  filter: blur(3px);
  transform: translateY(var(--shadow-y, 0px)) scale(var(--shadow-scale));
}

.hero-aura {
  position: absolute;
  left: 4px;
  top: 5px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 246, 167, 0.66), rgba(255, 161, 118, 0.12) 46%, transparent 70%);
  transform: scale(0.7);
}

.hero-wrap.just-powered .hero-aura {
  animation: powerFlash 1700ms ease-out both;
}

@keyframes powerFlash {
  30% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.8); }
}

.hero-art {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 96px;
  height: 112px;
  transform-origin: 50% 100%;
  transform: scaleX(var(--hero-dir)) scale(var(--hero-scale)) rotate(var(--hero-tilt));
  will-change: transform;
  filter: drop-shadow(0 5px 0 rgba(69, 40, 29, 0.15));
}

.hero-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-svg .cap { fill: #ed3e42; }
.hero-svg .cap-shadow { fill: #98262e; }
.hero-svg .badge { fill: #fff5e8; }
.hero-svg .badge-mark { fill: #00a95c; }
.hero-svg .skin { fill: #efb17d; }
.hero-svg .hair,
.hero-svg .moustache { fill: #573124; }
.hero-svg .eye { fill: #171822; }
.hero-svg .nose { fill: #e99d6a; }
.hero-svg .shirt { fill: #e63d43; }
.hero-svg .overall { fill: #2d62d7; }
.hero-svg .button { fill: #ffd24c; }
.hero-svg .glove { fill: #fff7ec; }
.hero-svg .shoe { fill: #6a3829; }
.hero-svg .tail-dark,
.hero-svg .ear-dark { fill: #6d4028; }
.hero-svg .tail-light,
.hero-svg .ear-light { fill: #c78a4e; }
.hero-svg .tail-stripe { fill: #8d552e; }

.tail-group,
.ear-group {
  opacity: 0;
  transition: opacity 240ms ease;
}

.tail-group {
  transform-origin: 36px 70px;
  transform-box: view-box;
}

.hero-wrap.has-tail .tail-group,
.hero-wrap.has-tail .ear-group {
  opacity: 1;
}

.hero-wrap.is-running .leg--front {
  animation: legFront 280ms steps(2, end) infinite;
}

.hero-wrap.is-running .leg--back {
  animation: legBack 280ms steps(2, end) infinite;
}

.hero-wrap.is-running .arm--front {
  animation: armFront 280ms steps(2, end) infinite;
}

.hero-wrap.is-running .arm--back {
  animation: armBack 280ms steps(2, end) infinite;
}

.leg,
.arm {
  transform-box: fill-box;
  transform-origin: 50% 12%;
}

@keyframes legFront {
  50% { transform: rotate(-26deg) translateY(2px); }
}

@keyframes legBack {
  50% { transform: rotate(26deg) translateY(-1px); }
}

@keyframes armFront {
  50% { transform: rotate(24deg); }
}

@keyframes armBack {
  50% { transform: rotate(-20deg); }
}

.hero-wrap.is-jumping .leg--front { transform: rotate(-15deg) translateY(-2px); }
.hero-wrap.is-jumping .leg--back { transform: rotate(23deg) translateY(2px); }
.hero-wrap.is-jumping .arm--front { transform: rotate(-34deg); }
.hero-wrap.is-jumping .arm--back { transform: rotate(34deg); }

.hero-wrap.is-flying .tail-group {
  animation: tailSpin 190ms steps(4, end) infinite;
}

.hero-wrap.is-flying .arm--front { transform: rotate(-95deg) translate(-3px, -2px); }
.hero-wrap.is-flying .arm--back { transform: rotate(96deg) translate(3px, -1px); }
.hero-wrap.is-flying .leg--front { transform: rotate(18deg) translateY(-4px); }
.hero-wrap.is-flying .leg--back { transform: rotate(-18deg) translateY(-4px); }

@keyframes tailSpin {
  0% { transform: rotate(0deg) scaleY(1); }
  25% { transform: rotate(90deg) scaleY(0.65); }
  50% { transform: rotate(180deg) scaleY(1); }
  75% { transform: rotate(270deg) scaleY(0.65); }
  100% { transform: rotate(360deg) scaleY(1); }
}

.neural-trail {
  position: absolute;
  z-index: -1;
  right: 71px;
  top: 41px;
  width: 170px;
  height: 62px;
  opacity: 0;
  transition: opacity 180ms ease;
}

.hero-wrap.is-flying .neural-trail {
  opacity: 1;
}

.neural-trail::before,
.neural-trail::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 145px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78));
  transform-origin: right center;
}

.neural-trail::before { top: 20px; transform: rotate(8deg); }
.neural-trail::after { top: 42px; transform: rotate(-10deg); }

.neural-trail i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff4a5;
  box-shadow: 0 0 12px rgba(255, 237, 137, 0.8);
  animation: trailNode 620ms ease-out infinite;
}

.neural-trail i:nth-child(1) { right: 18px; top: 17px; }
.neural-trail i:nth-child(2) { right: 52px; top: 29px; animation-delay: 100ms; }
.neural-trail i:nth-child(3) { right: 86px; top: 10px; animation-delay: 200ms; }
.neural-trail i:nth-child(4) { right: 118px; top: 43px; animation-delay: 300ms; }
.neural-trail i:nth-child(5) { right: 151px; top: 23px; animation-delay: 400ms; }

@keyframes trailNode {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: translateX(-18px) scale(0.3); }
}

.fx-layer {
  position: fixed;
  z-index: 16;
  inset: 0;
  overflow: hidden;
}

.fx-burst {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff29b;
  box-shadow: 0 0 15px rgba(255, 240, 131, 0.9);
  animation: burstOut 620ms ease-out both;
}

.fx-star {
  position: absolute;
  width: 12px;
  height: 12px;
  animation: starOrbit 1800ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

.fx-star--hero {
  z-index: 5;
  pointer-events: none;
}

.fx-star::before,
.fx-star::after {
  content: "";
  position: absolute;
  inset: 5px 0;
  background: #ffd12f;
  box-shadow: 0 0 8px rgba(255, 215, 59, 0.9);
}

.fx-star::after {
  inset: 0 5px;
}

.fx-star--large {
  width: 17px;
  height: 17px;
}

.fx-star--large::before { inset: 7px 0; }
.fx-star--large::after { inset: 0 7px; }

@keyframes starOrbit {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) rotate(0deg) scale(0.15); }
  18% { opacity: 1; }
  38% { transform: translate3d(var(--star-x1), var(--star-y1), 0) rotate(110deg) scale(1); }
  68% { opacity: 1; transform: translate3d(var(--star-x2), var(--star-y2), 0) rotate(245deg) scale(0.82); }
  100% { opacity: 0; transform: translate3d(var(--star-x3), var(--star-y3), 0) rotate(430deg) scale(0.08); }
}

@keyframes burstOut {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.scroll-cue {
  position: fixed;
  z-index: 18;
  left: 50%;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #223052;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  box-shadow: 0 8px 24px rgba(36, 74, 125, 0.12);
  transform: translateX(-50%);
  transition: opacity 240ms ease, transform 240ms ease;
}

.scroll-cue b {
  animation: cueBounce 850ms ease-in-out infinite alternate;
}

.scroll-cue.is-hidden {
  opacity: 0;
  transform: translate(-50%, 16px);
}

@keyframes cueBounce {
  to { transform: translateY(3px); }
}

.game-hud {
  position: static;
  z-index: auto;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 240ms ease, transform 240ms ease;
}

body.after-game .game-hud {
  opacity: 1;
  transform: none;
}

.topbar .hud-chip--power {
  display: none;
}

.hud-chip,
.p-meter {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(29, 62, 112, 0.12);
  backdrop-filter: blur(12px);
}

.hud-chip span,
.p-meter span {
  color: #657089;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.hud-chip strong {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.hud-chip--brains strong {
  min-width: 12px;
  color: #d84e72;
  font-size: 15px;
}

.mini-brain {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffe4ea;
  color: #d84e72 !important;
  font-size: 12px !important;
}

.p-meter {
  gap: 3px;
  padding-right: 8px;
}

.p-meter span {
  margin-right: 3px;
  color: #dd3e48;
  font-size: 12px;
}

.p-meter i {
  width: 8px;
  height: 15px;
  border-radius: 2px;
  background: #dce3ec;
  box-shadow: inset 0 -2px 0 rgba(20, 30, 60, 0.12);
  transition: background 120ms ease, transform 120ms ease;
}

.p-meter i.is-filled {
  background: linear-gradient(180deg, #ffe471, #ff8d55);
  transform: translateY(-1px);
}

.story {
  position: relative;
  z-index: 20;
}

.chapter {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 115px clamp(20px, 6vw, 96px) 90px;
  pointer-events: none;
}

.chapter--left {
  justify-content: flex-start;
}

.chapter--right {
  justify-content: flex-end;
}

.chapter--center {
  justify-content: center;
  text-align: center;
}

.chapter--high {
  align-items: flex-start;
  padding-top: clamp(140px, 20vh, 210px);
}

.chapter-card {
  position: fixed;
  z-index: 23;
  top: 50%;
  width: min(470px, calc(100vw - 40px));
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 75px rgba(25, 55, 102, 0.16), 0 2px 0 rgba(255, 255, 255, 0.88) inset;
  backdrop-filter: blur(16px) saturate(1.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms ease, transform 480ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.chapter--left .chapter-card {
  left: clamp(20px, 6vw, 96px);
  right: auto;
  transform: translate(-28px, -46%) scale(0.97);
}

.chapter--right .chapter-card {
  left: auto;
  right: clamp(20px, 6vw, 96px);
  transform: translate(28px, -46%) scale(0.97);
}

.chapter--center .chapter-card {
  left: 50%;
  right: auto;
  transform: translate(-50%, -44%) scale(0.97);
}

.chapter--high .chapter-card {
  top: clamp(122px, 18vh, 180px);
}

.chapter--left.chapter--high .chapter-card,
.chapter--right.chapter--high .chapter-card {
  transform: translateY(22px) scale(0.97);
}

.chapter.is-active .chapter-card {
  opacity: 1;
  pointer-events: auto;
}

.chapter--left.is-active .chapter-card,
.chapter--right.is-active .chapter-card {
  transform: translate(0, -50%) scale(1);
}

.chapter--left.chapter--high.is-active .chapter-card,
.chapter--right.chapter--high.is-active .chapter-card {
  transform: translate(0, 0) scale(1);
}

.chapter--center.is-active .chapter-card {
  transform: translate(-50%, -50%) scale(1);
}

body.after-game .chapter-card {
  opacity: 0 !important;
  pointer-events: none !important;
}

.chapter-card--hero {
  width: min(600px, calc(100vw - 40px));
  padding: clamp(26px, 4vw, 46px);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 221, 153, 0.35), transparent 34%),
    rgba(255, 255, 255, 0.9);
}

.chapter-card--hero h1 {
  max-width: 560px;
  font-size: clamp(42px, 5.4vw, 78px);
}

.chapter-card--compact {
  width: min(430px, calc(100vw - 40px));
}

.chapter-card--wide {
  width: min(560px, calc(100vw - 40px));
}

.chapter-card--final {
  width: min(680px, calc(100vw - 40px));
  padding: clamp(30px, 5vw, 58px);
  border-color: rgba(255, 255, 255, 0.75);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 224, 153, 0.43), transparent 40%),
    rgba(255, 255, 255, 0.9);
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--violet);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chapter-card h1,
.chapter-card h2,
.projects h2,
.project-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.99;
}

.chapter-card h2 {
  font-size: clamp(34px, 4vw, 57px);
}

.chapter-card p {
  margin: 18px 0 0;
  max-width: 52ch;
  color: #4c5873;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.62;
}

.project-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(20, 30, 60, 0.08);
  border-radius: 13px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(24, 34, 68, 0.12);
}

.project-icon--signal { background: linear-gradient(135deg, #7a5cff, #4b6cff); }
.project-icon--read { background: linear-gradient(135deg, #ff9268, #f3b348); }
.project-icon--share { background: linear-gradient(135deg, #29bd70, #5fd79b); }
.project-icon--stream { background: linear-gradient(135deg, #4d7cff, #58b7ee); }
.project-icon--voice { background: linear-gradient(135deg, #ee668e, #925ef2); }

.text-link,
.chapter-card .primary-cta,
.card-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 750;
}

.text-link {
  color: #3153c7;
}

.card-actions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.soft-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(50, 145, 85, 0.18);
  border-radius: 999px;
  background: #effaf2;
  color: #237347;
  font-size: 11px;
  font-weight: 720;
}

.principle-row {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.principle-row span {
  padding: 7px 9px;
  border-radius: 8px;
  background: #f4f2ff;
  color: #4c3dac;
  font-size: 11px;
  font-weight: 750;
}

.principle-row i {
  color: #8d95a8;
  font-style: normal;
}

.mini-projects {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-projects span {
  padding: 8px 10px;
  border: 1px solid rgba(20, 30, 60, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #34405c;
  font-size: 11px;
  font-weight: 700;
}

.brain-badge {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9c8c, #7660ff);
  color: #fff5ad;
  font-size: 22px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5), 0 15px 34px rgba(98, 73, 170, 0.26);
}

.primary-cta {
  min-height: 50px;
  justify-content: center;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 11px 0 rgba(28, 28, 54, 0.16);
}

.projects {
  position: relative;
  z-index: 25;
  min-height: 100svh;
  padding: 150px clamp(20px, 6vw, 100px) 60px;
  border-top: 1px solid rgba(20, 30, 60, 0.08);
  background:
    radial-gradient(circle at 85% 0, rgba(255, 176, 126, 0.18), transparent 26%),
    radial-gradient(circle at 10% 28%, rgba(118, 87, 255, 0.1), transparent 28%),
    var(--cream);
}

.projects-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.projects-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: end;
  margin-bottom: 52px;
}

.projects h2 {
  max-width: 800px;
  font-size: clamp(44px, 6vw, 82px);
}

.projects-heading > p {
  margin: 0 0 7px;
  color: #59647b;
  font-size: 16px;
  line-height: 1.65;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.project-card {
  position: relative;
  grid-column: span 4;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(20, 30, 60, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 45px rgba(26, 38, 68, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(26, 38, 68, 0.11);
}

.project-card--featured {
  grid-column: span 8;
  background:
    linear-gradient(135deg, rgba(118, 87, 255, 0.08), rgba(255, 163, 112, 0.12)),
    rgba(255, 255, 255, 0.9);
}

.project-number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: #a0a8b8;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
}

.project-card h3 {
  margin-top: 4px;
  font-size: clamp(30px, 3.1vw, 47px);
}

.project-card p {
  max-width: 48ch;
  margin: 15px 0 0;
  color: #5b667c;
  font-size: 15px;
  line-height: 1.6;
}

.project-card a {
  margin-top: auto;
  padding-top: 24px;
  color: #3153c7;
  font-size: 12px;
  font-weight: 750;
}

.projects-footer {
  min-height: 190px;
  margin-top: 56px;
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: start;
  gap: 20px;
  border-top: 1px solid rgba(20, 30, 60, 0.1);
}

.projects-footer p {
  margin: 4px 0 0;
  color: #667086;
  font-size: 13px;
}

.projects-footer > a:last-child {
  justify-self: end;
  margin-top: 7px;
  color: #3153c7;
  font-size: 12px;
  font-weight: 750;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

body.reduced-motion .neural-trail,
body.reduced-motion .fx-layer {
  display: none;
}

@media (max-width: 1050px) {
  .topbar {
    grid-template-columns: 150px minmax(140px, 1fr) auto;
  }

  .control-label {
    display: none;
  }

  .control-button {
    width: 38px;
    padding: 0;
  }

  .world-sign {
    width: 350px;
  }

  .project-card,
  .project-card--featured {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  :root {
    --ground-h: 132px;
  }

  .topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    min-height: 56px;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px 9px 8px 13px;
    border-radius: 14px;
  }

  .brand {
    font-size: 29px;
  }

  .chapter-readout {
    display: none;
  }

  .topbar-actions {
    gap: 5px;
  }

  .projects-button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
  }

  .control-button {
    width: 36px;
    min-height: 36px;
  }

  .game-hud {
    top: 74px;
    right: 10px;
    gap: 5px;
  }

  .hud-chip {
    height: 32px;
    padding: 0 8px;
  }

  .hud-chip--power {
    display: none;
  }

  .p-meter {
    height: 32px;
    padding: 0 7px;
  }

  .p-meter i {
    width: 5px;
    height: 12px;
  }

  .hero-wrap {
    width: 92px;
    height: 114px;
  }

  .hero-art {
    width: 82px;
    height: 96px;
  }

  .hero-shadow {
    left: 15px;
    width: 62px;
  }

  .chapter {
    align-items: flex-end;
    min-height: 100svh;
    padding: 100px 14px 175px;
  }

  .chapter--left,
  .chapter--right,
  .chapter--center {
    justify-content: center;
  }

  .chapter--high {
    align-items: flex-end;
    padding-top: 100px;
  }

  .chapter-card,
  .chapter-card--compact,
  .chapter-card--wide,
  .chapter-card--hero,
  .chapter-card--final,
  .chapter--left .chapter-card,
  .chapter--right .chapter-card,
  .chapter--center .chapter-card,
  .chapter--left.chapter--high .chapter-card,
  .chapter--right.chapter--high .chapter-card {
    top: auto;
    right: 14px;
    bottom: 154px;
    left: 14px;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 22px;
    border-radius: 18px;
    transform: translateY(20px) scale(0.98);
  }

  .chapter--left.is-active .chapter-card,
  .chapter--right.is-active .chapter-card,
  .chapter--center.is-active .chapter-card,
  .chapter--left.chapter--high.is-active .chapter-card,
  .chapter--right.chapter--high.is-active .chapter-card {
    transform: translateY(0) scale(1);
  }

  .chapter-card--hero h1 {
    font-size: clamp(38px, 11vw, 56px);
  }

  .chapter-card h2 {
    font-size: clamp(32px, 9vw, 48px);
  }

  .chapter-card p {
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.52;
  }

  .project-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 13px;
  }

  .text-link,
  .chapter-card .primary-cta,
  .card-actions a {
    margin-top: 16px;
  }

  .scroll-cue {
    display: none;
  }

  .world-sign {
    min-width: 250px;
    width: 290px;
    padding: 14px 15px;
  }

  .world-sign strong {
    font-size: 26px;
  }

  #distraction-warning {
    width: 92px;
    height: 122px;
  }

  #task-warning {
    width: 108px;
    height: 170px;
  }

  .focus-object--lure {
    width: 72px;
    height: 120px;
  }

  .focus-object--lure::after {
    top: 8px;
    width: 49px;
    height: 49px;
  }

  .focus-object--frog {
    width: 128px;
    height: 128px;
  }

  .focus-object--task-pile {
    width: 132px;
    height: 116px;
  }

  .focus-object--task-monster {
    width: 140px;
    height: 182px;
  }

  .projects {
    padding: 110px 14px 40px;
  }

  .projects-heading {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 32px;
  }

  .projects h2 {
    font-size: clamp(42px, 12vw, 62px);
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card,
  .project-card--featured {
    grid-column: 1;
    min-height: 280px;
  }

  .projects-footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .projects-footer > a:last-child {
    justify-self: start;
  }
}

/* Final cascade lock: these motion rules intentionally override the older
   prototype hazard styles above. */
.enemy--mushroom {
  animation: enemyPatrolRefined 3.4s steps(8, end) infinite;
}

.enemy--mushroom .enemy-foot--left {
  transform-origin: right center;
  animation: mushroomFootLeft 420ms steps(2, end) infinite;
}

.enemy--mushroom .enemy-foot--right {
  transform-origin: left center;
  animation: mushroomFootRight 420ms steps(2, end) infinite;
}

@keyframes enemyPatrolRefined {
  0%, 100% { transform: translate3d(-54px, 0, 0) rotate(-2deg); }
  12% { transform: translate3d(-39px, -1px, 0) rotate(1deg); }
  28% { transform: translate3d(-12px, 0, 0) rotate(-1deg); }
  44% { transform: translate3d(20px, -2px, 0) rotate(2deg); }
  50% { transform: translate3d(54px, 0, 0) rotate(2deg); }
  62% { transform: translate3d(38px, -1px, 0) rotate(-1deg); }
  78% { transform: translate3d(8px, 0, 0) rotate(1deg); }
  92% { transform: translate3d(-35px, -2px, 0) rotate(-2deg); }
}

.enemy--chained {
  width: 188px;
  height: 142px;
  overflow: visible;
}

.enemy--chained .enemy-sprite,
.enemy--chained.is-hunting .enemy-sprite {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -1px;
  width: 184px;
  height: 144px;
  object-position: left bottom;
  transform-origin: 5px 83%;
  transform: scaleX(var(--chain-stretch)) translateY(var(--chain-jitter-y)) rotate(var(--chain-angle));
  animation: none;
}

.enemy--chained .enemy-anchor {
  z-index: 4;
  left: -2px;
  bottom: 3px;
}

.enemy--chained .enemy-label {
  left: 0;
  bottom: 145px;
  transform: translateX(calc(var(--chain-facing) * 76px));
}

.brain-gate--sprite {
  isolation: isolate;
  overflow: visible;
  background: radial-gradient(circle, rgba(255, 249, 178, 0.96) 0 14%, rgba(255, 170, 188, 0.58) 31%, rgba(193, 127, 255, 0.22) 49%, transparent 70%);
  animation: gateGlowRefined 1.55s ease-in-out infinite alternate;
}

.brain-gate--sprite::before,
.brain-gate--sprite::after {
  display: none;
}

.brain-gate--sprite img {
  position: relative;
  z-index: 4;
  width: 190px;
  height: 190px;
  filter: drop-shadow(0 0 13px #fff7ad) drop-shadow(0 0 28px rgba(255, 112, 171, 0.96)) drop-shadow(0 0 55px rgba(167, 107, 255, 0.72));
  animation: gateBrainFloatRefined 1.75s ease-in-out infinite alternate;
}

@keyframes gateGlowRefined {
  from { opacity: 0.94; filter: saturate(1.02); }
  to { opacity: 1; filter: saturate(1.28) drop-shadow(0 0 24px rgba(255, 177, 224, 0.7)); }
}

@keyframes gateBrainFloatRefined {
  from { transform: translateY(8px) scale(0.97); }
  to { transform: translateY(-11px) scale(1.055); }
}

@media (max-width: 760px) {
  .brain-gate--sprite img {
    width: 146px;
    height: 146px;
  }
}

/* Refined hazard choreography and level-finale effects --------------------- */

.world-sign--platform {
  isolation: isolate;
}

.world-sign--platform::before {
  bottom: -42px;
  height: 42px;
}

.world-sign--platform::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -103px;
  width: 220px;
  height: 61px;
  background: url("assets/runner/brick-tile.png") left bottom / 61px 61px repeat-x;
  box-shadow: 0 8px 0 rgba(99, 48, 32, 0.18);
  image-rendering: pixelated;
  transform: translateX(-50%);
}

#distraction-warning {
  width: 112px;
  height: 150px;
  overflow: visible;
}

#task-warning {
  overflow: visible;
}

.focus-object--frog {
  width: 174px;
  height: 174px;
  overflow: visible;
}

.focus-object--frog img {
  transform: scaleX(-1);
  animation: none;
}

.focus-object--task-pile {
  width: 148px;
  height: 129px;
  animation: none;
}

.focus-object--task-monster {
  width: 172px;
  height: 216px;
  overflow: visible;
  animation: taskMonsterHover 2.35s ease-in-out infinite alternate;
}

@keyframes taskMonsterHover {
  from { transform: translateY(1px) rotate(-0.35deg); }
  to { transform: translateY(-6px) rotate(0.45deg); }
}

.enemy--mushroom {
  animation: enemyPatrol 3.4s steps(8, end) infinite;
}

.enemy--mushroom .enemy-foot--left {
  transform-origin: right center;
  animation: mushroomFootLeft 420ms steps(2, end) infinite;
}

.enemy--mushroom .enemy-foot--right {
  transform-origin: left center;
  animation: mushroomFootRight 420ms steps(2, end) infinite;
}

@keyframes enemyPatrol {
  0%, 100% { transform: translate3d(-54px, 0, 0) rotate(-2deg); }
  12% { transform: translate3d(-39px, -1px, 0) rotate(1deg); }
  28% { transform: translate3d(-12px, 0, 0) rotate(-1deg); }
  44% { transform: translate3d(20px, -2px, 0) rotate(2deg); }
  50% { transform: translate3d(54px, 0, 0) rotate(2deg); }
  62% { transform: translate3d(38px, -1px, 0) rotate(-1deg); }
  78% { transform: translate3d(8px, 0, 0) rotate(1deg); }
  92% { transform: translate3d(-35px, -2px, 0) rotate(-2deg); }
}

@keyframes mushroomFootLeft {
  50% { transform: translateX(4px) scaleX(0.86); }
}

@keyframes mushroomFootRight {
  50% { transform: translateX(-4px) scaleX(0.86); }
}

.enemy--chained {
  --chain-facing: 1;
  --chain-stretch: 1.04;
  --chain-jitter-y: 0px;
  --chain-angle: 0deg;
  width: 188px;
  height: 142px;
  overflow: visible;
}

.enemy--chained .enemy-sprite {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -1px;
  width: 184px;
  height: 144px;
  object-position: left bottom;
  transform-origin: 5px 83%;
  transform: scaleX(var(--chain-stretch)) translateY(var(--chain-jitter-y)) rotate(var(--chain-angle));
  animation: none;
  will-change: transform;
}

.enemy--chained.is-hunting .enemy-sprite {
  animation: none;
}

.enemy--chained .enemy-anchor {
  z-index: 4;
  left: -2px;
  bottom: 3px;
}

.enemy--chained .enemy-label {
  left: 0;
  bottom: 145px;
  transform: translateX(calc(var(--chain-facing) * 76px));
  transition: transform 140ms ease-out;
}

.brain-gate--sprite {
  isolation: isolate;
  overflow: visible;
  background: radial-gradient(circle, rgba(255, 249, 178, 0.96) 0 14%, rgba(255, 170, 188, 0.58) 31%, rgba(193, 127, 255, 0.22) 49%, transparent 70%);
  animation: gateGlow 1.55s ease-in-out infinite alternate;
}

.brain-gate--sprite .gate-radiance {
  position: absolute;
  z-index: 1;
  inset: 38px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 241, 134, 0.92) 0 2deg, transparent 2deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 46% 69%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 43%, #000 46% 69%, transparent 72%);
  filter: blur(1px) drop-shadow(0 0 12px rgba(255, 211, 122, 0.8));
  animation: gateRays 9s linear infinite;
}

.brain-gate--sprite .gate-stars {
  position: absolute;
  z-index: 3;
  inset: 48px;
  border-radius: 50%;
  animation: gateStarsOrbit 7.6s linear infinite;
}

.brain-gate--sprite .gate-stars i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff3a7;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 10px #ffb7e8);
  animation: gateStarTwinkle 920ms steps(2, end) infinite alternate;
}

.brain-gate--sprite .gate-stars i:nth-child(1) { left: 8%; top: 47%; }
.brain-gate--sprite .gate-stars i:nth-child(2) { left: 21%; top: 13%; animation-delay: -180ms; }
.brain-gate--sprite .gate-stars i:nth-child(3) { right: 17%; top: 18%; animation-delay: -360ms; }
.brain-gate--sprite .gate-stars i:nth-child(4) { right: 5%; top: 55%; animation-delay: -540ms; }
.brain-gate--sprite .gate-stars i:nth-child(5) { right: 25%; bottom: 8%; animation-delay: -720ms; }
.brain-gate--sprite .gate-stars i:nth-child(6) { left: 18%; bottom: 15%; animation-delay: -450ms; }

.brain-gate--sprite .gate-shooting-star {
  position: absolute;
  z-index: 2;
  top: 42px;
  right: -22px;
  width: 116px;
  height: 3px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #ffd8af 58%, #fff 100%);
  filter: drop-shadow(0 0 6px #fff1b8);
  transform: rotate(-27deg);
  animation: gateShootingStar 4.8s ease-in-out infinite;
}

.brain-gate--sprite img {
  position: relative;
  z-index: 4;
  width: 190px;
  height: 190px;
  filter: drop-shadow(0 0 13px #fff7ad) drop-shadow(0 0 28px rgba(255, 112, 171, 0.96)) drop-shadow(0 0 55px rgba(167, 107, 255, 0.72));
  animation: gateBrainFloat 1.75s ease-in-out infinite alternate;
}

@keyframes gateGlow {
  from { opacity: 0.94; filter: saturate(1.02); }
  to { opacity: 1; filter: saturate(1.28) drop-shadow(0 0 24px rgba(255, 177, 224, 0.7)); }
}

@keyframes gateRays {
  to { transform: rotate(360deg); }
}

@keyframes gateStarsOrbit {
  to { transform: rotate(-360deg); }
}

@keyframes gateStarTwinkle {
  to { opacity: 0.32; transform: scale(0.58) rotate(45deg); }
}

@keyframes gateShootingStar {
  0%, 58% { opacity: 0; transform: translate3d(70px, -44px, 0) rotate(-27deg) scaleX(0.25); }
  62% { opacity: 1; }
  76%, 100% { opacity: 0; transform: translate3d(-250px, 135px, 0) rotate(-27deg) scaleX(1); }
}

@keyframes gateBrainFloat {
  from { transform: translateY(8px) scale(0.97); }
  to { transform: translateY(-11px) scale(1.055); }
}

@media (max-width: 760px) {
  .world-sign--platform::after {
    bottom: -86px;
    width: 174px;
    height: 49px;
    background-size: 49px 49px;
  }

  .world-sign--platform::before {
    bottom: -37px;
    height: 37px;
  }

  #distraction-warning {
    width: 86px;
    height: 116px;
  }

  .focus-object--frog {
    width: 136px;
    height: 136px;
  }

  .focus-object--task-pile {
    width: 112px;
    height: 98px;
  }

  .focus-object--task-monster {
    width: 134px;
    height: 170px;
  }

  .brain-gate--sprite .gate-radiance {
    inset: 78px;
  }

  .brain-gate--sprite .gate-stars {
    inset: 83px;
  }

  .brain-gate--sprite img {
    width: 146px;
    height: 146px;
  }
}

@media (max-width: 420px) {
  .projects-button span {
    display: none;
  }

  .game-hud {
    left: 10px;
    right: auto;
  }

  .p-meter {
    display: none;
  }

  .chapter {
    padding-bottom: 158px;
  }

  .chapter-card {
    max-height: 64svh;
    overflow: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .question-block,
  .enemy,
  .brain-gate svg,
  .neural-trail i,
  .scroll-cue b,
  .tail-group {
    animation: none !important;
  }
}

/* Deterministic sprite runner ------------------------------------------------ */

.hero-wrap {
  bottom: var(--ground-h);
  width: 124px;
  height: 144px;
}

.hero-shadow {
  left: 26px;
  bottom: -17px;
  width: 72px;
  height: 8px;
  filter: blur(1.5px);
}

.hero-art {
  left: 50%;
  bottom: 0;
  width: 160px;
  height: 140px;
  transform: translateX(-50%) scaleX(var(--hero-dir)) rotate(var(--hero-tilt));
  filter: none;
}

.hero-sprite {
  display: block;
  width: 160px;
  height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--runner-bob, 0px) + 3.571%)) scale(var(--frame-scale, 1));
}

.hero-held-brain {
  position: absolute;
  z-index: 2;
  top: 53%;
  right: 7%;
  width: 23%;
  height: auto;
  opacity: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  transform: scale(0.55) rotate(-8deg);
  transform-origin: 50% 50%;
}

.hero-wrap.is-holding-brain .hero-held-brain {
  animation: heldBrainCatch 700ms cubic-bezier(.2, .8, .2, 1) both;
}

.hero-wrap.is-holding-brain.is-jumping .hero-held-brain {
  top: 51%;
  right: 8%;
}

@keyframes heldBrainCatch {
  0% { opacity: 0; transform: scale(0.5) rotate(-12deg); }
  18%, 82% { opacity: 1; transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.question-block {
  width: 61px;
  height: 61px;
  border: 0;
  border-radius: 0;
  background: #24211d url("assets/runner/question.png") center / 70px 70px no-repeat;
  color: transparent;
  text-shadow: none;
  box-shadow: none;
  image-rendering: pixelated;
}

.question-block.is-used {
  background: #252525 url("assets/runner/used-block.png") center / 70px 70px no-repeat;
}

.question-block::after {
  display: none;
}

.powerup.brain-power {
  left: -1px;
  bottom: 62px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
}

.brain-gate--sprite {
  display: grid;
  place-items: center;
  border: 0;
  background: radial-gradient(circle, rgba(255, 238, 150, 0.78), rgba(255, 145, 170, 0.2) 45%, transparent 68%);
  box-shadow: none;
}

.brain-gate--sprite::before,
.brain-gate--sprite::after {
  display: none;
}

.brain-gate--sprite img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 22px rgba(255, 121, 151, 0.58));
}

/* Landscape-scale checkpoints and more physical hazards ------------------- */

.world-sign {
  width: 176px;
  min-width: 0;
  padding: 10px 12px 11px;
  border: 3px solid #72512d;
  border-radius: 7px;
  background: #fff2bd;
  box-shadow: 5px 5px 0 rgba(63, 45, 31, 0.18);
}

.world-sign::before {
  left: 50%;
  right: auto;
  bottom: -42px;
  width: 12px;
  height: 42px;
  background: #795432;
  transform: translateX(-50%);
  box-shadow: inset -3px 0 rgba(58, 37, 23, 0.2);
}

.world-sign small {
  display: inline-block;
  margin: 0 7px 0 0;
  color: #7a5cff;
  font-size: 8px;
}

.world-sign strong {
  display: inline;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.world-sign span {
  display: none;
}

.pipe {
  box-sizing: border-box;
  width: 76px;
  border-width: 0 6px 0;
  border-radius: 0;
  background: linear-gradient(90deg, #239d51 0 14%, #61e27d 14% 31%, #2db65f 31% 72%, #137d42 72% 100%);
  box-shadow: inset -7px 0 rgba(5, 85, 42, 0.2), 0 7px 0 rgba(38, 51, 25, 0.15);
}

.pipe::before {
  box-sizing: border-box;
  top: -22px;
  left: -15px;
  width: 94px;
  height: 31px;
  border-width: 5px;
  background: linear-gradient(90deg, #239d51 0 15%, #69e685 15% 34%, #2db65f 34% 72%, #137d42 72% 100%);
}

.enemy--mushroom {
  width: 74px;
  height: 65px;
  animation: enemyPatrol 2.2s steps(4, end) infinite;
}

.enemy--mushroom .enemy-body {
  left: 4px;
  top: 1px;
  width: 64px;
  height: 49px;
  border-color: #78252e;
  border-radius: 47% 47% 29% 29%;
  clip-path: polygon(9% 20%, 21% 4%, 36% 14%, 50% 0, 65% 14%, 82% 4%, 92% 21%, 100% 36%, 93% 100%, 7% 100%, 0 36%);
  background:
    radial-gradient(circle at 21% 24%, #fff8dc 0 7px, transparent 8px),
    radial-gradient(circle at 76% 21%, #fff8dc 0 6px, transparent 7px),
    linear-gradient(145deg, #ff5c5f, #b82438 72%);
  box-shadow: inset 0 7px rgba(255, 190, 172, 0.25);
}

.enemy--mushroom .enemy-body::before,
.enemy--mushroom .enemy-body::after {
  top: 25px;
  height: 13px;
  transform: rotate(18deg);
}

.enemy--mushroom .enemy-body::after {
  transform: rotate(-18deg);
}

.enemy--mushroom .enemy-foot {
  border-color: #5f2730;
  background: #97333e;
}

.enemy--mushroom .enemy-label {
  bottom: 78px;
  border-color: #812b38;
  color: #812b38;
}

.enemy-anchor {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 7px;
  width: 16px;
  height: 49px;
  border: 3px solid #34343a;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(90deg, #595960, #99999e 45%, #494950 48%);
  box-shadow: 0 4px 0 rgba(30, 31, 36, 0.17);
}

.enemy-anchor::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 29px;
  height: 9px;
  border: 3px solid #34343a;
  border-radius: 3px 3px 0 0;
  background: #6c6c72;
  transform: translateX(-50%);
}

.enemy--chained.is-hunting .enemy-sprite {
  animation: chainStrain 1.05s steps(5, end) infinite;
}

@keyframes enemyPatrol {
  0%, 100% { transform: translateX(-17px) rotate(-2deg); }
  48% { transform: translateX(17px) rotate(2deg); }
  52% { transform: translateX(17px) rotate(-2deg); }
}

@keyframes chainStrain {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  18% { transform: translateX(7px) rotate(1deg); }
  37% { transform: translateX(15px) rotate(3deg); }
  54% { transform: translateX(4px) rotate(-2deg); }
  72% { transform: translateX(18px) rotate(2deg); }
  86% { transform: translateX(6px) rotate(-1deg); }
}

.brain-gate--sprite {
  animation: gateGlow 2.15s ease-in-out infinite alternate;
}

.brain-gate--sprite img {
  animation: gateBrainFloat 1.85s ease-in-out infinite alternate;
}

@keyframes gateGlow {
  from { opacity: 0.88; filter: saturate(0.94); }
  to { opacity: 1; filter: saturate(1.15) drop-shadow(0 0 18px rgba(255, 151, 196, 0.42)); }
}

@keyframes gateBrainFloat {
  from { transform: translateY(8px) scale(0.97); filter: drop-shadow(0 0 16px rgba(255, 121, 151, 0.48)); }
  to { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 0 35px rgba(255, 225, 137, 0.82)); }
}

@media (max-width: 760px) {
  .world-sign {
    width: 138px;
    min-width: 0;
    padding: 8px 9px;
  }

  .world-sign strong {
    font-size: 11px;
  }

  .world-sign::before {
    bottom: -34px;
    height: 34px;
  }

  .brain-gate--sprite img {
    width: 140px;
    height: 140px;
  }
}

@media (min-width: 761px) {
  .chapter {
    min-height: 72svh;
  }

  .chapter-card,
  .chapter-card--compact,
  .chapter-card--wide,
  .chapter-card--hero,
  .chapter-card--final,
  .chapter--left .chapter-card,
  .chapter--right .chapter-card,
  .chapter--center .chapter-card,
  .chapter--left.chapter--high .chapter-card,
  .chapter--right.chapter--high .chapter-card {
    right: auto;
    left: clamp(20px, 5vw, 72px);
    width: min(430px, 38vw);
  }

  .chapter--center.is-active .chapter-card {
    transform: translate(0, -50%) scale(1);
  }

  .chapter-card--hero h1 {
    font-size: clamp(42px, 4.4vw, 66px);
  }
}

@media (max-width: 760px) {
  .hero-wrap {
    width: 82px;
    height: 102px;
  }

  .hero-art,
  .hero-sprite {
    width: 112px;
    height: 98px;
  }

  .hero-shadow {
    left: 14px;
    bottom: -15px;
    width: 54px;
    height: 6px;
    filter: blur(1.2px);
  }

  .chapter {
    min-height: 82svh;
  }

  .chapter-card,
  .chapter-card--compact,
  .chapter-card--wide,
  .chapter-card--hero,
  .chapter-card--final,
  .chapter--left .chapter-card,
  .chapter--right .chapter-card,
  .chapter--center .chapter-card,
  .chapter--left.chapter--high .chapter-card,
  .chapter--right.chapter--high .chapter-card {
    top: 92px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: min(62vw, 250px);
    max-height: 42svh;
    margin: 0;
    padding: 16px;
    border-radius: 15px;
    overflow: auto;
  }

  .chapter-card--hero h1,
  .chapter-card h2 {
    font-size: clamp(25px, 7vw, 34px);
  }

  .chapter-card p {
    font-size: 12px;
    line-height: 1.42;
  }

  .chapter--left.is-active .chapter-card,
  .chapter--right.is-active .chapter-card,
  .chapter--center.is-active .chapter-card,
  .chapter--left.chapter--high.is-active .chapter-card,
  .chapter--right.chapter--high.is-active .chapter-card {
    transform: none;
  }
}

/* Motion overrides kept last so the refined sprite systems win the cascade. */
.enemy--mushroom { animation: enemyPatrolRefined 3.4s steps(8, end) infinite; }
.enemy--mushroom .enemy-foot--left { transform-origin: right center; animation: mushroomFootLeft 420ms steps(2, end) infinite; }
.enemy--mushroom .enemy-foot--right { transform-origin: left center; animation: mushroomFootRight 420ms steps(2, end) infinite; }

.enemy--chained { width: 188px; height: 142px; overflow: visible; }
.enemy--chained .enemy-sprite,
.enemy--chained.is-hunting .enemy-sprite {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -1px;
  width: 184px;
  height: 144px;
  object-position: left bottom;
  transform-origin: 5px 83%;
  transform: scaleX(var(--chain-stretch)) translateY(var(--chain-jitter-y)) rotate(var(--chain-angle));
  animation: none;
}
.enemy--chained .enemy-anchor { z-index: 4; left: -2px; bottom: 3px; }
.enemy--chained .enemy-label { left: 0; bottom: 145px; transform: translateX(calc(var(--chain-facing) * 76px)); }

.brain-gate--sprite {
  isolation: isolate;
  overflow: visible;
  background: radial-gradient(circle, rgba(255, 249, 178, 0.96) 0 14%, rgba(255, 170, 188, 0.58) 31%, rgba(193, 127, 255, 0.22) 49%, transparent 70%);
  animation: gateGlowRefined 1.55s ease-in-out infinite alternate;
}
.brain-gate--sprite::before,
.brain-gate--sprite::after { display: none; }
.brain-gate--sprite img {
  position: relative;
  z-index: 4;
  width: 190px;
  height: 190px;
  filter: drop-shadow(0 0 13px #fff7ad) drop-shadow(0 0 28px rgba(255, 112, 171, 0.96)) drop-shadow(0 0 55px rgba(167, 107, 255, 0.72));
  animation: gateBrainFloatRefined 1.75s ease-in-out infinite alternate;
}

@media (max-width: 760px) {
  .brain-gate--sprite img { width: 146px; height: 146px; }
}

.focus-object--frog.is-luring img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 228px;
  height: 174px;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  transform: none;
}

@media (max-width: 760px) {
  .focus-object--frog.is-luring img {
    width: 178px;
    height: 136px;
  }
}

/* Quiet signage, connected tethers, and softer finale lighting. */
.world-sign {
  width: 142px;
  padding: 8px 10px 9px;
  border-width: 2px;
  border-color: rgba(114, 81, 45, 0.48);
  background: rgba(255, 248, 219, 0.64);
  box-shadow: 3px 3px 0 rgba(63, 45, 31, 0.07);
  text-align: center;
  backdrop-filter: blur(2px);
}

.world-sign small {
  margin-right: 5px;
  color: rgba(122, 92, 255, 0.76);
  font-size: 7px;
}

.world-sign strong {
  font-size: 12px;
  color: rgba(24, 31, 55, 0.7);
}

.world-sign::before {
  width: 9px;
  background: rgba(121, 84, 50, 0.78);
  box-shadow: inset -2px 0 rgba(58, 37, 23, 0.12);
}

.world-sign--platform::after {
  display: none;
}

.enemy-chain-bridge {
  position: absolute;
  z-index: 3;
  left: 2px;
  bottom: 27px;
  width: 48px;
  height: 18px;
  transform-origin: 5px 50%;
  transform: scaleX(var(--chain-facing));
  pointer-events: none;
}

.enemy-chain-bridge i {
  position: absolute;
  top: 3px;
  width: 20px;
  height: 11px;
  border: 4px solid #34343a;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px #8d8d94, 0 2px 0 rgba(28, 29, 34, 0.18);
}

.enemy-chain-bridge i:first-child { left: 0; transform: rotate(12deg); }
.enemy-chain-bridge i:last-child { left: 16px; transform: rotate(-10deg); }

.focus-object--frog {
  transform: translateY(var(--frog-y, 0px));
}

.focus-object--task-monster { animation: none; }

.focus-object--task-monster img {
  transform-origin: 50% 100%;
  animation: taskMonsterHoverRefined 2.75s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.focus-object--task-monster::after {
  bottom: -25px;
}

@keyframes taskMonsterHoverRefined {
  from { transform: translateY(4px) rotate(-0.35deg); }
  to { transform: translateY(-12px) rotate(0.45deg); }
}

.brain-gate--sprite .gate-radiance {
  inset: 50px;
  opacity: 0.62;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 193, 0.38) 0 1deg, rgba(234, 194, 255, 0.2) 1deg 3deg, transparent 5deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 52% 68%, transparent 74%);
  mask: radial-gradient(circle, transparent 0 44%, #000 52% 68%, transparent 74%);
  filter: blur(3px) drop-shadow(0 0 9px rgba(255, 194, 222, 0.48));
  animation: gateRaysRefined 4.6s ease-in-out infinite alternate;
}

.brain-gate--sprite .gate-radiance::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  opacity: 0.72;
  background: repeating-conic-gradient(from 12deg, rgba(211, 194, 255, 0.34) 0 2deg, transparent 4deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 58% 69%, transparent 74%);
  mask: radial-gradient(circle, transparent 0 52%, #000 58% 69%, transparent 74%);
  filter: blur(4px);
  animation: gateShortRays 3.2s ease-in-out infinite alternate;
}

@keyframes gateRaysRefined {
  from { transform: rotate(-2deg) scale(0.98); opacity: 0.45; }
  to { transform: rotate(3deg) scale(1.045); opacity: 0.76; }
}

@keyframes gateShortRays {
  from { transform: rotate(2deg) scale(1.04); opacity: 0.38; }
  to { transform: rotate(-4deg) scale(0.94); opacity: 0.78; }
}

@media (max-width: 760px) {
  .world-sign {
    width: 118px;
    padding: 7px 8px;
  }

  .world-sign strong { font-size: 10px; }
  .world-sign--platform::after { width: 174px; }
}

/* Pivot-normalized hazards and foreground grounding. */
.hero-art {
  bottom: -14px;
}

.hero-wrap.is-flying .hero-sprite {
  transform-origin: 50% 50%;
}

.focus-object--frog {
  width: 261px;
  height: 174px;
  overflow: visible;
}

.focus-object--frog img,
.focus-object--frog.is-luring img {
  position: static;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  animation: none;
  filter: none;
}

.focus-object--frog::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 70%;
  bottom: -1px;
  width: 82px;
  height: 8px;
  border-radius: 50%;
  background: rgba(31, 38, 46, 0.16);
  filter: blur(2px);
  transform: translate(-50%, var(--frog-shadow-y, 0px));
}

.focus-object--task-monster {
  animation: none;
}

.focus-object--task-monster .focus-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: none;
  transform-origin: 50% 100%;
  animation: taskMonsterHoverRefined 1.8s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  transition: opacity 80ms linear;
  will-change: opacity, transform;
}

.focus-object--task-monster .focus-frame.is-visible {
  opacity: 1;
}

.focus-object--task-monster.animation-paused .focus-frame {
  will-change: auto;
}

@keyframes taskMonsterHoverRefined {
  from { transform: translateY(2px) rotate(-0.15deg); }
  to { transform: translateY(-8px) rotate(0.15deg); }
}

.animation-paused,
.animation-paused *,
.animation-paused::before,
.animation-paused::after,
.animation-paused *::before,
.animation-paused *::after {
  animation-play-state: paused !important;
}

.neuron-field::before,
.neuron-field::after,
.neural-trail i {
  animation-play-state: paused;
}

body.night-active .neuron-field::before,
body.night-active .neuron-field::after,
.hero-wrap.is-flying .neural-trail i {
  animation-play-state: running;
}

.scroll-cue.is-hidden b {
  animation-play-state: paused;
}

@media (max-width: 760px) {
  .focus-object--frog {
    width: 204px;
    height: 136px;
  }

  .focus-object--frog::after {
    width: 64px;
    height: 6px;
  }
}

/* One responsive scale for every playable-world object. The runner already
   renders at 70% on compact viewports; tiles, pickups, hazards and scenery
   now use the same ratio instead of a mixture of 70%, 78% and 100%. */
:root {
  --world-object-scale: 1;
  --world-tile-size: 61px;
  --block-bounce-lift: 14px;
  --gate-intensity: 0;
  --gate-lock-x: 0px;
}

@media (max-width: 760px) {
  .platform {
    height: var(--world-tile-size);
    background-size: var(--world-tile-size) var(--world-tile-size);
    box-shadow: 0 5.6px 0 rgba(99, 48, 32, 0.18);
  }

  .question-block {
    width: var(--world-tile-size);
    height: var(--world-tile-size);
    background-size: 49px 49px;
  }

  .question-block.is-used {
    background-size: 49px 49px;
  }

  .powerup.brain-power {
    left: -0.7px;
    bottom: 43.4px;
    width: 44.8px;
    height: 44.8px;
  }

  .pipe,
  .enemy,
  .brain-gate {
    scale: var(--world-object-scale);
    transform-origin: left bottom;
  }

  .pipe {
    bottom: calc(var(--ground-h) - 0.7px);
  }

  .enemy {
    bottom: calc(var(--ground-h) + 2.1px);
  }

  .enemy--chained {
    bottom: calc(var(--ground-h) - 2.1px);
  }

  #distraction-warning {
    width: 78.4px;
    height: 105px;
  }

  #task-warning {
    width: 99.4px;
    height: 155.4px;
  }

  .focus-object--lure {
    width: 64.4px;
    height: 105px;
  }

  .focus-object--frog {
    width: 182.7px;
    height: 121.8px;
  }

  .focus-object--frog::after {
    width: 57.4px;
    height: 5.6px;
  }

  .focus-object--task-pile {
    width: 103.6px;
    height: 90.3px;
  }

  .focus-object--task-monster {
    width: 120.4px;
    height: 151.2px;
  }

  .focus-object--task-monster::after {
    bottom: -17.5px;
    width: 50.4px;
    height: 9.1px;
  }

  .brain-gate {
    bottom: calc(var(--ground-h) - 1.4px);
  }

  .brain-gate--sprite img {
    width: 190px;
    height: 190px;
  }
}

/* The finale starts with a restrained aura and reaches full radiance only as
   the runner completes the dedicated victory jump. */
.brain-gate--sprite {
  animation: none;
  background: radial-gradient(circle, rgba(255, 249, 178, 0.62) 0 13%, rgba(255, 170, 188, 0.28) 31%, rgba(193, 127, 255, 0.1) 49%, transparent 70%);
  filter: saturate(calc(1 + var(--gate-intensity) * 0.24)) drop-shadow(0 0 calc(5px + var(--gate-intensity) * 20px) rgba(255, 177, 224, calc(0.16 + var(--gate-intensity) * 0.5)));
  transform: translate3d(var(--gate-lock-x), 0, 0);
}

.brain-gate--sprite img {
  filter: drop-shadow(0 0 calc(7px + var(--gate-intensity) * 7px) rgba(255, 247, 173, calc(0.38 + var(--gate-intensity) * 0.62))) drop-shadow(0 0 calc(13px + var(--gate-intensity) * 20px) rgba(255, 112, 171, calc(0.34 + var(--gate-intensity) * 0.62))) drop-shadow(0 0 calc(20px + var(--gate-intensity) * 38px) rgba(167, 107, 255, calc(0.2 + var(--gate-intensity) * 0.54)));
}

.brain-gate--sprite .gate-radiance {
  animation: gateRaysResponsive 4.6s ease-in-out infinite alternate;
}

.brain-gate--sprite .gate-radiance::before {
  animation: gateShortRaysResponsive 3.2s ease-in-out infinite alternate;
}

.brain-gate--sprite .gate-stars {
  opacity: calc(0.28 + var(--gate-intensity) * 0.72);
}

@keyframes gateRaysResponsive {
  from { transform: rotate(-2deg) scale(0.98); opacity: calc(0.16 + var(--gate-intensity) * 0.46); }
  to { transform: rotate(3deg) scale(1.045); opacity: calc(0.24 + var(--gate-intensity) * 0.7); }
}

@keyframes gateShortRaysResponsive {
  from { transform: rotate(2deg) scale(1.04); opacity: calc(0.12 + var(--gate-intensity) * 0.38); }
  to { transform: rotate(-4deg) scale(0.94); opacity: calc(0.2 + var(--gate-intensity) * 0.58); }
}

/* The authored landing frame changes the frog's apparent size and facing.
   Keep the fixed-size idle body and add a separate, brief ground impact. */
.focus-object--frog::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 70%;
  bottom: 1px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: #d8c29a;
  box-shadow: -16px 1px 0 2px #ead8b7, 15px 0 0 1px #cbb28a, -27px 3px 0 -1px #f4e4c7, 27px 3px 0 -1px #e0c9a3;
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  pointer-events: none;
}

.focus-object--frog.is-landing::before {
  animation: frogLandingDust 220ms ease-out both;
}

@keyframes frogLandingDust {
  35% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(1.22); }
}

/* Use the authored pixel-art tether post from the supplied chain sheet. */
.enemy--chained .enemy-anchor {
  position: absolute;
  z-index: 4;
  left: -18px;
  bottom: -2px;
  width: 46px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;
  pointer-events: none;
}

.enemy--chained .enemy-anchor::before {
  display: none;
}

/* The speed trail is a sibling of the mirrored sprite, so mirror and move it
   explicitly with the same direction state. It always remains behind him. */
.neural-trail {
  right: auto;
  left: 50%;
  transform: translateX(var(--trail-x, -100%)) scaleX(var(--trail-dir, 1));
  transform-origin: center;
}

/* Build brick rows from real cells. Embedded question blocks replace one cell
   instead of covering a repeated background, so their bounce reveals sky. */
.platform.platform--tiled {
  background: none;
  box-shadow: none;
}

.platform-tile {
  position: absolute;
  left: calc(var(--tile-index) * var(--world-tile-size));
  bottom: 0;
  width: var(--world-tile-size);
  height: var(--world-tile-size);
  background: url("assets/runner/brick-tile.png") center / 100% 100% no-repeat;
  box-shadow: 0 8px 0 rgba(99, 48, 32, 0.18);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@media (max-width: 760px) {
  .platform-tile {
    box-shadow: 0 5.6px 0 rgba(99, 48, 32, 0.18);
  }
}

/* Compact landscape signs that belong to the pixel world rather than the
   editorial card system. Their stem length is set from platform geometry. */
.world-sign,
.world-sign.world-sign--platform {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 166px;
  min-width: 0;
  min-height: 50px;
  padding: 9px 13px;
  border: 3px solid #73502e;
  border-radius: 0;
  background: #fff0b9;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.5), 5px 5px 0 rgba(55, 37, 24, 0.18);
  text-align: center;
  backdrop-filter: none;
}

.world-sign strong {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.world-sign small,
.world-sign > span:not(.world-sign-pixel-label) {
  display: none;
}

.world-sign .world-sign-pixel-label {
  display: block;
  flex: 0 1 auto;
  height: 11px;
  max-width: 112px;
  color: #24263b;
}

.world-sign-pixel-label svg {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  overflow: visible;
}

.world-sign-pixel-label path {
  fill: currentColor;
}

.world-sign::before,
.world-sign.world-sign--platform::before {
  left: 50%;
  right: auto;
  bottom: calc((var(--sign-stem, 22px) + 6px) * -1);
  width: 10px;
  height: calc(var(--sign-stem, 22px) + 6px);
  background: #795432;
  box-shadow: inset -3px 0 #533720;
  transform: translateX(-50%);
}

.world-sign-arrow {
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 13px;
  background: #7650df;
  clip-path: polygon(0 31%, 53% 31%, 53% 0, 100% 50%, 53% 100%, 53% 69%, 0 69%);
  filter: drop-shadow(2px 2px 0 rgba(69, 47, 112, 0.22));
}

@media (max-width: 760px) {
  .world-sign,
  .world-sign.world-sign--platform {
    width: 144px;
    min-height: 45px;
    padding: 8px 10px;
    gap: 8px;
    border-width: 2px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.48), 4px 4px 0 rgba(55, 37, 24, 0.16);
  }

  .world-sign .world-sign-pixel-label {
    height: 10px;
    max-width: 98px;
  }

  .world-sign-arrow {
    width: 13px;
    height: 11px;
  }
}

/* Keep pickup feedback attached to the canonical flying body. The brain has
   its own short catch-and-settle beat, so collecting never swaps to a
   differently coloured or differently scaled body family. */
.hero-wrap.is-flying.is-holding-brain .hero-held-brain {
  top: 43%;
  right: -1%;
  width: 20%;
  animation: heldBrainFlightCatch 850ms cubic-bezier(.18, .76, .22, 1) both;
}

@keyframes heldBrainFlightCatch {
  0% { opacity: 0; transform: translate3d(16px, -13px, 0) scale(.35) rotate(12deg); }
  24% { opacity: 1; transform: translate3d(1px, 0, 0) scale(1.08) rotate(-5deg); }
  52% { opacity: 1; transform: translate3d(-1px, 1px, 0) scale(.96) rotate(3deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

/* The speed streaks meet the middle of the cape/back instead of the head.
   The existing direction transform still moves the entire trail behind the
   runner when scrolling in reverse. */
.neural-trail {
  top: 56px;
}

/* A single, softly feathered halo replaces the changing multi-drop-shadow
   stack at the finale. Only opacity and transform respond to progress, which
   keeps the large end-of-level glow on compositor-friendly properties. */
.brain-gate.brain-gate--sprite {
  background: radial-gradient(circle,
    rgba(255, 249, 178, .58) 0 12%,
    rgba(255, 188, 195, .34) 28%,
    rgba(211, 145, 255, .18) 51%,
    rgba(170, 117, 247, .07) 72%,
    transparent 100%);
  filter: none;
}

.brain-gate.brain-gate--sprite::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  inset: -26px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 246, 177, .72) 0 10%,
    rgba(255, 160, 190, .38) 31%,
    rgba(199, 131, 255, .18) 58%,
    rgba(163, 110, 239, .05) 78%,
    transparent 100%);
  box-shadow: none;
  opacity: calc(.22 + var(--gate-intensity) * .78);
  transform: scale(calc(.92 + var(--gate-intensity) * .08));
  transform-origin: center;
  will-change: opacity, transform;
  pointer-events: none;
}

.brain-gate.brain-gate--sprite img {
  filter: drop-shadow(0 0 9px rgba(255, 247, 173, .72)) drop-shadow(0 0 20px rgba(255, 112, 171, .62));
}

.brain-gate.brain-gate--sprite .gate-radiance {
  inset: 42px;
  opacity: calc(.16 + var(--gate-intensity) * .58);
  filter: none;
  animation: gateRays 10s linear infinite;
  will-change: transform, opacity;
}

.brain-gate.brain-gate--sprite .gate-radiance::before {
  opacity: calc(.1 + var(--gate-intensity) * .38);
  filter: none;
  animation: none;
}

.brain-gate.brain-gate--sprite .gate-stars {
  will-change: transform, opacity;
}

/* The aura becomes fully transparent well before its oversized paint box
   ends, so no circular boundary can show against the night sky. */
.brain-gate.brain-gate--sprite {
  background: none;
}

.brain-gate.brain-gate--sprite::before {
  inset: -170px;
  background: radial-gradient(circle,
    rgba(255, 248, 176, .58) 0 8%,
    rgba(255, 190, 198, .36) 22%,
    rgba(215, 151, 255, .2) 39%,
    rgba(180, 125, 246, .105) 52%,
    rgba(159, 111, 229, .04) 63%,
    rgba(151, 105, 220, .012) 69%,
    transparent 76%,
    transparent 100%);
}

/* Conventional site footer, intentionally quieter than the level and cards. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1.55fr) minmax(150px, .65fr) minmax(170px, .75fr);
  gap: clamp(36px, 6vw, 92px);
  margin-top: 72px;
  padding: 58px 0 30px;
  border-top: 1px solid rgba(20, 30, 60, .12);
  color: #26324d;
}

.site-footer__lead {
  max-width: 520px;
}

.site-footer__lead .brand {
  width: max-content;
  margin-bottom: 20px;
}

.site-footer__lead p {
  max-width: 42ch;
  margin: 0 0 22px;
  color: #5f6a80;
  font-size: 15px;
  line-height: 1.7;
}

.site-footer__contact {
  color: #3153c7;
  font-size: 13px;
  font-weight: 780;
}

.site-footer__nav,
.site-footer__principles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 5px;
  font-size: 13px;
}

.site-footer__nav a {
  color: #3c4862;
}

.site-footer__nav a:hover,
.site-footer__contact:hover,
.site-footer__base a:hover {
  color: #7657ff;
}

.site-footer__principles > span:not(.site-footer__label) {
  color: #657087;
}

.site-footer__principles a {
  color: #3c4862;
}

.site-footer__principles a:hover {
  color: #7657ff;
}

.site-footer__label {
  margin-bottom: 5px;
  color: #8a62ef;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-footer__base {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 30, 60, .08);
  color: #788196;
  font-size: 11px;
}

.site-footer__base > div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer__base a {
  color: #45516a;
  font-weight: 750;
}

/* The projects sheet is never allowed to paint over the committed victory
   sequence, even if a fast wheel or touch gesture briefly overscrolls it. */
body.victory-sequence-active .projects {
  visibility: hidden;
}

@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr 1fr;
    gap: 38px 24px;
    margin-top: 48px;
    padding-top: 42px;
  }

  .site-footer__lead {
    grid-column: 1 / -1;
  }

  .site-footer__base {
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer__lead,
  .site-footer__base {
    grid-column: 1;
  }
}

/* Legal pages ------------------------------------------------------------ */

body.legal-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 168, 133, .17), transparent 28%),
    radial-gradient(circle at 8% 18%, rgba(118, 87, 255, .12), transparent 31%),
    #f8f7f2;
  color: #17213d;
}

.legal-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 14px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(20, 30, 60, .09);
  background: rgba(248, 247, 242, .88);
  backdrop-filter: blur(18px) saturate(1.12);
}

.legal-header__back {
  color: #3153c7;
  font-size: 12px;
  font-weight: 780;
}

.legal-shell {
  width: min(100% - 40px, 1040px);
  margin: 0 auto;
  padding: clamp(70px, 9vw, 120px) 0 72px;
}

.legal-hero {
  max-width: 810px;
  margin-bottom: 54px;
}

.legal-hero .eyebrow {
  margin-bottom: 18px;
}

.legal-hero h1 {
  max-width: 850px;
  font-size: clamp(52px, 8vw, 94px);
  line-height: .94;
}

.legal-hero > p {
  max-width: 650px;
  margin: 25px 0 0;
  color: #5b667d;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
}

.legal-meta {
  display: inline-flex;
  margin-top: 22px;
  padding: 8px 11px;
  border: 1px solid rgba(20, 30, 60, .09);
  border-radius: 9px;
  background: rgba(255, 255, 255, .58);
  color: #6c7589;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legal-document {
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(20, 30, 60, .09);
  border-radius: 26px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 26px 70px rgba(31, 42, 75, .08);
}

.legal-document section + section {
  margin-top: 42px;
  padding-top: 38px;
  border-top: 1px solid rgba(20, 30, 60, .08);
}

.legal-document h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
}

.legal-document h3 {
  margin: 26px 0 10px;
  font-size: 17px;
}

.legal-document p,
.legal-document li {
  color: #566177;
  font-size: 15px;
  line-height: 1.75;
}

.legal-document p {
  margin: 0;
}

.legal-document p + p {
  margin-top: 14px;
}

.legal-document ul {
  margin: 14px 0 0;
  padding-left: 21px;
}

.legal-document li + li {
  margin-top: 8px;
}

.legal-document a {
  color: #3153c7;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-callout {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 4px solid #7657ff;
  border-radius: 0 13px 13px 0;
  background: rgba(118, 87, 255, .07);
}

.legal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding: 24px 4px 0;
  color: #6e778c;
  font-size: 11px;
}

.legal-footer div {
  display: flex;
  gap: 20px;
}

.legal-footer a {
  color: #3f4c68;
  font-weight: 760;
}

@media (max-width: 650px) {
  .legal-header {
    min-height: 70px;
  }

  .legal-header .brand {
    font-size: 27px;
  }

  .legal-document {
    padding: 26px 20px;
    border-radius: 19px;
  }

  .legal-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Mobile experience polish -------------------------------------------------
   Kept at the end of the cascade so these rules are the single compact-screen
   source of truth rather than competing with the prototype breakpoints above. */
.mobile-projects-cue {
  display: none;
}

.final-projects-cta {
  position: absolute;
  z-index: 29;
  left: 50%;
  bottom: clamp(44px, 7vh, 86px);
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  overflow: hidden;
  border: 2px solid rgba(255, 244, 190, .92);
  border-radius: 11px;
  background: rgba(20, 29, 55, .92);
  box-shadow: 0 7px 0 rgba(63, 37, 23, .24), 0 0 26px rgba(255, 229, 131, .28);
  color: #fff8d1;
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  transform: translate3d(-50%, 18px, 0);
  transition: opacity 240ms ease, transform 300ms ease, background 160ms ease;
  pointer-events: none;
}

.final-projects-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -24%;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
  transform: skewX(-18deg);
}

.final-projects-cta b {
  font-size: 18px;
  line-height: 1;
}

.final-projects-cta:hover {
  background: rgba(29, 39, 72, .98);
}

.final-projects-cta:focus-visible {
  outline: 3px solid rgba(255, 244, 190, .82);
  outline-offset: 4px;
}

body.victory-page-ready:not(.after-game) .final-projects-cta {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  animation: finalProjectsCtaBob 1.35s ease-in-out infinite alternate;
  pointer-events: auto;
}

body.victory-page-ready:not(.after-game) .final-projects-cta::before {
  animation: finalProjectsCtaShine 2.8s ease-in-out infinite;
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 60px;
  }

  .topbar-actions .control-button {
    display: none;
  }

  .projects-button {
    min-height: 44px;
    padding: 0 17px;
    border-radius: 13px;
    font-size: 13px;
  }

  /* A compact status group lives in the unused middle of the header instead
     of becoming a second floating bar above the editorial card. */
  .game-hud {
    z-index: 32;
    top: 21px;
    right: 111px;
    left: auto;
    gap: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .game-hud .hud-chip,
  .game-hud .p-meter {
    height: 34px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .game-hud .p-meter {
    display: inline-flex;
    gap: 2px;
    padding-left: 3px;
  }

  .game-hud .hud-chip--brains > span:not(.mini-brain) {
    display: none;
  }

  .game-hud .mini-brain {
    width: 18px;
    height: 18px;
    display: grid;
  }

  .game-hud .hud-chip--brains strong {
    min-width: 9px;
    font-size: 13px;
  }

  .game-hud .p-meter span {
    margin-right: 1px;
    font-size: 10px;
  }

  .game-hud .p-meter i {
    width: 4px;
    height: 11px;
  }

  .chapter-card,
  .chapter-card--compact,
  .chapter-card--wide,
  .chapter-card--hero,
  .chapter-card--final,
  .chapter--left .chapter-card,
  .chapter--right .chapter-card,
  .chapter--center .chapter-card,
  .chapter--left.chapter--high .chapter-card,
  .chapter--right.chapter--high .chapter-card {
    top: 80px;
    right: 10px;
    bottom: auto;
    left: auto;
    width: min(68vw, 300px);
    max-height: min(60svh, 560px);
    padding: 17px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .chapter-card::-webkit-scrollbar {
    display: none;
  }

  .chapter-card p {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.46;
  }

  .chapter-card .eyebrow,
  .chapter-card .text-link,
  .chapter-card .primary-cta,
  .chapter-card .card-actions a,
  .chapter-card .soft-tag,
  .chapter-card .principle-row span {
    font-size: 12px;
  }

  .chapter-card--wide .mini-projects,
  .chapter-card--final .primary-cta {
    display: none;
  }

  .chapter-card--wide p,
  .chapter-card--final p {
    margin-bottom: 2px;
  }

  .mobile-projects-cue {
    position: absolute;
    z-index: 28;
    left: 50%;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 37px;
    padding: 0 14px;
    overflow: hidden;
    border: 2px solid rgba(255, 244, 190, .9);
    border-radius: 7px;
    background: rgba(24, 30, 53, .82);
    box-shadow: 0 5px 0 rgba(63, 37, 23, .22), 0 0 22px rgba(255, 229, 131, .22);
    color: #fff4b9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    opacity: 0;
    transform: translate3d(-50%, 16px, 0);
    transition: opacity 240ms ease, transform 300ms ease;
    pointer-events: none;
  }

  .mobile-projects-cue::before {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -28%;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
  }

  body.victory-page-ready:not(.after-game) .mobile-projects-cue {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    animation: mobileProjectsCueBob 1.25s ease-in-out infinite alternate;
  }

  body.victory-page-ready:not(.after-game) .mobile-projects-cue::before {
    animation: mobileProjectsCueShine 2.6s ease-in-out infinite;
  }

  .focus-object--task-monster::after {
    bottom: -30px;
    width: 62px;
    height: 9px;
    animation: mobileTaskShadow 1.8s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    transform-origin: center;
  }
}

@keyframes mobileProjectsCueBob {
  to { transform: translate3d(-50%, -6px, 0); }
}

@keyframes mobileProjectsCueShine {
  0%, 52% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  60% { opacity: .9; }
  82%, 100% { transform: translateX(650%) skewX(-18deg); opacity: 0; }
}

@keyframes mobileTaskShadow {
  from { opacity: .2; transform: translateX(-50%) scaleX(1.08); }
  to { opacity: .12; transform: translateX(-50%) scaleX(.84); }
}

/* Header status placement --------------------------------------------------
   Tablet and desktop have room for the level status in the header itself.
   Phones omit it so the brand and Projects action remain uncluttered. */
@media (min-width: 641px) and (max-width: 1100px) {
  .topbar {
    grid-template-columns: minmax(150px, 1fr) auto auto;
    gap: 10px;
  }

  .chapter-readout {
    display: none;
  }

  .topbar-actions .control-button {
    width: 38px;
    padding: 0;
  }

  .topbar-actions .control-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .topbar .game-hud {
    display: none !important;
  }

  .final-projects-cta {
    bottom: 30px;
    min-height: 42px;
    max-width: calc(100vw - 34px);
    padding: 0 15px;
    font-size: 12px;
    white-space: nowrap;
  }
}

@keyframes finalProjectsCtaBob {
  to { transform: translate3d(-50%, -6px, 0); }
}

@keyframes finalProjectsCtaShine {
  0%, 54% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  62% { opacity: .9; }
  84%, 100% { transform: translateX(760%) skewX(-18deg); opacity: 0; }
}

/* Hazard labels ---------------------------------------------------------
   These labels live inside their animated hazards so they stay physically
   attached to the frog's jump and the task monster's hover. */
.focus-object-label {
  z-index: 12;
  bottom: calc(100% + 7px);
  border-color: #30323d;
  background: #fff7e8;
  color: #30323d;
  box-shadow: 0 4px 0 rgba(31, 38, 46, .14);
  font-size: 9px;
}

.focus-object--lure .focus-object-label {
  left: 50%;
  bottom: calc(100% + 8px);
}

.focus-object--task-monster .focus-object-label {
  left: 50%;
  bottom: -25px;
  animation: taskMonsterLabelHover 1.8s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  transform-origin: 50% 100%;
}

@keyframes taskMonsterLabelHover {
  from { transform: translateX(-50%) translateY(3px) rotate(-0.15deg); }
  to { transform: translateX(-50%) translateY(-11px) rotate(0.15deg); }
}

@keyframes taskMonsterHoverRefined {
  from { transform: translateY(3px) rotate(-0.15deg); }
  to { transform: translateY(-11px) rotate(0.15deg); }
}

/* Give the Noise & RSD mushroom short hesitations followed by quicker
   scurries instead of an evenly timed left-right patrol. */
.enemy--mushroom {
  animation: enemyPatrolIrregular 4.15s linear infinite;
}

@keyframes enemyPatrolIrregular {
  0%, 100% { transform: translate3d(-54px, 0, 0) rotate(-2deg); }
  9% { transform: translate3d(-49px, -1px, 0) rotate(0deg); }
  20% { transform: translate3d(-19px, 0, 0) rotate(1deg); }
  31% { transform: translate3d(-13px, -1px, 0) rotate(-1deg); }
  43% { transform: translate3d(25px, -2px, 0) rotate(2deg); }
  52% { transform: translate3d(54px, 0, 0) rotate(2deg); }
  61% { transform: translate3d(52px, -1px, 0) rotate(-1deg); }
  72% { transform: translate3d(29px, 0, 0) rotate(1deg); }
  81% { transform: translate3d(24px, -2px, 0) rotate(-2deg); }
  92% { transform: translate3d(-24px, -1px, 0) rotate(-1deg); }
}

@media (max-width: 760px) {
  .focus-object-label {
    padding: 4px 6px;
    font-size: 7px;
  }

  .focus-object--task-monster .focus-object-label {
    bottom: -18px;
  }
}

/* Keep the grounded task pile substantial, but slightly quieter than the
   nearby animated hazards. Its label uses the lure's close tag spacing. */
.focus-object--task-pile {
  width: 118px;
  height: 103px;
}

.focus-object--task-pile .focus-object-label {
  left: 50%;
  bottom: calc(100% + 8px);
}

@media (max-width: 760px) {
  .focus-object--task-pile {
    width: 83px;
    height: 72px;
  }
}