/* One bundled font so every phone shows the same letters (1.7.62). Nunito, SIL OFL 1.1: assets/fonts/OFL.txt */
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* Paper-craft cutouts: thick outlines, flat color, diorama depth, sticker UI */
:root {
  --ink: #1a1520;
  --outline: #1a1520;
  --sky: #7ec8ff;
  --sky2: #b8e0ff;
  --grass: #6bcb77;
  --grass2: #51a85c;
  --stand: #ffe066;
  --stand2: #fcc419;
  --counter: #f4a261;
  --paper: #fff9e6;
  --panel: #2b2d42;
  --sell: #40c057;
  --danger: #fa5252;
  /* Brand orange. --accent is the fill/badge colour; --accent-text is the
     darkened variant for SMALL text on pale grounds — #e8590c only reaches
     3.2:1 on --paper/#fff3bf, under the 4.5:1 AA floor for body-size text.
     See docs/COLOR-GUIDE.md. */
  --accent: #e8590c;
  --accent-text: #bf490a;
  --shadow: 4px 4px 0 var(--outline);
  --font: "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: #e9ecef;
}

body.paper-world {
  padding: 10px 10px 100px;
  overflow-x: hidden;
  background: repeating-linear-gradient(
    -12deg,
    #f1f3f5,
    #f1f3f5 12px,
    #e9ecef 12px,
    #e9ecef 24px
  );
}

/* —— Paper doll —— */
.paper-doll {
  --skin: #ffdbac;
  --shirt: #ffd60a;
  --hair: #4a3728;
  width: 56px;
  height: 72px;
  position: relative;
  filter: drop-shadow(3px 3px 0 rgba(26, 21, 32, 0.35));
  animation: bob 1.2s ease-in-out infinite;
}

.paper-doll.large {
  width: 88px;
  height: 112px;
  /* top room for the tall hats (top hat, kite) so they clear the controls */
  margin: 56px auto 12px;
}

.paper-doll.hd-doll {
  width: 64px;
  height: 96px;
}

.paper-doll.hd-doll.large {
  width: 96px;
  height: 140px;
}

.paper-doll .hd-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.paper-cut {
  position: absolute;
  left: 8%;
  right: 8%;
  background-color: var(--tint);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.paper-cut::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Head silhouettes — same photographed paper stock, different cut, the way a
   real paper-doll set gets several head shapes off one sheet. Each variant is a
   1024×1024 canvas with its content bottom-anchored, so the neck tab keeps
   meeting the body (mask-size: contain fits by canvas aspect, not by content).
   To add a shape: drop assets/doll/head-<id>.png, copy a rule pair below, add
   the id to HEAD_OPTIONS in js/avatars.js. Nothing else needs touching. */
/* Clerk hats — neutral paper cuts from tools/blender-paper-rig.py, tinted the
   same way as every other doll piece. To add a hat: render hat-<id>.png, copy a
   rule pair, add the id + tint to HAT_OPTIONS in js/avatars.js. */
/* Townsfolk hats. Side pieces (bow, flower, leaf, star, button) sit off-centre
   like a clip; shades sit on the face; the scarf wraps the neck under the head. */
.paper-doll .hat {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1em;
  z-index: 3;
  line-height: 1;
}

.paper-doll.large .hat {
  font-size: 1.6em;
  top: -10px;
}

.paper-doll .head {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 46% 46% 42% 42%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.paper-doll.large .head {
  width: 56px;
  height: 56px;
  font-size: 14px;
  border-width: 4px;
}

.paper-doll .body {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 34px;
  background: var(--shirt);
  border: 3px solid var(--outline);
  border-radius: 8px 8px 6px 6px;
  z-index: 1;
}

.paper-doll.large .body {
  width: 62px;
  height: 52px;
  border-width: 4px;
}

.paper-doll .feet {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 8px;
  background: var(--outline);
  border-radius: 3px;
  z-index: 0;
}

.paper-doll .hair {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.paper-doll .hair.hair-none {
  display: none;
}

.paper-doll .hair.hair-short {
  top: 4px;
  width: 38px;
  height: 16px;
  background: var(--hair);
  border: 3px solid var(--outline);
  border-radius: 18px 18px 6px 6px;
}

.paper-doll.large .hair.hair-short {
  width: 58px;
  height: 22px;
  top: 2px;
  border-width: 4px;
}

.paper-doll .hair.hair-bun {
  top: -2px;
  width: 16px;
  height: 16px;
  background: var(--hair);
  border: 3px solid var(--outline);
  border-radius: 50%;
}

.paper-doll.large .hair.hair-bun {
  width: 22px;
  height: 22px;
  top: -6px;
  border-width: 4px;
}

.paper-doll .hair.hair-pigtails {
  top: 14px;
  width: 52px;
  height: 16px;
  background: transparent;
  border: 0;
}

.paper-doll .hair.hair-pigtails::before,
.paper-doll .hair.hair-pigtails::after {
  content: "";
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  background: var(--hair);
  border: 3px solid var(--outline);
  border-radius: 50%;
}

.paper-doll .hair.hair-pigtails::before {
  left: 0;
}

.paper-doll .hair.hair-pigtails::after {
  right: 0;
}

.paper-doll.large .hair.hair-pigtails {
  width: 80px;
  top: 20px;
}

.paper-doll.large .hair.hair-pigtails::before,
.paper-doll.large .hair.hair-pigtails::after {
  width: 18px;
  height: 18px;
  border-width: 4px;
}

.paper-doll.clothes-dress .body {
  height: 40px;
  width: 44px;
  border-radius: 8px 8px 18px 18px;
}

.paper-doll.large.clothes-dress .body {
  height: 60px;
  width: 68px;
}

.paper-doll .apron {
  display: none;
}

.paper-doll.clothes-apron .apron {
  display: block;
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: #fff8e7;
  border: 2px solid var(--outline);
  border-radius: 3px 3px 8px 8px;
}

.paper-doll.large.clothes-apron .apron {
  width: 32px;
  height: 34px;
  border-width: 3px;
}

.paper-doll.npc-sprite {
  width: 82px;
  height: 86px;
}

.npc-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}


/* Authored PNG pests (Chip / Frank / Slurp) */
.pest-doll.pest-sprite {
  width: 82px;
  height: 86px;
  background: transparent;
}

.pest-doll.pest-sprite .pest-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  background: transparent;
}
/* Authored sprites get the same paper surface as the dolls and hats: the
   game's grain multiplied through the sprite's own silhouette. paintPest sets
   --sprite-mask to the sprite url so one rule covers every pose. */
.pest-doll.pest-sprite::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/doll/paper-grain.png") center / 64px repeat;
  -webkit-mask: var(--sprite-mask) center bottom / contain no-repeat;
  mask: var(--sprite-mask) center bottom / contain no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.7;
  pointer-events: none;
}




.pest-doll.pest-slurp.pest-sprite {
  width: 92px;
  height: 78px;
}

.pest-doll.pest-drip.pest-sprite {
  width: 72px;
  height: 90px;
}

.pest-doll.pest-fib.pest-sprite {
  width: 86px;
  height: 86px;
}

/* Chip — paper chimpanzee (ape, no tail) */
.pest-doll.pest-chip {
  --skin: #5c3a1e;
  --shirt: #3d2414;
  --muzzle: #e8c4a8;
}

.pest-doll.pest-chip .ear {
  position: absolute;
  top: 10%;
  width: 30%;
  height: 28%;
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 50%;
  z-index: 1;
}

.pest-doll.pest-chip .ear-l {
  left: -8%;
}

.pest-doll.pest-chip .ear-r {
  right: -8%;
}

.pest-doll.pest-chip .tuft {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 12%;
  background: var(--shirt);
  border: 3px solid var(--outline);
  border-bottom: none;
  border-radius: 60% 60% 0 0;
  z-index: 3;
}

.pest-doll.pest-chip .head {
  top: 8%;
  width: 72%;
  height: 50%;
  border-radius: 50% 50% 42% 42%;
  background: var(--skin);
}

.pest-doll.pest-chip .brow {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 12%;
  background: var(--shirt);
  border: 2px solid var(--outline);
  border-radius: 8px 8px 4px 4px;
  z-index: 3;
}

.pest-doll.pest-chip .head .eyes {
  position: relative;
  z-index: 4;
  margin-top: 10px;
  letter-spacing: 3px;
  font-size: 0.85em;
}

.pest-doll.pest-chip .muzzle {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  width: 78%;
  height: 62%;
  background: var(--muzzle);
  border: 2px solid var(--outline);
  border-radius: 42% 42% 48% 48%;
  z-index: 2;
}

.pest-doll.pest-chip .mouth {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 1em;
  line-height: 1;
}

.pest-doll.pest-chip .body {
  width: 52%;
  height: 32%;
  bottom: 10%;
  border-radius: 36% 36% 22% 22%;
  background: var(--shirt);
}

.pest-doll.pest-chip .arm {
  position: absolute;
  top: 52%;
  width: 12%;
  height: 16%;
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 10px;
  z-index: 0;
}

.pest-doll.pest-chip .arm-l {
  left: 10%;
  transform: rotate(28deg);
}

.pest-doll.pest-chip .arm-r {
  right: 10%;
  transform: rotate(-28deg);
}

.pest-doll.pest-chip .tail {
  position: absolute;
  right: -14%;
  bottom: 22%;
  width: 32%;
  height: 36%;
  border: 4px solid var(--outline);
  border-left: none;
  border-bottom: none;
  border-radius: 0 80% 0 0;
  z-index: 0;
}

.pest-doll.pest-chip .tail::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -6%;
  width: 12px;
  height: 12px;
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 50%;
}

.pest-doll.pest-chip .feet {
  width: 46%;
  height: 9%;
}

/* Hide unused kit parts by default */
.pest-doll .comb,
.pest-doll .beak,
.pest-doll .shell,
.pest-doll .snow {
  display: none;
}

/* Frank — sausage pup, floppy ears, long tail */
.pest-doll.pest-frank {
  --skin: #e0ac69;
  --shirt: #c68642;
  --muzzle: #f1c27d;
}

.pest-doll.pest-frank .ear {
  position: absolute;
  top: 18%;
  width: 22%;
  height: 34%;
  background: var(--shirt);
  border: 3px solid var(--outline);
  border-radius: 50% 50% 40% 40%;
  z-index: 1;
}

.pest-doll.pest-frank .ear-l {
  left: 2%;
  transform: rotate(-24deg);
}

.pest-doll.pest-frank .ear-r {
  right: 2%;
  transform: rotate(24deg);
}

.pest-doll.pest-frank .tuft,
.pest-doll.pest-frank .brow {
  display: none;
}

.pest-doll.pest-frank .head {
  top: 12%;
  width: 58%;
  height: 38%;
  border-radius: 48% 48% 40% 40%;
  background: var(--skin);
}

.pest-doll.pest-frank .muzzle {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: 70%;
  height: 42%;
  background: var(--muzzle);
  border: 2px solid var(--outline);
  border-radius: 40% 40% 50% 50%;
  z-index: 2;
}

.pest-doll.pest-frank .head .eyes {
  position: relative;
  z-index: 3;
  margin-top: 6px;
  letter-spacing: 2px;
}

.pest-doll.pest-frank .mouth {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  z-index: 3;
}

.pest-doll.pest-frank .body {
  width: 78%;
  height: 28%;
  bottom: 16%;
  border-radius: 40px;
  background: var(--shirt);
}

.pest-doll.pest-frank .arm {
  display: none;
}

.pest-doll.pest-frank .tail {
  position: absolute;
  right: -16%;
  bottom: 20%;
  width: 34%;
  height: 38%;
  border: 4px solid var(--outline);
  border-left: none;
  border-bottom: none;
  border-radius: 0 85% 0 0;
  z-index: 0;
}

.pest-doll.pest-frank .tail::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -8%;
  width: 11px;
  height: 11px;
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 50%;
}

.pest-doll.pest-frank .feet {
  width: 70%;
  height: 10%;
}

/* Penny — hen: comb, beak, wing nubs, no arms */
.pest-doll.pest-penny {
  --skin: #fff3bf;
  --shirt: #fa5252;
  --muzzle: #ffe066;
}

.pest-doll.pest-penny .ear,
.pest-doll.pest-penny .tuft,
.pest-doll.pest-penny .brow,
.pest-doll.pest-penny .muzzle,
.pest-doll.pest-penny .tail {
  display: none;
}

.pest-doll.pest-penny .comb {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 16%;
  background: var(--shirt);
  border: 3px solid var(--outline);
  border-radius: 8px 8px 2px 2px;
  z-index: 3;
}

.pest-doll.pest-penny .head {
  top: 10%;
  width: 58%;
  height: 40%;
  border-radius: 50%;
  background: var(--skin);
}

.pest-doll.pest-penny .beak {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #fcc419;
  z-index: 3;
}

.pest-doll.pest-penny .head .eyes {
  margin-top: 8px;
  letter-spacing: 3px;
  z-index: 3;
  position: relative;
}

.pest-doll.pest-penny .mouth {
  display: none;
}

.pest-doll.pest-penny .body {
  width: 62%;
  height: 36%;
  bottom: 10%;
  border-radius: 46% 46% 36% 36%;
  background: var(--skin);
}

.pest-doll.pest-penny .arm {
  position: absolute;
  top: 54%;
  width: 22%;
  height: 16%;
  background: var(--shirt);
  border: 3px solid var(--outline);
  border-radius: 40% 40% 30% 30%;
  z-index: 2;
}

.pest-doll.pest-penny .arm-l {
  left: 4%;
  transform: rotate(-18deg);
}

.pest-doll.pest-penny .arm-r {
  right: 4%;
  transform: rotate(18deg);
}

.pest-doll.pest-penny .feet {
  width: 40%;
  height: 8%;
  background: #fcc419;
}

/* Fib — fox: triangle ears, pointed snout, big tail */
.pest-doll.pest-fib {
  --skin: #ff922b;
  --shirt: #e8590c;
  --muzzle: #ffd8a8;
}

.pest-doll.pest-fib .tuft,
.pest-doll.pest-fib .brow {
  display: none;
}

.pest-doll.pest-fib .ear {
  position: absolute;
  top: 2%;
  width: 0;
  height: 0;
  background: transparent;
  border: none;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid var(--shirt);
  z-index: 3;
}

.pest-doll.pest-fib .ear-l {
  left: 12%;
  transform: rotate(-12deg);
}

.pest-doll.pest-fib .ear-r {
  right: 12%;
  transform: rotate(12deg);
}

.pest-doll.pest-fib .head {
  top: 12%;
  width: 60%;
  height: 40%;
  border-radius: 46% 46% 36% 36%;
  background: var(--skin);
}

.pest-doll.pest-fib .muzzle {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  width: 48%;
  height: 36%;
  background: var(--muzzle);
  border: 2px solid var(--outline);
  border-radius: 30% 30% 50% 50%;
  z-index: 2;
}

.pest-doll.pest-fib .head .eyes {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  letter-spacing: 3px;
}

.pest-doll.pest-fib .mouth {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  z-index: 3;
}

.pest-doll.pest-fib .body {
  width: 54%;
  height: 32%;
  bottom: 12%;
  border-radius: 40% 40% 28% 28%;
  background: var(--shirt);
}

.pest-doll.pest-fib .arm {
  display: none;
}

.pest-doll.pest-fib .tail {
  position: absolute;
  right: -22%;
  bottom: 10%;
  width: 42%;
  height: 48%;
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 60% 40% 50% 40%;
  z-index: 0;
}

.pest-doll.pest-fib .feet {
  width: 50%;
  height: 9%;
}

/* Slurp — snail: shell + eyestalks, no arms */
.pest-doll.pest-slurp {
  --skin: #d0bfff;
  --shirt: #69db7c;
  --muzzle: #e5dbff;
}

.pest-doll.pest-slurp .tuft,
.pest-doll.pest-slurp .brow,
.pest-doll.pest-slurp .muzzle,
.pest-doll.pest-slurp .mouth,
.pest-doll.pest-slurp .arm,
.pest-doll.pest-slurp .tail,
.pest-doll.pest-slurp .feet {
  display: none;
}

.pest-doll.pest-slurp .ear {
  position: absolute;
  top: 2%;
  width: 10%;
  height: 28%;
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 8px;
  z-index: 3;
}

.pest-doll.pest-slurp .ear-l {
  left: 30%;
}

.pest-doll.pest-slurp .ear-r {
  right: 30%;
}

.pest-doll.pest-slurp .ear::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--shirt);
  border: 2px solid var(--outline);
  border-radius: 50%;
}

.pest-doll.pest-slurp .head {
  top: 22%;
  width: 36%;
  height: 28%;
  left: 18%;
  transform: none;
  border-radius: 50%;
  background: var(--skin);
}

.pest-doll.pest-slurp .head .eyes {
  display: none;
}

.pest-doll.pest-slurp .shell {
  display: block;
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 58%;
  height: 58%;
  background: var(--shirt);
  border: 3px solid var(--outline);
  border-radius: 50%;
  z-index: 1;
  box-shadow: inset 6px 6px 0 rgba(26, 21, 32, 0.12);
}

.pest-doll.pest-slurp .body {
  width: 48%;
  height: 18%;
  left: 16%;
  transform: none;
  bottom: 8%;
  border-radius: 20px;
  background: var(--skin);
}

/* Drip — snowman: three balls, stick nubs, carrot */
.pest-doll.pest-drip {
  --skin: #e7f5ff;
  --shirt: #74c0fc;
  --muzzle: #e7f5ff;
}

.pest-doll.pest-drip .ear,
.pest-doll.pest-drip .tuft,
.pest-doll.pest-drip .brow,
.pest-doll.pest-drip .muzzle,
.pest-doll.pest-drip .tail,
.pest-doll.pest-drip .feet {
  display: none;
}

.pest-doll.pest-drip .snow {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--skin);
  border: 3px solid var(--outline);
  border-radius: 50%;
}

.pest-doll.pest-drip .snow-a {
  bottom: 2%;
  width: 70%;
  height: 38%;
  z-index: 0;
}

.pest-doll.pest-drip .snow-b {
  bottom: 28%;
  width: 54%;
  height: 30%;
  z-index: 1;
}

.pest-doll.pest-drip .head {
  top: 4%;
  width: 42%;
  height: 32%;
  background: var(--skin);
  border-radius: 50%;
  z-index: 2;
}

.pest-doll.pest-drip .beak {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #e8590c;
  z-index: 4;
}

.pest-doll.pest-drip .head .eyes {
  margin-top: 6px;
  letter-spacing: 2px;
  position: relative;
  z-index: 4;
}

.pest-doll.pest-drip .mouth {
  display: none;
}

.pest-doll.pest-drip .body {
  display: none;
}

.pest-doll.pest-drip .arm {
  position: absolute;
  top: 48%;
  width: 28%;
  height: 5%;
  background: #8d5524;
  border: 2px solid var(--outline);
  border-radius: 4px;
  z-index: 0;
}

.pest-doll.pest-drip .arm-l {
  left: -4%;
  transform: rotate(-18deg);
}

.pest-doll.pest-drip .arm-r {
  right: -4%;
  transform: rotate(18deg);
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.paper-doll.serve-pop {
  animation: servePop 0.35s ease;
}

/* squash, then hop: a soft body reads at a glance */
@keyframes servePop {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: scale(1.16, 0.82);
  }
  62% {
    transform: translateY(-9px) scale(0.92, 1.12);
  }
  84% {
    transform: scale(1.05, 0.95);
  }
}

/* customers slide in like a card pushed across the table, and out the far side */
.npc-wrap.walk-in {
  animation: walkIn 0.46s ease-out both;
  transform-origin: 50% 100%;
}
.npc-wrap.walk-off {
  animation: walkOff 0.3s ease-in both;
}
@keyframes walkIn {
  0% {
    transform: translateX(-34px);
    opacity: 0;
  }
  58% {
    transform: translateX(2px) scale(1.1, 0.88);
    opacity: 1;
  }
  80% {
    transform: scale(0.96, 1.06);
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
/* every modal card drops onto the table instead of appearing */
.daily-modal:not([hidden]) > :first-child {
  animation: paperDrop 0.26s cubic-bezier(0.2, 0.8, 0.3, 1.1) both;
}
@keyframes paperDrop {
  from {
    transform: translateY(-18px) rotate(1.5deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes walkOff {
  to {
    transform: translateX(40px) rotate(4deg);
    opacity: 0;
  }
}

/* —— Layout —— */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 6px;
  clear: both;
}

.top-bar > div {
  flex: 1;
  min-width: 0;
}

.top-bar h1 {
  margin: 0;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1.15;
}

.tagline {
  margin: 4px 0 0;
  font-weight: 700;
  opacity: 0.85;
  font-size: 0.85rem;
  line-height: 1.25;
  /* Never collide with HUD pills */
  max-width: 100%;
}

.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  max-width: 720px;
  margin: 0 auto 8px;
  position: relative;
  z-index: 30;
}

.hud-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.hud-vol {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px 10px 4px 8px;
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.hud-vol-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.hud-vol input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 28px;
  margin: 0;
  background: transparent;
  accent-color: #fcc419;
  touch-action: manipulation;
}

.hud-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  background: #fcc419;
  border: 3px solid var(--outline);
  border-radius: 50%;
  box-shadow: 1px 1px 0 var(--outline);
}

.hud-vol input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #dee2e6;
  border: 2px solid var(--outline);
  border-radius: 999px;
}

.hud-vol input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #fcc419;
  border: 3px solid var(--outline);
  border-radius: 50%;
  box-shadow: 1px 1px 0 var(--outline);
}

.hud-vol input[type="range"]::-moz-range-track {
  height: 6px;
  background: #dee2e6;
  border: 2px solid var(--outline);
  border-radius: 999px;
}

/* Big always-visible how-to strip */
.mission-bar {
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 0 4px;
  position: relative;
  z-index: 3;
}

.mission-bar[hidden] {
  display: none !important;
}

.mission-inner {
  background: #fff3bf;
  border: 4px solid var(--outline);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  text-align: center;
}

.mission-step {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.mission-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
}

.mission-body {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.pill {
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.pill.cash {
  background: #69db7c;
}

.pill.shift {
  background: #d0ebff;
  font-size: 0.85rem;
}

.pill.streak {
  background: #ffd8a8;
}

/* J1 — streak escalation: louder pill past tier-2 (5+) and tier-3 (10+). */
.pill.streak.tier-2 {
  background: #ff9f43;
  color: #fff;
  border-color: #d9720b;
}

.pill.streak.tier-3 {
  background: #ff6b1a;
  color: #fff;
  border-color: #b3450a;
  animation: streakBlaze 0.7s ease-in-out 3; /* three lifts, then rest — paper, not a glow */
}

@keyframes streakBlaze {
  0%, 100% { transform: none; }
  50% { transform: translateY(-3px) rotate(-1.5deg); }
}

body.shift-lunch .pill.shift {
  background: #ffe8a3;
}

body.shift-evening .pill.shift {
  background: #d0bfff;
}

/* Session sky tints — color only, no extra motion */
body.shift-lunch .stage {
  background: #ffa94d;
}

body.shift-lunch .sky {
  background: linear-gradient(180deg, #ffd43b, #ffa94d);
}

body.shift-evening .stage {
  background: #364fc7;
}

body.shift-evening .sky {
  background: linear-gradient(180deg, #845ef7, #364fc7);
}

body.shift-evening .ground {
  background: linear-gradient(180deg, #37b24d, #1b4332);
}

/* —— Stage diorama —— */
.stage-wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto 14px;
}

.stage {
  position: relative;
  max-width: 720px;
  height: 280px;
  margin: 0;
  border: 4px solid var(--outline);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--sky);
}

.sky {
  position: absolute;
  inset: 0 0 35% 0;
  background: linear-gradient(180deg, var(--sky2), var(--sky));
}

.sky::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 28px;
  background: #fff;
  border: 3px solid var(--outline);
  border-radius: 20px;
  top: 18px;
  left: 12%;
  box-shadow: 22px 8px 0 -2px #fff, 22px 8px 0 1px var(--outline);
  opacity: 0.9;
}

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, var(--grass), var(--grass2));
  border-top: 4px solid var(--outline);
}

/*
  Booth add-on slots (one occupant each — never stack two props in one box):
  roof-left   balloons
  awning      string lights (behind menu)
  menu-row    MENU + optional kind badge (flex, badge collapses when hidden)
  roof-right  neon banana (awning)
  ground-right flower box (in front of stand, right)
  counter     shelf (grows in place) | tip jar (flex) | buddy+clerk (flex)
*/
.booth {
  position: absolute;
  left: 8%;
  bottom: 16%;
  width: min(58%, 300px);
  z-index: 2;
}

.booth-slot {
  pointer-events: none;
}

.slot-roof-left {
  position: absolute;
  left: 2px;
  top: -54px;
  width: 50px;
  height: 56px;
  z-index: 4;
}

.slot-roof-right {
  position: absolute;
  right: 4px;
  top: -42px;
  width: 40px;
  height: 48px;
  z-index: 4;
}

.slot-ground-right {
  position: absolute;
  left: 100%;
  right: auto;
  bottom: 2px;
  width: 64px;
  height: 58px;
  margin-left: 8px;
  z-index: 3;
}

.booth-balloons,
.booth-flowers,
.booth-sign {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.booth-balloons {
  object-position: bottom left;
  animation: bob 1.6s ease-in-out infinite;
  filter: drop-shadow(3px 3px 0 rgba(26, 21, 32, 0.3));
}

.booth-flowers {
  object-position: bottom right;
  filter: drop-shadow(3px 3px 0 rgba(26, 21, 32, 0.3));
}

.booth-sign {
  object-position: top right;
  filter: drop-shadow(2px 2px 0 rgba(26, 21, 32, 0.28));
}

.booth-lights {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 4px;
  width: auto;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.booth-lights::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 1px;
  height: 10px;
  border-bottom: 3px solid #3d2414;
  border-radius: 50%;
  transform: scaleY(0.42);
  z-index: 0;
}

.booth-lights .bulb {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 12px;
  height: 14px;
  background: #ffe066;
  border: 2.5px solid var(--outline);
  border-radius: 50% 50% 46% 46%;
  box-shadow: 1px 2px 0 var(--outline);
  animation: bulbTwinkle 1.6s ease-in-out infinite;
}

.booth-lights .bulb::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  background: var(--outline);
  border-radius: 1px;
}

.booth-lights .bulb:nth-child(3n + 2) {
  background: #fff3bf;
  animation-delay: 0.25s;
}

.booth-lights .bulb:nth-child(3n) {
  background: #fd7e14;
  animation-delay: 0.5s;
}

.booth-lights .bulb:nth-child(odd) {
  transform: translateY(1px);
}

.booth-lights .bulb:nth-child(even) {
  transform: translateY(3px);
}

@keyframes bulbTwinkle {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.22);
  }
}

.slot-ghost {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(26, 21, 32, 0.4);
  border-radius: 8px;
  background: rgba(255, 249, 230, 0.45);
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.slot-ghost[hidden] {
  display: none !important;
}

.slot-ghost-lights {
  left: 8%;
  right: 8%;
  top: 4px;
  height: 14px;
  inset: auto;
  width: auto;
  border-radius: 999px;
  z-index: 2;
}

.slot-ghost-kind {
  position: relative;
  inset: auto;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0;
}

.slot-ghost-tipjar {
  position: relative;
  inset: auto;
  flex: 0 0 28px;
  width: 28px;
  height: 34px;
  align-self: flex-end;
  margin-bottom: 2px;
  font-size: 0.75rem;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 3;
}

.booth-kind {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  position: relative;
  background: #ffe066;
  border: 3px solid var(--outline);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--outline);
  transform: rotate(-8deg);
  pointer-events: none;
}

.booth-kind::after {
  content: "♥";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #fa5252;
  font-weight: 900;
}

.booth-tipjar {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: auto;
  align-self: flex-end;
  margin-bottom: 2px;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(26, 21, 32, 0.3));
}

.booth-lights[hidden],
.booth-balloons[hidden],
.booth-flowers[hidden],
.booth-sign[hidden],
.booth-tipjar[hidden],
.booth-kind[hidden] {
  display: none !important;
}

body.shift-evening .booth-lights .bulb {
  box-shadow: 0 0 7px 2px rgba(255, 224, 102, 0.9), 1px 2px 0 var(--outline);
}

.awning {
  height: 22px;
  border: 3px solid var(--outline);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background-image: url("../assets/doll/paper-grain.png"),
    repeating-linear-gradient(90deg, #ff6b6b 0 22px, #fff9db 22px 44px);
  background-blend-mode: multiply, normal;
  background-size: 120px 120px, auto;
  position: relative;
  z-index: 1;
}

.menu-board {
  position: relative;
  z-index: 3;
  flex: 1;
  min-width: 0;
  background: #2b2d42;
  color: #ffe066;
  border: 3px solid var(--outline);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  min-height: 28px;
  max-height: 36px;
}

.menu-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  margin-right: 2px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.menu-item {
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}

.menu-item.is-featured {
  background: #ffe066;
  color: var(--ink);
  border-radius: 6px;
  padding: 1px 3px;
  box-shadow: inset 0 0 0 2px #e8590c;
}

.menu-board.tappable {
  cursor: pointer;
  touch-action: manipulation;
}

.menu-board.tappable:focus-visible {
  outline: 3px solid #ffe066;
  outline-offset: 2px;
}

/* can't afford yet: plain paper, dashed cut, the gap spelled out in the row */
.shop-row.cant-afford {
  background: var(--paper);
  border-style: dashed;
  opacity: 0.85;
}

.shop-row.featured-row {
  background: #fff3bf;
}

.cook-btn.featured {
  outline: 3px solid #fcc419;
}

.counter {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  background-image: url("../assets/doll/paper-grain.png"),
    linear-gradient(180deg, var(--stand), var(--stand2));
  background-blend-mode: multiply, normal;
  background-size: 180px 180px, auto;
  border: 3px solid var(--outline);
  border-radius: 0 0 12px 12px;
  padding: 10px 12px 8px;
  min-height: 100px;
}

.shelf {
  flex: 1;
  background: var(--counter);
  border: 3px solid var(--outline);
  border-radius: 8px;
  min-height: 52px;
  padding: 4px 6px;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  align-content: center;
}

.shelf.shelf-upgraded {
  min-height: 66px;
  background: linear-gradient(180deg, #e76f51 0 9px, var(--counter) 9px);
  box-shadow: inset 0 9px 0 #c2410c;
}

.clerk-slot {
  text-align: center;
  flex-shrink: 0;
}

.clerk-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.buddy-slot {
  flex-shrink: 0;
}

.buddy-slot[hidden] {
  display: none !important;
}

.paper-doll.buddy-doll {
  width: 36px;
  height: 48px;
}

.paper-doll.buddy-doll.npc-sprite {
  width: 48px;
  height: 56px;
}

.paper-doll.buddy-doll .head {
  width: 22px;
  height: 22px;
  font-size: 8px;
  border-width: 2px;
}

.paper-doll.buddy-doll .body {
  width: 24px;
  height: 20px;
  border-width: 2px;
}

.paper-doll.buddy-doll .feet {
  width: 18px;
  height: 6px;
}

.paper-doll.buddy-doll .hat {
  font-size: 0.85em;
  top: -8px;
}

.honor-star {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 0.85rem;
  z-index: 4;
  line-height: 1;
  filter: drop-shadow(1px 1px 0 #fff);
}

.npc-label.honored {
  background: #ffe066;
  border-color: #e8590c;
}

.clerk-name {
  font-size: 0.7rem;
  font-weight: 900;
  margin-top: 2px;
}

.customer-lane {
  position: absolute;
  right: 4%;
  bottom: 10%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 30%;
  pointer-events: none;
}

.npc-slot {
  min-height: 80px;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.npc-slot.waiting {
  opacity: 0.75;
  transform: scale(0.85);
}

#waitingSlot[hidden] {
  display: none;
}

.npc-label {
  font-size: 0.65rem;
  font-weight: 900;
  background: var(--paper);
  border: 2px solid var(--outline);
  border-radius: 6px;
  padding: 1px 6px;
  margin-top: 2px;
}

.order-bubble {
  background: #fff;
  border: 3px solid var(--outline);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 2px;
  box-shadow: var(--shadow);
}

.order-panel {
  position: static;
  z-index: 4;
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 14px;
  padding: 12px 14px;
  width: auto;
  max-width: 720px;
  margin: 10px auto 0;
  box-shadow: var(--shadow);
  text-align: center;
}

.order-panel[hidden] {
  display: none !important;
}

.order-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  margin: 0 0 6px;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border: 3px solid var(--outline);
  border-radius: 50%;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--outline);
  flex: 0 0 auto;
}

.step-badge.step-1 {
  background: #fcc419;
  color: var(--ink);
}

.step-badge.step-2 {
  background: var(--sell);
  color: #fff;
}

.step-badge.step-3 {
  background: #fff;
  color: var(--ink);
}

.order-emoji {
  font-size: 2rem;
  line-height: 1.2;
}

.order-label {
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.next-chip {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 8px;
  background: #fff3bf;
  border: 2px solid var(--outline);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
}

.next-chip[hidden] {
  display: none !important;
}

.cook-btn.cook-need {
  outline: 4px solid #fa5252;
  outline-offset: 2px;
  animation: sharePulse 0.9s ease-in-out infinite;
}

.patience-track {
  height: 10px;
  background: #dee2e6;
  border: 2px solid var(--outline);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.patience-bar {
  height: 100%;
  width: 100%;
  background: #51cf66;
  transition: width 0.1s linear, background 0.2s;
}

.serve-btn {
  width: 100%;
  background: var(--sell) !important;
  color: #fff !important;
}

.serve-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.serve-row.single {
  grid-template-columns: 1fr;
}

.serve-row.two {
  grid-template-columns: 1fr 1fr;
}

.serve-choice {
  width: 100%;
  min-height: 48px;
  font-size: 0.92rem;
  padding: 10px 8px;
  background: #fff9e6;
  color: var(--ink);
  line-height: 1.2;
}

.serve-choice.match {
  background: var(--sell) !important;
  color: var(--ink) !important; /* white on --sell is 2.4:1; ink is ~7.6:1 */
}

.serve-choice.need {
  opacity: 0.72;
}

.serve-btn.monkey-trap,
.serve-btn.pest-trap,
.serve-choice.pest-trap {
  background: #ffa94d !important;
  color: var(--ink) !important;
}

.shoo-btn {
  width: 100%;
  margin-top: 8px;
  background: #69db7c !important;
  color: var(--ink) !important;
}

.shoo-btn.shoo-pulse {
  outline: 4px solid #2f9e44;
  outline-offset: 3px;
  animation: sharePulse 0.9s ease-in-out infinite;
}

.npc-label.monkey,
.npc-label.pest {
  background: #ffe8cc;
  border-color: #e8590c;
}

/* —— Prep / dock —— */
.prep-panel {
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 12px;
}

.prep-panel h2,
.prep-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 1rem;
}

.paper-card {
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.crate-field {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.crate {
  appearance: none;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: #fcc419;
  font-weight: 900;
  padding: 10px 6px;
  cursor: pointer;
  box-shadow: var(--shadow);
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ink);
}

.crate:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--outline);
}

.crate.empty {
  opacity: 0.4;
  filter: grayscale(0.5);
}

.cook-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cook-btn {
  appearance: none;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: #fff;
  font-weight: 800;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
  touch-action: manipulation;
}

.cook-btn:disabled {
  opacity: 0.45;
}

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(26, 21, 32, 0.12));
  z-index: 20;
}

.ticket-btn {
  appearance: none;
  border: 3px solid var(--outline);
  border-radius: 14px;
  font-weight: 900;
  font-size: 1.05rem;
  padding: 12px 22px;
  cursor: pointer;
  background: #ffe066;
  color: var(--ink);
  box-shadow: var(--shadow);
  touch-action: manipulation;
}

.ticket-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--outline);
}

.shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
}

.shop-btn .step-badge {
  width: 1.55em;
  height: 1.55em;
  font-size: 0.9rem;
}

.icon-btn:focus-visible {
  outline: 4px solid #fa5252;
  outline-offset: 2px;
}

.icon-btn {
  appearance: none;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: var(--paper);
  font-weight: 900;
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--shadow);
  touch-action: manipulation;
}

.pause-card .ticket-btn,
.pause-card .shop-row {
  width: 100%;
  margin-top: 8px;
}

#standPicker.daily-modal {
  z-index: 110;
}

#standPicker .stand-picker-card {
  width: min(100%, 820px);
  max-height: min(92vh, 680px);
  overflow: auto;
}

.stand-list {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  margin: 12px 0;
}

.stand-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 10px;
  background: #fff;
  border: 3px solid var(--outline);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.stand-card.current {
  background: #fff3bf;
}

.stand-card.empty {
  opacity: 0.92;
}

.stand-preview {
  min-height: 64px;
}

.stand-preview.paper-doll {
  width: 48px;
  height: 62px;
  margin: 0 auto;
}

.stand-slot {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.stand-name {
  margin: 0;
  font-weight: 900;
  font-size: 0.95rem;
}

.stand-meta,
.stand-specials {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.stand-actions {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stand-actions .ticket-btn,
.stand-actions .tool-chip {
  width: 100%;
  max-width: none;
  min-height: 44px;
}

.toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--panel);
  color: #fff;
  border: 3px solid var(--outline);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 800;
  max-width: min(92vw, 400px);
  text-align: center;
  box-shadow: var(--shadow);
}

/* Shop */
.shop-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(26, 21, 32, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}

.shop-panel[hidden] {
  display: none !important;
}

.shop-card {
  width: min(100%, 400px);
  max-height: min(85vh, 580px);
  overflow: auto;
  padding: 14px;
  color: var(--ink);
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-card h3 {
  margin: 14px 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.shop-row {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  padding: 12px;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: #ffe066;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  color: var(--ink);
}

.shop-row:disabled {
  background: #ced4da;
  cursor: default;
  box-shadow: none;
}

.shop-row-detail {
  display: block;
  margin-top: 4px;
  font-size: 0.85em;
  font-weight: 600;
  opacity: 0.8;
}

.footer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  max-width: 720px;
  margin: 16px auto 12px;
  padding: 0 8px 8px;
}

.tool-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 auto;
  min-width: 108px;
  max-width: 160px;
  min-height: 44px;
  padding: 10px 12px;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.15;
  box-shadow: 2px 2px 0 var(--outline);
  cursor: pointer;
  touch-action: manipulation;
}

.tool-chip:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--outline);
}

.tool-chip-quiet {
  background: #f1f3f5;
  font-weight: 700;
  opacity: 0.85;
}

#btnHowTo.tool-chip {
  background: #fff9e6;
}

.text-btn {
  appearance: none;
  border: none;
  background: transparent;
  min-height: 44px;
  padding: 12px;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.7;
}

/* Avatar gate */
.share-btn {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
  touch-action: manipulation;
}

.share-btn[hidden] {
  display: none !important;
}

.share-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--outline);
}

/* Softlock attention — must NOT use .coach-pulse (coach strips that every tick) */
.share-btn.share-pulse {
  outline: 4px solid #fa5252;
  outline-offset: 3px;
  background: #fff3bf;
  animation: sharePulse 0.9s ease-in-out infinite;
}

@keyframes sharePulse {
  0%,
  100% {
    outline-color: #fa5252;
  }
  50% {
    outline-color: #ffe066;
  }
}

.crate.need-pulse {
  outline: 4px solid #fa5252;
  outline-offset: 3px;
  animation: sharePulse 0.9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .share-btn.share-pulse,
  .crate.need-pulse,
  .cook-btn.cook-need,
  .shoo-btn.shoo-pulse,
  .coach-pulse {
    animation: none;
    outline: 4px solid #fa5252;
  }
  .shoo-btn.shoo-pulse {
    outline-color: #2f9e44;
  }
  .paper-doll,
  .daily-modal:not([hidden]) > :first-child,
  .npc-wrap.walk-in,
  .npc-wrap.walk-off,
  .pill.streak.tier-3,
  .decor-float,
  .booth-balloons,
  .stage.monkey-chaos,
  .crate.monkey-chaos,
  .counter.pest-chaos-frank,
  .counter.pest-chaos-slurp,
  .pest-doll.pest-chaos-penny,
  .pest-doll.pest-chaos-fib,
  .pest-doll.pest-chaos-slurp,
  .pest-doll.pest-chaos-drip,
  .shelf.pest-chaos-fib,
  .booth-lights .bulb {
    animation: none;
  }
}

@media (max-width: 560px) {
  body.paper-world {
    padding: 6px 8px calc(132px + env(safe-area-inset-bottom, 0px));
  }
  .top-bar {
    display: none;
  }
  .hud {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    overflow-x: visible;
  }
  .pill {
    padding: 4px 8px;
    font-size: 0.72rem;
    flex: 0 0 auto;
  }
  .pill.stock,
  .pill.title-pill {
    display: none;
  }
  .pill.shift {
    display: none;
  }
  .hud-cluster {
    flex: 1 0 100%;
    justify-content: center;
    order: 10;
    gap: 6px;
  }
  .hud-pause,
  .hud-mute {
    padding: 4px 8px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
  }
  .hud-vol {
    flex: 1 1 auto;
    max-width: 220px;
    min-height: 44px;
  }
  .hud-vol input[type="range"] {
    width: 100%;
    min-width: 88px;
  }
  .stage {
    height: 220px;
  }
  /* Booth stays left so the line has the right third */
  .booth {
    left: 4%;
    transform: none;
    width: 56%;
    bottom: 12%;
  }
  .counter {
    min-height: 84px;
    padding: 6px 8px 6px;
  }
  .clerk-title {
    display: none;
  }
  .paper-doll {
    width: 44px;
    height: 56px;
  }
  .pest-doll.pest-sprite {
    width: 64px;
    height: 68px;
  }
  .pest-doll.pest-slurp.pest-sprite {
    width: 72px;
    height: 58px;
  }
  .slot-roof-left {
    top: -40px;
    width: 40px;
    height: 42px;
  }
  .slot-roof-right {
    width: 32px;
    height: 38px;
    top: -34px;
    right: 2px;
  }
  .slot-ground-right {
    width: 48px;
    height: 44px;
    left: 100%;
    right: auto;
    margin-left: 4px;
    bottom: 0;
  }
  .booth-lights {
    height: 22px;
    top: 3px;
  }
  .booth-lights .bulb {
    width: 9px;
    height: 11px;
    border-width: 2px;
  }
  .booth-lights .bulb::before {
    top: -5px;
    height: 5px;
  }
  .footer-tools {
    gap: 8px;
    margin-top: 12px;
  }
  .tool-chip {
    min-width: calc(50% - 8px);
    max-width: none;
    font-size: 0.84rem;
  }
  .pest-doll.pest-drip.pest-sprite {
    width: 56px;
    height: 70px;
  }
  .pest-doll.pest-fib.pest-sprite {
    width: 66px;
    height: 68px;
  }
  .booth-tipjar {
    flex-basis: 22px;
    width: 22px;
  }
  .booth-kind {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }
  .booth-kind::after {
    font-size: 10px;
  }
  .paper-doll .head {
    width: 28px;
    height: 28px;
    font-size: 8px;
  }
  .paper-doll .body {
    width: 30px;
    height: 24px;
  }
  .customer-lane {
    flex-direction: column-reverse;
    align-items: center;
    right: 8px;
    bottom: 10%;
    left: auto;
    gap: 0;
    width: 30%;
  }
  .npc-slot {
    min-width: 0;
    min-height: 58px;
    max-width: 100%;
  }
  .npc-slot.waiting {
    display: none;
  }
  .order-bubble {
    width: 28px;
    height: 28px;
    font-size: 1rem;
    margin-bottom: 0;
  }
  .order-panel {
    position: static;
    width: auto;
    margin: 8px 0 0;
    padding: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "title title"
      "emoji meta"
      "next next"
      "bar bar"
      "serve serve"
      "shoo shoo";
    gap: 6px 10px;
    text-align: left;
  }
  .order-title {
    grid-area: title;
    display: flex;
    justify-content: flex-start;
    margin: 0 0 2px;
    font-size: 0.88rem;
  }
  .step-badge {
    width: 1.55em;
    height: 1.55em;
    font-size: 0.82rem;
  }
  .order-emoji {
    grid-area: emoji;
    font-size: 1.55rem;
    line-height: 1;
  }
  .order-label {
    grid-area: meta;
    margin: 0;
    align-self: center;
    font-size: 0.82rem;
  }
  .next-chip {
    grid-area: next;
    margin: 0;
    justify-self: start;
  }
  .patience-track {
    grid-area: bar;
    margin: 0 0 2px;
  }
  .serve-row {
    grid-area: serve;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .serve-row.single {
    grid-template-columns: 1fr;
  }
  .serve-choice {
    min-height: 44px;
    font-size: 0.82rem;
    padding: 8px 6px;
  }
  .shoo-btn {
    grid-area: shoo;
    margin-top: 0;
  }
  .sticker-bar {
    margin: 0 0 4px;
    gap: 3px;
  }
  .sticker-kicker {
    display: none;
  }
  .sticker-chip {
    font-size: 0.8rem;
    padding: 0 4px;
    box-shadow: 1px 1px 0 var(--outline);
  }
  .toast {
    /* over the sky: clear of the HUD, the coach card and the GRAB crates */
    top: calc(206px + env(safe-area-inset-top, 0px));
    font-size: 0.85rem;
    padding: 8px 12px;
    z-index: 25;
  }
  .stage,
  .order-panel,
  .prep-panel,
  .hud,
  .sticker-bar {
    max-width: 100%;
  }
  .crate-field {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .crate {
    padding: 8px 2px;
    font-size: 0.72rem;
  }
  .prep-panel {
    margin-bottom: 8px;
    padding-bottom: 18px;
  }
  .share-btn {
    margin-top: 10px;
    margin-bottom: 4px;
  }
  .dock {
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .shop-btn {
    min-width: 132px;
    padding: 10px 18px;
    font-size: 1rem;
  }
  .mission-bar {
    margin-bottom: 6px;
  }
  .mission-inner {
    padding: 4px 8px;
    border-width: 3px;
  }
  .mission-step {
    display: none;
  }
  .mission-title {
    font-size: 0.9rem;
    margin: 0 0 2px;
  }
  .mission-body {
    display: block;
    font-size: 0.78rem;
    line-height: 1.25;
  }
  .serve-row:not(.single):not(.two) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #standPicker .stand-picker-card {
    padding: 14px 10px;
  }
  .stand-list {
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .stand-card {
    flex: 1 0 28%;
    min-width: 104px;
    scroll-snap-align: start;
    padding: 10px 6px;
  }
  .stand-name {
    font-size: 0.8rem;
  }
  .stand-meta,
  .stand-specials {
    font-size: 0.7rem;
  }
  .stand-actions .ticket-btn,
  .stand-actions .tool-chip {
    min-height: 44px;
    font-size: 0.85rem;
  }
}

.cook-btn {
  white-space: normal;
  max-width: 100%;
  line-height: 1.25;
}

.avatar-gate {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(126, 200, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}

.avatar-gate[hidden] {
  display: none !important;
}

.gate-card {
  width: min(100%, 420px);
  padding: 18px;
  text-align: center;
}

.gate-card h1 {
  margin: 0 0 6px;
  font-size: 1.35rem;
}

.gate-sub {
  margin: 0 0 14px;
  font-weight: 600;
  opacity: 0.8;
}

.preset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.preset-btn {
  appearance: none;
  border: 3px solid var(--outline);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  font-weight: 800;
}

.preset-btn .paper-doll {
  margin: 0 auto 6px;
}

.creator {
  margin-top: 14px;
  text-align: left;
}

.creator summary {
  font-weight: 900;
  cursor: pointer;
  padding: 12px 0;
}

.creator-grid {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.creator-grid label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

.creator-grid input,
.creator-grid select {
  font: inherit;
  border: 2px solid var(--outline);
  border-radius: 8px;
  padding: 4px 8px;
  min-height: 44px; /* kid tap floor */
}

#btnCreateAvatar {
  width: 100%;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .stage {
    height: 320px;
  }

  .shop-panel {
    align-items: center;
  }

  .hud-vol input[type="range"] {
    width: 128px;
  }

  .tool-chip {
    min-width: 124px;
    min-height: 48px;
    font-size: 0.92rem;
  }
}

/* ——— Intro: title, cards, cinematic reel ——— */
.intro-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #1a1520;
}

.intro-root[hidden] {
  display: none !important;
}

.intro-root.intro-fade-out {
  animation: introFadeOut 0.45s ease forwards;
}

@keyframes introFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.intro-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.intro-title-screen {
  overflow: hidden;
}

.intro-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  animation: kenBurns 12s ease-in-out infinite alternate;
  filter: saturate(1.05);
}

.intro-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 21, 32, 0.25) 0%,
    rgba(26, 21, 32, 0.55) 45%,
    rgba(26, 21, 32, 0.82) 100%
  );
}

.intro-title-stack {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 28rem;
  padding: 12px;
}

.intro-eyebrow {
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  opacity: 0.85;
}

.intro-logo {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.05;
  color: #ffe066;
  text-shadow: 4px 4px 0 #1a1520, -1px -1px 0 #1a1520, 3px 3px 0 #fa5252;
  animation: logoPop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes logoPop {
  from {
    transform: scale(0.6) rotate(-4deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.intro-tag {
  margin: 12px 0 22px;
  font-weight: 700;
  font-size: 1.05rem;
  text-shadow: 2px 2px 0 #1a1520;
}

.intro-cta {
  min-width: 160px;
  font-size: 1.2rem;
  animation: ctaPulse 1.6s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

.intro-skip-link {
  appearance: none;
  border: none;
  background: transparent;
  min-height: 44px;
  padding: 12px;
  color: #fff;
  opacity: 0.75;
  font-weight: 700;
  text-decoration: underline;
  margin-top: 16px;
  cursor: pointer;
  font-size: 0.9rem;
}

.intro-skip-float {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 3;
}

/* Story cards */
.intro-card-screen {
  background: linear-gradient(160deg, #7ec8ff 0%, #ffe066 100%);
}

.intro-card {
  width: min(100%, 420px);
  overflow: hidden;
  padding: 0;
  animation: cardIn 0.4s ease both;
}

@keyframes cardIn {
  from {
    transform: translateY(24px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.intro-card-art {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--outline);
}

.intro-card-body {
  padding: 16px 18px 18px;
  text-align: left;
}

.intro-card-step {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.intro-card-body h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.intro-card-body p {
  margin: 0 0 16px;
  line-height: 1.4;
  font-weight: 600;
}

.intro-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.intro-card-actions .text-btn:disabled {
  opacity: 0.3;
  cursor: default;
  text-decoration: none;
}

/* Cinematic reel */
.intro-reel-screen {
  background: #0d0b12;
  padding: 12px;
}

.intro-reel-frame {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 16 / 9;
  border: 4px solid #ffe066;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 6px 6px 0 #1a1520, 0 0 0 3px #1a1520;
  background: #000;
}

.intro-reel-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.intro-reel-img.ken-burns {
  animation: kenBurnsShot 3s ease-out forwards;
}

@keyframes kenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@keyframes kenBurnsShot {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

.intro-reel-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 28px;
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  text-align: center;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: clamp(0.9rem, 3vw, 1.1rem);
}

.intro-reel-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
}

.intro-reel-bar > div {
  height: 100%;
  width: 0;
  background: #ffe066;
}

.intro-skip-reel {
  margin-top: 16px;
  background: #fff !important;
}

.game-shell[hidden] {
  display: none !important;
}



/* FX particles */
.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  overflow: hidden;
}

.fx-particle {
  position: fixed;
  font-size: 1.1rem;
  animation: fxFly ease-out forwards;
  z-index: 81;
}

@keyframes fxFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.4);
    opacity: 0;
  }
}

.fx-float {
  position: fixed;
  max-width: calc(100vw - 24px);
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  color: #2f9e44;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 #1a1520;
  animation: fxFloat 0.9s ease-out forwards;
  z-index: 82;
  pointer-events: none;
}

@keyframes fxFloat {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-48px);
    opacity: 0;
  }
}

/* Coach */
.coach-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
}

.coach-root[hidden] {
  display: none !important;
}

.coach-bubble {
  position: fixed;
  pointer-events: auto;
  max-width: min(92vw, 320px);
  width: max-content;
  min-width: 200px;
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  z-index: 56;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
}

.coach-bubble p {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

.coach-dismiss {
  appearance: none;
  border: 2px solid var(--outline);
  border-radius: 10px;
  background: #69db7c;
  font-weight: 900;
  padding: 10px 18px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  min-height: 44px;
  width: 100%;
}

.coach-bubble.coach-min {
  display: none;
}

.coach-pulse {
  outline: 4px solid #fa5252 !important;
  outline-offset: 3px;
  animation: coachPulse 0.9s ease-in-out infinite;
  z-index: 5;
  position: relative;
}

@keyframes coachPulse {
  0%,
  100% {
    outline-color: #fa5252;
  }
  50% {
    outline-color: #ffe066;
  }
}

/* Stock mismatch banner */
.need-banner {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  background: #fff3bf;
  border: 3px solid var(--outline);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 900;
  box-shadow: var(--shadow);
  max-width: min(92vw, 360px);
  text-align: center;
}

.need-banner[hidden] {
  display: none !important;
}

.shelf.need-flash {
  animation: needFlash 0.5s ease 3;
}

.stage.monkey-chaos,
.crate.monkey-chaos {
  animation: monkeyChaos 0.45s ease-in-out 2;
}

.counter.pest-chaos-frank {
  animation: frankGulp 0.4s ease-in-out 2;
}

.pest-doll.pest-chaos-penny {
  animation: pennyFlap 0.35s ease-in-out 2;
}

.pest-doll.pest-chaos-fib {
  animation: fibDart 0.4s ease-in-out 1;
}

.shelf.pest-chaos-fib {
  animation: fibShelfWobble 0.4s ease-in-out 1;
}

.pest-doll.pest-chaos-slurp {
  animation: slurpSquash 0.7s ease-in-out 1;
}

.counter.pest-chaos-slurp {
  animation: slurpCounter 0.7s ease-in-out 1;
}

.pest-doll.pest-chaos-drip {
  animation: dripMeltPose 0.8s ease-in 1;
}

@keyframes monkeyChaos {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px) rotate(-0.6deg);
  }
  75% {
    transform: translateX(2px) rotate(0.6deg);
  }
}

@keyframes frankGulp {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  40% {
    transform: translateY(5px) scaleY(0.94);
  }
  70% {
    transform: translateY(-3px) scaleY(1.02);
  }
}

@keyframes pennyFlap {
  0%,
  100% {
    transform: rotate(0) translateY(0);
  }
  25% {
    transform: rotate(-14deg) translateY(-8px);
  }
  50% {
    transform: rotate(12deg) translateY(-3px);
  }
  75% {
    transform: rotate(-10deg) translateY(-7px);
  }
}

@keyframes fibDart {
  0% {
    transform: translateX(0) rotate(0);
  }
  28% {
    transform: translateX(-16px) rotate(-8deg);
  }
  72% {
    transform: translateX(26px) rotate(6deg);
  }
  100% {
    transform: translateX(6px) rotate(0);
  }
}

@keyframes fibShelfWobble {
  0%,
  100% {
    transform: rotate(0) translateX(0);
  }
  30% {
    transform: rotate(-4deg) translateX(-3px);
  }
  70% {
    transform: rotate(4deg) translateX(3px);
  }
}

@keyframes slurpSquash {
  0%,
  100% {
    transform: scaleY(1) scaleX(1);
  }
  40% {
    transform: scaleY(0.72) scaleX(1.14);
  }
  70% {
    transform: scaleY(1.08) scaleX(0.96);
  }
}

@keyframes slurpCounter {
  0%,
  100% {
    filter: none;
  }
  45% {
    filter: hue-rotate(40deg) saturate(1.2);
  }
}

@keyframes dripMeltPose {
  0% {
    transform: scale(1) translateY(0);
  }
  70% {
    transform: scaleY(0.55) scaleX(1.22) translateY(8px);
  }
  100% {
    transform: scaleY(0.7) scaleX(1.1) translateY(4px);
  }
}

@keyframes needFlash {
  0%,
  100% {
    background: var(--counter);
  }
  50% {
    background: #ff8787;
  }
}

.serve-btn:disabled {
  opacity: 0.55;
  filter: grayscale(0.3);
}

.npc-label.regular {
  background: #ffe066;
  border-color: #e8590c;
}

.pill.title-pill {
  background: #fff3bf;
  font-size: 0.85rem;
  max-width: 11rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clerk-title {
  font-size: 0.62rem;
  font-weight: 900;
  margin-top: 2px;
  background: #fff3bf;
  border: 2px solid var(--outline);
  border-radius: 6px;
  padding: 1px 5px;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Milestone stickers live above the stage — never on the booth */
.sticker-bar {
  max-width: 720px;
  margin: 0 auto 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sticker-bar[hidden] {
  display: none !important;
}

.sticker-kicker {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}

.sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.sticker-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 32px;
  font-size: 1rem;
  background: var(--paper);
  border: 2px solid var(--outline);
  border-radius: 14px;
  padding: 3px 7px 2px;
  box-shadow: 2px 2px 0 var(--outline);
  line-height: 1;
}
.sticker-chip .sticker-slot {
  position: relative;
  width: 28px;
  height: 28px;
}
.sticker-chip small {
  font-size: 9px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
/* the next sticker, cut from grey paper: a nudge, never a counter */
body.paper-world .sticker-chip.locked {
  opacity: 0.6;
  border-style: dashed;
}
.sticker-chip.locked .sticker-art {
  --tint: #cfc9bd !important;
}

/* Milestone stickers — paper cuts from the same rig as the clerk hats. The
   crown is the clerk's crown hat on a different colour of paper. */
.sticker-chip .sticker-art,
.milestone-emoji .sticker-art {
  inset: 6%;
}
.sticker-art.sticker-star {
  -webkit-mask-image: url("../assets/doll/sticker-star.png");
  mask-image: url("../assets/doll/sticker-star.png");
}
.sticker-art.sticker-star::after {
  background-image: url("../assets/doll/sticker-star.png");
}
.sticker-art.sticker-heart {
  -webkit-mask-image: url("../assets/doll/sticker-heart.png");
  mask-image: url("../assets/doll/sticker-heart.png");
}
.sticker-art.sticker-heart::after {
  background-image: url("../assets/doll/sticker-heart.png");
}
.sticker-art.sticker-coin {
  -webkit-mask-image: url("../assets/doll/sticker-coin.png");
  mask-image: url("../assets/doll/sticker-coin.png");
}
.sticker-art.sticker-coin::after {
  background-image: url("../assets/doll/sticker-coin.png");
}
.sticker-art.sticker-crown {
  -webkit-mask-image: url("../assets/doll/hat-crown.png");
  mask-image: url("../assets/doll/hat-crown.png");
}
.sticker-art.sticker-crown::after {
  background-image: url("../assets/doll/hat-crown.png");
}
.sticker-art.sticker-rainbow {
  -webkit-mask-image: url("../assets/doll/sticker-rainbow.png");
  mask-image: url("../assets/doll/sticker-rainbow.png");
}
.sticker-art.sticker-rainbow::after {
  background-image: url("../assets/doll/sticker-rainbow.png");
}

.decor-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.decor-float {
  position: absolute;
  font-size: 1.6rem;
  filter: drop-shadow(2px 2px 0 rgba(26, 21, 32, 0.35));
  animation: bob 1.6s ease-in-out infinite;
}

.decor-float.balloons {
  left: 8%;
  bottom: 42%;
}
.decor-float.flowers {
  left: 18%;
  bottom: 36%;
}
.decor-float.lights {
  left: 30%;
  right: 30%;
  top: 8%;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.35em;
}
.decor-float.sign {
  right: 8%;
  top: 28%;
  font-size: 2rem;
}

/* Daily / milestone modals */
.daily-modal,
.milestone-pop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(26, 21, 32, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.daily-modal[hidden],
.milestone-pop[hidden] {
  display: none !important;
}

.daily-card,
.milestone-card {
  width: min(100%, 340px);
  padding: 20px;
  text-align: center;
}

.daily-card h2,
.milestone-card h2 {
  margin: 0 0 8px;
}

.daily-card p,
.milestone-card p {
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.4;
}

.milestone-emoji {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  font-size: 2.5rem;
  line-height: 64px;
}

#btnSkipDaily {
  display: block;
  margin: 12px auto 0;
}

.credits-card {
  text-align: left;
}

.credits-card h2 {
  text-align: center;
}

.credits-ver {
  text-align: center;
  font-weight: 900;
  opacity: 0.7;
  margin: 0 0 12px !important;
}

.credits-body {
  font-size: 0.9rem;
}

.credits-body.muted {
  opacity: 0.75;
  font-size: 0.8rem;
}

.credits-card .ticket-btn {
  width: 100%;
  margin-top: 8px;
}

.album-count {
  text-align: center;
  font-weight: 900;
  margin: 0 0 10px;
}

.album-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: min(50vh, 360px);
  overflow: auto;
}

.album-page {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 3px dashed rgba(26, 21, 32, 0.35);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}

.album-page.stamped {
  border-style: solid;
  background: #fff9e6;
  box-shadow: 2px 2px 0 var(--outline);
}

.album-emoji {
  font-size: 1.35rem;
  line-height: 1;
  width: 1.6em;
  text-align: center;
  flex-shrink: 0;
}

.options-card .vol-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  font-weight: 800;
}

.options-card .vol-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.options-card input[type="range"] {
  width: 100%;
  height: 28px;
  accent-color: #fcc419;
  touch-action: manipulation;
}

.options-card #btnMuteAll {
  width: 100%;
  margin-bottom: 10px;
}

/* —— How to play —— */
.howto-screen {
  background: linear-gradient(165deg, #7ec8ff 0%, #ffe066 55%, #ffd43b 100%);
  overflow: auto;
  padding: 16px 12px 40px;
  justify-content: flex-start;
}

.howto-panel {
  width: min(100%, 440px);
  padding: 18px 16px 20px;
  text-align: left;
  margin: 12px auto;
  max-height: min(90vh, 640px);
  overflow: auto;
}

.howto-heading {
  margin: 0 0 6px;
  text-align: center;
  font-size: 1.5rem;
}

.howto-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
  text-align: center;
  font-weight: 700;
  opacity: 0.85;
}

.howto-lead .step-badge {
  width: 1.4em;
  height: 1.4em;
  font-size: 0.78rem;
}

.howto-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.howto-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 10px;
  background: #fff;
  border: 3px solid var(--outline);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--outline);
}

.howto-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

.howto-step strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.howto-step p {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.9;
}

.howto-tip {
  margin: 12px 0 16px;
  padding: 10px 12px;
  background: #fff3bf;
  border: 3px solid var(--outline);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.35;
}

.howto-cta {
  width: 100%;
  font-size: 1.05rem;
}

.intro-hook {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 2px 2px 0 #1a1520;
  opacity: 0.95;
}

.intro-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.intro-secondary {
  background: #fff !important;
  font-size: 0.95rem !important;
  padding: 10px 16px !important;
}

#howtoModal .howto-panel {
  margin: 0;
  max-height: min(85vh, 620px);
}

#howtoModal.daily-modal {
  align-items: center;
}

/* ==========================================================================
   One Accent: the UI language (1.7.52; banana palette 1.7.56).
   Everything is white or grey except the characters and one thing: the next
   best action, set as body[data-next] by renderNextAction() in js/main.js.
   Grey controls still work. No stripes, heavy outlines, or hard shadows.
   ========================================================================== */
:root {
  --ink: #23201c;
  --outline: #eadfbf;
  --shadow: none;
  --paper: #fff;
  --sell: #f4c21b;
  --accent: #f4c21b;
  --accent-text: #7a5a00;
  --page: #fdf7e7;
  --soft: #f3e8c8;
  --muted-text: #66583a;
  --act: #f4c21b;
  --act-ink: #23201c;
  --act-edge: #d9a400;
  --idle: #f8f0d8;
  --scene-sky: #e6eef2;
  --scene-ground: #e9dfc2;
  --panel-face: #fff;
  --sticker-shadow: none;
}

html,
body.paper-world {
  background: var(--page);
}
body.paper-world {
  padding: 10px 10px calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ---- flat surfaces ---- */
body.paper-world .paper-card,
body.paper-world .paper-sticker,
body.paper-world .order-panel,
body.paper-world .mission-inner {
  background: #fff;
  background-image: none;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
body.paper-world .shop-panel,
body.paper-world .daily-modal,
body.paper-world .milestone-pop {
  background: rgba(35, 32, 28, 0.45);
}
body.paper-world .top-bar h1 {
  text-shadow: none;
}
body.paper-world .pill,
body.paper-world .icon-btn,
body.paper-world .hud-vol,
body.paper-world .sticker-chip,
body.paper-world .tool-chip,
body.paper-world .shop-row,
body.paper-world .cook-btn,
body.paper-world .crate,
body.paper-world .ticket-btn {
  box-shadow: none;
}
body.paper-world button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ---- buttons ---- */
body.paper-world .ticket-btn {
  background: var(--act);
  color: var(--act-ink);
  border: 0;
  border-radius: 12px;
  font-weight: 800;
}
body.paper-world .ticket-btn:active,
body.paper-world .crate:active:not(:disabled),
body.paper-world .icon-btn:active,
body.paper-world .tool-chip:active {
  box-shadow: none;
  transform: translateY(1px);
}
body.paper-world .icon-btn {
  background: transparent;
  border: 0;
  border-radius: 12px;
}
body.paper-world .tool-chip {
  background: #fff;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 700;
}
/* attention marks: an ink ring, never a flashing color */
body.paper-world .coach-pulse,
body.paper-world .crate.need-pulse,
body.paper-world .cook-btn.cook-need,
body.paper-world .share-btn.share-pulse {
  outline: 3px solid var(--ink) !important;
  outline-offset: 2px;
  animation: none;
}

/* ---- HUD ---- */
body.paper-world .top-bar {
  justify-content: flex-start;
  margin-bottom: 4px;
}
body.paper-world .hud {
  justify-content: flex-start;
  gap: 6px 12px;
  margin-bottom: 10px;
}
body.paper-world .pill,
body.paper-world .pill.shift,
body.paper-world .pill.streak,
body.paper-world .pill.streak.tier-2,
body.paper-world .pill.streak.tier-3 {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
body.paper-world .pill.cash {
  background: none;
  font-size: 24px;
  font-weight: 800;
}
body.paper-world .hud-cluster {
  flex: 0 0 auto;
  order: 0;
  margin-left: auto;
  gap: 0;
}
body.paper-world .hud-vol {
  background: none;
  border: 0;
  accent-color: var(--ink);
}
body.paper-world .hud-vol input[type="range"]::-webkit-slider-runnable-track {
  background: var(--soft);
  border: 0;
}
body.paper-world .hud-vol input[type="range"]::-moz-range-track {
  background: var(--soft);
  border: 0;
}
body.paper-world .hud-vol input[type="range"]::-webkit-slider-thumb {
  background: var(--ink);
  border: 0;
  box-shadow: none;
}
body.paper-world .hud-vol input[type="range"]::-moz-range-thumb {
  background: var(--ink);
  border: 0;
  box-shadow: none;
}
body.paper-world .sticker-chip {
  background: #fff;
  border: 0;
}
body.paper-world .sticker-kicker {
  opacity: 1;
  color: var(--muted-text);
}

/* ---- coaching and rush line ---- */
body.paper-world .mission-bar {
  margin-bottom: 10px;
  padding: 0;
}
body.paper-world .mission-inner {
  padding: 8px 12px;
  border-radius: 12px;
}
body.paper-world .mission-step {
  color: var(--muted-text);
}
body.paper-world .mission-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}
body.paper-world .mission-body {
  font-size: 14px;
  font-weight: 700;
}

/* ---- the stage ---- */
body.paper-world .stage-wrap {
  margin: 0 auto;
}
body.paper-world .stage {
  height: 300px;
  border: 0;
  border-radius: 16px;
  background: var(--scene-sky);
  box-shadow: none;
}
body.paper-world .sky {
  inset: 0;
  background: var(--scene-sky);
}
body.paper-world .sky::after {
  display: none;
}
body.paper-world .ground {
  height: 50px;
  background: var(--scene-ground);
  border: 0;
}
/* the shift still reads, quietly */
body.paper-world.shift-lunch .stage,
body.paper-world.shift-lunch .sky {
  background: #f3e9d2;
}
body.paper-world.shift-lunch .ground {
  background: #e4dcc6;
}
body.paper-world.shift-evening .stage,
body.paper-world.shift-evening .sky {
  background: #dcd9e6;
}
body.paper-world.shift-evening .ground {
  background: #cfccd9;
}

/* ---- the stand: clerk behind the counter ---- */
body.paper-world .booth {
  left: 16px;
  bottom: 16px;
  width: 270px;
  height: 262px;
  transform: none;
}
body.paper-world .booth::before {
  content: "";
  position: absolute;
  inset: 24px 0 40px;
  background: #f8f7f4;
}
body.paper-world .awning {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: #cfcdc6;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
body.paper-world .booth-lights {
  top: 32px;
  z-index: 2;
}
body.paper-world .clerk-slot {
  position: absolute;
  inset: 40px 0 auto;
  z-index: 1;
}
body.paper-world .clerk-name,
body.paper-world .clerk-title {
  display: none;
}
body.paper-world .counter {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 76px;
  min-height: 0;
  align-items: center;
  padding: 0 10px 0 128px;
  border: 0;
  border-radius: 0 0 10px 10px;
  background: #dbd9d2;
}
body.paper-world .menu-row {
  position: absolute;
  left: 10px;
  bottom: 14px;
  z-index: 5;
  width: 108px;
  height: 48px;
  margin: 0;
}
body.paper-world .menu-board {
  height: 100%;
  min-height: 44px;
  max-height: none;
  margin: 0;
  padding: 2px 4px;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 10px;
  outline: 0;
  font-size: 14px;
  font-weight: 800;
}
body.paper-world .menu-board.tappable:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
body.paper-world .menu-kicker {
  font-size: 14px;
  letter-spacing: 0;
}
body.paper-world .menu-item.is-featured {
  background: var(--soft);
  box-shadow: none;
}
body.paper-world .booth-kind {
  position: absolute;
  top: -8px;
  right: -6px;
  border-width: 0;
  box-shadow: none;
  transform: none;
}
body.paper-world .shelf,
body.paper-world .shelf.shelf-upgraded {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  gap: 1px 6px;
}
body.paper-world .booth-tipjar {
  position: absolute;
  left: 8px;
  bottom: 100%;
  width: 26px;
  margin: 0;
  filter: none;
}

/* ---- people ---- */
.paper-doll.hd-doll {
  filter: none;
}
.hd-doll .doll-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.doll-svg .sk { fill: var(--skin); }
.doll-svg .sks { stroke: var(--skin); }
.doll-svg .sh { fill: var(--shirt); }
.doll-svg .shs { stroke: var(--shirt); }
.doll-svg .hr { fill: var(--hair); }
.doll-svg .t { fill: var(--tint); }
.doll-svg .ts { stroke: var(--tint); }
body.paper-world #playerDoll.hd-doll {
  width: 132px;
  height: 187px;
}
body.paper-world .paper-doll.buddy-doll {
  width: 72px;
  height: 102px;
}
body.paper-world #counterSlot .paper-doll.hd-doll,
body.paper-world #waitingSlot .paper-doll.hd-doll {
  width: 112px;
  height: 159px;
}
body.paper-world #counterSlot .pest-doll.pest-sprite {
  scale: 1.2;
  transform-origin: 50% 100%;
}

/* ---- the line ---- */
body.paper-world .customer-lane {
  right: 18px;
  bottom: 8px;
  width: auto;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 16px;
}
body.paper-world .npc-slot {
  min-width: 0;
  min-height: 0;
}
body.paper-world .npc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body.paper-world .order-bubble {
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  font-size: 24px;
}
body.paper-world .npc-label,
body.paper-world .npc-label.pest,
body.paper-world .npc-label.monkey {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}

/* ---- prep ---- */
body.paper-world .prep-panel {
  max-width: 720px;
  margin: 10px auto 0;
  padding: 12px;
}
body.paper-world .prep-heading {
  align-items: baseline;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}
.prep-shelf {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
body.paper-world .crate-field {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
body.paper-world .crate {
  min-height: 48px;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--soft);
  background-image: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}
body.paper-world .crate.empty {
  opacity: 1;
  filter: none;
  background: var(--idle);
  color: var(--muted-text);
}
body.paper-world .crate.empty span {
  display: none;
}
body.paper-world .crate.empty::after {
  content: "Refilling";
  font-size: 13px;
  font-weight: 700;
}
body.paper-world .cook-row {
  gap: 8px;
  margin-top: 8px;
}
body.paper-world .cook-btn {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
}
body.paper-world .cook-btn:disabled {
  opacity: 1;
  background: var(--idle);
  color: var(--muted-text);
}
body.paper-world .cook-btn.featured {
  outline: 2px solid var(--ink);
}
body.paper-world .share-btn {
  background: var(--soft);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  color: var(--ink);
}

/* ---- serve ---- */
body.paper-world .order-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "emoji meta"
    "next next"
    "bar bar"
    "serve serve"
    "shoo shoo";
  gap: 8px 10px;
  max-width: 720px;
  margin: 10px auto 0;
  padding: 12px;
  text-align: left;
}
body.paper-world .order-emoji {
  grid-area: emoji;
  margin: 0;
  font-size: 26px;
  line-height: 30px;
}
body.paper-world .order-label {
  grid-area: meta;
  align-self: center;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
body.paper-world .next-chip {
  grid-area: next;
  justify-self: start;
  margin: 0;
  background: var(--soft);
  border: 0;
}
body.paper-world .patience-track {
  grid-area: bar;
  height: 6px;
  margin: 0;
  background: var(--soft);
  border: 0;
}
body.paper-world .serve-row {
  grid-area: serve;
  gap: 8px;
}
body.paper-world .serve-choice,
body.paper-world .serve-choice.match,
body.paper-world .serve-choice.pest-trap {
  min-height: 48px;
  background: var(--soft) !important;
  color: var(--ink) !important;
  border: 0;
  font-size: 15px;
  font-weight: 800;
}
body.paper-world .serve-row.single .serve-choice {
  min-height: 56px;
  font-size: 19px;
}
body.paper-world .serve-choice.need:not(.pest-trap) {
  opacity: 1;
  background: #fff !important;
  border: 1.5px dashed var(--ink);
}
body.paper-world .serve-choice.pest-trap {
  border: 1.5px dashed var(--muted-text);
}
body.paper-world .shoo-btn {
  grid-area: shoo;
  min-height: 56px;
  margin: 0;
  background: var(--soft) !important;
  color: var(--ink) !important;
}
body.paper-world .shoo-btn.shoo-pulse {
  outline: 0;
  animation: none;
}
.serve-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  max-width: 720px;
  min-height: 130px;
  margin: 10px auto 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--idle);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.serve-idle[hidden] {
  display: none;
}
.serve-idle strong {
  font-size: 16px;
  font-weight: 800;
}

/* ---- shop ---- */
body.paper-world .dock {
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--page);
}
body.paper-world .shop-btn {
  width: 100%;
  max-width: 720px;
  min-height: 50px;
  padding: 0;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-size: 17px;
}
body.paper-world .shop-row {
  background: #fff;
  border: 1.5px solid var(--outline);
  border-radius: 12px;
}
body.paper-world .shop-row:disabled {
  background: var(--soft);
}
body.paper-world .shop-row.cant-afford {
  opacity: 1;
  background: #fff;
  border-style: dashed;
  border-color: #b3a37a;
  color: var(--muted-text);
}
body.paper-world :is(#upgradesList, #specialsList, #decorList) .shop-row:not(:disabled, .cant-afford) {
  background: #fff4c7;
  border-color: var(--act);
}

/* ---- the one accent ---- */
body.paper-world[data-next="grab"] .crate:not(.empty),
body.paper-world[data-next="shop"] .shop-btn,
body.paper-world .cook-btn.next-cook {
  background: var(--act);
  border-color: var(--act);
  color: var(--act-ink);
}
body.paper-world[data-next="serve"] .serve-choice.match:not(.need),
body.paper-world[data-next="shoo"] .shoo-btn {
  background: var(--act) !important;
  color: var(--act-ink) !important;
}

/* ---- pause menu ---- */
.pause-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
body.paper-world .pause-grid .shop-row {
  min-height: 46px;
  margin: 0;
  padding: 8px;
  background: var(--idle);
  border: 0;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.pause-reset {
  appearance: none;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  background: none;
  border: 0;
  color: #b42318;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ---- how-to badges ---- */
body.paper-world .step-badge[class] {
  background: var(--soft);
  border: 0;
  box-shadow: none;
  color: var(--ink);
}

/* ---- phones ---- */
@media (max-width: 560px) {
  body.paper-world {
    padding: 8px 10px calc(71px + env(safe-area-inset-bottom, 0px));
  }
  body.paper-world .footer-tools {
    display: none;
  }
  body.paper-world .hud {
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 8px;
    padding-left: 4px;
  }
  body.paper-world .hud-vol {
    display: none;
  }
  body.paper-world .mission-step,
  body.paper-world .mission-title {
    display: none;
  }
  body.paper-world .mission-inner {
    padding: 7px 10px;
  }
  body.paper-world .mission-body {
    line-height: 1.25;
  }
  body.paper-world .stage {
    height: 236px;
  }
  /* roof decor sits above the booth */
  body.paper-world .stage:has(.booth-balloons:not([hidden]), .booth-sign:not([hidden])) {
    height: 280px;
  }
  body.paper-world .booth {
    left: 12px;
    bottom: 14px;
    width: 190px;
    height: 206px;
  }
  body.paper-world .awning {
    height: 28px;
    font-size: 14px;
  }
  body.paper-world .booth-lights {
    top: 28px;
  }
  body.paper-world .clerk-slot {
    inset: 34px 0 auto;
  }
  body.paper-world #playerDoll.hd-doll {
    width: 102px;
    height: 145px;
  }
  body.paper-world .paper-doll.buddy-doll {
    width: 52px;
    height: 74px;
  }
  body.paper-world .counter {
    height: 64px;
    padding: 0 8px 0 86px;
  }
  body.paper-world .menu-row {
    left: 8px;
    bottom: 10px;
    width: 72px;
    height: 44px;
  }
  body.paper-world .menu-item {
    display: none;
  }
  body.paper-world .shelf,
  body.paper-world .shelf.shelf-upgraded {
    font-size: 13px;
  }
  body.paper-world .booth-tipjar {
    width: 22px;
  }
  body.paper-world .customer-lane {
    right: 14px;
    bottom: 6px;
    width: 110px;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  body.paper-world #counterSlot .paper-doll.hd-doll {
    width: 84px;
    height: 119px;
  }
  body.paper-world .crate-field {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* money flies as cut paper; emoji stay for food */
.fx-particle.fx-chip {
  width: 10px;
  height: 13px;
  background: var(--chip);
  border: 1.5px solid var(--ink);
  border-radius: 1px;
  animation-name: fxTumble;
}
@keyframes fxTumble {
  0% {
    transform: translate(0, 0) rotate(0) rotateX(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 34px)) rotate(var(--spin)) rotateX(540deg);
    opacity: 0;
  }
}

/* the milestone sticker on its way to the bar (overlay, never the avatar) */
.sticker-fly {
  position: fixed;
  z-index: 95;
  pointer-events: none;
  transform-origin: 0 0;
  filter: drop-shadow(3px 6px 0 rgba(26, 21, 32, 0.25));
}
.sticker-fly .sticker-art {
  inset: 6%;
}
body.paper-world .sticker-chip.sticker-landed {
  animation: stickerLand 0.34s ease-out;
}
@keyframes stickerLand {
  40% {
    translate: 0 -5px;
    rotate: -4deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.paper-world .sticker-chip.sticker-landed {
    animation: none;
  }
}

/* first boot: three taps */
.loop-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 8px 0 18px;
  padding: 0;
}
.loop-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  text-align: center;
  background: var(--page);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--sticker-shadow);
}
.loop-icon {
  font-size: 2.2rem;
  line-height: 1.1;
}
.loop-tile strong {
  font-size: 1rem;
  font-weight: 900;
}
.loop-tile small {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}


body.paper-world .shelf span {
  white-space: nowrap;
}
body.paper-world .slot-ground-right {
  left: auto;
  right: 4px;
  bottom: 76px;
  z-index: 4;
  margin: 0;
}
body.paper-world .cook-btn small {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 700;
}

/* late game on a phone: controls compact, and SERVE stays in reach */
@media (max-width: 560px) {
  body.paper-world .order-panel {
    position: sticky;
    bottom: calc(71px + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    box-shadow: 0 -4px 14px rgba(35, 32, 28, 0.07);
  }
  body.paper-world .stage:has(.booth-balloons:not([hidden]), .booth-sign:not([hidden])) {
    height: 264px;
  }
  body.paper-world .slot-ground-right {
    bottom: 64px;
    width: 42px;
    height: 38px;
  }
  body.paper-world .sticker-bar {
    margin-bottom: 6px;
  }
  body.paper-world .sticker-row {
    gap: 4px;
  }
  body.paper-world .sticker-chip {
    min-width: 0;
    padding: 2px;
    background: none;
  }
  body.paper-world .sticker-chip small {
    display: none;
  }
  body.paper-world .sticker-chip .sticker-slot {
    width: 24px;
    height: 24px;
  }
  body.paper-world .prep-panel:has(.cook-btn) .crate-field {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  body.paper-world .prep-panel:has(.cook-btn) .crate {
    min-height: 44px;
    font-size: 13px;
  }
  body.paper-world .prep-panel:has(.cook-btn) .crate.empty::after {
    content: "Wait";
    font-size: 12px;
  }
  body.paper-world .cook-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  body.paper-world .cook-btn {
    min-height: 44px;
    padding: 2px;
    font-size: 13px;
    line-height: 1.1;
  }
  body.paper-world .serve-row:not(.single) .serve-choice {
    min-height: 44px;
    padding: 2px 4px;
    font-size: 13px;
  }
}

body.paper-world .avatar-gate {
  background: rgba(35, 32, 28, 0.45);
}
body.paper-world .ticket-btn.intro-secondary,
body.paper-world .ticket-btn.intro-skip-reel {
  background: #fff;
  color: var(--ink);
}

body.paper-world #btnHowTo.tool-chip {
  background: #fff;
}

/* title screen: the calm poster instead of the photo */
body.paper-world .intro-title-screen {
  background: var(--page);
  overflow-y: auto;
}
.intro-art {
  width: min(320px, 86vw);
  flex: none;
}
.intro-art svg {
  display: block;
  width: 100%;
  height: auto;
}
body.paper-world .intro-title-screen .intro-title-stack {
  color: var(--ink);
  padding-top: 8px;
}
body.paper-world .intro-title-screen .intro-eyebrow {
  color: var(--muted-text);
  opacity: 1;
}
body.paper-world .intro-title-screen .intro-logo {
  color: var(--ink);
  text-shadow: none;
}
body.paper-world .intro-title-screen .intro-tag,
body.paper-world .intro-title-screen .intro-hook {
  text-shadow: none;
}
body.paper-world .intro-title-screen .intro-tag {
  margin: 8px 0 16px;
}
body.paper-world .intro-title-screen .intro-cta {
  animation: none;
}
body.paper-world .intro-title-screen .ticket-btn.intro-secondary {
  background: var(--soft) !important;
  color: var(--ink);
}
body.paper-world .intro-title-screen .intro-skip-link {
  color: var(--ink);
  opacity: 1;
  margin-top: 8px;
}
body.paper-world .intro-title-screen .intro-logo {
  animation: none;
}
body.paper-world .intro-title-screen .ticket-btn.intro-secondary {
  min-height: 44px;
}

/* ==========================================================================
   Paper stand + every screen on the same page (1.7.54).
   The stand is cut paper from js/stand-art.js: back layer, clerk, counter.
   The scene carries colour; buttons keep the One Accent rule.
   ========================================================================== */
body.paper-world .booth {
  left: 16px;
  bottom: 10px;
  width: 260px;
  height: 278px;
}
body.paper-world .booth::before {
  display: none;
}
.stand-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
.stand-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 43%;
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}
body.paper-world .clerk-slot {
  inset: 22.4% 0 auto;
  z-index: 1;
}
body.paper-world .awning {
  inset: 6% auto auto 50%;
  transform: translateX(-50%);
  display: block;
  height: auto;
  min-height: 20px;
  max-width: 76%;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fffaf0;
  box-shadow: 1px 1.5px 0 rgba(35, 32, 28, 0.18);
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
}
body.paper-world .counter {
  inset: auto 0 0;
  height: 24.3%;
  padding: 0 7% 0 0;
  background: none;
  justify-content: flex-end;
  align-items: center;
  z-index: 3;
}
body.paper-world .shelf,
body.paper-world .shelf.shelf-upgraded {
  flex: 0 1 auto;
  max-width: 50%;
  padding: 3px 7px;
  border-radius: 8px;
  background: #fbf6ea;
  box-shadow: 1px 1.5px 0 rgba(35, 32, 28, 0.15);
  justify-content: center;
}
body.paper-world .menu-row {
  left: 8%;
  bottom: 5.6%;
  width: 35%;
  height: 44px;
  z-index: 4;
}
body.paper-world .menu-board {
  background: #fffdf8;
  box-shadow: 1px 2px 0 rgba(35, 32, 28, 0.18);
}
body.paper-world .booth-tipjar {
  left: 40%;
}
body.paper-world .booth-lights {
  top: 17%;
}
body.paper-world #playerDoll.hd-doll {
  width: 125px;
  height: 177px;
}
body.paper-world .slot-ground-right {
  bottom: 24.3%;
  right: 6%;
}
body.paper-world .stage:has(.booth-balloons:not([hidden]), .booth-sign:not([hidden])) {
  height: 340px;
}

/* the same stand on the title, story cards and intro reel */
.paper-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 210;
  overflow: hidden;
  border-radius: 20px;
  background: var(--scene-sky);
}
.paper-scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: var(--scene-ground);
}
.paper-scene .stand-art {
  position: absolute;
  left: 50%;
  bottom: 5%;
  height: 84%;
  aspect-ratio: 200 / 214;
  transform: translateX(-50%);
  z-index: 1;
}
.paper-scene--line .stand-art {
  left: 36%;
}
.scene-key {
  position: absolute;
  left: 35%;
  bottom: 27%;
  width: 30%;
  z-index: 3;
}
.scene-line {
  position: absolute;
  right: 5%;
  bottom: 6%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.paper-doll.hd-doll.scene-doll {
  width: 44px;
  height: 62px;
}
body.paper-world .intro-card-art {
  height: auto;
  border: 0;
  background: none;
}
body.paper-world .intro-card-art .paper-scene {
  border-radius: 0;
  aspect-ratio: 420 / 230;
}
body.paper-world .intro-reel-img .paper-scene {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* every intro screen sits on the same page */
body.paper-world .intro-card-screen,
body.paper-world .howto-screen,
body.paper-world .intro-reel-screen {
  background: var(--page);
}
body.paper-world .howto-screen:has(.loop-panel) {
  justify-content: center;
}
body.paper-world .intro-skip-link {
  color: var(--ink);
  opacity: 1;
}
body.paper-world .intro-card {
  box-shadow: none;
}
body.paper-world .intro-reel-frame {
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  background: var(--scene-sky);
}
body.paper-world .intro-reel-bar {
  background: rgba(35, 32, 28, 0.1);
}
body.paper-world .intro-reel-bar > div {
  background: var(--ink);
}
body.paper-world .howto-step,
body.paper-world .howto-tip {
  border: 0;
  background: var(--page);
  box-shadow: none;
}

/* stand picker */
body.paper-world .stand-card {
  border: 0;
  background: var(--page);
  box-shadow: none;
}
body.paper-world .stand-card.current {
  background: var(--page);
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
body.paper-world .stand-actions .tool-chip {
  background: none;
  border: 0;
  color: var(--muted-text);
  text-decoration: underline;
  opacity: 1;
}

/* messages */
body.paper-world .toast {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(35, 32, 28, 0.18);
}
body.paper-world .need-banner {
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(35, 32, 28, 0.16);
}
body.paper-world .fx-float {
  color: var(--accent-text);
  text-shadow: 0 1px 0 #fff, 0 0 6px #fff;
}

@media (max-width: 560px) {
  body.paper-world .booth {
    left: 8px;
    bottom: 6px;
    width: 200px;
    height: 214px;
  }
  body.paper-world .counter {
    height: 24.3%;
    padding: 0 7% 0 0;
  }
  body.paper-world .menu-row {
    left: 8%;
    bottom: 5.6%;
    width: 35%;
    height: 44px;
  }
  body.paper-world .clerk-slot {
    inset: 22.4% 0 auto;
  }
  body.paper-world #playerDoll.hd-doll {
    width: 96px;
    height: 136px;
  }
  body.paper-world .booth-lights {
    top: 17%;
  }
  body.paper-world .slot-ground-right {
    bottom: 24.3%;
    right: 6%;
  }
  body.paper-world .awning {
    font-size: 12.5px;
  }
  body.paper-world .stage:has(.booth-balloons:not([hidden]), .booth-sign:not([hidden])) {
    height: 264px;
  }
  body.paper-world .stand-list {
    overflow-x: visible;
  }
  body.paper-world .stand-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
  }
}

/* phone: tutorial line + sticker row + every panel still fit in 740px */
@media (max-width: 560px) {
  body.paper-world .stage {
    height: 222px;
  }
  body.paper-world .booth {
    bottom: 4px;
  }
  body.paper-world .prep-panel,
  body.paper-world .order-panel,
  body.paper-world .serve-idle {
    margin-top: 8px;
  }
  body.paper-world .prep-panel {
    padding: 10px;
  }
  body.paper-world .crate {
    min-height: 46px;
  }
  body.paper-world .serve-row.single .serve-choice {
    min-height: 52px;
  }
  body.paper-world .mission-bar,
  body.paper-world .sticker-bar {
    margin-bottom: 8px;
  }
}

/* the helper stands beside the clerk, above the counter */
body.paper-world .clerk-row .buddy-slot {
  align-self: flex-start;
  margin-top: 18px;
}

/* the sign just says Menu; the featured board lists the food */
body.paper-world .menu-board .menu-item {
  display: none;
}

/* drawn pests (js/pest-art.js): same paper as the stand, sized like the townsfolk */
body.paper-world .pest-doll.pest-sprite.pest-drawn {
  width: 104px;
  height: 121px;
  scale: 1;
}
.pest-doll.pest-drawn::after {
  display: none;
}
.pest-drawn .pest-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
@media (max-width: 560px) {
  body.paper-world .pest-doll.pest-sprite.pest-drawn {
    width: 82px;
    height: 96px;
  }
}

body.paper-world[data-next="share"] .share-btn {
  background: var(--act);
  color: var(--act-ink);
}

/* ==========================================================================
   Banana palette + cards that line up (1.7.56)
   ========================================================================== */
/* the banana accent gets a deeper edge so it holds on cream */
body.paper-world .ticket-btn,
body.paper-world[data-next="grab"] .crate:not(.empty),
body.paper-world[data-next="shop"] .shop-btn,
body.paper-world .cook-btn.next-cook,
body.paper-world[data-next="share"] .share-btn {
  box-shadow: inset 0 -3px 0 var(--act-edge);
}
body.paper-world[data-next="serve"] .serve-choice.match:not(.need),
body.paper-world[data-next="shoo"] .shoo-btn {
  box-shadow: inset 0 -3px 0 var(--act-edge);
}
body.paper-world .ticket-btn:active,
body.paper-world .crate:active:not(:disabled) {
  box-shadow: inset 0 -1px 0 var(--act-edge);
}

/* stand picker: same parts in the same place on every card */
body.paper-world .stand-list {
  align-items: stretch;
}
body.paper-world .stand-card,
body.paper-world .stand-card.empty {
  display: grid;
  grid-template-rows: 68px auto 1fr auto;
  justify-items: center;
  align-content: stretch;
  gap: 4px;
  opacity: 1;
  padding: 12px 8px 10px;
}
body.paper-world .stand-preview {
  width: 48px;
  height: 64px;
  min-height: 0;
  margin: 0;
}
body.paper-world .stand-card.empty .stand-preview {
  border: 2px dashed var(--outline);
  border-radius: 12px;
}
body.paper-world .stand-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
body.paper-world .stand-actions {
  grid-row: 4;
  display: grid;
  grid-template-rows: 48px 44px;
  gap: 4px;
  width: 100%;
  margin: 0;
}
body.paper-world .stand-actions .ticket-btn {
  min-height: 48px;
  padding: 0 6px;
}
body.paper-world .stand-actions .tool-chip {
  min-height: 44px;
}
/* an empty stand keeps the row where Erase sits, so New lines up with Play */
body.paper-world .stand-card.empty .stand-actions::after {
  content: "";
}

/* only the banana accent gets the deeper edge */
body.paper-world .ticket-btn.intro-secondary,
body.paper-world .ticket-btn.intro-skip-reel {
  box-shadow: none;
}

/* ==========================================================================
   Audit pass (1.7.56): five auditors + verifiers, 69 confirmed findings.
   ========================================================================== */
/* every control in the game font (buttons were falling back to Arial) */
button,
input,
select,
textarea {
  font-family: inherit;
}
body.paper-world .text-btn {
  font-size: 15px;
}

/* only the real next action wears the banana edge */
body.paper-world :is(.serve-choice, .shop-btn, .shoo-btn, .intro-secondary, .intro-skip-reel) {
  box-shadow: none;
}
body.paper-world .crate:active:not(:disabled) {
  box-shadow: none;
}
/* one GRAB lights up, not six */
body.paper-world[data-next="grab"] .crate:not(.empty) ~ .crate:not(.empty) {
  background: var(--soft);
  color: var(--ink);
  box-shadow: none;
}
/* quiet controls: no ink outlines */
body.paper-world .shop-btn {
  background: var(--soft);
  border: 0;
}
body.paper-world .crate.need-pulse,
body.paper-world .cook-btn.cook-need,
body.paper-world .share-btn.share-pulse {
  outline: 0 !important;
}
body.paper-world .coach-pulse {
  outline: 3px solid var(--accent-text) !important;
}
body.paper-world .cook-btn.featured {
  outline: 0;
  background: #fff4c7;
}
body.paper-world .serve-choice.need:not(.pest-trap) {
  border: 1.5px dashed var(--muted-text);
}
body.paper-world button:focus-visible {
  outline: 3px solid var(--ink) !important;
  outline-offset: 2px;
}
/* warm scrim instead of cold grey */
body.paper-world .shop-panel,
body.paper-world .daily-modal,
body.paper-world .milestone-pop,
body.paper-world .avatar-gate {
  background: rgba(74, 52, 0, 0.4);
}
/* secondary text uses the warm muted token, not faded ink */
body.paper-world :is(.tagline, .stand-slot, .shop-card h3, .tool-chip-quiet, .gate-sub, .intro-card-step, .credits-ver, .credits-body.muted, .text-btn:not(:disabled)) {
  opacity: 1;
  color: var(--muted-text);
}
body.paper-world :is(.howto-lead, .howto-step p) {
  opacity: 1;
}

/* ---- game screen ---- */
/* SERVE / NO stays in reach, but never covers Cook or Share */
body.paper-world .order-panel {
  position: static;
  box-shadow: none;
}
body.paper-world:is([data-next="serve"], [data-next="shoo"]) .order-panel {
  position: sticky;
  bottom: calc(71px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  box-shadow: 0 -4px 14px rgba(74, 52, 0, 0.08);
}
body.paper-world .share-btn {
  min-height: 48px;
  margin-top: 8px;
  font-size: 15px;
}
body.paper-world .cook-btn {
  font-size: 14px;
}
@media (min-width: 561px) {
  body.paper-world .cook-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
  body.paper-world .sticker-chip {
    min-width: 92px;
  }
  body.paper-world .footer-tools {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 0;
  }
  body.paper-world .footer-tools .tool-chip {
    min-width: 0;
    max-width: none;
  }
}
@media (max-width: 560px) {
  body.paper-world .cook-btn small {
    display: block;
    margin-left: 0;
  }
  body.paper-world .prep-panel,
  body.paper-world .order-panel {
    padding: 10px;
  }
}
body.paper-world .hud-mute,
body.paper-world .hud-vol-icon {
  filter: grayscale(1) brightness(0.3);
}
body.paper-world .sticker-chip small {
  font-size: 11px;
}
body.paper-world .sticker-chip.locked {
  opacity: 1;
}
body.paper-world .sticker-chip.locked small {
  color: var(--muted-text);
}
.fx-particle.fx-chip {
  border: 1px solid var(--act-edge);
}

/* ---- intro ---- */
body.paper-world .intro-title-screen .intro-title-stack {
  max-width: 34rem;
}
body.paper-world :is(.intro-logo, .intro-tag, .intro-hook, .intro-card-body p) {
  text-wrap: balance;
}
body.paper-world .intro-title-screen .intro-cta {
  width: 100%;
  max-width: 288px;
}
body.paper-world .intro-title-screen .intro-btn-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  width: 100%;
  max-width: 288px;
  margin: 12px auto 0;
}
body.paper-world .intro-title-screen .intro-btn-row .ticket-btn {
  width: 100%;
  padding: 10px 8px !important;
}
body.paper-world .ticket-btn.intro-secondary,
body.paper-world .ticket-btn.intro-skip-reel {
  background: var(--soft) !important;
  color: var(--ink);
}
body.paper-world .intro-card-actions .text-btn {
  margin-left: -12px;
}
body.paper-world #introNext {
  min-width: 160px;
}
body.paper-world .intro-skip-float {
  position: static;
  margin: 8px auto 0;
}
body.paper-world .intro-skip-link:disabled {
  text-decoration: none;
  cursor: default;
  color: var(--muted-text);
}
body.paper-world .howto-screen .howto-panel {
  max-height: none;
  overflow: visible;
}
.howto-lead .lead-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
body.paper-world .intro-reel-caption {
  position: static;
  width: min(100%, 720px);
  margin-top: 12px;
}
@media (max-width: 560px) {
  body.paper-world .intro-reel-frame {
    aspect-ratio: 4 / 3;
  }
}

/* ---- stand picker ---- */
body.paper-world .stand-card,
body.paper-world .stand-card.empty {
  grid-template-columns: minmax(0, 1fr);
}
body.paper-world .stand-card.current {
  outline: 0;
  background: var(--soft);
}
body.paper-world .stand-info {
  width: 100%;
  min-width: 0;
}
body.paper-world .stand-info p {
  margin: 0;
  line-height: 1.3;
}
body.paper-world :is(.stand-name, .stand-meta, .stand-specials) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.paper-world .stand-actions .ticket-btn.quiet,
body.paper-world #btnStandPickerClose {
  background: var(--soft);
  color: var(--ink);
  box-shadow: none;
}

/* ---- clerk picker / creator ---- */
body.paper-world .avatar-gate {
  align-items: flex-start;
}
body.paper-world .gate-card {
  margin: auto;
}
body.paper-world .preset-btn {
  border: 0;
  border-radius: 16px;
  background: var(--page);
  box-shadow: none;
  padding: 12px 8px 10px;
  font-size: 1rem;
  color: var(--ink);
}
@media (hover: hover) {
  body.paper-world .preset-btn:hover {
    box-shadow: inset 0 0 0 2px var(--outline);
  }
}
body.paper-world .creator summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  list-style: none;
  background: var(--page);
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
}
body.paper-world .creator summary::-webkit-details-marker {
  display: none;
}
body.paper-world .creator summary::after {
  content: "▾";
}
body.paper-world .creator[open] summary::after {
  content: "▴";
}
body.paper-world .creator-preview-wrap {
  position: sticky;
  top: -16px;
  z-index: 1;
  background: #fff;
  padding: 40px 0 8px;
}
body.paper-world .creator-preview-wrap .paper-doll.large {
  margin: 0 auto;
}
body.paper-world .creator-grid label {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
body.paper-world .creator-grid input,
body.paper-world .creator-grid select {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--outline);
}
body.paper-world .creator-grid input[type="color"] {
  padding: 4px;
  cursor: pointer;
}
body.paper-world .creator-grid input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
body.paper-world .creator-grid input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}
body.paper-world .creator-grid input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}

/* ---- modals: one card language ---- */
body.paper-world .credits-card {
  text-align: center;
}
body.paper-world .album-list {
  text-align: left;
}
body.paper-world :is(.daily-card, .milestone-card) p {
  font-size: 15px;
}
body.paper-world :is(.daily-card, .milestone-card) > .ticket-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 8px auto 0;
}
#howtoModal .howto-panel {
  margin: 0 auto;
}
#howtoModal #howtoCta {
  position: sticky;
  bottom: 0;
  width: 100%;
  box-shadow: 0 0 0 20px #fff, inset 0 -3px 0 var(--act-edge);
}
body.paper-world .shop-card {
  padding: 20px;
}
body.paper-world .shop-header {
  position: sticky;
  top: -20px;
  margin: -20px -20px 0;
  padding: 12px 20px;
  background: #fff;
  z-index: 1;
}
body.paper-world .shop-header h2 {
  margin: 0;
}
body.paper-world #btnCloseShop {
  font-size: 20px;
  color: var(--ink);
}
body.paper-world :is(#upgradesList, #specialsList, #decorList) .shop-row:not(:disabled, .cant-afford) {
  border-color: var(--outline);
}
body.paper-world .shop-row:disabled {
  background: #fff;
  color: var(--muted-text);
}
body.paper-world .shop-row.featured-row {
  background: #fff4c7;
  border-color: var(--act-edge);
}
body.paper-world .album-page {
  border: 1.5px dashed #b3a37a;
  color: var(--muted-text);
}
body.paper-world .album-page strong {
  color: var(--ink);
}
body.paper-world .album-page.stamped {
  border: 1.5px solid var(--outline);
  background: var(--page);
  box-shadow: none;
}
body.paper-world .options-card #btnMuteAll {
  background: var(--idle);
  border: 0;
  min-height: 46px;
  text-align: center;
}
body.paper-world .options-card input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  margin: 0;
  background: transparent;
  accent-color: var(--ink);
}
body.paper-world .options-card input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--soft);
  border: 0;
  border-radius: 999px;
}
body.paper-world .options-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  background: var(--ink);
  border: 0;
  border-radius: 50%;
}
body.paper-world .options-card input[type="range"]::-moz-range-track {
  height: 8px;
  background: var(--soft);
  border: 0;
  border-radius: 999px;
}
body.paper-world .options-card input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--ink);
  border: 0;
  border-radius: 50%;
}

/* ==========================================================================
   Flat icons + no overlap on short phones (1.7.57)
   ========================================================================== */
.ico {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.28em;
  flex: none;
}
.ico-ui {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}
.ico-pest {
  position: relative;
  width: 1.6em;
  height: 1.8em;
  vertical-align: -0.45em;
}
.ico-pest .pest-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.paper-world .hud-mute,
body.paper-world .hud-vol-icon {
  filter: none;
  color: var(--ink);
}
body.paper-world .icon-btn .ico-ui {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
body.paper-world .order-bubble .ico-food {
  width: 30px;
  height: 30px;
}
body.paper-world .order-emoji .ico-food,
body.paper-world .order-emoji .ico-pest {
  width: 32px;
  height: 34px;
  vertical-align: middle;
}
body.paper-world .shelf span {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
body.paper-world .shelf .ico-food {
  width: 18px;
  height: 18px;
  vertical-align: 0;
}
body.paper-world :is(.serve-choice, .cook-btn, .shop-row, .shop-btn) .ico {
  margin: 0 2px;
}
body.paper-world .shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.paper-world .shop-ico .ico-ui {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
body.paper-world .stand-specials .ico-food {
  width: 16px;
  height: 16px;
}
body.paper-world .loop-icon .ico {
  width: 40px;
  height: 40px;
}
body.paper-world .howto-icon .ico {
  width: 28px;
  height: 28px;
}
body.paper-world .album-emoji .ico {
  width: 24px;
  height: 26px;
}
body.paper-world .album-page:not(.stamped) .album-emoji {
  color: #b3a37a;
}
body.paper-world .pill.streak .ico-ui {
  width: 16px;
  height: 16px;
}

/* the order card never sits on top of the GRAB or Cook buttons */
body.paper-world .order-panel,
body.paper-world:is([data-next="serve"], [data-next="shoo"]) .order-panel {
  position: static;
  box-shadow: none;
}

/* short phones (about 700px tall): everything fits without scrolling */
@media (max-width: 560px) and (max-height: 780px) {
  body.paper-world .hud {
    margin-bottom: 4px;
  }
  body.paper-world .sticker-bar,
  body.paper-world .mission-bar {
    margin-bottom: 6px;
  }
  body.paper-world .sticker-chip .sticker-slot {
    width: 20px;
    height: 20px;
  }
  body.paper-world .mission-inner {
    padding: 5px 10px;
  }
  body.paper-world .mission-body {
    font-size: 13.5px;
  }
  body.paper-world .stage {
    height: 168px;
  }
  body.paper-world .stage:has(.booth-balloons:not([hidden]), .booth-sign:not([hidden])) {
    height: 200px;
  }
  body.paper-world .booth {
    transform: scale(0.76);
    transform-origin: left bottom;
  }
  body.paper-world .customer-lane {
    transform: scale(0.78);
    transform-origin: right bottom;
  }
  body.paper-world .prep-panel,
  body.paper-world .order-panel,
  body.paper-world .serve-idle {
    margin-top: 6px;
  }
  body.paper-world .serve-idle {
    min-height: 96px;
  }
  body.paper-world .prep-heading {
    margin-bottom: 6px;
  }
  body.paper-world .crate-field {
    gap: 6px;
  }
  body.paper-world .crate {
    min-height: 44px;
  }
  body.paper-world .order-panel {
    gap: 6px 10px;
  }
  body.paper-world .order-label {
    font-size: 15px;
  }
  body.paper-world .serve-choice,
  body.paper-world .serve-row.single .serve-choice {
    min-height: 46px;
    font-size: 16px;
  }
  body.paper-world .shoo-btn {
    min-height: 48px;
  }
}

/* ==========================================================================
   Polish audit (1.7.57): text, icons, alignment, late-game fit
   ========================================================================== */
.ico-honor {
  fill: var(--act);
  stroke: var(--act-edge);
  stroke-width: 1.5;
}
body.paper-world .honor-star {
  filter: none;
}
.fx-particle .ico {
  display: block;
  width: 22px;
  height: 22px;
}
body.paper-world .need-banner .ico-food {
  width: 22px;
  height: 22px;
}
body.paper-world .vol-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.paper-world .vol-name .ico {
  width: 18px;
  height: 18px;
}
/* cook: food on top line, cost underneath, at every width */
body.paper-world .cook-btn small {
  display: block;
  margin-left: 0;
  white-space: nowrap;
}
body.paper-world .cook-btn.featured {
  background: var(--soft);
}
body.paper-world .crate.empty::after,
body.paper-world .prep-panel:has(.cook-btn) .crate.empty::after {
  content: "WAIT";
}
/* stage labels: soft lift, not a hard lip */
body.paper-world .awning,
body.paper-world .shelf,
body.paper-world .shelf.shelf-upgraded,
body.paper-world .menu-board {
  box-shadow: 0 1px 3px rgba(35, 32, 28, 0.12);
}
body.paper-world .shelf,
body.paper-world .shelf.shelf-upgraded {
  display: block;
  text-align: center;
  text-wrap: balance;
}
body.paper-world .shelf span {
  margin: 0 3px;
}
/* order card: no empty rows for a hidden Next chip or NO button */
body.paper-world .order-panel:has(#nextChip[hidden]) {
  grid-template-areas: "emoji meta" "bar bar" "serve serve" "shoo shoo";
}
body.paper-world .order-panel:has(#nextChip[hidden]):has(#btnShoo[hidden]) {
  grid-template-areas: "emoji meta" "bar bar" "serve serve";
}
body.paper-world .order-panel:has(#btnShoo[hidden]):not(:has(#nextChip[hidden])) {
  grid-template-areas: "emoji meta" "next next" "bar bar" "serve serve";
}
/* HUD stays one row on desktop */
body.paper-world .pill.stock {
  display: none;
}
@media (min-width: 561px) {
  body.paper-world .hud-vol input[type="range"] {
    width: 64px;
  }
}
/* late game on phones: all cook buttons on one row */
@media (max-width: 560px) {
  body.paper-world .cook-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
  }
}
@media (max-width: 560px) and (max-height: 780px) {
  body.paper-world .sticker-bar {
    display: none;
  }
  body.paper-world:has(#missionBar[data-rush]:not([hidden])) .prep-heading {
    display: none;
  }
}
/* desktop windows under ~920px tall: SERVE stays above the Shop bar */
@media (min-width: 561px) and (max-height: 920px) {
  body.paper-world .top-bar {
    display: none;
  }
  body.paper-world .sticker-chip small {
    display: none;
  }
  body.paper-world .sticker-chip {
    min-width: 0;
  }
  body.paper-world .stage,
  body.paper-world .stage:has(.booth-balloons:not([hidden]), .booth-sign:not([hidden])) {
    height: 240px;
  }
  body.paper-world .booth {
    transform: scale(0.72);
    transform-origin: left bottom;
  }
  body.paper-world .customer-lane {
    transform: scale(0.78);
    transform-origin: right bottom;
  }
  body.paper-world .shoo-btn {
    min-height: 48px;
  }
  body.paper-world:has(#missionBar[data-rush]:not([hidden])) :is(.sticker-bar, .mission-title) {
    display: none;
  }
}

/* intro + how-to */
body.paper-world :is(.intro-logo, .intro-tag, .intro-hook) {
  text-wrap: balance;
}
body.paper-world .intro-card-body p {
  text-wrap: pretty;
}
body.paper-world .loop-tile {
  padding: 10px 6px;
}
body.paper-world .howto-icon .ico {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto;
}
body.paper-world .howto-lead {
  gap: 4px 10px;
}
body.paper-world .intro-reel-bar {
  background: var(--soft);
}
body.paper-world .intro-reel-bar > div {
  background: var(--muted-text);
}

/* stand picker: wrap names, never cut them */
body.paper-world :is(.stand-name, .stand-meta) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
body.paper-world .stand-specials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  white-space: normal;
  overflow: visible;
}
body.paper-world .stand-info p {
  font-size: min(15px, 3.6vw);
}
body.paper-world #standPicker .credits-body {
  text-wrap: balance;
}
@media (max-width: 560px) {
  body.paper-world .stand-specials .ico-food {
    width: 13px;
    height: 13px;
  }
  body.paper-world .stand-card,
  body.paper-world .stand-card.empty {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* menus */
body.paper-world .album-list {
  max-height: min(50vh, 330px);
}
@media (max-width: 639px) {
  body.paper-world .shop-panel {
    padding: 12px 0 0;
  }
  body.paper-world .shop-card {
    width: 100%;
    border-radius: 20px 20px 0 0;
  }
}

body.paper-world .toast .ico-food {
  width: 1.2em;
  height: 1.2em;
}
body.paper-world .milestone-emoji > .ico {
  width: 56px;
  height: 56px;
}

/* ===== Play-through fixes (1.7.59) ===== */
body.paper-world .coach-pulse.need,
body.paper-world .coach-pulse:disabled {
  outline: 0 !important;
}
body.paper-world .tease-note {
  margin: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--idle);
  color: var(--muted-text);
  font-weight: 700;
  text-align: center;
}
body.paper-world .tease-note .ico {
  width: 20px;
  height: 20px;
  flex: none;
}
/* the served count gives way first so pause and sound never leave the screen */
body.paper-world #servedPill {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* a toast already showing hides when a modal opens over it (new ones wait, see drainToast) */
body:has(:is(#dailyModal, #howtoModal, #creditsModal, #milestonePop, #postcardModal, #shopPanel, #closeSlipModal, #featureModal, #optionsModal, #pauseModal, #standPicker, #albumModal):not([hidden])) #toast {
  visibility: hidden;
}
@media (max-width: 380px) {
  body.paper-world #servedPill .pill-missed {
    display: none;
  }
}
body.paper-world :is(.paper-card, .daily-card, .milestone-card) :is(h2, p) {
  text-wrap: balance;
}
/* a full shelf says so on the crates instead of six live GRABs that only toast */
body.paper-world .crate-field.shelf-full .crate:not(.empty) {
  background: var(--idle);
  color: var(--muted-text);
}
body.paper-world .crate-field.shelf-full .crate:not(.empty) span {
  display: none;
}
body.paper-world .crate-field.shelf-full .crate:not(.empty)::after {
  content: "FULL";
  font-size: 13px;
  font-weight: 700;
}

/* ===== Day goal + day-end card (1.7.61) ===== */
body.paper-world .day-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 10px;
}
body.paper-world .day-star {
  width: 44px;
  height: 44px;
  color: var(--outline);
  fill: var(--idle);
}
body.paper-world .day-star.on {
  color: var(--act-edge);
  fill: var(--act);
  animation: day-star-pop 0.45s ease-out both;
}
body.paper-world .day-star.on:nth-child(2) { animation-delay: 0.15s; }
body.paper-world .day-star.on:nth-child(3) { animation-delay: 0.3s; }
@keyframes day-star-pop {
  from { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.paper-world .day-star.on { animation: none; }
}
body.paper-world .day-checks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
  text-align: left;
}
body.paper-world .day-checks li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--idle);
  color: var(--muted-text);
  font-weight: 700;
}
body.paper-world .day-checks li.ok {
  color: var(--ink);
}
body.paper-world .day-checks .ico {
  width: 20px;
  height: 20px;
}
body.paper-world .day-checks li.ok .ico {
  color: #2f7d32;
}
body.paper-world .day-checks small {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-text);
}
body.paper-world .day-card .intro-skip-link {
  display: block;
  margin: 12px auto 0;
}
/* one "served" number at a time: today's goal strip replaces the lifetime count */
body.paper-world:has(#missionBar[data-goal]:not([hidden])) #servedPill {
  display: none;
}
/* GRAB wears its banana like COOK wears its dish; stacked when six share a row */
body.paper-world .crate span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
body.paper-world .crate .ico-food {
  width: 20px;
  height: 20px;
  flex: none;
}
body.paper-world .prep-panel:has(.cook-btn) .crate span {
  flex-direction: column;
  gap: 1px;
}
body.paper-world .prep-panel:has(.cook-btn) .crate .ico-food {
  width: 16px;
  height: 16px;
}

/* ===== Audit fixes (1.7.63) ===== */
/* tablet + desktop: a pest's NO button never sits under the Shop bar */
@media (min-width: 561px) and (max-height: 1100px) {
  body.paper-world:has(#btnShoo:not([hidden])) :is(.sticker-bar, .mission-title, .prep-heading) {
    display: none;
  }
}
/* the shop's decor preview gets the same headroom as bought roof decor */
body.paper-world .stage:has(.booth.shop-preview) {
  height: 340px;
}
@media (max-width: 560px) {
  body.paper-world .stage:has(.booth.shop-preview) {
    height: 264px;
  }
}
@media (max-width: 560px) and (max-height: 780px) {
  body.paper-world .stage:has(.booth.shop-preview) {
    height: 200px;
  }
  /* the booth is scaled 0.76 here: a taller row keeps Menu a 44px target */
  body.paper-world .menu-row {
    height: 58px;
  }
}
/* short desktop keeps a 240px stage: shrink the booth instead so roof decor fits */
@media (min-width: 561px) and (max-height: 920px) {
  body.paper-world .stage:has(.booth-balloons:not([hidden]), .booth-sign:not([hidden])) .booth,
  body.paper-world .booth.shop-preview {
    transform: scale(0.66);
  }
  body.paper-world .stage:has(.booth.shop-preview) {
    height: 240px;
  }
  body.paper-world .menu-row {
    height: 62px;
  }
}
/* the Menu sign keeps its look but answers taps a little beyond its edge */
body.paper-world .menu-board.tappable {
  position: relative;
}
body.paper-world .menu-board.tappable::after {
  content: "";
  position: absolute;
  inset: -8px;
}
@media (min-width: 561px) {
  body.paper-world .hud-vol input[type="range"] {
    height: 44px;
  }
}
/* kid-readable small print */
body.paper-world .shop-row-detail {
  font-size: 13px;
  opacity: 1;
}
body.paper-world :is(.cook-btn small, .intro-card-step, .mission-step) {
  font-size: 13px;
}

/* ===== For grown-ups + creator tiles (1.7.64) ===== */
body.paper-world .credits-sub {
  margin: 14px 0 6px;
  font-size: 15px;
}
body.paper-world .credits-list {
  margin: 0 0 12px;
  padding: 10px 14px 10px 30px;
  border-radius: 12px;
  background: var(--idle);
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
}
body.paper-world .creator-grid label:has(> .tile-source) {
  grid-template-columns: 1fr;
  margin-top: 4px;
  font-weight: 800;
}
body.paper-world .creator-grid .tile-source {
  display: none;
}
body.paper-world .tile-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
}
body.paper-world .creator-tile {
  flex: none;
  width: 68px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 6px 4px;
  border: 0;
  border-radius: 14px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}
body.paper-world .creator-tile.on {
  box-shadow: inset 0 0 0 3px var(--ink);
  background: #fff;
}
body.paper-world .creator-tile:disabled {
  opacity: 0.55;
  cursor: default;
}
body.paper-world .creator-tile .paper-doll {
  width: 48px;
  height: 64px;
  margin: 0;
}
body.paper-world .creator-tile .paper-doll svg {
  width: 100%;
  height: 100%;
}
body.paper-world .creator-tile small {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Credits roll + license, scrolling modals (1.7.66) ===== */
body.paper-world .credits-roll {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--idle);
  text-align: left;
  font-size: 14px;
  line-height: 1.35;
}
body.paper-world .credits-roll dt {
  font-weight: 800;
}
body.paper-world .credits-roll dd {
  margin: 0;
}
body.paper-world .credits-license {
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 380px) {
  body.paper-world .credits-roll {
    grid-template-columns: 1fr;
    gap: 0;
  }
  body.paper-world .credits-roll dd {
    margin-bottom: 6px;
  }
}
/* A card taller than the screen scrolls instead of clipping top and bottom.
   margin:auto centers it when it fits (works where align-items: safe center doesn't). */
.daily-modal:not([hidden]) {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.daily-modal:not([hidden]) > :first-child {
  margin-block: auto;
  flex-shrink: 0;
}
body.paper-world .credits-link {
  display: inline-block;
  min-height: 44px;
  padding: 10px 4px;
  font-weight: 800;
  color: inherit;
  text-decoration-color: var(--act);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
body.paper-world .credits-mail {
  color: inherit;
  font-weight: 800;
  overflow-wrap: anywhere;
}