.paper-toy { width:100%; max-width:410px; margin:34px auto 0; padding:24px 18px 20px; border-top:1px solid var(--line); text-align:center; }
.paper-toy h3 { margin:0; font-size:18px; font-weight:400; line-height:1.55; }
.toy-hint,.toy-status { color:var(--muted); font-size:13px; font-style:italic; line-height:1.75; margin:12px 0 0; }
.toy-status { min-height:1.75em; }
.toy-button { min-height:44px; max-width:100%; padding:9px 15px; border:1px solid var(--line); background:transparent; font-size:14px; margin-top:18px; }
.toy-button:hover { border-color:var(--red); background:#fffaf13d; }
.toy-button[aria-disabled='true'] { border-color:transparent; cursor:default; color:var(--red); }
.scratch-surface { position:relative; display:grid; place-items:center; min-height:155px; margin-top:18px; padding:19px; background:#fff8ea; border:1px solid #cbbba1; }
.scratch-surface p { max-width:290px; margin:0; font-size:17px; line-height:1.8; color:var(--red); }
#scratch-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.scratch-toy.revealed .scratch-surface { border-color:#b59778; }
.scratch-toy.revealed #scratch-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.flip-toy { perspective:900px; }
.flip-note-inner { position:relative; display:grid; margin:20px auto 0; transform-style:preserve-3d; transition:transform .65s; }
.flipped .flip-note-inner { transform:rotateY(180deg); }
.note-face { grid-area:1 / 1; display:grid; align-content:center; min-height:176px; padding:24px; background:#f9f4e9; border:1px solid #d6cbb9; box-shadow:0 5px 12px #655b4010; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.note-face p { margin:0; font-size:16px; line-height:1.85; }
.note-front>span { font-size:30px; color:var(--red); }
.note-back { transform:rotateY(180deg); color:var(--red); }
.paper-bag { position:relative; display:grid; place-items:center; width:114px; height:122px; margin:37px auto 0; background:linear-gradient(90deg,#c9b596 0 11%,#d7c3a3 11% 89%,#c9b596 89%); border:1px solid #b49b77; box-shadow:2px 5px 9px #655b4014; }
.paper-bag::before { content:''; position:absolute; inset:-4px -1px auto; height:10px; background:#e3d1b3; clip-path:polygon(0 30%,8% 0,16% 30%,24% 0,32% 30%,40% 0,48% 30%,56% 0,64% 30%,72% 0,80% 30%,88% 0,96% 30%,100% 0,100% 100%,0 100%); }
.bag-note { position:absolute; width:90px; top:-18px; padding:7px 4px; background:#fff9ed; font-size:12px; font-style:italic; transform:rotate(-7deg); border:1px solid #d6cbb9; }
.bag-heart { font-size:32px; color:var(--red); }
.bag-message { min-height:3.5em; }
.bubu-bubbles { display:flex; justify-content:center; align-items:center; gap:14px; margin:23px 0 2px; }
.bubu-bubbles>span { position:relative; padding:9px 15px; border:1px solid var(--line); background:#fff8eb4d; font-size:14px; border-radius:18px 18px 18px 3px; transform:rotate(-4deg); }
.bubu-bubbles>span:last-child { border-radius:18px 18px 3px 18px; color:var(--red); transform:translateY(8px) rotate(4deg); }
.bubu-toy .toy-status { min-height:3.5em; }
.bubu-talking>span { animation:bubu-reply .6s ease; }
.bubu-talking>span:last-child { animation-delay:.12s; }
@keyframes bubu-reply { 40% { translate:0 -5px; } }
.pulled .bag-note { animation:note-pulled .65s ease both; }
.pulled .bag-message { animation:note-arrives .45s ease both; }
.hug-scene { width:100%; max-width:280px; margin:18px auto 0; }
.hug-scene svg { display:block; width:100%; overflow:visible; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hug-body,.hug-face { fill:#f8f1e3; }
.bear-fill { fill:#d7c1a1; }
.bear-muzzle { fill:#f8ecd7; stroke:none; }
.hug-blush { fill:#c97b753a; stroke:none; }
.hug-hearts { fill:var(--red); stroke:none; font-size:24px; opacity:0; }
.hugging .hug-cat { animation:cat-hug 1.1s ease both; }
.hugging .hug-bear { animation:bear-hug 1.1s ease both; }
.hugging .hug-hearts { animation:hug-hearts 1.1s ease both; }
.serious-switch { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; font-size:14px; }
.serious-switch>span:first-child { min-width:0; text-align:left; }
.serious-track { display:block; flex:0 0 46px; height:26px; padding:3px; border:1px solid #a89a84; border-radius:20px; background:#d9cfbe; transition:background .2s; }
.serious-track>span { display:block; width:18px; height:18px; border-radius:50%; background:#fff8e9; box-shadow:0 1px 3px #655b4030; transition:transform .25s; }
.serious-switch[aria-checked='true'] .serious-track { background:var(--red); }
.serious-switch[aria-checked='true'] .serious-track>span { transform:translateX(20px); }
.cookie-button { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; margin-top:12px; padding:10px 12px 16px; border:0; }
.cookie-button:hover { background:transparent; }
.cookie-art { position:relative; display:block; width:270px; max-width:100%; aspect-ratio:3 / 2; transition:transform .3s ease; }
.cookie-button:hover .cookie-art { transform:translateY(-3px); }
.cookie-left,.cookie-right { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform-origin:50% 55%; transition:transform .65s cubic-bezier(.22,.68,.28,1); }
.cookie-left { clip-path:polygon(0 0,50% 0,50% 32%,49% 43%,51% 51%,49% 60%,50% 70%,50% 100%,0 100%); }
.cookie-right { clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,50% 70%,49% 60%,51% 51%,49% 43%,50% 32%); }
.cookie-paper { position:absolute; top:43%; left:50%; width:104px; padding:3px 4px; background:#fff9eb; border:1px solid #d5c4a5; box-shadow:0 2px 5px #655b4015; color:var(--red); font-size:18px; line-height:1.5; opacity:0; transform:translate(-50%,15px) rotate(-5deg); transition:opacity .35s ease,transform .55s ease; }
#cookie-label { border-bottom:1px solid var(--line); padding-bottom:3px; line-height:1.6; }
.cookie-opened .cookie-left { transform:translateX(-26px) rotate(-12deg); }
.cookie-opened .cookie-right { transform:translateX(26px) rotate(12deg); }
.cookie-opened .cookie-paper { opacity:1; transform:translate(-50%,0) rotate(-5deg); }
.cookie-fortune:not(:empty) { max-width:320px; margin:14px auto 0; padding:19px 21px; background:#fff8ea; border:1px solid #d6cbb9; color:var(--red); font-size:15px; box-shadow:0 4px 12px #655b4010; }
@keyframes note-pulled { 40% { transform:translateY(-25px) rotate(7deg); } }
@keyframes note-arrives { from { opacity:.25; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes cat-hug { 45%,75%,100% { transform:translateX(37px); } }
@keyframes bear-hug { 45%,75%,100% { transform:translateX(-37px); } }
@keyframes hug-hearts { 0%,35% { opacity:0; transform:translateY(6px); } 70%,100% { opacity:1; transform:translateY(-4px); } }
@media (max-width:480px) { .paper-toy { padding:22px 4px 18px; } .note-face { padding:20px 16px; } }
@media (prefers-reduced-motion:reduce) {
  .flip-note-inner { transition:none; }
  .pulled .bag-note,.pulled .bag-message,.hugging .hug-cat,.hugging .hug-bear,.hugging .hug-hearts { animation:none; }
  .hugging .hug-cat { transform:translateX(37px); }
  .hugging .hug-bear { transform:translateX(-37px); }
  .hugging .hug-hearts { opacity:1; }
  .serious-track,.serious-track>span,.cookie-left,.cookie-right,.cookie-paper,.cookie-art { transition:none; }
}