/* ============================================================
   DGIRL · Delivery Girl
   tokens → base → components → sections → motion
   ============================================================ */

/* self-hosted, subset to the characters this site uses (see README) */
@font-face { font-family: "Dela Gothic One"; src: url("../assets/fonts/dela-gothic-one-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DotGothic16"; src: url("../assets/fonts/dotgothic16-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hachi Maru Pop"; src: url("../assets/fonts/hachi-maru-pop-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("../assets/fonts/zen-maru-gothic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("../assets/fonts/zen-maru-gothic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("../assets/fonts/zen-maru-gothic-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* colour */
  --milk: #fdf6f3;
  --paper: #fffcfa;
  --blush: #ffe7ef;
  --sakura: #fcc6d8;
  --gum: #ff4f9a;
  --gum-deep: #c8175f;
  --ink: #1e2044;
  --ink-2: #4b4d70;
  --gold: #e3b24f;
  --night: #1b1431;
  --his: #3a78ff;
  --his-2: #ffd23f;
  --line: rgb(30 32 68 / .14);

  /* type */
  --f-display: "Dela Gothic One", "Zen Maru Gothic", sans-serif;
  --f-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --f-hand: "Hachi Maru Pop", "Zen Maru Gothic", cursive;
  --f-pixel: "DotGothic16", "Zen Maru Gothic", monospace;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-lg: clamp(1.125rem, 1.02rem + .45vw, 1.4rem);
  --t-xl: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  --t-h2: clamp(2.6rem, 1.4rem + 5.2vw, 6rem);
  --t-hero: clamp(3.3rem, .8rem + 7.4vw, 8.6rem);

  /* space (8px base) */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 7rem; --s8: 10rem;
  --gutter: clamp(1rem, .4rem + 3vw, 3rem);
  --maxw: 1320px;

  /* shape */
  --r-sm: 6px;
  --r-md: 14px;
  --r-pill: 999px;
  --bw: 2.5px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 160ms;
  --t-reveal: 700ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--milk);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }

::selection { background: var(--gum); color: var(--paper); }
html { scrollbar-color: var(--gum) var(--blush); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--blush); }
::-webkit-scrollbar-thumb { background: var(--gum); border: 3px solid var(--blush); border-radius: 99px; }

:focus-visible { outline: 3px solid var(--gum-deep); outline-offset: 4px; border-radius: 4px; }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: var(--r-pill);
  text-decoration: none; transition: top var(--t-micro) var(--ease-out);
}
.skip:focus { top: 1rem; }

.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.pink { color: var(--gum); }
.lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 38ch;
  text-wrap: pretty;
}
.scribble { font-family: var(--f-hand); color: var(--gum-deep); line-height: 1.3; }

/* ---------- buttons & links ---------- */
.btn {
  --sh: 4px;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.45em;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--f-body); font-weight: 900; font-size: var(--t-base);
  line-height: 1; text-decoration: none; cursor: pointer;
  box-shadow: var(--sh) var(--sh) 0 var(--ink);
  transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out), background-color var(--t-micro);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform 240ms var(--ease-pop); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--ink); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); transition-duration: 60ms; }
.btn:focus-visible { outline-offset: 5px; border-radius: var(--r-pill); }
.btn-gum { background: var(--gum); color: var(--ink); }
.btn-gum:hover { background: #ff66a8; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: var(--sh) var(--sh) 0 var(--gum); }
.btn-ink:hover { box-shadow: calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--gum); }
.btn-ink:active { box-shadow: 1px 1px 0 var(--gum); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ghost:hover { background: var(--blush); }
.btn-sm { --sh: 3px; padding: .62em 1.1em; font-size: var(--t-sm); }

.link-draw {
  display: inline-block;
  font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--gum), var(--gum)) 0 100% / 100% 2px no-repeat;
  padding: .6em 0 .15em;
  transition: background-size 380ms var(--ease-out), color var(--t-micro);
}
.link-draw:hover { background-size: 0% 2px; background-position: 100% 100%; color: var(--gum-deep); }

/* ---------- manga speech bubble ---------- */
.say {
  --tr: 0deg;
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: min(15em, 78%);
  padding: .85em 1.25em;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 50% 48% 52% 50% / 56% 52% 48% 46%;
  font-family: var(--f-body); font-weight: 900; font-size: var(--t-sm);
  line-height: 1.25; text-align: center; color: var(--ink);
  text-wrap: balance;
}
.say em { font-style: normal; color: var(--gum-deep); }
.say::before, .say::after {
  content: ""; position: absolute; left: var(--tx, 58%);
  transform-origin: 50% 0; transform: rotate(var(--tr));
  clip-path: polygon(0 0, 100% 0, 30% 100%);
}
.say::before { top: calc(100% - 2px); width: 26px; height: 24px; margin-left: -13px; background: var(--ink); }
.say::after { top: calc(100% - 4px); width: 17px; height: 17px; margin-left: -8px; background: var(--paper); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 12px var(--gutter) auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: .5rem .5rem .5rem 1.1rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color 300ms var(--ease-out), border-color 300ms, box-shadow 300ms, transform 400ms var(--ease-out);
}
.nav.is-scrolled {
  background: rgb(255 252 250 / .92);
  border-color: var(--line);
  box-shadow: 0 8px 30px -14px rgb(200 23 95 / .35);
  backdrop-filter: saturate(1.4) blur(10px);
}
.logo {
  display: inline-flex; align-items: flex-start; gap: 2px; padding: .45rem 0;
  font-family: var(--f-display); font-size: 1.6rem; line-height: 1; letter-spacing: -.04em;
  text-decoration: none; color: var(--ink);
}
.logo-heart { width: 13px; height: 12px; color: var(--gum); transform: rotate(14deg); transition: transform 300ms var(--ease-pop); }
.logo:hover .logo-heart { transform: rotate(-8deg) scale(1.35); }
.nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav-links a {
  font-weight: 700; font-size: var(--t-sm); text-decoration: none; position: relative; padding: .3rem 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--gum); transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: max(100svh, calc(42.85vw + 250px));
  overflow-x: clip;
  background: linear-gradient(90deg, #f8f7f5 0%, #fbf6f3 25%, #fce6e9 50%, #fed4de 62%, #fdc7d7 75%, #fcb8cd 88%, #fbb3c9 100%);
  isolation: isolate;
}
.hero::after { /* soft paper grain */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 .4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-copy {
  position: relative; z-index: 5;
  width: min(47vw, 700px);
  padding: clamp(7rem, 17vh, 11rem) 0 0 var(--gutter);
}
.hero-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-hero); line-height: .9; letter-spacing: -.045em;
  margin-left: -.04em;
}
.ht-line { display: block; white-space: nowrap; }
.ht-girl {
  display: inline-flex; align-items: flex-start;
  color: var(--gum);
  -webkit-text-stroke: .11em var(--paper);
  paint-order: stroke fill;
  filter: drop-shadow(.045em .06em 0 var(--ink));
  margin-top: -.02em;
}
.ht-heart {
  width: .42em; height: .4em; margin: .12em 0 0 .05em; color: var(--gum);
  stroke: var(--paper); stroke-width: 2.4px; paint-order: stroke;
  overflow: visible;
  animation: beat 1.6s var(--ease-in-out) infinite 1.6s;
}
.char { display: inline-block; will-change: transform; }
.hero-sub {
  margin-top: var(--s3);
  font-size: clamp(1.2rem, .85rem + .95vw, 1.7rem); line-height: 1.3; font-weight: 700;
  max-width: 25ch; text-wrap: pretty;
}
.hero-sub .line { display: block; white-space: nowrap; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

.hero-kana {
  position: absolute; z-index: 5; left: calc(var(--gutter) * .35); bottom: 3.5vw;
  writing-mode: vertical-rl;
  font-family: var(--f-display); font-size: clamp(.8rem, .6rem + .5vw, 1.1rem);
  letter-spacing: .3em; color: var(--gum-deep); opacity: .75;
}

.hero-stage {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  aspect-ratio: 2560 / 1097;
}
.hero-img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
}
.hero-say { left: 49.5%; top: -2%; width: 13.5vw; min-width: 170px; max-width: 220px; --tx: 82%; --tr: -58deg; }
.hero-note {
  position: absolute; left: 42.5%; top: 60%; z-index: 3;
  font-size: clamp(1rem, .7rem + .9vw, 1.5rem);
  transform: rotate(-7deg);
}
.hero-note svg { width: 5.5em; height: 2.75em; color: var(--gum-deep); margin: .1em 0 0 4.5em; transform: rotate(-18deg); }

.stamp {
  position: absolute; right: 3.5%; top: 24%; z-index: 3;
  width: clamp(110px, 10vw, 160px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.stamp > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.stamp text { font-family: var(--f-pixel); font-size: 17.5px; letter-spacing: 1.5px; fill: var(--ink); }
.stamp-heart { width: 34%; height: 34%; color: var(--gum); filter: drop-shadow(2px 3px 0 var(--ink)); animation: beat 1.6s var(--ease-in-out) infinite; }

.kira { position: absolute; z-index: 3; color: var(--paper); filter: drop-shadow(0 0 6px rgb(255 79 154 / .6)); animation: twinkle 2.4s var(--ease-in-out) infinite; }
.k1 { width: 30px; height: 30px; left: 76%; top: 6%; }
.k2 { width: 18px; height: 18px; left: 80%; top: 17%; animation-delay: .8s; }
.k3 { width: 22px; height: 22px; left: 58%; top: 40%; animation-delay: 1.5s; color: var(--gum); }

/* ---------- TAPES ---------- */
.tapes { position: relative; height: clamp(120px, 12vw, 170px); overflow: hidden; margin-top: -1px; }
.tape {
  position: absolute; left: -5%; right: -5%; top: 50%;
  border-block: var(--bw) solid var(--ink);
  overflow: hidden;
}
.tape-pink { background: var(--gum); color: var(--ink); transform: translateY(-50%) rotate(-3deg); z-index: 2; }
.tape-ink { background: var(--ink); color: var(--sakura); transform: translateY(-50%) rotate(2.4deg); }
.tape-track {
  display: flex; align-items: center; gap: 1.4rem; width: max-content;
  padding: .7rem 0;
  font-family: var(--f-display); font-size: clamp(1rem, .8rem + .8vw, 1.5rem); letter-spacing: -.01em;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.tape-ink .tape-track { animation-direction: reverse; animation-duration: 46s; font-family: var(--f-pixel); letter-spacing: .06em; }
.tape svg { width: 1em; height: 1em; flex: none; color: var(--paper); }
.tape-ink svg { color: var(--gum); }

/* ---------- LORE / MANGA ---------- */
.lore {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s7) var(--gutter) var(--s8);
}
.lore-head {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: var(--s4);
  margin-bottom: var(--s6);
}
.lore-head .lead { justify-self: end; padding-bottom: .6rem; }

.manga {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px;
  padding: 12px; border: 3px solid var(--ink); background: var(--paper);
  box-shadow: 10px 10px 0 var(--sakura);
  background-image: radial-gradient(circle, rgb(252 198 216 / .7) 1.2px, transparent 1.5px);
  background-size: 9px 9px;
}
.panel {
  position: relative; overflow: visible;
  border: 3px solid var(--ink); background: var(--paper);
}
.panel img { width: 100%; height: 100%; object-fit: cover; }
.panel-wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.panel-wide img { object-position: 50% 38%; }
.panel-kitchen { grid-column: span 5; height: clamp(380px, 42vw, 620px); }
.panel-bodega { grid-column: span 4; height: clamp(380px, 42vw, 620px); }
.panel-bath { grid-column: span 3; height: clamp(380px, 42vw, 620px); }
.panel-kitchen img { object-position: 50% 30%; }
.panel-bodega img { object-position: 45% 35%; }
.panel-bath img { object-position: 22% 40%; }
.panel > img, .panel .speed { transition: transform 900ms var(--ease-out), filter 400ms; }
.panel { overflow: hidden; }
.panel:hover > img { transform: scale(1.04); }

.speed {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: repeating-conic-gradient(from 3deg at 36% 44%, rgb(255 255 255 / .75) 0 .55deg, transparent .55deg 4.2deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 36% 44%, transparent 38%, #000 80%);
          mask-image: radial-gradient(ellipse 60% 70% at 36% 44%, transparent 38%, #000 80%);
}
.cap {
  position: absolute; left: 0; top: 0; z-index: 3;
  background: var(--paper); color: var(--ink);
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  padding: .45em .8em; font-weight: 900; font-size: var(--t-sm); line-height: 1.2;
}
.sfx {
  position: absolute; z-index: 2; pointer-events: none;
  font-family: var(--f-display); font-size: clamp(2.2rem, 1rem + 4vw, 5rem); line-height: 1;
  color: var(--paper); -webkit-text-stroke: .09em var(--ink); paint-order: stroke fill;
  transform: rotate(var(--sr, -10deg));
  transition: transform 300ms var(--ease-pop);
}
.panel:hover .sfx { transform: rotate(var(--sr, -10deg)) scale(1.12); }
.panel-wide .sfx { right: 6%; bottom: 10%; --sr: -8deg; color: var(--gum); font-size: clamp(3rem, 1rem + 6vw, 7rem); }
.panel-wide .say { left: 44%; top: 12%; --tx: 20%; --tr: 38deg; }
.panel-kitchen .sfx { left: 6%; top: 17%; --sr: -14deg; color: #ffb13b; }
.panel-kitchen .say { right: 8%; bottom: 7%; --tx: 30%; }
.panel-kitchen .say::before, .panel-kitchen .say::after { top: auto; bottom: calc(100% - 2px); transform-origin: 50% 100%; clip-path: polygon(30% 0, 100% 100%, 0 100%); }
.panel-kitchen .say::after { bottom: calc(100% - 4px); }
.panel-bodega .sfx { left: 4%; bottom: 22%; --sr: 8deg; font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); }
.panel-bodega .say-him { right: 5%; top: 11%; max-width: min(11em, 62%); font-weight: 700; --tx: 36%; }
.panel-bodega .say-her { left: 7%; top: 34%; --tx: 60%; --tr: -12deg; }
.panel-bath .sfx { right: 3%; top: 12%; --sr: 10deg; writing-mode: vertical-rl; font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); }
.panel-bath .say { left: 8%; bottom: 6%; max-width: min(10em, 84%); --tx: 30%; }
.panel-bath .say::before, .panel-bath .say::after { top: auto; bottom: calc(100% - 2px); transform-origin: 50% 100%; clip-path: polygon(30% 0, 100% 100%, 0 100%); }
.panel-bath .say::after { bottom: calc(100% - 4px); }

/* ---------- ORDERS ---------- */
.orders {
  position: relative; overflow-x: clip;
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s6) var(--gutter) var(--s8);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s4);
}
.orders-left { grid-column: 1 / 7; }
.orders-left .lead { margin-top: var(--s3); }
.polaroid {
  position: relative; margin-top: var(--s5);
  width: min(100%, 520px);
  background: var(--paper); padding: 14px 14px 0;
  border: 1.5px solid var(--line);
  box-shadow: 0 30px 50px -30px rgb(200 23 95 / .45), 0 2px 0 rgb(30 32 68 / .06);
  transform: rotate(-4deg);
}
.polaroid img { aspect-ratio: 1; object-fit: cover; }
.polaroid figcaption { font-size: clamp(1.05rem, .9rem + .6vw, 1.45rem); padding: .8rem .2rem 1.1rem; text-align: center; }
.washi {
  position: absolute; z-index: 2; width: 120px; height: 34px;
  background: repeating-linear-gradient(-45deg, rgb(255 79 154 / .72) 0 8px, rgb(255 199 219 / .72) 8px 16px);
  box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}
.washi-a { left: -26px; top: 18px; transform: rotate(-38deg); }
.washi-b { right: -30px; top: 8px; transform: rotate(32deg); background: repeating-linear-gradient(90deg, rgb(255 210 63 / .75) 0 10px, rgb(255 246 214 / .75) 10px 20px); }

.receipt {
  grid-column: 8 / 13; align-self: start; margin-top: var(--s7);
  position: relative;
  background: var(--paper);
  padding: 2.2rem 1.8rem 2.4rem;
  font-family: var(--f-pixel); font-size: var(--t-sm); line-height: 1.55; color: var(--ink);
  filter: drop-shadow(0 22px 26px rgb(30 32 68 / .14));
  --zz: 12px;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
  transform: rotate(1.5deg);
}
.rc-head { text-align: center; padding-bottom: 1rem; border-bottom: 2px dashed var(--line); color: var(--ink-2); font-size: var(--t-xs); }
.rc-shop { font-size: 1.6rem; color: var(--ink); letter-spacing: .08em; margin-bottom: .3rem; }
.rc-items { padding: 1rem 0; border-bottom: 2px dashed var(--line); }
.rc-items li { display: flex; align-items: baseline; gap: .5rem; padding: .18rem 0; }
.rc-items i { flex: 1; border-bottom: 2px dotted rgb(30 32 68 / .25); transform: translateY(-4px); min-width: 1rem; }
.rc-items b { font-weight: 400; white-space: nowrap; }
.rc-items li:last-child b { color: var(--gum-deep); }
.rc-total { padding: 1rem 0; border-bottom: 2px dashed var(--line); }
.rc-total div { display: flex; justify-content: space-between; gap: 1rem; }
.rc-total dd { text-align: right; }
.rc-status {
  display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  margin: 1.1rem 0 .4rem; padding: .5rem; font-size: 1.1rem;
  color: var(--gum-deep); border: 2.5px solid var(--gum-deep); border-radius: var(--r-sm);
  transform: rotate(-3deg);
}
.rc-status svg { width: 16px; height: 15px; }
.rc-foot { text-align: center; font-size: var(--t-xs); color: var(--ink-2); }
.barcode {
  height: 54px; margin: 1rem auto .5rem;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px,
    var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px,
    var(--ink) 16px 17px, transparent 17px 19px, var(--ink) 19px 22px, transparent 22px 25px);
}

/* ---------- SELFIES ---------- */
.selfies {
  position: relative; overflow-x: clip;
  padding: var(--s7) var(--gutter);
  background: var(--blush);
  background-image: radial-gradient(circle, rgb(255 79 154 / .16) 1.3px, transparent 1.6px);
  background-size: 11px 11px;
  border-block: 3px solid var(--ink);
}
.selfies-head { max-width: var(--maxw); margin: 0 auto var(--s6); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3); }
.roll {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: start;
}
.roll > * { min-width: 0; }
.puri {
  --r: 0deg;
  position: relative;
  background: var(--paper); padding: 10px;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 var(--bw) var(--ink), 8px 8px 0 var(--bw) var(--ink);
  transform: rotate(var(--r));
  transition: transform 450ms var(--ease-pop), box-shadow 300ms var(--ease-out);
}
.puri:hover { transform: rotate(0deg) translateY(-6px) scale(1.015); box-shadow: 0 0 0 var(--bw) var(--ink), 12px 14px 0 var(--bw) var(--gum); }
.puri img { border-radius: 8px; width: 100%; object-fit: cover; }
.puri figcaption {
  position: absolute; left: 22px; right: 22px; bottom: 24px;
  font-family: var(--f-hand); font-size: clamp(1rem, .8rem + .6vw, 1.35rem); line-height: 1.35;
  color: var(--paper); -webkit-text-stroke: 5px var(--gum-deep); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}
.date {
  position: absolute; right: 22px; top: 20px;
  font-family: var(--f-pixel); font-size: var(--t-sm); letter-spacing: .08em;
  color: #ffa24a; text-shadow: 0 0 6px rgb(255 120 40 / .9), 0 0 1px #000;
}
.doodle { position: absolute; color: var(--gum); pointer-events: none; }
.puri-laundry { grid-column: 1 / 5; grid-row: 1 / 3; }
.puri-laundry img { aspect-ratio: 3 / 5; object-position: 50% 30%; }
.puri-couch { grid-column: 5 / 13; margin-top: var(--s4); }
.puri-couch img { aspect-ratio: 16 / 9; }
.puri-couch .date { right: auto; left: 22px; }
.puri-nails { grid-column: 5 / 10; margin-top: var(--s2); }
.puri-nails img { aspect-ratio: 16 / 10; }
.puri-gum { grid-column: 10 / 13; margin-top: var(--s5); }
.puri-gum img { aspect-ratio: 1; }
.puri-gum figcaption { bottom: auto; top: 18px; left: 16px; right: 16px; font-size: clamp(.9rem, .75rem + .4vw, 1.1rem); }
.d-crown { width: 64px; height: 46px; left: 50%; top: -30px; transform: translateX(-50%) rotate(-8deg); color: var(--gold); }
.d-heart { width: 58px; height: 54px; right: -22px; bottom: -24px; transform: rotate(14deg); }
.d-spark { width: 44px; height: 44px; left: -18px; top: -18px; color: var(--gold); animation: twinkle 2.4s var(--ease-in-out) infinite; }

/* ---------- VERSUS ---------- */
.versus { padding: var(--s8) var(--gutter); }
.versus-inner { max-width: var(--maxw); margin: 0 auto; }
.versus .lead { margin-top: var(--s2); }
.vs-card {
  margin: var(--s5) 0 0 auto; max-width: 1060px;
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
}
.vs-card table { width: 100%; font-size: var(--t-base); }
.vs-card thead th {
  font-family: var(--f-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.05; letter-spacing: -.02em;
  text-align: left; padding: 1.4rem 1.4rem 1.2rem; vertical-align: bottom;
}
.vs-card thead small { display: block; margin-top: .45rem; font-family: var(--f-pixel); font-size: var(--t-sm); letter-spacing: .06em; }
.vs-card .his { background: var(--his); color: #fff; border-left: 3px solid var(--ink); }
.vs-card .his small { color: var(--his-2); }
.vs-card .hers { background: var(--gum); color: var(--ink); border-left: 3px solid var(--ink); }
.vs-card thead td { width: 22%; background: var(--blush); background-image: radial-gradient(circle, rgb(255 79 154 / .25) 1.3px, transparent 1.6px); background-size: 9px 9px; }
.vs-card tbody tr { border-top: 2px solid var(--line); }
.vs-card tbody tr:first-child { border-top: 3px solid var(--ink); }
.vs-card tbody th { text-align: left; font-family: var(--f-pixel); font-weight: 400; color: var(--ink-2); padding: 1rem 1.4rem; font-size: var(--t-sm); letter-spacing: .04em; }
.vs-card tbody td { padding: 1rem 1.4rem; border-left: 2px solid var(--line); font-weight: 700; }
.vs-card tbody td:last-child { background: rgb(255 231 239 / .55); color: var(--gum-deep); }
.vs-card tbody tr { transition: background-color var(--t-micro); }
.vs-card tbody tr:hover { background: rgb(252 198 216 / .25); }
.vs-match {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
  padding: 1.2rem 1.4rem; border-top: 3px solid var(--ink);
  background: var(--ink); color: var(--paper); font-weight: 700;
}
.vs-match svg { width: 22px; height: 20px; color: var(--gum); animation: beat 1.6s var(--ease-in-out) infinite; }
.vs-match .link-draw { margin-left: auto; color: var(--sakura); }
.vs-match .link-draw:hover { color: var(--paper); }

/* ---------- BUY ---------- */
.buy {
  position: relative;
  padding: var(--s7) var(--gutter) var(--s8);
  background: var(--night); color: var(--paper);
  overflow: hidden;
}
.buy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 80% 10%, rgb(255 79 154 / .28), transparent 70%);
}
.buy-head, .buy-grid { position: relative; max-width: var(--maxw); margin: 0 auto; }
.buy-head { margin-bottom: var(--s6); }
.buy .lead { color: var(--sakura); margin-top: var(--s2); }
.buy-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }

.label {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-md);
  box-shadow: 10px 10px 0 var(--gum);
  font-family: var(--f-pixel);
  transform: rotate(-2deg);
}
.label-top { display: flex; border-bottom: 3px solid var(--ink); }
.label-mark {
  display: grid; place-items: center; position: relative;
  width: 108px; flex: none; padding: .8rem;
  font-family: var(--f-display); font-size: 3.6rem; line-height: 1;
  border-right: 3px solid var(--ink);
}
.label-mark svg { position: absolute; right: 16px; top: 16px; width: 20px; height: 18px; color: var(--gum); }
.label-speed {
  flex: 1; padding: .8rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--f-display); font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); line-height: 1; letter-spacing: -.02em;
}
.label-speed span { font-family: var(--f-hand); font-size: .5em; color: var(--sakura); letter-spacing: 0; }
.label-fields div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .7rem 1.1rem; border-bottom: 2px solid var(--line); }
.label-fields dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); padding-top: .15rem; }
.label-fields dd { font-family: var(--f-body); font-weight: 700; }
.label-ca { padding: 1rem 1.1rem; border-bottom: 3px solid var(--ink); background: var(--blush); }
.label-ca-k { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.label-ca-v { font-size: clamp(.95rem, .8rem + .5vw, 1.2rem); word-break: break-all; margin: .3rem 0 .8rem; }
.copy {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  border: 2px solid var(--ink); background: var(--paper); cursor: pointer;
  font-family: var(--f-body); font-weight: 900; font-size: var(--t-sm);
  transition: transform var(--t-micro) var(--ease-out), background-color var(--t-micro);
}
.copy svg { width: 16px; height: 16px; }
.copy:hover:not(:disabled) { background: var(--gum); transform: translateY(-2px); }
.copy:active:not(:disabled) { transform: translateY(1px); }
.copy:disabled { cursor: not-allowed; opacity: .6; border-style: dashed; }
.copy.is-done { background: var(--gum); }
.label .barcode { margin: 1rem 1.1rem .4rem; height: 64px; }
.label-foot { padding: 0 1.1rem 1rem; font-size: var(--t-xs); color: var(--ink-2); text-align: center; }

.steps { position: relative; padding-top: .5rem; }
.steps::before {
  content: ""; position: absolute; left: 34px; top: 40px; bottom: 120px;
  border-left: 3px dashed rgb(252 198 216 / .45);
}
.steps li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 1.4rem; padding-bottom: var(--s5); }
.step-n {
  display: grid; place-items: center; width: 70px; height: 70px;
  font-family: var(--f-display); font-size: 2rem; line-height: 1;
  background: var(--gum); color: var(--ink);
  border: 3px solid var(--paper); border-radius: 50%;
  box-shadow: 4px 4px 0 var(--paper);
}
.steps li:nth-child(2) .step-n { transform: rotate(-8deg); }
.steps li:nth-child(3) .step-n { transform: rotate(6deg); }
.steps h3 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.02em; margin: .5rem 0 .5rem; }
.steps p { color: rgb(255 252 250 / .78); max-width: 42ch; }
.steps .steps-cta { display: flex; flex-wrap: wrap; gap: var(--s3); padding: 0 0 0 calc(70px + 1.4rem); }
.buy .btn { border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }
.buy .btn:hover { box-shadow: 6px 6px 0 var(--paper); }
.buy .btn:active { box-shadow: 1px 1px 0 var(--paper); }
.buy .btn-ghost { background: transparent; color: var(--paper); }
.buy .btn-ghost:hover { background: rgb(255 255 255 / .08); }
.buy :focus-visible { outline-color: var(--sakura); }

/* ---------- FINALE ---------- */
.finale {
  position: relative;
  padding: var(--s7) var(--gutter) var(--s4);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s5) clamp(2rem, 5vw, 5rem); align-items: center;
  max-width: var(--maxw); margin: 0 auto;
}
.finale-title { font-weight: 400; line-height: .9; }
.finale-title span { display: block; }
.xoxo { font-family: var(--f-hand); font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem); color: var(--gum-deep); transform: rotate(-6deg); transform-origin: left bottom; margin-bottom: .2em; }
.finale-title span:last-child {
  font-family: var(--f-display); font-size: clamp(5rem, 2rem + 13vw, 15rem); letter-spacing: -.06em;
  color: var(--gum); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill;
  filter: drop-shadow(.035em .045em 0 var(--ink));
  padding-bottom: .12em;
}
.socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s5); position: relative; z-index: 1; }
.socials a {
  display: inline-block; padding: .55rem 1.05rem; border-radius: var(--r-pill);
  border: 2px solid var(--ink); background: var(--paper);
  font-weight: 700; font-size: var(--t-sm); text-decoration: none;
  transition: transform var(--t-micro) var(--ease-out), background-color var(--t-micro);
}
.socials a:hover { background: var(--sakura); transform: translateY(-3px) rotate(-2deg); }
.socials a:active { transform: translateY(0); }

/* links that aren't live yet (chart) */
a[aria-disabled="true"], .buy a.btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; border-style: dashed; box-shadow: none; transform: none;
}
.socials a[aria-disabled="true"]:hover { background: var(--paper); transform: none; }
.buy a.btn-ghost[aria-disabled="true"]:hover { background: transparent; }

.gum-game { display: grid; gap: var(--s4); justify-items: center; }
.gum-frame {
  position: relative; width: min(100%, 460px); aspect-ratio: 1;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer;
}
.gum-frame img { border-radius: 50%; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--sakura); -webkit-user-drag: none; pointer-events: none; }
.gum-bubble {
  --s: 1;
  position: absolute; left: 31%; top: 59%; width: 50%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--s));
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / .92) 0 5%, rgb(255 255 255 / 0) 15%),
    radial-gradient(circle at 70% 75%, rgb(255 255 255 / .35) 0 4%, rgb(255 255 255 / 0) 10%),
    radial-gradient(circle at 45% 42%, #ffa6cb 0%, #ff6aa9 55%, #e0418a 100%);
  box-shadow: inset -10px -14px 30px rgb(170 20 90 / .35), 0 20px 40px -20px rgb(200 23 95 / .6);
  opacity: 0; pointer-events: none; z-index: 2;
}
.gum-bubble.is-on { opacity: .96; }
.gum-bubble.is-deflate { transition: transform 500ms var(--ease-out), opacity 500ms 200ms; opacity: 0; }
.gum-pop {
  position: absolute; left: 31%; top: 50%; z-index: 3; pointer-events: none;
  font-family: var(--f-display); font-size: clamp(2.6rem, 1.5rem + 4vw, 4.6rem);
  color: var(--gum); -webkit-text-stroke: .09em var(--ink); paint-order: stroke fill;
  transform: translate(-50%, -50%) scale(0) rotate(-12deg);
  opacity: 0;
}
.gum-pop.is-on { animation: popsfx 900ms var(--ease-pop) forwards; }
.gum-frame.is-shake { animation: shake 400ms var(--ease-out); }
.gum-ui { position: relative; z-index: 4; display: grid; justify-items: center; gap: .6rem; text-align: center; }
.gum-msg { font-weight: 700; min-height: 1.6em; }
.gum-best { font-family: var(--f-pixel); font-size: var(--t-sm); color: var(--ink-2); }
[data-gum-btn] { touch-action: none; -webkit-touch-callout: none; }
[data-gum-btn].is-held { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--gum); }

.fine {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 3rem;
  padding-top: var(--s3); margin-top: var(--s4); border-top: 2px solid var(--line);
  font-size: var(--t-xs); color: var(--ink-2);
}
.fine p:first-child { max-width: 72ch; }

/* ---------- click sparkles ---------- */
.spark { position: fixed; z-index: 90; width: 16px; height: 16px; pointer-events: none; color: var(--gum); margin: -8px 0 0 -8px; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(.96); } }
@keyframes twinkle { 0%, 100% { transform: scale(.7) rotate(0deg); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes popsfx {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(.9) rotate(-8deg); opacity: 0; }
}
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px) rotate(-1deg); } 40% { transform: translate(5px, -3px) rotate(1deg); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }

/* reveal system: only hides when JS confirms it can reveal */
.js [data-reveal] { transition: opacity var(--t-reveal) var(--ease-out) var(--d, 0s), transform var(--t-reveal) var(--ease-out) var(--d, 0s), clip-path 900ms var(--ease-out) var(--d, 0s); }
.js [data-reveal="rise"]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.js [data-reveal="slap"] { transition-timing-function: var(--ease-pop); transition-duration: 520ms; }
.js [data-reveal="slap"]:not(.is-in) { opacity: 0; transform: scale(1.25) rotate(calc(var(--r, 0deg) * 3)); }
.js [data-reveal="panel"] { transition: none; }
.js [data-reveal="panel"] > img { transition: clip-path 900ms var(--ease-out) var(--d, 0s), transform 900ms var(--ease-out); }
.js [data-reveal="panel"]:not(.is-in) > img { clip-path: inset(0 0 100% 0); }
.js [data-reveal="panel"].is-in > img { clip-path: inset(0 0 0 0); }
.js .panel .say, .js .panel .sfx { transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-pop); transition-delay: calc(var(--d, 0s) + .55s); }
.js .panel:not(.is-in) .say, .js .panel:not(.is-in) .sfx { opacity: 0; }
.js .panel:not(.is-in) .sfx { transform: rotate(var(--sr, -10deg)) scale(.3); }

/* hero letters */
.js .char { opacity: 0; transform: translateY(.35em) scale(1.35) rotate(var(--cr, 0deg)); }
.js .is-in .char, .js .char.is-in { opacity: 1; transform: translateY(0) scale(1) rotate(var(--cf, 0deg)); transition: transform 560ms var(--ease-pop) var(--cd, 0s), opacity 200ms linear var(--cd, 0s); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav-links { gap: 1.1rem; }
  .receipt { grid-column: 7 / 13; }
  .orders-left { grid-column: 1 / 7; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .lore-head { grid-template-columns: 1fr; }
  .lore-head .lead { justify-self: start; }
  .panel-kitchen { grid-column: span 7; }
  .panel-bodega { grid-column: span 5; }
  .panel-bath { grid-column: 1 / -1; height: auto; aspect-ratio: 16 / 10; }
  .panel-bath img { object-position: 30% 55%; }
  .orders { display: block; }
  .receipt { max-width: 460px; margin: var(--s6) 0 0 auto; }
  .polaroid { margin-left: 2%; width: min(94%, 520px); }
  .buy-grid { grid-template-columns: 1fr; }
  .label { max-width: 520px; }
  .finale { grid-template-columns: 1fr; }
  .gum-game { justify-items: start; }
  .gum-ui { justify-items: start; text-align: left; }
}

@media (max-width: 820px) {
  .hero { min-height: 0; background: var(--milk); display: flex; flex-direction: column; }
  .hero-copy { width: auto; padding: 6.6rem var(--gutter) 0; }
  .hero-title { font-size: clamp(3.4rem, 17.5vw, 6rem); }
  .hero-sub { font-size: var(--t-lg); max-width: 26ch; }
  .hero-kana { display: none; }
  .hero-stage {
    position: relative; margin-top: var(--s4);
    aspect-ratio: 1000 / 844;
    background: linear-gradient(90deg, #fbf6f3 0%, #fce6e9 40%, #fdc7d7 75%, #fbb3c9 100%);
  }
  .hero-img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
  .hero-say { left: 3%; top: 10%; width: 40%; min-width: 0; max-width: 170px; font-size: .8rem; padding: .75em .9em; --tx: 84%; --tr: -64deg; }
  .hero-note { left: 3%; top: 58%; font-size: .95rem; }
  .hero-note svg { width: 4.4em; margin-left: 3em; }
  .stamp { right: 2%; top: 3%; width: 92px; }
  .k1 { left: 88%; top: 44%; } .k2 { left: 90%; top: 58%; } .k3 { display: none; }
  .hero::after { display: none; }
}

@media (max-width: 640px) {
  :root { --bw: 2px; }
  .manga { gap: 8px; padding: 8px; box-shadow: 6px 6px 0 var(--sakura); }
  .panel-wide { aspect-ratio: 4 / 3; }
  .panel-wide img { object-position: 30% 50%; }
  .panel-wide .say { left: auto; right: 4%; top: 18%; --tx: 20%; }
  .panel-kitchen, .panel-bodega { grid-column: 1 / -1; height: auto; aspect-ratio: 4 / 5; }
  .panel-bath { aspect-ratio: 4 / 5; }
  .panel-bath img { object-position: 25% 40%; }
  .say { font-size: .78rem; }
  .cap { font-size: .75rem; }
  .roll { grid-template-columns: repeat(12, 1fr); gap: 1.4rem .8rem; }
  .puri { padding: 7px; }
  .puri figcaption { left: 14px; right: 14px; bottom: 16px; font-size: .95rem; }
  .date { right: 14px; top: 12px; font-size: .75rem; }
  .puri-laundry { grid-column: 1 / 8; grid-row: 1; }
  .puri-gum { grid-column: 7 / 13; grid-row: 1; align-self: end; margin: 0 0 -1.5rem; z-index: 2; }
  .puri-gum figcaption { top: 12px; font-size: .8rem; }
  .puri-couch { grid-column: 1 / -1; margin-top: 1rem; }
  .puri-nails { grid-column: 1 / -1; margin-top: 0; }
  .d-crown { width: 48px; height: 34px; top: -22px; }
  .vs-card { border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
  .vs-card table, .vs-card thead, .vs-card tbody { display: block; }
  .vs-card thead tr, .vs-card tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .vs-card thead td { display: none; }
  .vs-card thead th { font-size: 1.1rem; padding: 1rem .9rem .9rem; }
  .vs-card thead th.his { border-left: 0; }
  .vs-card tbody th { grid-column: 1 / -1; padding: .8rem .9rem 0; font-size: .75rem; }
  .vs-card tbody td { padding: .3rem .9rem .9rem; font-size: .95rem; border-left: 0; }
  .vs-card tbody td:last-child { background: transparent; border-left: 2px solid var(--line); }
  .vs-match .link-draw { margin-left: 0; }
  .steps li { grid-template-columns: 52px 1fr; gap: 1rem; }
  .step-n { width: 52px; height: 52px; font-size: 1.5rem; }
  .steps::before { left: 25px; }
  .steps .steps-cta { padding-left: 0; }
  .label-fields div { grid-template-columns: 5.5rem 1fr; }
  .label-mark { width: 80px; font-size: 2.6rem; }
  .receipt { padding: 2rem 1.2rem 2.2rem; transform: none; font-size: .85rem; }
  .fine { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal], .js [data-reveal] > img, .js .char, .js .panel .say, .js .panel .sfx { transition: none !important; opacity: 1 !important; clip-path: none !important; }
  .js [data-reveal="rise"]:not(.is-in), .js [data-reveal="slap"]:not(.is-in) { transform: none; }
  .js [data-reveal="slap"]:not(.is-in) { transform: rotate(var(--r, 0deg)); }
  .js .char { transform: none !important; }
  .tape-track { animation: none; }
  .puri, .btn, .panel > img { transition: none; }
}