/* Virtual Charlie — iPhone-first */
:root {
  --cream: #FFF6E9;
  --paper: #FFFDF8;
  --ink: #1D1A1F;
  --ink-2: #4A4450;
  --tangerine: #E8893A;
  --tangerine-2: #B85E17;
  --pink: #FF9EC4;
  --pink-2: #C93A72;
  --pink-3: #FFE4EE;
  --sky: #A9C8E8;
  --sky-2: #2F5F9E;
  --sky-3: #E4EFFA;
  --mint: #A8DCC0;
  --butter: #FFE08A;
  --red: #E5484D;
  --font-display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px dashed var(--pink-2); outline-offset: 3px; border-radius: 10px; }

.app {
  height: 100vh;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--sat) var(--sar) 0 var(--sal);
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (min-width: 700px) and (min-height: 640px) {
  body { display: grid; place-items: center; background: var(--cream) radial-gradient(circle, rgba(201, 58, 114, .13) 2.5px, transparent 3px) 0 0 / 34px 34px; }
  .app { width: 420px; height: min(900px, calc(100dvh - 48px)); border: 3px solid var(--ink); border-radius: 44px; box-shadow: 10px 10px 0 var(--ink); background: var(--cream); overflow: hidden; padding-top: 10px; }
}

/* ---------- top bar ---------- */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 14px 4px; min-height: 50px; }
.back { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-2); }
.back svg { width: 20px; height: 20px; }
.top__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; white-space: nowrap; }
.top__title span { color: var(--tangerine-2); }
.top__btns { display: flex; gap: 8px; justify-content: flex-end; }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); display: grid; place-items: center; padding: 0; box-shadow: 2px 2px 0 var(--ink); }
.iconbtn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.iconbtn svg { width: 20px; height: 20px; }
#soundBtn .mute { display: none; }
#soundBtn[aria-pressed="false"] .mute { display: inline; }
#soundBtn[aria-pressed="false"] .waves { display: none; }

/* ---------- needs ---------- */
.needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 6px 14px 10px; }
.need { display: flex; align-items: center; gap: 5px; }
.need svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink); }
.need__bar { flex: 1; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.need__bar i { display: block; height: 100%; width: var(--v, 50%); background: var(--c); border-right: 2px solid var(--ink); transition: width .6s cubic-bezier(.2, .9, .3, 1.2); }
.need.low .need__bar { animation: lowpulse 1.2s ease-in-out infinite; }
@keyframes lowpulse { 50% { background: #FFD6D6; } }

/* ---------- stage + scene ---------- */
.stage {
  position: relative; flex: 1; min-height: 0; margin: 0 12px;
  border: 3px solid var(--ink); border-radius: 30px; overflow: hidden;
  touch-action: none; cursor: grab;
  background: linear-gradient(var(--wall, #FBE3EA) 0 62%, var(--floor, #E7C79E) 62% 100%);
  transition: background .6s;
}
.stage:active { cursor: grabbing; }
.scene { position: absolute; inset: 0; pointer-events: none; }
.scene::before { content: ""; position: absolute; inset: 0 0 38% 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .45) 22px 30px); }
.scene::after { content: ""; position: absolute; left: 0; right: 0; top: 62%; height: 3px; background: var(--ink); opacity: .85; }
.window { position: absolute; top: 7%; left: 7%; width: 30%; aspect-ratio: 4 / 5; border: 3px solid var(--ink); border-radius: 12px 12px 4px 4px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 5px #fff; transition: opacity .5s; }
.window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 2px), #fff calc(50% - 2px), #fff calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(transparent calc(50% - 2px), #fff calc(50% - 2px), #fff calc(50% + 2px), transparent calc(50% + 2px)); }
.sky { width: 100%; height: 100%; background: linear-gradient(#BFE0FA, #EAF5FF); }
.sun { fill: #FFD25A; }
.moon, .stars { fill: #FFF3C4; opacity: 0; }
.bldg { fill: #8EA5C0; }
.win rect { fill: #fff; opacity: .55; }
.window__label { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 600; font-size: 10px; background: var(--ink); color: #fff; padding: 1px 8px; border-radius: 6px 6px 0 0; z-index: 2; white-space: nowrap; }
.frame { position: absolute; top: 9%; right: 9%; width: 22%; aspect-ratio: 1; background: var(--pink-3); border: 3px solid var(--ink); border-radius: 6px; box-shadow: inset 0 0 0 4px var(--butter); display: grid; place-items: center; transform: rotate(3deg); }
.frame svg { width: 78%; height: auto; }
.rug { position: absolute; left: 50%; bottom: 3%; width: 88%; height: 17%; transform: translateX(-50%); border-radius: 50%; border: 3px solid var(--ink);
  background:
    radial-gradient(circle at 50% 50%, #F4E7D2 0 5px, transparent 6px) 0 0 / 34px 22px,
    radial-gradient(circle at 50% 50%, #E9A3B9 0 3px, transparent 4px) 17px 11px / 34px 22px,
    radial-gradient(ellipse at center, #7FA0C2 0 55%, #5E7FA3 56% 100%);
}

/* dinner at Paola's */
.cloth, .sign { opacity: 0; transition: opacity .5s; }
.cloth { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; border-top: 3px solid var(--ink);
  background-color: #FFFDF8; background-image: linear-gradient(90deg, rgba(214, 69, 69, .5) 50%, transparent 50%), linear-gradient(rgba(214, 69, 69, .5) 50%, transparent 50%); background-size: 34px 34px; }
.sign { position: absolute; top: 30%; left: 5%; font-family: var(--font-hand); font-weight: 700; font-size: 30px; color: #B23A3A; background: #FFFBF1; border: 3px solid var(--ink); border-radius: 10px; padding: 0 14px; transform: rotate(3deg); box-shadow: 3px 3px 0 var(--ink); }
.dinner .cloth, .dinner .sign { opacity: 1; }
.dinner .rug, .dinner .frame, .dinner .window { opacity: 0; }
.dinner .stage { --wall: #F6DFC2; }

/* field trip: the fountains outside the Met */
.facade, .fountain { opacity: 0; transition: opacity .5s; }
.facade { position: absolute; top: 5%; left: 4%; right: 4%; height: 46%; border: 3px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, #F2ECDF 0 16px, #D6CBB6 16px 20px, #F2ECDF 20px 34px); }
.facade::before { content: ""; position: absolute; left: -10px; right: -10px; top: -3px; height: 22%; background: #E7DECB; border: 3px solid var(--ink); border-radius: 4px; }
.facade::after { content: ""; position: absolute; left: 38%; right: 38%; bottom: 0; height: 40%; background: #4A4450; border: 3px solid var(--ink); border-bottom: 0; border-radius: 40px 40px 0 0; }
.fountain { position: absolute; left: 3%; right: 3%; top: 54%; height: 11%; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(#9FD0F0, #6FAEDB); }
.fountain::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 85%; height: 120%;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .95) 14px 17px, transparent 17px 30px);
  -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%); transform-origin: bottom; animation: jets 1.1s ease-in-out infinite; }
@keyframes jets { 50% { transform: scaleY(.82); } }
.met .stage { --wall: #CFE6F7; --floor: #DDD6C9; }
.met .facade, .met .fountain { opacity: 1; }
.met .window, .met .frame, .met .rug { opacity: 0; }
.kid { position: absolute; bottom: 3%; z-index: 4; font-size: clamp(40px, 12vw, 58px); line-height: 1; pointer-events: none; }
.kid__say { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; padding: 2px 9px; font-family: var(--font-display); font-weight: 600; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }
.kid--up .kid__say { margin-bottom: 34px; }
.trick--link { text-decoration: none; color: var(--ink); background: var(--butter); display: inline-flex; align-items: center; }

/* night mode */
.night .stage { --wall: #3B3A63; --floor: #6B5A4E; }
.night .scene::before { background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .06) 22px 30px); }
.night .sky { background: linear-gradient(#141B3D, #2A3466); }
.night .sun { opacity: 0; }
.night .moon, .night .stars { opacity: 1; }
.night .bldg { fill: #10142B; }
.night .win rect { fill: #FFD970; opacity: .95; }
.night .frame { filter: brightness(.7); }
.night .rug { filter: brightness(.7); }

/* ---------- Charlie ---------- */
.pup { position: absolute; left: 50%; bottom: 5%; height: 70%; aspect-ratio: 400 / 440; max-width: 94%; transform: translateX(-50%); z-index: 2; }
.pup__inner { width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
#charlie { width: 100%; height: 100%; overflow: visible; }
#charlie * { transform-box: view-box; }
#c-body { transform-origin: 200px 420px; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.012, 1.018); } }
#c-tail { transform-origin: 262px 390px; animation: wag 1.1s ease-in-out infinite; }
#charlie.wag #c-tail, #charlie.is-happy #c-tail { animation-duration: .26s; }
@keyframes wag { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(16deg); } }
#c-head { transform-origin: 200px 250px; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
#c-earL { transform-origin: 150px 104px; transition: transform .25s; }
#c-earR { transform-origin: 250px 104px; transition: transform .25s; }
#c-eyeL { transform-origin: 152px 148px; }
#c-eyeR { transform-origin: 248px 148px; }
.c-pupil { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .18s ease-out; }
#c-nose { transform-origin: 200px 188px; transition: transform .12s; }
#c-legL { transform-origin: 226px 304px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
#c-mouthOpen { transform-origin: 200px 212px; }
#c-eyes, #c-happy, #c-sleepy, #c-mouth, #c-mouthOpen, #c-sharkMouth, #c-fin, #c-brows, #c-held { transition: opacity .12s; }

#charlie.blink .c-eye { transform: scaleY(.08); }
.c-eye { transition: transform .07s; }
#charlie.is-happy #c-eyes, #charlie.is-sleep #c-eyes { opacity: 0; }
#charlie.is-happy #c-happy { opacity: 1; }
#charlie.is-sleep #c-sleepy { opacity: 1; }
#charlie.is-happy #c-mouth, #charlie.is-pant #c-mouth, #charlie.is-shark #c-mouth, #charlie.chew #c-mouth { opacity: 0; }
#charlie.is-happy #c-mouthOpen, #charlie.is-pant #c-mouthOpen, #charlie.chew #c-mouthOpen { opacity: 1; }
#charlie.is-pant #c-mouthOpen { animation: pant .5s ease-in-out infinite; }
@keyframes pant { 50% { transform: scaleY(.88); } }
#charlie.is-shark #c-mouthOpen { opacity: 0; }
#charlie.is-shark #c-sharkMouth, #charlie.is-shark #c-fin, #charlie.is-shark #c-brows { opacity: 1; }
#charlie.is-shark #c-tail { animation-duration: .18s; }
#charlie.chomping #c-sharkMouth { transform-origin: 200px 214px; animation: chomp .28s ease-in-out infinite; }
@keyframes chomp { 50% { transform: scaleY(.45); } }
#charlie.chew #c-mouthOpen { animation: chomp .22s ease-in-out infinite; }
#charlie.holding #c-held { opacity: 1; }
#charlie.holding #c-mouth, #charlie.holding #c-sharkMouth { opacity: 0; }
#charlie.tug #c-head { animation: tug .2s ease-in-out infinite; }
@keyframes tug { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
#charlie.tilt-l #c-head { transform: rotate(-13deg); }
#charlie.tilt-r #c-head { transform: rotate(13deg); }
#charlie.drinking #c-head { transform: translateY(30px) rotate(0deg); }
#charlie.drinking #c-mouthOpen { opacity: 1; animation: chomp .3s ease-in-out infinite; }
#charlie.drinking #c-mouth { opacity: 0; }
#charlie.perk #c-earL { transform: rotate(10deg); }
#charlie.perk #c-earR { transform: rotate(-10deg); }
#charlie.droop #c-earL { transform: rotate(-16deg); }
#charlie.droop #c-earR { transform: rotate(16deg); }
#charlie.paw #c-legL { transform: rotate(-96deg); }
#charlie.booped #c-nose { transform: scale(.78); }
#charlie.sneeze #c-head { animation: sneeze .5s ease-out; }
@keyframes sneeze { 30% { transform: translateY(14px) rotate(-4deg); } 60% { transform: translateY(-8px) rotate(3deg); } }
#charlie.bark #c-head { animation: barkbob .32s ease-out; }
@keyframes barkbob { 40% { transform: translateY(-10px) rotate(-3deg); } }
#charlie.fluffy { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .95)) drop-shadow(0 0 2px #fff); }
#charlie.tickle { animation: tickle .5s ease-in-out; }
@keyframes tickle { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* whole-body moves */
.pup__inner.hop { animation: hop .45s cubic-bezier(.3, .9, .4, 1); }
@keyframes hop { 40% { transform: translateY(-14%) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.04, .96); } }
.pup__inner.jump { animation: jump .95s cubic-bezier(.3, .9, .4, 1); }
@keyframes jump { 15% { transform: scale(1.08, .9); } 50% { transform: translateY(-42%) rotate(-8deg) scale(.95, 1.06); } 85% { transform: translateY(0) scale(1.1, .88); } }
.pup__inner.spin { animation: spin .9s ease-in-out; }
@keyframes spin { 25% { transform: translateY(-8%) scaleX(.08); } 50% { transform: translateY(-10%) scaleX(-1); } 75% { transform: translateY(-8%) scaleX(-.08); } }
.pup__inner.bow { animation: bow .9s ease-in-out; }
@keyframes bow { 30%, 70% { transform: rotate(-6deg) translateY(6%) scaleY(.92); } }
.pup__inner.shiver { animation: shiver .12s linear 6; }
@keyframes shiver { 50% { transform: translateX(-2%); } }

/* drop-target glow */
.stage.drop-ok .pup::before { content: ""; position: absolute; inset: 6% 2% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 224, 138, .85), transparent); z-index: -1; }

/* ---------- bubble, hint, zzz, bowl ---------- */
.bubble {
  position: absolute; left: 50%; top: 4%; z-index: 4; max-width: 84%; width: max-content;
  transform: translateX(-50%) scale(.6); opacity: 0; pointer-events: none;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 14px; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.22; text-align: center;
  transition: opacity .18s, transform .3s cubic-bezier(.3, 1.8, .5, 1);
}
.bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 18px; height: 18px; margin-left: -9px; background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.shark-on .bubble { background: #FFE1E1; }
.shark-on .bubble::after { background: #FFE1E1; }
.hint { position: absolute; left: 50%; bottom: 1.6%; transform: translateX(-50%); margin: 0; width: max-content; max-width: 94%; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--ink); background: rgba(255, 253, 248, .92); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 12px 4px; z-index: 3; pointer-events: none; transition: opacity .6s; }
.hint.gone { opacity: 0; }
.zzz { position: absolute; left: 60%; top: 26%; z-index: 3; pointer-events: none; font-family: var(--font-display); font-weight: 700; color: var(--paper); opacity: 0; transition: opacity .4s; }
.zzz span { position: absolute; font-size: 22px; animation: zz 2.4s ease-in-out infinite; text-shadow: 2px 2px 0 var(--ink); }
.zzz span:nth-child(2) { animation-delay: .8s; font-size: 28px; }
.zzz span:nth-child(3) { animation-delay: 1.6s; font-size: 34px; }
@keyframes zz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(30px, -70px); opacity: 0; } }
.sleeping .zzz { opacity: 1; }
.bowl { position: absolute; left: 50%; bottom: 3.5%; width: 30%; max-width: 130px; aspect-ratio: 2.4; transform: translateX(-50%) translateY(140%); z-index: 3; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.bowl::before { content: ""; position: absolute; inset: 22% 0 0; background: var(--sky-2); border: 3px solid var(--ink); border-radius: 8px 8px 46% 46% / 8px 8px 70% 70%; }
.bowl__water { position: absolute; left: 6%; right: 6%; top: 8%; height: 34%; background: #BFE0FA; border: 3px solid var(--ink); border-radius: 50%; z-index: 1; }
.bowl__label { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .12em; color: #fff; z-index: 1; }
.bowl.show { transform: translateX(-50%) translateY(0); }

/* ---------- particles ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.p { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; will-change: transform, opacity; }
.p svg { width: 100%; height: 100%; }
.sprite { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; z-index: 6; }
.sprite svg { width: 100%; height: 100%; }
.ghost { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; z-index: 80; filter: drop-shadow(3px 4px 0 rgba(29, 26, 31, .35)); }
.ghost svg { width: 100%; height: 100%; }
.dust { position: absolute; width: 40px; height: 26px; margin: -13px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 2px solid rgba(29, 26, 31, .2); }

/* land shark */
.shark-on .stage { animation: quake .35s linear 3; }
@keyframes quake { 25% { transform: translate(-4px, 2px); } 75% { transform: translate(4px, -2px); } }
.shark-on .toy[data-item="lamb"], .shark-on .toy[data-item="chicken"] { animation: glow .8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px var(--butter), 3px 3px 0 var(--ink); transform: translateY(-3px); } }
.bites { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.bite { position: absolute; width: 120px; height: 90px; margin: -45px 0 0 -60px; animation: bite 1.8s ease-out forwards; }
@keyframes bite { 0% { transform: scale(1.4) rotate(var(--r)); opacity: 0; } 8% { transform: scale(1) rotate(var(--r)); opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1) rotate(var(--r)); } }

/* ---------- tricks ---------- */
.tricks { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 6px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tricks::-webkit-scrollbar { display: none; }
.trick { flex-shrink: 0; scroll-snap-align: start; border: 2.5px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 7px 13px; font-family: var(--font-display); font-weight: 600; font-size: 15px; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }
.trick:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); background: var(--butter); }
.trick--motion { background: var(--sky); }
.trick--motion[aria-pressed="true"] { background: var(--mint); }

/* ---------- toy tray ---------- */
.tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 6px 12px 6px; }
.toy { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border: 2.5px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); touch-action: none; font-family: var(--font-display); font-weight: 600; font-size: 12px; line-height: 1.1; transition: transform .12s; }
.toy svg { width: 44px; height: 38px; }
.toy:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.toy[data-item="lamb"] { background: var(--pink-3); }
.toy[data-item="chicken"] { background: #FFF4CC; }
.toy[data-item="evian"] { background: var(--sky-3); }
.toy[data-item="brush"] { background: #E4F4EA; }
.toy span { white-space: nowrap; }
@media (max-width: 370px) {
  .top { padding-left: 10px; padding-right: 10px; gap: 4px; }
  .back span { display: none; }
  .top__title { font-size: 19px; }
  .iconbtn { width: 34px; height: 34px; }
  .tray { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .toy span { white-space: normal; text-align: center; font-size: 10.5px; }
  .toy svg { width: 36px; height: 30px; }
  .hint { font-size: 16px; }
}

.tally { margin: 0; padding: 4px 14px calc(8px + var(--sab)); text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

/* ---------- toast + sheet ---------- */
.toast { position: fixed; left: 50%; bottom: calc(150px + var(--sab)); transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 600; padding: 9px 16px; border-radius: 999px; z-index: 90; transition: .25s; pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sheet { position: fixed; left: 0; right: 0; top: calc(var(--sat) + 54px); z-index: 85; padding: 0 12px; animation: sheetdown .45s cubic-bezier(.3, 1.3, .5, 1); pointer-events: none; }
.sheet[hidden] { display: none; }
@keyframes sheetdown { from { transform: translateY(-140%); opacity: 0; } }
.sheet__card { pointer-events: auto; max-width: 480px; margin: 0 auto; display: flex; gap: 12px; align-items: center; background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink); padding: 12px 40px 12px 12px; position: relative; }
.sheet__card img { border-radius: 12px; border: 2px solid var(--ink); flex-shrink: 0; width: 52px; height: 52px; }
.sheet h2 { margin: 0 0 2px; font-family: var(--font-display); font-size: 17px; line-height: 1.15; }
.sheet p { margin: 0; font-size: 14px; line-height: 1.4; }
.shareglyph { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: #0A66D8; white-space: nowrap; }
.shareglyph svg { width: 16px; height: 16px; }
.sheet__x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; padding: 0; font-size: 13px; line-height: 1; }
@media (min-width: 700px) and (min-height: 640px) { .sheet { top: calc(50% - min(450px, 50dvh - 24px) + 64px); } }

@media (max-height: 640px) {
  .needs { padding-bottom: 6px; }
  .tricks { padding-top: 8px; }
  .toy svg { width: 36px; height: 30px; }
  .toy { padding: 5px 2px 4px; }
  .tally { display: none; }
  .tray { padding-bottom: calc(6px + var(--sab)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}