:root {
  --ink: #111111;
  --paper: #f4f2ec;
  --cloud: #e6e8ed;
  --slate: #5a616d;
  --slate-dark: #2a2e36;
  --blue: #3f6be0;
  --blue-bright: #5c8dff;
  --night: #243f99;
  --gold: #f2a23a;
  --pink: #d63a6c;
  --line: 4px;
  --gutter: 8px;
  --max: 1540px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.review-rail {
  position: fixed;
  z-index: 100;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 2px solid var(--ink);
  background: rgba(244, 242, 236, .88);
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .8);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.brand-mini,
.legend-item { display: none; }

.review-rail button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  padding: 4px 7px;
}

@keyframes bob { 50% { translate: 0 5px; } }

.comic {
  counter-reset: story-page;
  overflow: clip;
  background: var(--ink);
}

.movement {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 660px;
  margin: 0;
  padding: 10px max(10px, calc((100vw - var(--max)) / 2));
  overflow: hidden;
  border-bottom: 8px solid var(--ink);
  background: var(--paper);
  counter-increment: story-page;
}

.movement:nth-of-type(even) { background: var(--cloud); }

.movement-want {
  height: 100svh;
  min-height: 660px;
  background:
    linear-gradient(112deg, transparent 0 73%, rgba(92,141,255,.1) 73% 100%),
    var(--paper);
}

.movement-prologue {
  counter-increment: none;
  min-height: 660px;
  padding: 0;
  border-bottom-width: 10px;
  background:
    radial-gradient(circle at 18% 18%, rgba(92,141,255,.19) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 66%, rgba(242,162,58,.13) 0 2px, transparent 3px),
    linear-gradient(135deg, var(--night) 0 56%, #1d337c 56% 100%);
  background-size: 25px 25px, 33px 33px, auto;
  color: white;
  overflow: hidden;
}

.movement-prologue::after { display: none; }

.prologue-brand {
  position: absolute;
  z-index: 20;
  top: 2.5svh;
  left: max(5vw, calc((100vw - 1180px) / 2 + 58px));
  width: clamp(560px, 53vw, 790px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.prologue-brand img {
  width: clamp(275px, 25vw, 380px);
  flex: 0 0 auto;
  height: auto;
  display: block;
  filter: drop-shadow(6px 7px 0 rgba(17,17,17,.72));
}

.prologue-brand p {
  margin: 0;
  max-width: 330px;
  color: white;
  font-size: clamp(12px, 1.15vw, 17px);
  font-weight: 900;
  letter-spacing: .045em;
  line-height: 1.28;
  text-align: left;
  text-transform: uppercase;
}

.prologue-stage {
  position: relative;
  width: min(1180px, 94vw);
  height: min(690px, 92svh);
  min-height: 590px;
  margin: 4svh auto 0;
}

.narrator-box {
  position: absolute;
  z-index: 7;
  padding: clamp(10px, 1.3vw, 18px) clamp(13px, 1.7vw, 24px);
  border: 4px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  font-weight: 950;
  line-height: .9;
}

.narrator-psst {
  top: 24%;
  left: 5%;
  background: var(--pink);
  color: white;
  font-size: clamp(22px, 2.8vw, 42px);
  letter-spacing: .05em;
  transform: rotate(-2deg);
}

.narrator-moment {
  top: 34%;
  left: 11%;
  width: min(490px, 43vw);
  font-size: clamp(30px, 4.3vw, 64px);
  letter-spacing: -.055em;
  transform: rotate(.7deg);
}

.narrator-kid {
  top: 53%;
  left: 6%;
  font-size: clamp(24px, 3.4vw, 51px);
  transform: rotate(-1.4deg);
}

.narrator-phone {
  top: 64%;
  left: 15%;
  font-size: clamp(24px, 3.4vw, 51px);
  transform: rotate(1deg);
}

.narrator-thing {
  z-index: 9;
  top: 74%;
  left: 6%;
  font-size: clamp(22px, 3vw, 46px);
  letter-spacing: -.035em;
  transform: rotate(-.5deg);
}

.narrator-thing em { color: var(--pink); font-style: normal; }

.prologue-hani {
  position: absolute;
  z-index: 8;
  right: 1%;
  bottom: -6%;
  width: min(650px, 58vw);
  max-height: 92%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(12px 14px 0 rgba(17,17,17,.5));
}

.prologue-cta {
  position: absolute;
  z-index: 12;
  right: 4%;
  bottom: 5%;
  padding: 10px 14px 11px;
  border: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: clamp(14px, 1.6vw, 22px);
  font-style: italic;
  font-weight: 950;
  text-decoration: none;
  transform: rotate(-1.5deg);
}

.prologue-cta span { display: inline-block; animation: bob 1.4s infinite ease-in-out; }
.prologue-cta:focus-visible { outline: 3px solid white; outline-offset: 4px; }

.brand-spine {
  position: absolute;
  z-index: 32;
  inset: 0 auto 0 0;
  width: 98px;
  padding: 13px 10px 18px;
  border-right: 7px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px),
    var(--night);
  color: white;
}

.brand-spine-coin {
  width: 59px;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 4px 4px 0 var(--ink);
}

.brand-spine-name {
  margin-top: 14px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.brand-spine-tagline {
  margin-top: auto;
  font-size: 17px;
  font-weight: 950;
  line-height: .9;
  letter-spacing: -.03em;
  text-align: center;
}

.brand-spine p {
  margin: 12px 0 0;
  color: var(--cloud);
  font-size: 7px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.movement-label {
  position: absolute;
  z-index: 30;
  top: 14px;
  left: max(14px, calc((100vw - var(--max)) / 2 + 4px));
  margin: 0;
  padding: 5px 9px 6px;
  background: var(--ink);
  color: white;
  box-shadow: 3px 3px 0 var(--gold);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.movement::after {
  content: counter(story-page, decimal-leading-zero);
  position: absolute;
  z-index: 25;
  right: max(14px, calc((100vw - var(--max)) / 2 + 7px));
  bottom: 14px;
  padding: 3px 6px;
  background: var(--ink);
  color: white;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  pointer-events: none;
}

.panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: clamp(11px, 1.2vw, 19px);
  border: var(--line) solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.panel.action { background: var(--slate-dark); color: white; }
.panel.app { background: var(--cloud); color: var(--ink); }
.panel.hani { background: #fff0bf; color: var(--ink); }
.photo-panel { padding: 0; background: var(--ink); }

.panel-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-meta {
  position: absolute;
  z-index: 8;
  top: 7px;
  left: 8px;
  padding: 4px 6px;
  background: rgba(17,17,17,.72);
  color: white;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.panel.app .panel-meta,
.panel.hani .panel-meta {
  background: rgba(255,255,255,.72);
  color: var(--ink);
}

.scene-s01 { object-position: 42% center; }
.scene-s02 { object-position: 30% center; }
.scene-s03 { object-position: center; }
.scene-s04 { object-position: 67% center; }
.scene-s05,
.scene-s06,
.scene-s07,
.scene-s08,
.scene-s09,
.scene-s10,
.scene-s12,
.scene-s13,
.scene-s14,
.scene-s15,
.scene-s19 { object-position: center; }
.scene-s11 { object-position: 45% center; }
.scene-s18 { object-position: 56% center; }
.scene-s21 { object-position: 63% center; }
.scene-s22 { object-position: 58% center; }

.hani-art {
  width: clamp(78px, 8vw, 126px);
  max-height: 46%;
  object-fit: contain;
  object-position: left bottom;
  align-self: flex-start;
  filter: drop-shadow(4px 5px 0 rgba(17,17,17,.16));
}

.compact-art { width: clamp(70px, 7vw, 112px); }
.speed-art { width: clamp(90px, 10vw, 150px); max-height: 74%; }
.side-art { width: clamp(76px, 7vw, 112px); }
.inset-art { width: clamp(72px, 7vw, 105px); }
.heart-art { width: clamp(94px, 10vw, 155px); max-height: 54%; }
.final-art { width: clamp(82px, 8vw, 124px); }

.hani-sticker {
  position: absolute;
  z-index: 7;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(5px 6px 0 rgba(17,17,17,.2));
}

.camera-sticker { width: 43%; right: -2%; bottom: -7%; transform: rotate(-7deg); }
.gift-sticker { width: 34%; right: -5%; bottom: -9%; transform: rotate(5deg); }
.hani-corner-art {
  position: absolute;
  z-index: 7;
  right: 3vw;
  bottom: 4vh;
  width: clamp(92px, 12vw, 190px);
  max-height: 21vh;
  object-fit: contain;
  filter: drop-shadow(6px 8px 0 rgba(17,17,17,.3));
}

blockquote {
  margin: 7px 0 0;
  font-size: clamp(15px, 1.42vw, 25px);
  font-weight: 900;
  line-height: 1.04;
}

.app-card {
  width: 100%;
  max-width: 540px;
  padding: clamp(10px, 1.2vw, 17px);
  border: 3px dashed var(--ink);
  display: grid;
  gap: 6px;
  background: rgba(255,255,255,.55);
}

.app-card strong {
  font-size: clamp(19px, 2vw, 34px);
  line-height: .94;
}

.big-card { min-height: 58%; align-content: center; }
.ui-kicker { font-size: 10px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.balance,
.points { font-size: clamp(38px, 5.4vw, 84px); font-weight: 950; letter-spacing: -.08em; }
.sfx { font-size: clamp(34px, 5vw, 76px); font-weight: 950; transform: rotate(-8deg); }

.photo-panel .balance,
.photo-panel .points,
.photo-panel .sfx,
.photo-panel .play-wins {
  position: relative;
  z-index: 5;
  color: white;
  text-shadow: 0 3px 16px rgba(0,0,0,.82);
}

.photo-panel .balance { margin: auto 16px 12px; color: var(--gold); }

.want-grid,
.tutorial-grid,
.run-grid,
.mom-grid,
.redeem-grid {
  width: 100%;
  max-width: var(--max);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* PAGE 01: THE WANT */
.want-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.p01 { grid-column: 1 / 7; grid-row: 1 / 3; }
.p02 {
  grid-column: 6 / 9;
  grid-row: 1;
  align-self: end;
  z-index: 12;
  height: 34%;
  margin: 0 0 -4px;
  transform: rotate(-1.5deg);
}
.p02a { grid-column: 7 / 13; grid-row: 1; aspect-ratio: auto; background: var(--ink); }
.driftrex-viral { object-fit: contain; object-position: center; background: var(--ink); }
.driftrex-caption {
  position: absolute;
  z-index: 6;
  right: 9px;
  bottom: 9px;
  padding: 7px 9px;
  border: 2px solid var(--ink);
  background: rgba(255,255,255,.93);
  color: var(--ink);
  font-size: clamp(9px, .75vw, 12px);
  font-weight: 850;
  line-height: 1.05;
  text-align: right;
  transform: rotate(-1deg);
}
.driftrex-caption strong { color: var(--night); font-size: 1.16em; }
.p03 {
  grid-column: 7 / 10;
  grid-row: 2;
  padding: 0;
  background: #e8edf7;
}
.product-screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-screen-p03 { object-position: center; }
.p06,
.p09,
.p19,
.p35 {
  padding: 0;
}
.product-screen-p06,
.product-screen-p09,
.product-screen-p19,
.product-screen-p35 {
  object-position: center;
}
.p04 { grid-column: 10 / 13; grid-row: 2; }
.p05 {
  grid-column: 1 / 7;
  grid-row: 2;
  align-self: end;
  z-index: 8;
  height: 38%;
  margin: 0 0 7px 7px;
  padding: 8px 11px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  transform: rotate(-1deg);
}
.p05 .hani-art { width: 18%; max-height: 96%; flex: 0 0 auto; }
.p05 blockquote {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 10px;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.06;
}
.p05 blockquote span,
.p05 blockquote strong { display: block; }
.p05 blockquote span:first-child,
.p05 blockquote span:last-child { grid-column: 1 / -1; }
.p05 blockquote strong {
  width: fit-content;
  padding: 3px 5px;
  background: var(--pink);
  color: white;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1deg);
}

.game-on-panel {
  padding: 7px 10px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: visible;
  background:
    radial-gradient(circle at 85% 12%, rgba(242,162,58,.38) 0 2px, transparent 3px),
    #fff4ce;
  background-size: 17px 17px, auto;
}

.game-on-hani {
  width: 39%;
  max-height: 122%;
  margin-bottom: 1px;
  object-position: center bottom;
}

.game-on-copy {
  position: relative;
  z-index: 4;
  padding: 7px 9px 6px;
  border: 3px solid var(--ink);
  background: var(--pink);
  color: white;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: clamp(18px, 1.8vw, 29px);
  font-weight: 950;
  line-height: .84;
  letter-spacing: -.04em;
  transform: rotate(-3deg);
}

.scene-caption {
  position: absolute;
  z-index: 7;
  right: auto;
  left: 36%;
  bottom: 51%;
  padding: 9px 12px;
  border: 3px solid var(--ink);
  background: rgba(244,242,236,.96);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(13px, 1.15vw, 19px);
  font-weight: 800;
  line-height: 1.08;
  transform: rotate(-.6deg);
}

/* PAGE 02: THE FIRST HUNDRED */
.tutorial-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.p10 {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: end;
  z-index: 8;
  height: 58%;
  margin-bottom: 10px;
}
.p06 { grid-column: 1 / 4; grid-row: 2; }
.p07 { grid-column: 4 / 10; grid-row: 1 / 3; }
.p08 { grid-column: 10 / 13; grid-row: 1; }
.p09 { grid-column: 10 / 13; grid-row: 2; }

/* PAGE 03: THE RUN */
.run-grid { grid-template-rows: minmax(0, 1fr) minmax(92px, .22fr); }
.quick-panel .points { position: absolute; right: 11px; bottom: 7px; color: var(--gold); }
.tilt-a { clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 100%); }
.tilt-b { clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%); }
.tilt-c { clip-path: polygon(0 3%, 100% 0, 100% 98%, 0 100%); }
.tilt-d { clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%); }
.p15 {
  grid-column: 1 / 13;
  grid-row: 1;
  padding: 27px 7px 7px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.quest-pair {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(74px, 27%);
  gap: 5px;
}
.quest-pair .quick-panel { width: 100%; height: 100%; min-height: 0; }
.approval-cell { position: relative; min-height: 0; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); }
.approval-cell img { width: 100%; height: 100%; display: block; object-fit: cover; }
.approval-label { position: absolute; left: 5px; bottom: 5px; padding: 3px 5px; background: rgba(17,17,17,.78); color: white; font-size: 8px; font-weight: 950; letter-spacing: .07em; }
.running-balance { position: absolute; right: 10px; top: 7px; font-size: 14px; font-weight: 950; }
.p16 {
  grid-column: 9 / 13;
  grid-row: 2;
  min-height: 0;
  padding: 11px;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.p16 .hani-art { width: 43%; max-height: 88%; flex: 0 0 auto; }
.p16 blockquote { margin: 0; font-size: clamp(16px, 1.5vw, 25px); }

/* PAGE 04: MOM PLAYS */
.mom-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.p17 { grid-column: 1 / 6; grid-row: 1 / 3; }
.p18 { grid-column: 6 / 9; grid-row: 1; }
.p19 { grid-column: 9 / 13; grid-row: 1; }
.p21 { grid-column: 6 / 13; grid-row: 2; margin: 0; }
.p20 {
  grid-column: 10 / 13;
  grid-row: 2;
  align-self: start;
  z-index: 7;
  height: 52%;
  margin: 8px 8px 0 0;
}
.p22 {
  grid-column: 2 / 7;
  grid-row: 2;
  align-self: end;
  z-index: 8;
  height: 43%;
  margin: 0 0 8px;
  padding: 9px 14px 9px 10px;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  transform: rotate(.7deg);
}
.p22 .hani-art { width: 35%; max-height: 98%; flex: 0 0 auto; }
.p22 blockquote { margin: 0 0 0 -2%; font-size: clamp(16px, 1.5vw, 26px); line-height: 1.02; }
.p22 blockquote strong { color: var(--night); }

/* PAGE 05: DAD SMELLS A STREAK */
.movement-dad {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 28% 36% 36%;
  gap: var(--gutter);
}
.movement-dad > .dad-grid { display: contents; }
.panel.app.p25 {
  position: relative;
  grid-column: 1 / 13;
  grid-row: 1;
  width: auto;
  min-height: 0;
  margin: 0;
  border-left: var(--line) solid var(--ink);
  border-right: var(--line) solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pink);
  text-align: center;
}
.p23 { grid-column: 1 / 7; grid-row: 2; z-index: 6; margin: 0; }
.p24 {
  grid-column: 1 / 5;
  grid-row: 1;
  z-index: 7;
  margin: 9px 0 9px 9px;
  padding: 10px 12px;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.p24 .hani-art { width: 34%; max-height: 104%; flex: 0 0 auto; }
.p24 blockquote { margin: 0 0 0 -2%; font-size: clamp(15px, 1.36vw, 23px); line-height: 1.01; }
.p24 blockquote strong { color: var(--night); font-size: 1.08em; }
.bounty-ui {
  width: min(610px, 52vw);
  margin-left: 27%;
  padding: clamp(14px, 2vw, 28px);
  border: 4px dashed var(--ink);
  background: rgba(255,255,255,.78);
}
.bounty-number { display: flex; justify-content: center; align-items: center; gap: 17px; font-size: clamp(42px, 6.5vw, 96px); font-weight: 950; line-height: .8; }
.bounty-number strong { font-size: 1.15em; }
.bounty-badge { display: inline-block; margin-top: 4px; padding: 7px 11px; background: var(--ink); color: white; font-size: clamp(20px, 2.8vw, 42px); font-weight: 950; transform: rotate(-2deg); }
.bounty-ui p { margin: 8px 0 0; font-size: 12px; font-weight: 850; }
.pixel-burst { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: clamp(60px, 14vw, 210px); letter-spacing: .12em; opacity: .18; pointer-events: none; }
.p27 { grid-column: 7 / 13; grid-row: 2; }
.p28 {
  grid-column: 10 / 13;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  z-index: 15;
  width: 92%;
  height: 42%;
  margin: 0 10px 10px 0;
  padding: 8px;
  overflow: visible;
}
.p28 .app-card { height: 100%; min-height: 0; padding: 8px 10px; align-content: center; gap: 2px; }
.p28 .app-card strong { font-size: clamp(15px, 1.45vw, 24px); }
.p28 .app-card span { font-size: clamp(11px, 1vw, 16px); font-weight: 950; }
.p29 { grid-column: 1 / 7; grid-row: 3; }
.p30 { grid-column: 7 / 13; grid-row: 3; z-index: 6; margin: 0; }
.p23 .panel-photo { object-position: 68% center; }
.p30 .panel-photo { object-position: center 58%; }
.p30 .sfx { position: absolute; right: 5%; top: 12%; }

/* PAGE 06: THE CLEAR */
.movement-clear {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gutter);
}
.movement-clear > .clear-grid { display: contents; }
.panel.app.p31 {
  grid-column: 1 / 13;
  grid-row: 1;
  width: auto;
  min-height: 0;
  margin: 0;
  padding-left: 31%;
  border-left: var(--line) solid var(--ink);
  border-right: var(--line) solid var(--ink);
  display: grid;
  place-items: center;
  background: var(--night);
  color: white;
}
.threshold { translate: 5% 0; font-size: clamp(50px, 6.8vw, 108px); font-weight: 950; letter-spacing: -.08em; white-space: nowrap; }
.threshold span { opacity: .45; }
.threshold strong { color: var(--gold); }
.p32 { grid-column: 1 / 5; grid-row: 1; z-index: 5; width: auto; min-height: 0; margin: 5vh 0; }
.p33 { grid-column: 8 / 13; grid-row: 1; z-index: 6; align-self: end; min-height: 0; height: 34%; margin: 0 0 7vh; }
.p33 blockquote strong { color: var(--night); font-size: 1.1em; }

/* PAGE 07: THE REDEEM */
.redeem-grid { grid-template-rows: 1.04fr .96fr; }
.p34 { grid-column: 1 / 6; grid-row: 1; }
.p35 { grid-column: 6 / 13; grid-row: 1; }
.p36 { grid-column: 1 / 10; grid-row: 2; }
.p37 { grid-column: 10 / 13; grid-row: 2; }
.p37 blockquote { font-size: clamp(16px, 1.55vw, 27px); }
.tiny-dialogue { position: absolute; z-index: 7; right: 6%; bottom: 9%; padding: 9px 13px; border: 3px solid var(--ink); background: white; color: var(--ink); font-size: clamp(14px, 1.5vw, 23px); font-weight: 950; }

/* PAGE 08: TOMORROW */
.movement-tomorrow { padding: 0; }
.p38 {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.play-wins { position: absolute !important; left: 6vw; bottom: 8vh; font-size: clamp(54px, 9vw, 150px); font-weight: 950; letter-spacing: -.06em; }

/* PAGE 09: YOUR TURN */
.movement-cta { padding: 0; border-bottom: 0; }
.cta-field {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 5vh 24px 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 22%, rgba(242,162,58,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 74%, rgba(92,141,255,.2) 0 3px, transparent 4px),
    linear-gradient(140deg, var(--slate-dark), var(--ink));
  background-size: 34px 34px, 48px 48px, auto;
}
.p39 {
  width: min(760px, 72vw);
  height: min(520px, 70vh);
  min-height: 0;
  padding: clamp(22px, 3.4vw, 48px);
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--cloud);
  box-shadow: 12px 12px 0 var(--pink);
  transform: rotate(-.6deg);
}
.p39 h3 { margin: 18px 0 26px; font-size: clamp(38px, 5.5vw, 76px); line-height: .9; letter-spacing: -.05em; }
.store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.store-badge {
  padding: 12px 17px;
  border: 3px solid var(--ink);
  background: white;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: translate .16s ease, box-shadow .16s ease;
}
.store-badge:hover,
.store-badge:focus-visible { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.store-badge:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.p40 {
  position: absolute;
  z-index: 8;
  right: max(3vw, calc((100vw - 1080px) / 2));
  bottom: 58px;
  width: min(320px, 27vw);
  height: min(250px, 34vh);
  min-height: 0;
  padding: 12px;
  transform: rotate(1.4deg);
}
.p40 blockquote { font-size: clamp(14px, 1.5vw, 24px); }

.footer {
  position: relative;
  z-index: 30;
  height: 54px;
  margin-top: -54px;
  padding: 0 20px;
  border-top: 3px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(17,17,17,.94);
  color: white;
  text-align: center;
}
.footer strong { font-size: 15px; }
.footer nav { display: flex; gap: 18px; }
.footer a,
.footer-coming-soon { color: white; font-size: 11px; font-weight: 750; }
.footer-coming-soon {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.footer-coming-soon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 50;
  width: max-content;
  max-width: 180px;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(255,255,255,.9);
  font-size: 10px;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}
.footer-coming-soon:hover::after,
.footer-coming-soon:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.footer-coming-soon:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.diagonal-left { clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 96%); }
.diagonal-right { clip-path: polygon(0 0, 96% 0, 100% 96%, 0 100%); }
.labels-hidden .panel-meta,
.labels-hidden .movement-label,
.labels-hidden .movement::after { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-height: 720px) and (min-width: 821px) {
  .movement { height: 720px; min-height: 720px; }
  .movement-want { height: 720px; min-height: 720px; }
}

@media (max-width: 820px) {
  :root { --line: 3px; --gutter: 6px; }

  .review-rail { top: 5px; right: 5px; }
  .movement,
  .movement-want {
    height: auto;
    min-height: 100svh;
    padding: 7px;
    overflow: visible;
  }
  .movement-label { top: 11px; left: 11px; }
  .movement::after { right: 10px; bottom: 10px; }
  .panel { padding: 11px; }
  .panel-meta { top: 5px; left: 6px; font-size: 7px; }
  blockquote { font-size: clamp(13px, 3.5vw, 18px); }
  .hani-art { width: clamp(66px, 22vw, 104px); max-height: 48%; }
  .app-card { padding: 9px; }
  .app-card strong { font-size: clamp(16px, 5vw, 24px); }
  .ui-kicker { font-size: 8px; }
  .balance,
  .points { font-size: clamp(30px, 10vw, 52px); }
  .camera-sticker { width: 47%; }
  .gift-sticker { width: 42%; }

  .want-grid,
  .tutorial-grid,
  .run-grid,
  .mom-grid,
  .redeem-grid {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .movement-prologue {
    height: 100svh;
    min-height: 620px;
    padding: 0;
    overflow: hidden;
  }
  .prologue-brand { top: 10px; left: 5%; width: 90vw; gap: 10px; }
  .prologue-brand img { width: 54%; filter: drop-shadow(4px 5px 0 rgba(17,17,17,.72)); }
  .prologue-brand p { max-width: 42%; font-size: clamp(7px, 2.25vw, 10px); letter-spacing: .025em; line-height: 1.18; }
  .prologue-stage {
    width: 100%;
    height: 100%;
    min-height: 620px;
    margin: 0;
  }
  .narrator-box { border-width: 3px; box-shadow: 5px 5px 0 var(--ink); }
  .narrator-psst { top: 25%; left: 7%; font-size: clamp(20px, 7vw, 30px); }
  .narrator-moment { top: 34%; left: 10%; width: auto; font-size: clamp(29px, 9.5vw, 46px); }
  .narrator-kid { top: 48%; left: 6%; font-size: clamp(23px, 7.5vw, 35px); }
  .narrator-phone { top: 57%; left: 17%; font-size: clamp(23px, 7.5vw, 35px); }
  .narrator-thing { top: 66%; left: 6%; font-size: clamp(20px, 6.4vw, 31px); }
  .prologue-hani {
    right: -11%;
    bottom: -4%;
    width: min(430px, 89vw);
    max-height: 57%;
  }
  .prologue-cta {
    right: 4%;
    bottom: 3%;
    font-size: 13px;
    padding: 8px 10px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .p01 { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 8.5; }
  .movement-want { padding-top: 7px; }
  .movement-want .movement-label { top: 11px; }
  .p01 { min-height: 47svh; }
  .scene-caption { right: auto; left: 8px; bottom: 8px; padding: 7px 8px; font-size: 11px; }
  .p02a { grid-column: 1 / 3; grid-row: auto; min-height: 250px; }
  .p02 {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    width: 118%;
    height: 105px;
    min-height: 0;
    margin: 0 4px 5px 0;
  }
  .game-on-hani { width: 43%; }
  .game-on-copy { font-size: 20px; }
  .p03 { grid-column: 1; grid-row: auto; min-height: 235px; }
  .p04 { grid-column: 2; grid-row: auto; min-height: 235px; }
  .p05 {
    grid-column: 1 / 3;
    grid-row: auto;
    width: 94%;
    height: 205px;
    min-height: 0;
    margin: -22px 0 4px auto;
  }
  .p05 .hani-art { width: 28%; }
  .p05 blockquote { grid-template-columns: 1fr; gap: 4px; font-size: 12.5px; }

  .p10 {
    grid-column: 1 / 3;
    grid-row: 1;
    width: 82%;
    height: 155px;
    min-height: 0;
    margin: 4px auto -22px 0;
    z-index: 7;
  }
  .p06 {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: end;
    width: 56%;
    min-height: 175px;
  }
  .p07 { grid-column: 1 / 3; grid-row: 3; aspect-ratio: 16 / 9; }
  .p08 { grid-column: 1; grid-row: 4; min-height: 245px; }
  .p09 { grid-column: 2; grid-row: 4; min-height: 245px; }

  .run-grid { grid-template-rows: none; }
  .quick-panel { grid-column: auto; grid-row: auto; min-height: 56vw; }
  .p11 { grid-column: 1; }
  .p12 { grid-column: 2; }
  .p13 { grid-column: 1; }
  .p14 { grid-column: 2; }
  .p15 { grid-column: 1 / 3; grid-row: auto; min-height: 650px; grid-template-columns: repeat(2, 1fr); }
  .quest-pair { grid-template-rows: minmax(0, 1fr) minmax(86px, 28%); }
  .quest-pair .quick-panel { grid-column: 1; grid-row: 1; min-height: 0; }
  .p16 { grid-column: 1 / 3; grid-row: auto; width: 76%; min-height: 170px; margin: -28px 0 3px auto; z-index: 7; }

  .p17 { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 9; }
  .p18 { grid-column: 1; grid-row: auto; min-height: 225px; }
  .p19 { grid-column: 2; grid-row: auto; min-height: 225px; }
  .p20 { grid-column: 1; grid-row: auto; height: auto; min-height: 210px; margin: 0; }
  .p21 { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 9; }
  .p22 { grid-column: 2; grid-row: 4; width: 118%; height: 160px; margin: -34px 0 5px -18%; }
  .p22 .hani-art { width: 37%; }
  .p22 blockquote { margin-left: -4%; font-size: 13px; }

  .movement-dad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: var(--gutter);
  }
  .panel.app.p25 { grid-column: 1 / 3; grid-row: 1; min-height: 45svh; }
  .p24 { grid-column: 1 / 3; grid-row: 1; align-self: start; width: 63%; min-height: 145px; margin: 8px 0 0 8px; }
  .p24 .hani-art { width: 31%; }
  .p24 blockquote { font-size: 13px; }
  .bounty-ui { width: 72%; margin: 116px 0 0 21%; padding: 13px; }
  .bounty-number { font-size: clamp(42px, 16vw, 70px); }
  .p23 { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; min-height: 0; margin: 0; }
  .p27 { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; }
  .p28 { grid-column: 2; grid-row: 2; width: 88%; height: 42%; margin: 0 6px 6px 0; }
  .p28 .app-card strong { font-size: 14px; }
  .p29 { grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; }
  .p30 { grid-column: 2; grid-row: 3; aspect-ratio: 4 / 3; margin: 0; }
  .p30 .sfx { font-size: 27px; }

  .movement-clear { min-height: 100svh; }
  .panel.app.p31 { padding-left: 0; }
  .threshold { translate: 12% -34%; font-size: clamp(42px, 15vw, 74px); }
  .p32 { grid-column: 1 / 9; margin: 12svh 0 6svh 3vw; }
  .p33 { grid-column: 6 / 13; height: 34%; margin: 0 3vw 7svh 0; }

  .p34 { grid-column: 1; grid-row: auto; min-height: 310px; }
  .p35 { grid-column: 2; grid-row: auto; min-height: 310px; }
  .p36 { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 9; }
  .p37 { grid-column: 1 / 3; grid-row: auto; width: 74%; min-height: 205px; margin: -30px 0 4px auto; z-index: 6; }

  .movement-tomorrow { min-height: 100svh; padding: 0; }
  .p38 { min-height: 100svh; }
  .play-wins { left: 5vw; bottom: 12vh; font-size: clamp(46px, 16vw, 76px); }
  .hani-corner-art { width: 30vw; max-height: 22vh; }

  .movement-cta { min-height: 100svh; padding: 0; }
  .cta-field { min-height: 100svh; padding: 50px 12px 86px; }
  .p39 { width: 91vw; height: min(500px, 65svh); }
  .p40 { width: 66vw; height: 215px; right: 4vw; bottom: 55px; }
  .footer { height: auto; min-height: 58px; margin-top: -58px; padding: 8px 12px; gap: 10px; flex-direction: column; }
  .footer strong { font-size: 12px; }
  .footer nav { gap: 12px; }
  .footer a,
  .footer-coming-soon { font-size: 9px; }
}

/* VERSION 21: REVIEW-READY HEADER, HANI INTRO, AND PERSISTENT CTA */
.review-rail { display: none !important; }

/* Preserve the section headings for screen readers without showing prototype labels. */
.movement-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
}

.panel-meta,
.movement::after { display: none !important; }

.prologue-brand p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(3px, .55vw, 9px);
  max-width: 760px;
  font-size: clamp(30px, 3.3vw, 52px);
  line-height: .84;
}

.prologue-brand p span {
  display: block;
  width: fit-content;
  position: relative;
}

/* Top headline of the promise stack. Wears the gold-with-left-tilt look
   that Made-for-Kids used to have -- when the tagline was added, the
   colored visual moved UP and the two "audience" lines below became a
   matched white pair (see .promise-kids below). */
.promise-tagline {
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-.65deg);
}

/* Deliberately matches .promise-parents: audience lines are a matched
   white pair beneath the gold tagline. Kept as a distinct class so the
   two spans remain individually greppable. */
.promise-kids {
  color: white;
  text-shadow: 3px 3px 0 var(--ink);
  transform: translateX(clamp(5px, .8vw, 13px)) rotate(.35deg);
}

.promise-parents {
  color: white;
  text-shadow: 3px 3px 0 var(--ink);
  transform: translateX(clamp(5px, .8vw, 13px)) rotate(.35deg);
}

/* Second line of the tagline pair. Pink text with the same ink shadow
   as the other promise lines -- no pill background, so it reads as a
   direct visual contrast to the gold ".promise-tagline" above it while
   staying part of the same headline block. */
.promise-tagline-neg {
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--ink);
  transform: translateX(clamp(5px, .8vw, 13px)) rotate(.35deg);
}

.promise-research {
  z-index: 0;
  padding: .06em .15em .11em;
  color: white;
  text-shadow: 2px 2px 0 var(--ink);
  transform: translateX(clamp(1px, .25vw, 4px)) rotate(-.3deg);
}

.promise-research::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.01em -.12em -.04em;
  background: var(--pink);
  clip-path: polygon(1% 12%, 99% 0, 97% 91%, 0 100%);
  box-shadow: 4px 4px 0 var(--ink);
}

.hani-intro {
  position: absolute;
  z-index: 13;
  top: 26%;
  right: 4%;
  color: var(--gold);
  font-family: "Trebuchet MS", "Avenir Next Rounded", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-5deg);
  pointer-events: none;
}

.hani-intro span {
  display: inline-block;
  margin-right: .12em;
  font-size: 1.35em;
  transform: translateY(.06em) scaleX(1.18);
}

/* Subtle always-on float + breath to draw the eye to the CTA. The -1deg baseline
   tilt is preserved inside each keyframe so the rotation stays stable while
   translateY and scale animate. Hover/focus pauses the animation (see rule below)
   so the existing hover transform takes over cleanly. */
@keyframes companion-cta-float {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  50%      { transform: translateY(-4px) rotate(-1deg) scale(1.04); }
}

.companion-cta {
  position: fixed;
  z-index: 200;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 5px 14px 5px 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 5px 5px 0 var(--ink);
  color: var(--ink);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 950;
  letter-spacing: -.025em;
  line-height: 1;
  text-decoration: none;
  transform: rotate(-1deg);
  transition: transform 150ms ease, box-shadow 150ms ease;
  animation: companion-cta-float 2.6s ease-in-out infinite;
}

.companion-cta img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(2px 2px 0 rgba(17,17,17,.5));
}

.companion-cta:hover,
.companion-cta:focus-visible {
  /* Pause the float so the hover translate lands on a stable transform, not
     mid-animation (would jitter otherwise). */
  animation: none;
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 7px 7px 0 var(--ink);
}

.companion-cta:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}

/* Accessibility: users who opt out of motion still get the CTA, just static. */
@media (prefers-reduced-motion: reduce) {
  .companion-cta { animation: none; }
}

@media (max-width: 820px) {
  .prologue-brand {
    align-items: flex-start;
    gap: 9px;
  }

  .prologue-brand img { width: 39%; }

  .prologue-brand p {
    flex: 1 1 auto;
    gap: 3px;
    max-width: none;
    font-size: clamp(14px, 4.15vw, 21px);
    line-height: .88;
  }

  .hani-intro {
    top: 27%;
    right: 3%;
    font-size: clamp(17px, 5vw, 24px);
  }

  .companion-cta {
    right: 9px;
    bottom: 9px;
    min-height: 43px;
    padding: 4px 11px 4px 5px;
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--ink);
    font-size: 12px;
  }

  .companion-cta img {
    width: 31px;
    height: 31px;
  }
}

/* VERSION 20: SHADED-CEL ASSET FOCAL-POINT CORRECTIONS */
/* The new approval art is 16:9. Bias the shallow strips upward so faces stay in frame. */
.approval-cell img {
  object-position: center 35%;
}

/* Keep Eli's face in the compact quest panels after the portrait V2 crops. */
.scene-s12 { object-position: center 34%; }
.scene-s13 { object-position: center 29%; }
.scene-s14 { object-position: center 34%; }
.scene-s15 { object-position: center 32%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
  .store-badge { transition: none; }
}

/* VERSION 11: GLOBAL GRAPHIC-NOVEL ART DIRECTION */
:root {
  --paper-shadow: #c9ccd3;
  --ink-soft: rgba(17, 17, 17, .12);
  --brush-blue: linear-gradient(97deg, transparent 0 2%, var(--blue) 2% 95%, transparent 95% 100%);
  --brush-pink: linear-gradient(94deg, transparent 0 3%, var(--pink) 3% 96%, transparent 96% 100%);
}

body {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    var(--ink);
}

.movement:not(.movement-prologue):not(.movement-tomorrow):not(.movement-cta) {
  isolation: isolate;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 24%, rgba(17,17,17,.055) 0 1px, transparent 1.4px),
    repeating-linear-gradient(2deg, transparent 0 11px, rgba(17,17,17,.018) 12px 13px),
    linear-gradient(118deg, rgba(92,141,255,.08), transparent 31%, rgba(214,58,108,.045) 76%, transparent);
  background-size: 18px 18px, auto, auto;
}

.movement:not(.movement-prologue)::before {
  position: absolute;
  z-index: 0;
  inset: auto auto 2vh 1vw;
  color: rgba(17,17,17,.045);
  font-size: clamp(110px, 20vw, 330px);
  font-weight: 1000;
  line-height: .72;
  letter-spacing: -.1em;
  white-space: nowrap;
  pointer-events: none;
}

.movement-want::before { content: "WANT"; }
.movement-first-hundred::before { content: "MOVE"; left: auto; right: 2vw; }
.movement-run::before { content: "STREAK"; }
.movement-mom::before { content: "PLAY"; left: auto; right: 1vw; }
.movement-dad::before { content: "BOUNTY"; }
.movement-clear::before { content: "5,025"; color: rgba(242,162,58,.09); }
.movement-redeem::before { content: "EARNED"; left: auto; right: 2vw; }
.movement-cta::before { content: ""; }

.movement > :not(.movement-label) { position: relative; z-index: 1; }

.movement-label {
  padding: 6px 13px 7px;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--gold);
  transform: rotate(-1deg);
}

.movement-label::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -18px -7px -13px;
  background: var(--brush-blue);
  transform: rotate(1.5deg);
}

.movement-run .movement-label::after,
.movement-dad .movement-label::after,
.movement-redeem .movement-label::after { background: var(--brush-pink); }

.movement::after {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--gold);
  transform: rotate(1deg);
}

.panel {
  border-color: var(--ink);
  box-shadow: 5px 5px 0 rgba(17,17,17,.9);
}

.panel.action {
  outline: 1px solid rgba(255,255,255,.22);
  outline-offset: -8px;
}

.panel.action:nth-child(odd) { border-width: 5px 3px 4px 5px; }
.panel.action:nth-child(even) { border-width: 3px 5px 5px 4px; }

.panel.app {
  border-width: 4px;
  background:
    linear-gradient(90deg, rgba(92,141,255,.16) 1px, transparent 1px),
    linear-gradient(rgba(92,141,255,.16) 1px, transparent 1px),
    var(--cloud);
  background-size: 14px 14px;
  box-shadow: 7px 7px 0 var(--blue);
  clip-path: polygon(0 9px, 9px 9px, 9px 0, calc(100% - 12px) 0, calc(100% - 12px) 6px, 100% 6px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 8px 100%, 8px calc(100% - 7px), 0 calc(100% - 7px));
}

.panel.hani {
  overflow: visible;
  border: 0;
  background:
    linear-gradient(88deg, transparent 0 2%, #fff0bf 2% 96%, transparent 96%),
    repeating-linear-gradient(-3deg, transparent 0 4px, rgba(242,162,58,.18) 5px 6px);
  box-shadow: none;
  filter: drop-shadow(5px 6px 0 var(--ink));
  clip-path: polygon(2% 4%, 99% 0, 97% 96%, 0 100%);
}

.panel.hani::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -10px;
  background:
    linear-gradient(93deg, transparent 0 2%, var(--gold) 2% 97%, transparent 97%),
    repeating-linear-gradient(0deg, rgba(17,17,17,.2) 0 1px, transparent 1px 5px);
  transform: rotate(-1.2deg);
}

.panel.hani:nth-of-type(even)::before { transform: rotate(1.2deg); }
.panel.hani .panel-meta { transform: rotate(-2deg); }

.p10,
.p33 {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.p10 .hani-art,
.p33 .hani-art {
  width: 44%;
  max-height: 84%;
  flex: 0 0 auto;
}

.p10 blockquote,
.p33 blockquote {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 26px);
}

.app-card {
  border: 3px solid var(--ink);
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 0 0 4px rgba(92,141,255,.15), 4px 4px 0 var(--ink);
}

.ui-kicker {
  width: fit-content;
  padding: 3px 6px;
  background: var(--night);
  color: white;
}

.quick-panel {
  overflow: visible;
  box-shadow: 6px 7px 0 var(--ink);
}

.quick-panel::after {
  content: "";
  position: absolute;
  z-index: 9;
  top: -8px;
  left: 41%;
  width: 58px;
  height: 18px;
  border: 1px solid rgba(17,17,17,.28);
  background: rgba(244,242,236,.82);
  box-shadow: 0 2px 4px rgba(17,17,17,.18);
  transform: rotate(-3deg);
}

.quick-panel:nth-child(even)::after { transform: rotate(4deg); }

.points {
  padding: 0 7px 3px;
  background: var(--brush-pink);
  text-shadow: 3px 3px 0 var(--ink) !important;
}

.comic-stamp {
  position: absolute;
  z-index: 12;
  width: max-content;
  padding: 5px 8px 4px;
  border: 3px solid currentColor;
  color: var(--pink);
  background: rgba(244,242,236,.9);
  font-size: clamp(9px, .82vw, 13px);
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-7deg);
  mix-blend-mode: normal;
}

.stamp-accepted { right: 10px; bottom: 10px; }
.stamp-proof { left: 9px; bottom: 10px; color: var(--gold); background: rgba(17,17,17,.78); }
.stamp-approved { right: 10px; bottom: 10px; color: var(--night); transform: rotate(6deg); }
.stamp-four { right: 12px; bottom: 11px; transform: rotate(-3deg); }
.stamp-new { right: 11px; bottom: 10px; color: var(--night); transform: rotate(5deg); }
.stamp-cleared { top: 17%; right: 7%; color: var(--gold); background: rgba(17,17,17,.72); transform: rotate(7deg); }
.stamp-redeemed { top: 11px; right: 13px; transform: rotate(5deg); }

.tutorial-grid::before {
  content: "";
  position: absolute;
  z-index: 5;
  left: 23%;
  top: 47%;
  width: 43%;
  height: 0;
  border-top: 11px solid var(--pink);
  border-right: 0;
  border-radius: 0;
  transform: rotate(5deg);
  opacity: .8;
  pointer-events: none;
}

.tutorial-grid::after {
  content: none;
}

.approval-strip {
  box-shadow: 8px 8px 0 var(--night) !important;
}

.approval-cell:nth-of-type(odd) { transform: rotate(-.7deg); }
.approval-cell:nth-of-type(even) { transform: rotate(.7deg); }
.approval-label { border: 1px solid rgba(255,255,255,.5); }

.movement-mom .p17::after {
  content: "LEFT OUT AGAIN";
  position: absolute;
  z-index: 7;
  left: 5%;
  bottom: 7%;
  padding: 5px 9px;
  background: var(--pink);
  color: white;
  font-size: clamp(10px, 1vw, 15px);
  font-weight: 1000;
  letter-spacing: .08em;
  transform: rotate(-3deg);
}

.movement-mom .p19 { box-shadow: 8px 8px 0 var(--pink); }
.movement-dad { background-color: var(--cloud) !important; }

.bounty-slam {
  background:
    radial-gradient(circle, rgba(255,255,255,.42) 0 2px, transparent 3px) 0 0 / 24px 24px,
    var(--pink) !important;
}

.bounty-ui {
  border-style: solid;
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(-1deg);
}

.bounty-badge {
  box-shadow: 5px 5px 0 var(--gold);
}

.p28,
.p30 { box-shadow: 7px 7px 0 var(--gold) !important; }

.movement-clear {
  background: var(--night) !important;
}

.panel.app.p31 {
  background:
    radial-gradient(circle at 75% 25%, rgba(242,162,58,.17) 0 2px, transparent 3px) 0 0 / 28px 28px,
    linear-gradient(135deg, #1b2f75, var(--night)) !important;
  clip-path: none;
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 10px rgba(92,141,255,.32);
}

.threshold {
  padding: 15px 25px;
  background: linear-gradient(94deg, transparent 0 2%, rgba(17,17,17,.72) 2% 98%, transparent 98%);
  text-shadow: 6px 6px 0 rgba(17,17,17,.8);
  transform: rotate(-1deg);
}

.p32 {
  box-shadow: 12px 12px 0 var(--pink) !important;
  transform: rotate(-1deg);
}

.p33 { transform: rotate(2deg); }

.movement-redeem {
  background-color: var(--paper) !important;
}

.p35 { box-shadow: 9px 9px 0 var(--gold) !important; }
.p36 { box-shadow: 10px 10px 0 var(--night) !important; }

.tiny-dialogue {
  box-shadow: 4px 4px 0 var(--pink);
  transform: rotate(-2deg);
}

.movement-tomorrow::after {
  background: var(--gold);
  color: var(--ink);
}

.p38::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,17,17,.18), transparent 28%, transparent 72%, rgba(17,17,17,.12)),
    linear-gradient(0deg, rgba(17,17,17,.62), transparent 38%);
  pointer-events: none;
}

.play-wins {
  z-index: 8 !important;
  padding: 0 .14em .08em;
  background: var(--brush-blue);
  color: white !important;
  text-shadow: 5px 5px 0 var(--ink) !important;
  transform: rotate(-2deg);
}

.hani-corner-art { z-index: 9; }

.cta-field {
  background:
    radial-gradient(circle at 18% 23%, rgba(242,162,58,.82) 0 3px, transparent 4px) 0 0 / 31px 31px,
    linear-gradient(135deg, transparent 0 43%, rgba(214,58,108,.88) 43% 56%, transparent 56%),
    linear-gradient(152deg, var(--night), var(--blue) 58%, var(--ink)) !important;
}

.cta-field::before,
.cta-field::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 44vw;
  height: 15vh;
  background: var(--brush-pink);
  transform: rotate(-12deg);
  opacity: .75;
}

.cta-field::before { left: -8vw; top: 14vh; }
.cta-field::after { right: -9vw; bottom: 12vh; transform: rotate(12deg); background: var(--brush-blue); }

.back-cover-title {
  position: absolute !important;
  z-index: 1 !important;
  top: 5vh;
  left: 3vw;
  color: rgba(255,255,255,.13);
  font-size: clamp(72px, 13vw, 210px);
  font-weight: 1000;
  line-height: .78;
  letter-spacing: -.08em;
  transform: rotate(-3deg);
}

.back-cover-coin {
  position: absolute !important;
  z-index: 7 !important;
  left: max(3vw, calc((100vw - 1080px) / 2));
  bottom: 68px;
  width: clamp(88px, 11vw, 170px);
  filter: drop-shadow(8px 9px 0 var(--ink));
  transform: rotate(-8deg);
}

.back-cover-kicker {
  margin-bottom: 11px;
  padding: 5px 9px;
  background: var(--pink);
  color: white;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
  transform: rotate(-2deg);
}

.p39 {
  border-width: 6px;
  background: var(--paper) !important;
  box-shadow: 14px 14px 0 var(--pink), -10px -10px 0 var(--gold);
  clip-path: polygon(0 3%, 98% 0, 100% 96%, 3% 100%);
}

.p40 {
  filter: drop-shadow(8px 9px 0 var(--ink));
  transform: rotate(2deg);
}

.footer {
  border-top: 5px solid var(--gold);
  background: var(--ink);
}

@media (max-width: 820px) {
  .movement:not(.movement-prologue)::before {
    font-size: clamp(80px, 30vw, 150px);
    bottom: 2vh;
  }

  .movement-label { box-shadow: 3px 3px 0 var(--gold); }
  .panel { box-shadow: 3px 4px 0 rgba(17,17,17,.9); }
  .panel.app { box-shadow: 4px 4px 0 var(--blue); }
  .panel.hani { filter: drop-shadow(4px 5px 0 var(--ink)); }
  .quick-panel::after { width: 42px; height: 14px; left: 35%; }
  .tutorial-grid::before,
  .tutorial-grid::after { display: none; }
  .comic-stamp { padding: 4px 6px 3px; border-width: 2px; font-size: 8px; }
  .p10 .hani-art,
  .p33 .hani-art { width: 40%; }
  .p10 blockquote,
  .p33 blockquote { font-size: 14px; }
  .stamp-cleared { top: 13%; right: 4%; }
  .threshold { padding: 10px 13px; }
  .back-cover-title { top: 8vh; left: -2vw; font-size: 27vw; }
  .back-cover-coin { left: 4vw; bottom: 72px; width: 23vw; }
  .p39 { box-shadow: 8px 8px 0 var(--pink), -6px -6px 0 var(--gold); }
  .cta-field::before,
  .cta-field::after { width: 70vw; }
}

/* VERSION 16: BRAND, HANI TYPE AND BACK-COVER POLISH */
.prologue-brand {
  top: 2.2svh;
  width: min(1180px, 90vw);
  gap: clamp(24px, 3vw, 48px);
}

.prologue-brand img { width: clamp(270px, 23vw, 350px); }

.prologue-brand p {
  max-width: 720px;
  font-size: clamp(34px, 3.65vw, 56px);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: .91;
  text-transform: none;
}

.panel.hani blockquote,
.game-on-copy,
.play-wins {
  font-family: "Trebuchet MS", "Avenir Next Rounded", "Arial Rounded MT Bold", sans-serif;
  font-weight: 900;
  letter-spacing: -.045em;
}

.panel.hani blockquote strong { font-weight: 950; }
.p05 blockquote { font-size: clamp(15px, 1.24vw, 21px); }
.p10 blockquote { font-size: clamp(18px, 1.72vw, 29px); line-height: .96; }
.p16 blockquote { font-size: clamp(18px, 1.75vw, 29px); line-height: .96; }
.p22 blockquote { font-size: clamp(18px, 1.72vw, 29px); line-height: .96; }
.p24 blockquote { font-size: clamp(17px, 1.55vw, 27px); line-height: .96; }
.p33 blockquote { font-size: clamp(18px, 1.72vw, 29px); line-height: .96; }

.p37 {
  padding: 12px 15px 12px 10px;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.p37 .hani-art {
  width: 41%;
  max-height: 100%;
  flex: 0 0 auto;
}

.p37 blockquote {
  margin: 0 0 0 -3%;
  font-size: clamp(17px, 1.48vw, 25px);
  line-height: .96;
}

.p37 blockquote strong {
  display: inline-block;
  margin-top: .28em;
  color: var(--night);
}

.play-wins {
  left: 5vw;
  top: 7vh;
  bottom: auto;
  max-width: 48vw;
  padding: .13em .24em .17em !important;
  background:
    linear-gradient(88deg, transparent 0 2%, #fff0bf 2% 96%, transparent 96%),
    repeating-linear-gradient(-3deg, transparent 0 4px, rgba(242,162,58,.2) 5px 6px) !important;
  color: var(--ink) !important;
  filter: drop-shadow(8px 9px 0 var(--gold)) drop-shadow(5px 6px 0 var(--ink));
  font-size: clamp(48px, 8vw, 128px);
  line-height: .82;
  text-shadow: none !important;
  clip-path: polygon(2% 4%, 99% 0, 97% 96%, 0 100%);
  transform: rotate(-2deg);
}

.movement-cta { background: var(--night); }

.cta-field {
  background:
    radial-gradient(circle at 13% 18%, rgba(255,255,255,.88) 0 2px, transparent 3px) 0 0 / 24px 24px,
    radial-gradient(circle at 82% 74%, rgba(242,162,58,.9) 0 3px, transparent 4px) 0 0 / 34px 34px,
    conic-gradient(from 218deg at 50% 50%, var(--night), var(--blue) 24%, var(--pink) 24% 40%, var(--gold) 40% 52%, var(--night) 52% 100%) !important;
}

.cta-field::before {
  z-index: 1;
  left: -7vw;
  top: 12vh;
  width: 54vw;
  height: 20vh;
  background: var(--brush-pink);
  opacity: .92;
}

.cta-field::after {
  z-index: 1;
  right: -8vw;
  bottom: 9vh;
  width: 56vw;
  height: 21vh;
  background: var(--brush-blue);
  opacity: .94;
}

.back-cover-title {
  z-index: 2 !important;
  top: 3vh;
  left: 1.5vw;
  color: rgba(255,255,255,.2);
  font-size: clamp(84px, 15vw, 230px);
}

.cta-coin-field {
  position: absolute !important;
  z-index: 6 !important;
  inset: 0;
  pointer-events: none;
}

.cta-coin {
  position: absolute;
  width: clamp(66px, 8vw, 132px);
  filter: drop-shadow(7px 8px 0 rgba(17,17,17,.9));
}

.coin-one { left: 3.5vw; top: 12vh; width: clamp(92px, 12vw, 190px); transform: rotate(-13deg); }
.coin-two { right: 6vw; top: 8vh; transform: rotate(17deg); }
.coin-three { left: 8vw; bottom: 10vh; transform: rotate(11deg); }
.coin-four { right: 4vw; bottom: 17vh; width: clamp(88px, 10vw, 158px); transform: rotate(-19deg); }
.coin-five { right: 22vw; bottom: 4vh; width: clamp(48px, 5.5vw, 88px); transform: rotate(26deg); }

.p39 {
  z-index: 7;
  width: min(800px, 68vw);
  height: min(540px, 68vh);
  border: 7px solid var(--ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(242,162,58,.28) 0 3px, transparent 4px) 0 0 / 24px 24px,
    linear-gradient(145deg, #fff8dd, var(--paper) 60%) !important;
  box-shadow: 18px 18px 0 var(--pink), -14px -14px 0 var(--gold), 29px 29px 0 rgba(17,17,17,.8);
  transform: rotate(-1deg);
}

.p39::before { content: none; }

.quest-added {
  display: block;
  width: fit-content;
  margin: 0 0 clamp(22px, 3vh, 34px);
  padding: clamp(10px, 1.1vw, 15px) clamp(15px, 1.6vw, 24px);
  background: var(--pink);
  color: white;
  box-shadow: 6px 6px 0 var(--ink);
  font-size: clamp(23px, 2.6vw, 40px);
  font-weight: 1000;
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.quest-task-label {
  display: block;
  color: var(--gold);
  font-size: clamp(20px, 2vw, 31px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ink);
}

.p39 h3 {
  max-width: 650px;
  margin: 7px 0 24px;
  color: var(--night);
  font-size: clamp(44px, 6.2vw, 86px);
  text-shadow: 3px 3px 0 rgba(242,162,58,.7);
}

.back-cover-kicker {
  padding: 7px 12px;
  background: var(--pink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(10px, .9vw, 14px);
}

.store-badge {
  padding: 14px 21px;
  background: var(--night);
  color: white;
  font-size: clamp(12px, 1vw, 16px);
  box-shadow: 5px 5px 0 var(--gold);
}

.p40 {
  z-index: 9;
  right: max(2vw, calc((100vw - 1160px) / 2));
  bottom: 52px;
  width: min(350px, 29vw);
  height: min(270px, 35vh);
}

.p40 blockquote { font-size: clamp(16px, 1.62vw, 27px); line-height: .96; }

@media (max-width: 820px) {
  .prologue-brand { top: 9px; left: 4%; width: 92vw; gap: 12px; }
  .prologue-brand img { width: 45%; }
  .prologue-brand p { max-width: 53%; font-size: clamp(14px, 4.5vw, 22px); line-height: .92; }

  .p05 blockquote,
  .p10 blockquote,
  .p16 blockquote,
  .p22 blockquote,
  .p24 blockquote,
  .p33 blockquote { font-size: 14px; }

  .p37 { width: 88%; min-height: 210px; }
  .p37 blockquote { font-size: 15px; }

  .play-wins {
    left: 4vw;
    top: 7svh;
    bottom: auto;
    max-width: 72vw;
    font-size: clamp(42px, 14vw, 70px);
  }

  .coin-one { left: -6vw; top: 14vh; width: 28vw; }
  .coin-two { right: -5vw; top: 10vh; width: 22vw; }
  .coin-three { left: -4vw; bottom: 12vh; width: 23vw; }
  .coin-four { right: -7vw; bottom: 19vh; width: 26vw; }
  .coin-five { display: none; }

  .p39 { width: 86vw; height: min(570px, 70svh); padding: 28px 20px; }
  .quest-added { margin-bottom: 24px; font-size: clamp(21px, 7vw, 31px); }
  .quest-task-label { font-size: clamp(18px, 5vw, 25px); }
  .p39 h3 { font-size: clamp(42px, 13vw, 66px); }
  .p40 { right: 3vw; bottom: 58px; width: 54vw; height: 24vh; }
  .p40 .hani-art { width: 37%; }
  .p40 blockquote { font-size: 14px; }
}

/* VERSION 17: CONSOLIDATED WANT AND HANI CTA POLISH */
.driftrex-hani-overlay {
  position: absolute;
  z-index: 12;
  right: 10px;
  bottom: 10px;
  width: min(66%, 540px);
  height: 46%;
  min-height: 140px;
  padding: 10px 15px 9px 9px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  transform: rotate(-1deg);
}

.driftrex-hani-overlay .game-on-hani {
  width: 30%;
  max-height: 118%;
  flex: 0 0 auto;
  align-self: flex-end;
  object-position: center bottom;
}

.driftrex-hani-overlay blockquote {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: .96;
}

.driftrex-hani-overlay blockquote span {
  display: block;
  margin-bottom: .24em;
}

.driftrex-hani-overlay blockquote strong {
  display: inline-block;
  margin-top: .08em;
  padding: .16em .28em .2em;
  background: var(--pink);
  color: white;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.13em;
  line-height: .86;
  transform: rotate(-2deg);
}

.play-wins {
  background:
    linear-gradient(88deg, transparent 0 2%, #fff0bf 2% 96%, transparent 96%),
    repeating-linear-gradient(-3deg, transparent 0 4px, rgba(242,162,58,.18) 5px 6px) !important;
  color: var(--ink) !important;
  filter: drop-shadow(8px 9px 0 var(--gold)) drop-shadow(5px 6px 0 var(--ink));
}

.p40 {
  width: min(460px, 38vw);
  height: min(270px, 35vh);
  padding: 14px 17px 12px 10px;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.p40 .final-art {
  width: 35%;
  max-height: 96%;
  flex: 0 0 auto;
  align-self: center;
}

.p40 blockquote {
  flex: 1 1 auto;
  margin: 0 0 0 -2%;
  font-size: clamp(17px, 1.48vw, 25px);
  line-height: .96;
}

.p40 blockquote strong {
  display: inline-block;
  margin-top: .34em;
  color: var(--night);
}

@media (max-width: 820px) {
  .driftrex-hani-overlay {
    right: 7px;
    bottom: 7px;
    width: calc(100% - 14px);
    height: 48%;
    min-height: 126px;
    padding: 7px 10px 7px 5px;
  }

  .driftrex-hani-overlay .game-on-hani { width: 27%; }
  .driftrex-hani-overlay blockquote { font-size: clamp(13px, 3.7vw, 17px); }

  .p40 {
    right: 3vw;
    bottom: 62px;
    width: 76vw;
    height: 230px;
    padding: 11px 13px 10px 7px;
  }

  .p40 .final-art { width: 34%; }
  .p40 blockquote { font-size: clamp(14px, 4vw, 18px); }
}

/* VERSION 18: CONSISTENT HANI LOCKUPS AND RUN BOOKENDS */
.panel.hani {
  --hani-art-lane: 35%;
  --hani-copy-size: clamp(17px, 1.55vw, 27px);
  --hani-copy-overlap: 7%;
  display: grid;
  grid-template-columns: minmax(72px, var(--hani-art-lane)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
}

.panel.hani > .hani-art {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-height: 100%;
  margin: 0;
  align-self: end;
  justify-self: stretch;
  object-position: center bottom;
}

.panel.hani > blockquote {
  grid-column: 2;
  grid-row: 1;
  width: calc(100% + var(--hani-copy-overlap));
  min-width: 0;
  margin: 0 0 0 calc(-1 * var(--hani-copy-overlap));
  font-family: ui-rounded, "Arial Rounded MT Bold", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: var(--hani-copy-size);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
}

.panel.hani > blockquote span,
.panel.hani > blockquote strong {
  display: block;
  width: fit-content;
  max-width: 100%;
  text-wrap: balance;
}

.panel.hani > blockquote > * + * { margin-top: .24em; }

.p05 { --hani-art-lane: 22%; --hani-copy-size: clamp(15px, 1.18vw, 20px); --hani-copy-overlap: 4%; }
.p10 { --hani-art-lane: 42%; --hani-copy-size: clamp(17px, 1.58vw, 27px); --hani-copy-overlap: 10%; }
.p16a,
.p16 { --hani-art-lane: 40%; --hani-copy-size: clamp(18px, 1.66vw, 28px); --hani-copy-overlap: 10%; }
.p22 { --hani-art-lane: 37%; --hani-copy-size: clamp(17px, 1.55vw, 27px); --hani-copy-overlap: 10%; }
.p24 { --hani-art-lane: 36%; --hani-copy-size: clamp(16px, 1.42vw, 25px); --hani-copy-overlap: 9%; }
.p33 { --hani-art-lane: 42%; --hani-copy-size: clamp(17px, 1.58vw, 27px); --hani-copy-overlap: 10%; }
.p37 { --hani-art-lane: 42%; --hani-copy-size: clamp(17px, 1.48vw, 25px); --hani-copy-overlap: 10%; }
.p40 { --hani-art-lane: 37%; --hani-copy-size: clamp(17px, 1.48vw, 25px); --hani-copy-overlap: 9%; }
.driftrex-hani-overlay { --hani-art-lane: 31%; --hani-copy-size: clamp(16px, 1.45vw, 24px); --hani-copy-overlap: 7%; }

.run-grid { grid-template-rows: minmax(0, 1fr) minmax(104px, .24fr); }

.p16a {
  grid-column: 1 / 5;
  grid-row: 2;
  min-height: 0;
  padding: 11px;
  z-index: 4;
  transform: rotate(-.8deg);
}

.p16 {
  grid-column: 9 / 13;
  grid-row: 2;
  min-height: 0;
  padding: 11px;
  transform: rotate(.8deg);
}

.movement-run::before {
  left: 50%;
  right: auto;
  bottom: 3.4vh;
  font-size: clamp(58px, 8.5vw, 132px);
  letter-spacing: -.075em;
  transform: translateX(-50%) rotate(-2deg);
}

@media (max-width: 820px) {
  .panel.hani {
    --hani-copy-size: 14px;
    --hani-copy-overlap: 8%;
    grid-template-columns: minmax(76px, var(--hani-art-lane)) minmax(0, 1fr);
  }

  .panel.hani > blockquote { font-size: var(--hani-copy-size); }

  .p05 { --hani-art-lane: 30%; --hani-copy-size: 13px; }
  .p10 { --hani-art-lane: 39%; --hani-copy-size: 14px; }
  .p22 { --hani-art-lane: 39%; --hani-copy-size: 13px; }
  .p24 { --hani-art-lane: 34%; --hani-copy-size: 13px; }
  .p37 { --hani-art-lane: 40%; --hani-copy-size: 15px; }
  .p40 { --hani-art-lane: 36%; --hani-copy-size: clamp(14px, 4vw, 18px); }
  .driftrex-hani-overlay { --hani-art-lane: 29%; --hani-copy-size: clamp(13px, 3.7vw, 17px); }

  .p16a,
  .p16 {
    grid-row: auto;
    width: 82%;
    min-height: 155px;
    margin: -20px 0 3px;
    z-index: 7;
  }

  .p16a { grid-column: 1 / 3; justify-self: start; }
  .p16 { grid-column: 1 / 3; justify-self: end; margin-top: -28px; }

  .movement-run::before {
    left: 50%;
    bottom: 19vh;
    font-size: clamp(54px, 20vw, 92px);
  }
}

/* VERSION 19: MOM PLAYS, THE CLEAR, AND HANI GOLD CORRECTIONS */
/* Keep the couch leap in the bike panel's open upper-left corner so Lena remains visible. */
.movement-mom .p21 {
  grid-column: 7 / 13;
}

.movement-mom .p20 {
  grid-column: 6 / 9;
  grid-row: 2;
  width: 92%;
  height: 46%;
  margin: 8px 0 0 8px;
  justify-self: start;
  align-self: start;
  z-index: 9;
  box-shadow: 7px 7px 0 var(--pink);
}

/* Move Hani into the open space above the score and lower the score slightly. */
.movement-clear .p33 {
  grid-column: 6 / 11;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  width: 100%;
  height: 31%;
  margin: 5vh 0 0;
  z-index: 8;
}

.movement-clear .threshold {
  translate: 8% 15%;
}

/* Play Wins is Hani speaking, so it uses the canonical Hani gold token. */
.movement-tomorrow .play-wins {
  background: var(--gold) !important;
  color: var(--ink) !important;
  filter: drop-shadow(8px 9px 0 #fff0bf) drop-shadow(5px 6px 0 var(--ink));
}

@media (max-width: 820px) {
  .movement-mom .p21 {
    grid-column: 1 / 3;
    grid-row: 4;
    width: 94%;
    justify-self: end;
  }

  .movement-mom .p20 {
    grid-column: 1;
    grid-row: 4;
    width: 88%;
    height: 44%;
    min-height: 135px;
    margin: 7px 0 0 7px;
  }

  .movement-clear .p33 {
    grid-column: 5 / 12;
    width: auto;
    height: 29%;
    margin: 5svh 2vw 0 0;
  }

  .movement-clear .threshold {
    translate: 9% 17%;
  }
}

/* VERSION 21 FINAL CASCADE: keep the review-ready masthead above earlier version overrides. */
.prologue-brand p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(3px, .55vw, 9px);
  max-width: 760px;
  font-size: clamp(30px, 3.3vw, 52px);
  line-height: .84;
}

/* VERSION 22: align every promise line to one clean left edge. */
.prologue-brand p span {
  margin-left: 0;
  transform-origin: left center;
}

.promise-tagline,
.promise-tagline-neg,
.promise-kids,
.promise-parents {
  transform: none;
}

.promise-research {
  margin-left: 0;
  padding-left: 0;
  transform: none;
}

@media (max-width: 820px) {
  .prologue-brand {
    align-items: flex-start;
    gap: 9px;
  }

  .prologue-brand img { width: 39%; }

  .prologue-brand p {
    flex: 1 1 auto;
    gap: 3px;
    max-width: none;
    font-size: clamp(14px, 4.15vw, 21px);
    line-height: .88;
  }
}

/* VERSION 24: MOBILE READING-ORDER AND CROP REPAIRS */
@media (max-width: 820px) {
  /* Keep Hani's introduction attached to her art and clear the persistent CTA. */
  .hani-intro {
    top: auto;
    right: 4vw;
    bottom: 34svh;
    max-width: 46vw;
    font-size: clamp(17px, 5.2vw, 23px);
    text-align: right;
    transform: rotate(-4deg);
  }

  .prologue-cta {
    left: 5vw;
    right: auto;
    bottom: calc(3svh + env(safe-area-inset-bottom));
    display: block;
    max-width: 52vw;
    z-index: 24;
  }

  /* The opening art is already faded for a wide panel. Show the whole moment. */
  .movement-want .p01 {
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: var(--paper);
  }

  .movement-want .p01 .scene-s01 {
    object-fit: contain;
    object-position: center;
  }

  /* Desktop uses an overlapping triptych. Mobile reads leap, bike, then Hani. */
  .movement-mom .p20,
  .movement-mom .p21,
  .movement-mom .p22 {
    grid-column: 1 / 3;
    width: 100%;
    margin: 0;
    justify-self: stretch;
  }

  .movement-mom .p20 {
    grid-row: 4;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .movement-mom .p21 {
    grid-row: 5;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .movement-mom .p20 .panel-photo,
  .movement-mom .p21 .panel-photo {
    object-fit: contain;
    object-position: center;
    background: var(--paper);
  }

  .movement-mom .p22 {
    grid-row: 6;
    height: auto;
    min-height: 190px;
    padding: 11px 14px 10px 8px;
    transform: rotate(.4deg);
    --hani-art-lane: 36%;
    --hani-copy-size: clamp(14px, 4vw, 17px);
  }

  /* Redemption becomes a full-width sequence instead of a squeezed two-up. */
  .movement-redeem .redeem-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .movement-redeem .p34,
  .movement-redeem .p35,
  .movement-redeem .p36,
  .movement-redeem .p37 {
    grid-column: 1;
    width: 100%;
    margin: 0;
    justify-self: stretch;
  }

  .movement-redeem .p34 {
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: var(--paper);
  }

  .movement-redeem .p34 .panel-photo {
    object-fit: contain;
    object-position: center;
  }

  .movement-redeem .p35 {
    grid-row: 2;
    min-height: 230px;
  }

  .movement-redeem .p36 {
    grid-row: 3;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .movement-redeem .p37 {
    grid-row: 4;
    min-height: 205px;
    transform: rotate(.5deg);
  }

  /* The finale is a wide illustration. Preserve the full toy, Eli and parents. */
  .movement-tomorrow,
  .movement-tomorrow .p38 {
    height: auto;
    min-height: 72svh;
  }

  .movement-tomorrow .p38 {
    background: var(--ink);
  }

  .movement-tomorrow .p38 .panel-photo {
    object-fit: contain;
    object-position: center;
  }

  .movement-tomorrow .play-wins {
    left: 4vw;
    top: 4svh;
    max-width: 68vw;
    font-size: clamp(38px, 12vw, 60px);
  }

  .companion-cta {
    bottom: calc(9px + env(safe-area-inset-bottom));
  }
}

/* VERSION 25: FINAL iOS CONTENT-VISIBILITY PASS */
@media (max-width: 820px) {
  /* Pull the opening story upward toward the masthead without crowding it. */
  .narrator-psst {
    top: 15%;
  }

  /* Keep the last setup card entirely left of Hani's face. */
  .narrator-thing {
    top: 59%;
    left: 4%;
    width: 47vw;
    max-width: 47vw;
    padding: 8px 10px;
    font-size: clamp(16px, 5.15vw, 23px);
    line-height: .94;
  }

  .prologue-hani {
    right: -21%;
    width: min(390px, 80vw);
    max-height: 55%;
  }

  .hani-intro {
    right: 2vw;
    bottom: 31svh;
  }

  /* Point rewards should punctuate the action, not cover it. */
  .approval-flow .quick-panel .points {
    right: 6px;
    top: 6px;
    bottom: auto;
    padding: 1px 5px 2px;
    font-size: clamp(18px, 5.7vw, 27px);
    line-height: .9;
    text-shadow: 2px 2px 0 var(--ink) !important;
  }

  /* The Clear becomes three explicit beats on phones: score, Eli, Hani. */
  .movement-clear {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 7px;
    gap: var(--gutter);
    overflow: visible;
  }

  .movement-clear > .clear-grid {
    display: contents;
  }

  .movement-clear .p31,
  .movement-clear .p32,
  .movement-clear .p33 {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    translate: none;
    align-self: stretch;
  }

  .movement-clear .p31 {
    order: 1;
    min-height: 190px;
    padding: 18px 8px;
  }

  .movement-clear .threshold {
    translate: none;
    padding: 12px 10px;
    font-size: clamp(34px, 11.5vw, 54px);
  }

  .movement-clear .stamp-cleared {
    top: 12px;
    right: 12px;
  }

  .movement-clear .p32 {
    order: 2;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .movement-clear .p32 .panel-photo {
    object-fit: contain;
    object-position: center;
    background: var(--paper);
  }

  .movement-clear .p33 {
    order: 3;
    min-height: 190px;
    padding: 11px 14px 10px 8px;
    --hani-art-lane: 36%;
    --hani-copy-size: clamp(14px, 4vw, 17px);
  }
}

/* VERSION 26: MOBILE PROLOGUE RESET
   Keep the opening as one deliberate vertical composition. These rules are
   intentionally last so earlier one-off mobile nudges cannot re-collapse it. */
@media (max-width: 820px) {
  .movement-prologue {
    height: 100svh;
    min-height: 680px;
  }

  .prologue-brand {
    top: max(10px, env(safe-area-inset-top));
    left: 5vw;
    width: 90vw;
    height: auto;
    align-items: center;
    gap: 10px;
  }

  .prologue-brand img {
    display: block;
    width: 40%;
    max-width: 170px;
    flex: 0 0 40%;
  }

  .prologue-brand p {
    flex: 1 1 auto;
    max-width: none;
    gap: 3px;
    font-size: clamp(13px, 3.9vw, 18px);
    line-height: .9;
  }

  .prologue-stage {
    height: 100svh;
    min-height: 680px;
  }

  .narrator-psst { top: 16%; left: 7%; }
  .narrator-moment { top: 27%; left: 9%; }
  .narrator-kid { top: 43%; left: 6%; }
  .narrator-phone { top: 51%; left: 17%; }

  .narrator-thing {
    top: 60%;
    left: 4%;
    width: 49vw;
    max-width: 49vw;
    padding: 8px 10px;
    font-size: clamp(17px, 5.3vw, 24px);
    line-height: .94;
  }

  .prologue-hani {
    right: -18%;
    bottom: -2%;
    width: min(400px, 82vw);
    max-height: 48%;
  }

  .hani-intro {
    top: auto;
    right: 3vw;
    bottom: 27svh;
    max-width: 45vw;
    font-size: clamp(16px, 4.8vw, 22px);
  }

  .prologue-cta {
    left: 5vw;
    right: auto;
    bottom: calc(2svh + env(safe-area-inset-bottom));
    max-width: 48vw;
  }
}

/* VERSION 27: HANI-INTRO POSITION-AND-TILT (LEFT-OF-HANI)
   Earlier mobile passes put "It's Hani!" at bottom: 27svh; right: 3vw; which
   lands on Hani's face right at the bridge of the eyes -- unreadable and
   feels crunched. Hani sits bottom-right on mobile (right: -18%; width: 82vw)
   so her left edge is around 36vw from the left, leaving that whole strip
   free. Move the tag INTO that free strip and flip the arrow so it points
   right AT her instead of left AT nothing.
   Placed last so it wins the mobile cascade over V24/V25/V26. */
@media (max-width: 820px) {
  .hani-intro {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 16svh;
    max-width: 32vw;
    /* Use flex so the arrow span can be reordered to the RIGHT of the text
       (order: 1 pushes it past the text node, which stays at implicit 0). */
    display: flex;
    align-items: center;
    gap: .18em;
    text-align: left;
    /* translateX(-50%) centers this absolutely-positioned tag on `left: 50%`
       (shifts it left by half its own width). Combined with the rotate here
       -- the transform list order matters, translate first so rotation
       pivots around the visually-centered box. */
    transform: translateX(-50%) rotate(-4deg);
    transform-origin: center center;
  }

  /* Flip the `←` character to a visual `→` AND push it to the end of the
     tag so it reads "It's Hani! →" with the arrow pointing at Hani on the
     right. Base rule already applies `translateY(.06em) scaleX(1.18)` to
     widen the arrow; negating scaleX preserves that width exaggeration
     while mirroring the glyph horizontally. Zero markup change -- desktop
     keeps `← It's Hani!`. */
  .hani-intro span {
    order: 1;
    margin-right: 0;
    transform: translateY(.06em) scaleX(-1.18);
  }
}