/* =========================================================
   Peekazoo plush: everything looks like soft 3D felt
   (felt fibre texture, puffy highlights and shadows, stitched seams)
   ========================================================= */
:root {
  --felt: url("../assets/brand/felt-overlay.png");
  --cream: #fff3e2;
  --cream-deep: #f6dfc4;
  --seam: rgba(255, 255, 255, .8);
  --seam-dark: rgba(120, 72, 40, .35);
  --puff: inset 0 6px 10px rgba(255, 255, 255, .45), inset 0 -10px 14px rgba(0, 0, 0, .14);
  --puff-soft: inset 0 4px 8px rgba(255, 255, 255, .6), inset 0 -6px 10px rgba(120, 72, 40, .10);
}

/* felt fabric page */
body {
  background-color: #fbe7d3;
  background-image: var(--felt), radial-gradient(circle at 20% 0%, #fff4dc 0, transparent 45%), linear-gradient(180deg, #fde3ea 0%, #fff1dc 55%, #fde8c8 100%);
  background-size: 256px 256px, auto, auto;
  background-attachment: fixed;
}
html { background: #fbe7d3; }

/* puffy felt letters for headings */
.hello, .list-title, #res-title, .door-title, .gc-title, .intro-card h2, .parents-wrap h3, .rv-form h3 {
  paint-order: stroke fill;
  -webkit-text-stroke: 5px var(--cream);
  text-shadow: 0 3px 0 rgba(120, 72, 40, .18), 0 6px 10px rgba(120, 72, 40, .14);
  letter-spacing: .5px;
}
.door-title { -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(255,255,255,.35), 0 4px 0 rgba(0,0,0,.2), 0 8px 14px rgba(0,0,0,.18); }
.list-title { color: #e8505b; }
.gc-title { -webkit-text-stroke: 4px #fff; }

/* the shared felt patch: texture + puff + stitched seam */
.icon-btn, .game-card, .card, .feedback, .bubble, .btn, .chip, .chip-age, .tab, .role, .need, .gc-badge,
.scorepill, .prompt, .helper, .act, .go-btn, .face, .mic-btn, .rv-sum, .stat, .badge, .tag {
  background-image: var(--felt);
  background-size: 256px 256px;
  background-blend-mode: soft-light;
}

.icon-btn {
  background-color: var(--cream);
  box-shadow: var(--puff-soft), 0 5px 0 #e4c6a6, 0 9px 14px rgba(120, 72, 40, .18);
  outline: 2px dashed var(--seam-dark); outline-offset: -6px;
  border-radius: 999px;
}
.icon-btn:active { box-shadow: var(--puff-soft), 0 1px 0 #e4c6a6; transform: translateY(4px); }

.door {
  background-blend-mode: soft-light, normal, normal;
  border-radius: 48px;
  outline: 4px dashed var(--seam); outline-offset: -14px;
}
.door-fun { background-image: var(--felt), radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), transparent 42%), linear-gradient(160deg, #4cc3f5, #1f7fd4);
  box-shadow: var(--puff), 0 14px 0 #155ea1, 0 26px 40px rgba(31,127,212,.3); }
.door-learn { background-image: var(--felt), radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), transparent 42%), linear-gradient(160deg, #a77be8, #6b3cc4);
  box-shadow: var(--puff), 0 14px 0 #4e2a96, 0 26px 40px rgba(107,60,196,.3); }
.door-fun, .door-learn { background-size: 256px 256px, auto, auto; background-blend-mode: soft-light, normal, normal; }
.door:hover { transform: translateY(-6px) rotate(-1deg) scale(1.01); }
.door:active { transform: translateY(8px) scale(.98); }

.game-card {
  background-color: var(--cream);
  box-shadow: var(--puff-soft), 0 10px 0 var(--c), 0 22px 34px rgba(120, 72, 40, .18);
  border-width: 7px; border-radius: 40px;
  outline: 3px dashed color-mix(in srgb, var(--c) 60%, white); outline-offset: -14px;
}
.gc-badge { background-color: #fff; box-shadow: var(--puff-soft), 0 3px 0 rgba(0,0,0,.1); outline: 2px dashed var(--seam-dark); outline-offset: -5px; }

.card, .feedback, .rv-sum, .stat {
  background-color: var(--cream);
  border: 0;
  box-shadow: var(--puff-soft), 0 8px 0 var(--cream-deep), 0 18px 30px rgba(120, 72, 40, .14);
  outline: 2px dashed var(--seam-dark); outline-offset: -10px;
  border-radius: 32px;
}
.bubble {
  background-color: #fff;
  border: 0;
  box-shadow: var(--puff-soft), 0 6px 0 #ffd0d6, 0 12px 20px rgba(232, 80, 91, .15);
  outline: 2px dashed rgba(232, 80, 91, .45); outline-offset: -7px;
}

.btn {
  background-color: var(--pz-purple);
  box-shadow: var(--puff), 0 5px 0 #5b33a0;
  outline: 2px dashed rgba(255,255,255,.65); outline-offset: -5px;
  border-radius: 999px; padding-left: 24px; padding-right: 24px;
}
.btn.danger { background-color: #e8505b; box-shadow: var(--puff), 0 5px 0 #a8303a; }
.btn.ghost { background-color: #efe5ff; color: #5b33a0; box-shadow: var(--puff-soft), 0 5px 0 #d6c4fb; outline-color: rgba(91,51,160,.35); }
.chip, .chip-age, .tab.on, .role, .need {
  box-shadow: var(--puff-soft), 0 3px 0 rgba(120,72,40,.12);
  outline: 1.5px dashed rgba(91,51,160,.3); outline-offset: -4px;
}
.chip-age.on { background-color: var(--pz-purple); outline-color: rgba(255,255,255,.6); }
.tabs { background-color: #f5e6d3; box-shadow: inset 0 3px 8px rgba(120,72,40,.15); }
.scorepill, .prompt { background-color: #fff; box-shadow: var(--puff-soft), 0 5px 0 rgba(0,0,0,.15); outline: 2px dashed var(--seam-dark); outline-offset: -6px; }
.go-btn { background-color: #4cc657; background-image: var(--felt), radial-gradient(circle at 35% 30%, #8be37a, #25a84a); background-size: 256px 256px, auto; box-shadow: var(--puff), 0 10px 0 #1a7a35; outline: 3px dashed rgba(255,255,255,.7); outline-offset: -9px; }
.act { outline: 3px dashed rgba(255,255,255,.7); outline-offset: -8px; border-radius: 36px; }
.act.again { background-image: var(--felt), linear-gradient(160deg, #7cc843, #5a9e26); background-size: 256px 256px, auto; box-shadow: var(--puff), 0 9px 0 #3f7517; }
.act.more { background-image: var(--felt), linear-gradient(160deg, #3fb2ee, #2a8fd0); background-size: 256px 256px, auto; box-shadow: var(--puff), 0 9px 0 #1d6aa0; }
.face { background-color: #fff; box-shadow: var(--puff-soft), 0 4px 0 rgba(120,72,40,.15); }
.face.picked { background-color: #fff1b8; }
.mic-btn { background-image: var(--felt), radial-gradient(circle at 35% 30%, #52e2b4, #06b384); background-size: 256px 256px, auto; box-shadow: var(--puff), 0 4px 0 #04875f; outline: 2px dashed rgba(255,255,255,.7); outline-offset: -6px; }
.stars span.on { color: #ffc93c; text-shadow: 0 3px 0 #e09b00, 0 6px 10px rgba(224,155,0,.35); }

input, textarea, select {
  background-color: #fffaf3 !important;
  border: 3px solid #f0dcc4 !important;
  box-shadow: inset 0 3px 6px rgba(120,72,40,.12);
}

/* meadow gets felt fibres too */
.meadow::after { content: ""; position: absolute; inset: 0; background: var(--felt); background-size: 256px; mix-blend-mode: soft-light; pointer-events: none; z-index: 1; }
.grass { filter: url(#fuzzy); }
.flower, .mushroom, .ball { filter: url(#fuzzy) drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.deco svg { filter: url(#fuzzy) drop-shadow(0 4px 4px rgba(120,72,40,.15)); }

/* characters: soft plush shadow */
[data-actor] { filter: drop-shadow(0 8px 6px rgba(120, 72, 40, .22)); transform-origin: 50% 100%; will-change: transform; }

/* =========================================================
   Character tricks (added by js/plush.js)
   ========================================================= */
.t-jump   { animation: t-jump 1s cubic-bezier(.3,.7,.4,1) !important; }
.t-spin   { animation: t-spin 1.1s ease-in-out !important; }
.t-jelly  { animation: t-jelly .9s ease-in-out !important; }
.t-peek   { animation: t-peek 1.8s ease-in-out !important; }
.t-dance  { animation: t-dance 1.6s ease-in-out !important; }
.t-giggle { animation: t-giggle 1s linear !important; }
.t-sleep  { animation: t-sleep 2.6s ease-in-out !important; }
.t-lean   { animation: t-lean 1.6s ease-in-out !important; }
.t-boing  { animation: t-boing .7s cubic-bezier(.3,.7,.4,1.4) !important; }

@keyframes t-jump {
  0% { transform: none; }
  15% { transform: scale(1.12, .82); }
  45% { transform: translateY(-38%) scale(.92, 1.1) rotate(-6deg); }
  70% { transform: translateY(0) scale(1.15, .85); }
  85% { transform: scale(.96, 1.04); }
  100% { transform: none; }
}
@keyframes t-spin {
  0% { transform: none; }
  20% { transform: translateY(-12%) scale(1.05, .95); }
  60% { transform: translateY(-22%) rotateY(360deg); }
  85% { transform: scale(1.1, .9) rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes t-jelly {
  0%, 100% { transform: none; }
  20% { transform: scale(1.18, .82); }
  40% { transform: scale(.86, 1.14); }
  60% { transform: scale(1.08, .92); }
  80% { transform: scale(.97, 1.03); }
}
@keyframes t-peek {
  0% { transform: none; }
  25% { transform: translateY(55%) scale(.9, .7); opacity: .2; }
  55% { transform: translateY(55%) scale(.9, .7); opacity: .2; }
  72% { transform: translateY(-16%) scale(.92, 1.12); opacity: 1; }
  86% { transform: scale(1.08, .92); }
  100% { transform: none; }
}
@keyframes t-dance {
  0%, 100% { transform: none; }
  12% { transform: translateY(-10%) rotate(-12deg); }
  25% { transform: rotate(0) scale(1.06, .94); }
  37% { transform: translateY(-10%) rotate(12deg); }
  50% { transform: rotate(0) scale(1.06, .94); }
  62% { transform: translateY(-10%) rotate(-12deg); }
  75% { transform: rotate(0) scale(1.06, .94); }
  87% { transform: translateY(-14%) rotate(10deg); }
}
@keyframes t-giggle {
  0%, 100% { transform: none; }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4%) rotate(-4deg) scale(1.03, .97); }
  20%, 40%, 60%, 80% { transform: translateX(4%) rotate(4deg) scale(.97, 1.03); }
}
@keyframes t-sleep {
  0% { transform: none; }
  25%, 70% { transform: rotate(14deg) scale(1.02, .96); }
  80% { transform: translateY(-20%) scale(.9, 1.12) rotate(0); }
  90% { transform: scale(1.1, .9); }
  100% { transform: none; }
}
@keyframes t-lean {
  0%, 100% { transform: none; }
  25% { transform: rotate(-14deg) translateX(-6%); }
  50% { transform: rotate(0); }
  75% { transform: rotate(14deg) translateX(6%); }
}
@keyframes t-boing {
  0% { transform: none; }
  30% { transform: scale(1.25, .75); }
  60% { transform: scale(.85, 1.2) translateY(-10%); }
  100% { transform: none; }
}

/* little things that pop out of characters */
.pop-fx { position: fixed; z-index: 50; pointer-events: none; font-weight: 800; font-size: 26px; line-height: 1;
  font-family: 'Baloo 2', ui-rounded, sans-serif; animation: pop-fx 1.4s ease-out forwards;
  paint-order: stroke fill; -webkit-text-stroke: 4px #fff; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
@keyframes pop-fx {
  0% { transform: translate(-50%, 0) scale(.3); opacity: 0; }
  20% { transform: translate(calc(-50% + var(--dx) * .3), -20px) scale(1.15); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), -110px) scale(.9) rotate(var(--rot)); opacity: 0; }
}
.say-fx { position: fixed; z-index: 51; pointer-events: none; background: #fff; color: #e8505b; font: 800 18px 'Baloo 2', sans-serif;
  padding: 4px 14px; border-radius: 999px; box-shadow: 0 4px 0 rgba(232,80,91,.25); outline: 2px dashed rgba(232,80,91,.4); outline-offset: -5px;
  transform: translate(-50%, -100%); animation: say-fx 1.8s ease-out forwards; white-space: nowrap; }
@keyframes say-fx { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.5); } 15%, 75% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -130%) scale(.9); } }

/* meadow friends stroll left and right */
.friend-btn { transition: translate 2.4s ease-in-out; translate: var(--walk, 0) 0; }

@media (prefers-reduced-motion: reduce) {
  [class*="t-"] { animation: none !important; }
  .pop-fx, .say-fx { display: none; }
  .friend-btn { transition: none; }
}