/* ==========================================================
   Pip's homepage: tokens, themes, shared UI, hero and about
   ========================================================== */

:root {
  --cream: #fff8f1;
  --paper: #fffdf9;
  --berry: #a34063;
  --plum: #78475c;
  --mauve: #8b5e70;
  --blush: #eccbd3;
  --pink-soft: #fce9ed;
  --rose: #d97897;
  --cocoa: #5c4033;
  --gold: #ffbe1a;
  --amber: #ffcf6b;
  --lavender: #c9b6e4;
  --night: #1d1530;

  /* toy block colours, in note order C D E G A */
  --blk-c: #f6b7c8;
  --blk-d: #ffd1a6;
  --blk-e: #ffe58f;
  --blk-g: #bfe3c0;
  --blk-a: #cdbdf0;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --bar: 58px;
  --gutter: 16px;
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-story: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-hand: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;
}

:root,
[data-theme="day"] {
  --bg: var(--cream);
  --surface: var(--paper);
  --ink: #4a2c3c;
  --heading: var(--plum);
  --muted: #7a5163;
  --accent: var(--berry);
  --accent-ink: #fff8f1;
  --accent-edge: #6e2541;
  --line: var(--blush);
  --stitch: #e6bccb;
  --card: var(--paper);
  --wall-stripe: rgba(236, 203, 211, 0.45);
  --wall-dot: rgba(163, 64, 99, 0.12);
  --focus: var(--berry);
  --pip-glow: 0.85;
  color-scheme: light;
}

[data-theme="night"] {
  --bg: var(--night);
  --surface: #281e42;
  --ink: #f6e9df;
  --heading: #fbe3ea;
  --muted: #dcc6d6;
  --accent: #f2a6bf;
  --accent-ink: #2a1630;
  --accent-edge: #b8607f;
  --line: #44365f;
  --stitch: #57466f;
  --card: #2a2045;
  --wall-stripe: rgba(68, 54, 95, 0.55);
  --wall-dot: rgba(255, 207, 107, 0.16);
  --focus: var(--amber);
  --pip-glow: 1;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  overflow-x: hidden;
  transition: background-color 400ms ease, color 400ms ease;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 0.8em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: 3px; }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  left: 12px; top: -60px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 10px;
  font: 600 1rem var(--font-display);
  text-decoration: none;
  transition: top 160ms var(--ease-out);
}
.skip:focus { top: calc(var(--bar) + 12px); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* nursery wallpaper: soft stripes and polka dots */
.wallpaper,
.hero,
.about,
.made,
.wishes,
.foot {
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--wall-dot) 1.6px, transparent 2.2px),
    radial-gradient(var(--wall-dot) 1.6px, transparent 2.2px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--wall-stripe) 34px 38px);
  background-size: 36px 36px, 36px 36px, auto;
  background-position: 0 0, 18px 18px, 0 0;
  transition: background-color 400ms ease;
}

/* ---------- toy buttons ---------- */
.toy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 1.0625rem/1 var(--font-display);
  text-decoration: none;
  box-shadow: 0 5px 0 var(--accent-edge);
  transform: translateY(0);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 200ms ease;
}
.toy-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-edge); }
.toy-btn--soft {
  background: var(--surface);
  color: var(--heading);
  box-shadow: 0 5px 0 var(--line), inset 0 0 0 2px var(--line);
}
.toy-btn--soft:active { box-shadow: 0 1px 0 var(--line), inset 0 0 0 2px var(--line); }
.toy-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .toy-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent-edge); }
  .toy-btn--soft:hover { box-shadow: 0 7px 0 var(--line), inset 0 0 0 2px var(--line); }
}

/* ==========================================================
   Top bar: Pip sits on the shelf, settings on the right
   ========================================================== */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--bar);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 0 6px;
  background: var(--surface);
  transition: background-color 400ms ease;
}
/* scalloped crib-bumper edge */
.bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(100% - 1px);
  height: 11px;
  background:
    radial-gradient(circle at 12px 0, var(--surface) 10px, transparent 10.5px) 0 0 / 24px 11px repeat-x;
  filter: drop-shadow(0 2px 0 var(--line));
  pointer-events: none;
}
.bar__left { display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; }
.bar__name {
  font: 600 1.05rem/1 var(--font-display);
  color: var(--heading);
  text-decoration: none;
  white-space: nowrap;
}
.pocket {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 70px;
  align-self: flex-start;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.pocket svg { width: 100%; height: 100%; overflow: visible; }

.bar__controls { position: relative; display: flex; align-items: center; gap: 6px; }
.ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--heading);
  font: 600 0.9rem/1 var(--font-display);
  box-shadow: 0 3px 0 var(--line);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 200ms ease;
}
.ctl:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.ctl__icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ctl--sound .spk { fill: currentColor; stroke: none; }
.ctl--sound .cross { opacity: 0; }
.ctl--sound[aria-pressed="true"] .cross { opacity: 1; }
.ctl--sound[aria-pressed="true"] .waves { opacity: 0; }
.ctl--chaos .ctl__icon path { fill: var(--gold); stroke: var(--cocoa); stroke-width: 1.8; }
.ctl--chaos[aria-pressed="true"] { background: var(--gold); color: #4a2c3c; }

.switch {
  position: relative;
  width: 18px; height: 26px;
  border-radius: 5px;
  background: var(--paper);
  border: 2px solid currentColor;
}
.switch__nub {
  position: absolute;
  left: 3px; right: 3px; top: 3px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent);
  transform: translateY(0);
  transition: transform 180ms var(--ease-out);
}
.ctl--light[aria-pressed="false"] .switch__nub { transform: translateY(8px); background: var(--lavender); }

.tip {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: max-content;
  max-width: min(260px, 80vw);
  padding: 10px 14px;
  background: var(--paper);
  color: #4a2c3c;
  border: 2.5px solid #6b4a5a;
  border-radius: 16px;
  font: 600 0.95rem/1.3 var(--font-display);
  box-shadow: 0 3px 0 rgba(107, 74, 90, 0.3);
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  transform-origin: 85% 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.tip.show,
.ctl--sound:focus-visible ~ .tip { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .ctl--sound:hover ~ .tip { opacity: 1; transform: none; }
  .ctl:hover { box-shadow: 0 4px 0 var(--accent); }
}

.marquee { display: none; }

@media (max-width: 520px) {
  :root { --bar: 54px; }
  .bar__name { font-size: 0.95rem; }
  .ctl { padding: 0 8px; gap: 4px; font-size: 0.8rem; }
  .ctl__icon { width: 18px; height: 18px; }
  .switch { width: 14px; height: 22px; }
  .switch__nub { height: 7px; }
  .ctl--light[aria-pressed="false"] .switch__nub { transform: translateY(7px); }
}
@media (max-width: 400px) {
  .bar__name { display: none; }
}

/* ==========================================================
   Pip (SVG) shared bits
   ========================================================== */
.pip-svg { overflow: visible; }
.pip-svg .lid { transition: transform 220ms var(--ease-out); }
.pip-svg .look { transition: transform 160ms ease-out; }
.pip-svg .eyeglow { opacity: var(--pip-glow); transition: opacity 400ms ease; }
.pip-svg .pupil { transition: opacity 300ms ease; }
.pip-svg .foot { transform-box: fill-box; transform-origin: 50% 20%; }
.pip-svg .head { transform-box: fill-box; transform-origin: 50% 90%; }
.pip-svg .pompom { transform-box: fill-box; transform-origin: 50% 50%; }
.pip-svg .mouth-open,
.pip-svg .mouth-o { opacity: 0; }
.pip-svg.is-giggling .mouth-smile { opacity: 0; }
.pip-svg.is-giggling .mouth-open { opacity: 1; }
.pip-svg.is-asleep .mouth-smile { opacity: 0; }
.pip-svg.is-asleep .mouth-o { opacity: 1; }
.pip-svg .zzz { opacity: 0; }
.pip-svg.is-asleep .zzz { opacity: 1; }
.fidget .foot { animation: toes 260ms ease-in-out 6 alternate; }
.fidget .foot + .foot { animation-delay: 130ms; }
@keyframes toes { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

.pip-btn {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 40%;
  -webkit-tap-highlight-color: transparent;
}
.pip-btn svg { width: 100%; height: auto; }

/* speech bubbles */
.bubble {
  position: absolute;
  z-index: 30;
  width: max-content;
  max-width: min(250px, 70vw);
  padding: 9px 14px;
  background: var(--paper);
  color: #4a2c3c;
  border: 2.5px solid #6b4a5a;
  border-radius: 18px;
  font: 600 1rem/1.3 var(--font-display);
  text-align: left;
  box-shadow: 0 3px 0 rgba(107, 74, 90, 0.3);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.bubble.show { opacity: 1; transform: scale(1); }
.bubble::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background: inherit;
  border: inherit;
  border-width: 0 2.5px 2.5px 0;
  border-radius: 0 0 4px 0;
}
.bubble--below { transform-origin: 20px 0; }
.bubble--below::after { left: 18px; top: -7.5px; transform: rotate(-135deg); }
.bubble--above { transform-origin: 50% 100%; }
.bubble--above::after { left: calc(50% - 6px); bottom: -7.5px; transform: rotate(45deg); }

.pocket-bubble {
  position: fixed;
  top: calc(var(--bar) + 22px);
  left: 12px;
}

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "pip" "copy";
  gap: 8px;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--bar) + 24px) var(--gutter) 48px;
  overflow: hidden;
}
.hero__window,
.hero__pip { grid-area: pip; justify-self: center; }
.hero__window { width: min(230px, 62vw); opacity: 0.95; transform: translateY(-6%); }
.hero__window-art { width: 100%; height: auto; }
.win-sky { fill: #24204a; }
[data-theme="night"] .win-sky { fill: #150f28; }
.win-frame { fill: none; stroke: var(--paper); stroke-width: 14; }
[data-theme="night"] .win-frame { stroke: #3a2d58; }
.win-bars { stroke: var(--paper); stroke-width: 7; opacity: 0.9; }
[data-theme="night"] .win-bars { stroke: #3a2d58; }
.win-stars use { animation: twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.win-stars use:nth-child(2n) { animation-delay: -1.4s; }
.win-stars use:nth-child(3n) { animation-delay: -2.2s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero__pip { position: relative; z-index: 2; width: min(260px, 70vw); margin-top: 18%; }
.hero__pip .bubble { left: 50%; bottom: 90%; translate: -50% 0; }
#hero-pip { width: 100%; aspect-ratio: 220 / 300; } /* holds Pip's space before the script draws him, so nothing jumps */
.hint {
  position: absolute;
  right: -6px; top: 4%;
  margin: 0;
  font: 400 1.25rem/1 var(--font-hand);
  color: var(--accent);
  transform: rotate(8deg);
  transition: opacity 300ms ease;
}
.hint::after { content: " ↙"; }
.hint.gone { opacity: 0; }
@media (max-width: 600px) { .hint { display: none; } } /* the greeting bubble already says it */

.hero__copy { grid-area: copy; position: relative; z-index: 2; text-align: center; max-width: 34rem; justify-self: center; }
.hero__hi { font: 500 1.5rem/1 var(--font-display); color: var(--muted); margin: 0 0 6px; }
.blocks-title {
  display: flex;
  justify-content: center;
  gap: 0.08em;
  font: 700 clamp(4rem, 19vw, 7.5rem)/1 var(--font-display);
  margin: 0 0 18px;
}
.lb {
  --c: var(--blk-c);
  display: inline-grid;
  place-items: center;
  width: 1.08em;
  height: 1.08em;
  padding-bottom: 0.06em;
  background: var(--c);
  color: #5a3448;
  border: 0.035em solid rgba(90, 52, 72, 0.6);
  border-radius: 0.16em;
  box-shadow: inset -0.06em -0.08em 0 rgba(90, 52, 72, 0.12), 0.05em 0.07em 0 rgba(90, 52, 72, 0.28);
  font-size: 0.82em;
  cursor: pointer;
  user-select: none;
  transform: rotate(var(--r, -5deg));
  transition: transform 200ms var(--ease-out);
}
.lb--c { --c: var(--blk-c); --r: -6deg; }
.lb--e { --c: var(--blk-e); --r: 3deg; transform-origin: 50% 100%; }
.lb--g { --c: var(--blk-g); --r: -2deg; }
.lb.bonk { animation: bonk 380ms var(--ease-out); }
@keyframes bonk {
  0% { transform: rotate(var(--r)) translateY(0); }
  35% { transform: rotate(calc(var(--r) * -1.6)) translateY(-14%); }
  100% { transform: rotate(var(--r)) translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .lb:hover { transform: rotate(var(--r)) translateY(-6%); }
}
.hero__job { font: 600 clamp(1.15rem, 3.6vw, 1.45rem)/1.25 var(--font-display); color: var(--heading); margin-bottom: 10px; }
.hero__tagline { font: italic 400 clamp(1.35rem, 4.6vw, 2rem)/1.3 var(--font-story); color: var(--accent); margin-bottom: 14px; }
.hero__intro { max-width: 30rem; margin-inline: auto; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "copy pip";
    padding-inline: max(5vw, calc((100vw - 1180px) / 2));
    gap: 32px;
  }
  .hero__copy { text-align: left; justify-self: start; }
  .blocks-title { justify-content: flex-start; }
  .hero__intro { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }
  .hero__window { width: min(400px, 34vw); transform: translateY(-4%); }
  .hero__pip { width: min(360px, 30vw); margin-top: 22%; }
  .hero__pip .bubble { left: 58%; bottom: 86%; translate: none; }
  .hero__pip .bubble--above::after { left: 22px; }
}

/* ==========================================================
   About strip
   ========================================================== */
.about { padding: 56px var(--gutter) 64px; }
.about__title { text-align: center; font-size: clamp(2rem, 6vw, 2.75rem); margin-bottom: 28px; }
.about__grid {
  display: grid;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
@media (min-width: 700px) {
  .about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1100px) {
  .about__grid { grid-template-columns: 1.2fr 1fr 0.9fr; grid-template-rows: auto auto; }
  .profile { grid-row: span 2; }
  .spin { grid-row: span 2; }
}

/* baby-book page */
.profile {
  width: 100%;
  max-width: 440px;
  padding: 22px 22px 18px;
  background: var(--paper);
  color: #4a2c3c;
  border-radius: 6px 18px 18px 6px;
  border-left: 14px solid var(--rose);
  box-shadow: 0 6px 0 rgba(120, 71, 92, 0.18);
}
.profile table { width: 100%; border-collapse: collapse; }
.profile tr { border-bottom: 2px solid rgba(163, 64, 99, 0.16); }
.profile tr:last-child { border-bottom: 0; }
.profile th {
  text-align: left;
  vertical-align: baseline;
  width: 36%;
  padding: 9px 8px 7px 0;
  font: 600 0.92rem/1.2 var(--font-display);
  color: #78475c;
}
.profile td {
  vertical-align: baseline;
  padding: 7px 0 5px;
  font: 400 1.3rem/1.05 var(--font-hand);
  color: #3d4f8a;
}

.spin {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: var(--surface);
  border: 3px dashed var(--line);
  border-radius: 24px;
  text-align: center;
}
.spin__canvas {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto;
  cursor: grab;
  touch-action: pan-y;
}
.spin__canvas:active { cursor: grabbing; }
.spin figcaption { font: 400 1.25rem/1.2 var(--font-hand); color: var(--heading); margin-top: 6px; }

.sticker-new {
  display: inline-grid;
  place-items: center;
  width: 54px; height: 54px;
  background: var(--gold);
  color: #6e2541;
  font: 700 0.85rem/1 var(--font-display);
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 85% 56%, 96% 76%, 74% 78%, 68% 100%, 50% 86%, 32% 100%, 26% 78%, 4% 76%, 15% 56%, 0 40%, 20% 32%, 18% 10%, 39% 18%);
  transform: rotate(-12deg);
}
.spin .sticker-new { position: absolute; top: -18px; right: -12px; }

.polaroid {
  margin: 0;
  width: 100%;
  max-width: 260px;
  padding: 12px 12px 14px;
  background: #fffefb;
  box-shadow: 0 8px 0 rgba(92, 64, 51, 0.16), 0 0 0 1px rgba(92, 64, 51, 0.1);
  transform: rotate(2.5deg);
  position: relative;
}
.polaroid::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 90px; height: 24px;
  margin-left: -45px;
  background: rgba(242, 166, 191, 0.7);
  transform: rotate(-4deg);
}
.polaroid img { width: 100%; height: auto; aspect-ratio: 506 / 760; object-fit: cover; }
.polaroid figcaption { font: 400 1.2rem/1.2 var(--font-hand); color: #5a3448; text-align: center; margin-top: 10px; }

/* the baby monitor, with an LCD hit counter */
.monitor { width: 100%; max-width: 300px; text-align: center; }
.monitor__body {
  position: relative;
  padding: 26px 22px 30px;
  background: var(--lavender);
  border: 3px solid #6b4a7a;
  border-radius: 46% 46% 40% 40% / 38% 38% 30% 30%;
  box-shadow: inset -8px -10px 0 rgba(107, 74, 122, 0.18), 0 6px 0 rgba(107, 74, 122, 0.3);
}
.monitor__label,
.odometer {
  background: #c8d4b0;
  color: #2f3a2a;
  margin: 0;
}
.monitor__label {
  padding: 8px 10px 2px;
  border-radius: 12px 12px 0 0;
  font: 700 0.72rem/1.1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 3px solid #5b4a66;
  border-bottom: 0;
}
.odometer {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 4px 10px 10px;
  border-radius: 0 0 12px 12px;
  border: 3px solid #5b4a66;
  border-top: 0;
  font: 700 1.9rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  box-shadow: inset 0 -3px 0 rgba(47, 58, 42, 0.12);
}
.odo-digit {
  position: relative;
  width: 0.68em;
  height: 1.1em;
  overflow: hidden;
  background: rgba(47, 58, 42, 0.07);
  border-radius: 3px;
}
.odo-col {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1600ms var(--ease-out);
}
.odo-col span { height: 1.1em; line-height: 1.1em; text-align: center; }
.monitor__led {
  position: absolute;
  top: 12px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #f28aa8;
  box-shadow: 0 0 0 2px #6b4a7a;
  animation: led 2.4s ease-in-out infinite;
}
@keyframes led { 50% { opacity: 0.4; } }
.monitor__note { font-size: 0.85rem; color: var(--muted); margin-top: 12px; }

/* ==========================================================
   Dividers, footer
   ========================================================== */
hr.rainbow {
  border: 0;
  height: 22px;
  margin: 0;
  background: var(--bg) radial-gradient(circle, var(--line) 3px, transparent 3.5px) center / 26px 22px repeat-x;
}

.foot {
  position: relative;
  padding: 24px var(--gutter) 64px;
  text-align: center;
  border-top: 3px dashed var(--line);
}
.mobile { width: min(320px, 86vw); margin: 0 auto 4px; }
.mobile__art { width: 100%; height: auto; overflow: visible; }
.mobile__bar { stroke: var(--cocoa); stroke-width: 5; stroke-linecap: round; }
.mobile__item path { stroke: var(--muted); stroke-width: 1.5; }
.mobile__item { transform-box: view-box; animation: sway 4.5s ease-in-out infinite alternate; }
.m1 { transform-origin: 70px 14px; }
.m2 { transform-origin: 160px 14px; animation-delay: -1.5s; }
.m3 { transform-origin: 250px 14px; animation-delay: -3s; }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

.ring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  margin: 8px auto 22px;
  max-width: 640px;
}
.ring__btn {
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--heading);
  font: 600 0.95rem/1 var(--font-display);
  box-shadow: 0 3px 0 var(--line);
}
.ring__btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.ring__name { font: 400 1.35rem/1 var(--font-hand); padding: 8px 6px; }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 176px;
  min-height: 44px;
  padding: 4px 10px;
  border: 2px solid #4a2c3c;
  border-radius: 3px;
  font: 700 0.78rem/1.15 var(--font-display);
  text-decoration: none;
  color: #2d1a28;
  box-shadow: 2px 2px 0 #4a2c3c;
}
.badge--night { background: #2a2045; color: #ffe7a6; border-color: #ffcf6b; box-shadow: 2px 2px 0 #ffcf6b; }
.badge--build { background: #ffe58f; position: relative; overflow: hidden; }
.badge__tape {
  width: 18px; height: 18px; flex: none;
  background: repeating-linear-gradient(45deg, #2d1a28 0 4px, #ffbe1a 4px 8px);
  border-radius: 3px;
}
.badge--sign { background: var(--blk-g); }

.credits { max-width: 640px; margin: 0 auto; font-size: 0.9rem; color: var(--muted); }
.credits p { margin-bottom: 4px; }

/* ==========================================================
   Overlays: squiggles (muted sounds), sparkles
   ========================================================== */
.squiggles { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.sq { position: absolute; width: 70px; height: 44px; overflow: visible; }
.sq path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sq .under { stroke: #fff8f1; stroke-width: 7; }
.sq .over { stroke: var(--berry); stroke-width: 3; }
.sparkles { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .win-stars use,
  .mobile__item,
  .monitor__led { animation: none; }
  .fidget .foot { animation: none; }
  .lb.bonk { animation: none; }
}

/* the big light: the new palette spreads from the switch (settings.js adds .vt-light) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.vt-light::view-transition-new(root) { animation: light-reveal 560ms cubic-bezier(0.77, 0, 0.175, 1); }
@keyframes light-reveal {
  from { clip-path: circle(0 at var(--vx, 90%) var(--vy, 5%)); }
  to { clip-path: circle(var(--vr, 150vmax) at var(--vx, 90%) var(--vy, 5%)); }
}

/* rooms off screen hold still (offscreen.js) */
.is-away,
.is-away * { animation-play-state: paused !important; }