@font-face{font-family:"SFRounded";src:url(../fonts/nunito-cyrillic.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"SFRounded";src:url(../fonts/nunito-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-cyrillic.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: one tablet screen (interactive), notes underneath. Light "котостиль" from «Игра Лева»: cream #fbf7ee, brown text #3a2a20, floor lines #c9bba8 */
:root{
  --bg:#fbf7ee; --fg:#3a2a20; --muted:#8a7766; --line:#c9bba8; --gold:#f2a516; --red:#e3202b; --green:#2e9d5a; --card:#fffdf8;
  --font-d:"SFRounded","SF Pro Rounded","Arial Rounded MT Bold","Nunito",sans-serif; --font-b:"SF Pro Rounded","Nunito",system-ui,sans-serif;
  color-scheme:light;
}
body{background:var(--bg);color:var(--fg);font-family:var(--font-b);font-size:16px;line-height:1.5}
.wrap{max-width:1040px;margin:0 auto;padding-inline:16px;padding-block:28px 56px}
h1{font-family:var(--font-d);font-weight:900;font-size:clamp(22px,3.4vw,34px);margin:0;text-wrap:balance}
.lead{color:var(--muted);margin:6px 0 20px;max-width:64ch}
.tablet{background:#3a2a20;border-radius:30px;padding:clamp(8px,1.4vw,16px);box-shadow:0 24px 50px rgba(58,42,32,.25)}
.screen{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;overflow:clip;max-width:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222048%22 height=%221536%22 viewBox=%220 0 2048 1536%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2238%25%22 r=%2260%25%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23fffdf7%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23fbf7ee%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%222048%22 height=%221536%22 fill=%22url%28%23g%29%22/%3E%3Cpath d=%22M0 1075.2 Q 1024 952.32 2048 1075.2 V 1536 H 0 Z%22 fill=%22%23f4ebd9%22/%3E%3Cpath d=%22M0 1075.2 Q 1024 952.32 2048 1075.2%22 fill=%22none%22 stroke=%22%23eadcc2%22 stroke-width=%226%22/%3E%3C/svg%3E") center bottom/cover no-repeat,#fbf7ee;color:var(--fg);
  font-size:clamp(9px,1.6vw,18px);user-select:none;-webkit-user-select:none}
:where(.screen button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.screen button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:12px}
.view{position:absolute;inset:0;transition:opacity .35s,transform .35s}
.view.off{opacity:0;pointer-events:none;transform:scale(.96)}
#musicv{background:#f1e8ff}#musicv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* corners */
.corner{position:absolute;z-index:6;top:3.5%;width:8%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--card);border:3px solid var(--line)}
.corner svg{width:55%}
.c-left{left:3%}.c-right{right:3%}
.lockring{position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--gold);clip-path:inset(0 100% 0 0);transition:clip-path 3s linear}
.c-left.holding .lockring{clip-path:inset(0 0 0 0)}
.stars{position:absolute;right:3%;top:3.5%;display:flex;align-items:center;gap:.4em;padding:.5em .9em;border-radius:99px;background:var(--card);border:3px solid var(--line);font-weight:900}
.stars svg{width:1.4em}

/* home */
.catwrap{position:absolute;left:35%;top:14%;width:30%;transition:left var(--walk,3s) linear}
.cat{position:relative;width:100%;display:block;cursor:pointer}
.cat>svg{transition:transform .3s;overflow:visible}
.catwrap.left .cat>svg{transform:scaleX(-1)}
.c-closed,.c-o,.c-squint{opacity:0}
.cat.sleep .c-eyes,.cat.sleep .c-smile{opacity:0}.cat.sleep .c-closed{opacity:1}
.cat.happy .c-eyes{opacity:0}.cat.happy .c-squint{opacity:1}
.cat.surprise .c-smile{opacity:0}.cat.surprise .c-o{opacity:1}
.c-eyes{transform-box:fill-box;transform-origin:center;transition:transform .08s}
.cat.blink .c-eyes{transform:scaleY(.1)}
.c-tail{transform-box:fill-box;transform-origin:0% 100%;animation:wag 1.6s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
.cat.sleep .c-tail{animation:none}
.cat.sleep>svg{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97) translateY(1.5%)}}
.catwrap.left .cat.sleep>svg{animation:breatheL 3s ease-in-out infinite}
@keyframes breatheL{0%,100%{transform:scaleX(-1)}50%{transform:scale(-1.03,.97) translateY(1.5%)}}
.cat.walking>svg{animation:walk .45s ease-in-out infinite}
.catwrap.left .cat.walking>svg{animation:walkL .45s ease-in-out infinite}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4%) rotate(2deg)}}
@keyframes walkL{0%,100%{transform:scaleX(-1) translateY(0) rotate(-2deg)}50%{transform:scaleX(-1) translateY(-4%) rotate(2deg)}}
.cat.purr>svg{animation:purr .12s linear infinite}
@keyframes purr{50%{transform:translateX(.6%)}}
.zzz{position:absolute;right:8%;top:6%;opacity:0;transition:opacity .4s;font-family:var(--font-d);font-weight:900;color:#6f8fd0}
.zzz.on{opacity:1}
.zzz i{position:absolute;font-style:normal;animation:zz 2.4s ease-in infinite;opacity:0}
.zzz i:nth-child(1){font-size:1em}.zzz i:nth-child(2){font-size:1.4em;animation-delay:.8s}.zzz i:nth-child(3){font-size:1.9em;animation-delay:1.6s}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(2.5em,-3em)}}
.hearts{position:absolute;left:45%;top:10%;color:#ff7a8a;font-size:1.6em;animation:heart 1.2s ease-out forwards;pointer-events:none}
@keyframes heart{from{opacity:1;transform:translateY(0) scale(.6)}to{opacity:0;transform:translateY(-3em) scale(1.3)}}
.cat svg{width:100%;display:block}
.bubble{position:absolute;left:70%;top:-2%;transition:opacity .3s;background:#fff;color:var(--fg);border:3px solid var(--line);font-family:var(--font-d);font-weight:900;padding:.6em 1em;border-radius:1.2em 1.2em 1.2em .2em;font-size:1.15em;white-space:nowrap}
.play{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:22%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff7a6b,#e3202b 60%,#a30d16);box-shadow:0 0 0 .5em rgba(227,32,43,.25),0 0 3em rgba(227,32,43,.6),inset 0 .3em .4em rgba(255,255,255,.35);display:grid;place-items:center;animation:pulse 2s ease-in-out infinite}
.play svg{width:42%;margin-left:8%}
@keyframes pulse{0%,100%{box-shadow:0 0 0 .5em rgba(227,32,43,.25),0 0 3em rgba(227,32,43,.6),inset 0 .3em .4em rgba(255,255,255,.35)}50%{box-shadow:0 0 0 1.1em rgba(227,32,43,.12),0 0 4em rgba(227,32,43,.75),inset 0 .3em .4em rgba(255,255,255,.35)}}
.today{position:absolute;left:4%;bottom:6%;display:flex;gap:.5em;align-items:flex-end}
.today .mini{width:4.2em;height:4.2em;border-radius:1em;background:var(--card);border:3px solid var(--line);display:grid;place-items:center}
.today .mini svg{width:78%;height:78%}
.today .mini.done{border-color:var(--green);box-shadow:0 0 .8em rgba(46,157,90,.35)}
.today small{display:block;color:var(--muted);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3em}
.drawer-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);width:6%;height:30%;border-radius:1.2em 0 0 1.2em;background:var(--card);border:3px solid var(--line);border-right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12%}
.drawer-tab i{width:42%;aspect-ratio:1;border-radius:30%;display:block}

/* drawer */
.drawer{transition:transform .35s,visibility .35s;visibility:hidden;position:absolute;top:0;right:0;bottom:0;width:62%;background:rgba(251,247,238,.98);border-left:3px solid var(--line);transform:translateX(102%);transition:transform .35s;padding:4%;display:grid;grid-template-columns:1fr 1fr;gap:4%;align-content:center}
.drawer.open{transform:none;visibility:visible}
.tile{aspect-ratio:1.15;border-radius:1.4em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;font-family:var(--font-d);font-weight:900;font-size:1.1em;background:var(--card);border:3px solid var(--line);box-shadow:0 0 1.6em var(--glow)}
.tile svg{width:52%;height:52%}
.drawer{grid-auto-rows:1fr;align-content:stretch;padding-block:5%}
.drawer .tile{aspect-ratio:auto;min-height:0}
.tile svg{width:auto;max-width:60%}
.tile.wide{grid-column:span 2;flex-direction:row;gap:.8em}
.tile.wide svg{height:60%}
.close{position:absolute;left:-7%;top:4%;width:6%;aspect-ratio:1;border-radius:50%;background:var(--fg);color:#fff;font-weight:900;font-size:1.4em;display:grid;place-items:center}

/* game */
.task{position:absolute;left:0;right:0;top:9%;text-align:center;font-family:var(--font-d);font-weight:900;font-size:1.6em;color:var(--fg)}
.dots{position:absolute;left:0;right:0;bottom:20%;display:flex;justify-content:center;gap:.8em}
.dots i{width:1.4em;height:1.4em;border-radius:50%;background:var(--gold);box-shadow:0 .15em .4em rgba(242,165,22,.45)}
.cat.mini-cat{left:auto;right:4%;top:auto;bottom:4%;width:16%}
.speaking{animation:hop .5s}
.f-squint,.f-o{opacity:0}
.row.field{left:0;right:0;top:0;bottom:0;height:auto;display:block}
.catwrap.gcw{left:40%;top:auto;bottom:4%;width:20%;z-index:2}
.catwrap.gcw .cat{pointer-events:none}
.catwrap.gcw.leap .cat>svg{animation:leap .55s ease-out}
.catwrap.gcw.left.leap .cat>svg{animation:leapL .55s ease-out}
@keyframes leap{40%{transform:translateY(-22%) scale(.95,1.08)}100%{transform:none}}
@keyframes leapL{0%{transform:scaleX(-1)}40%{transform:scaleX(-1) translateY(-22%) scale(.95,1.08)}100%{transform:scaleX(-1)}}
.fruit{position:absolute;width:13%;aspect-ratio:1;animation:popin .45s cubic-bezier(.3,1.6,.5,1)}
.row.field .fruit{position:absolute;width:13%;height:auto;display:block}
.row.field .cat{width:100%;height:auto;display:block}
.fruit svg{width:100%;height:100%;animation:bob 2.4s ease-in-out infinite}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
.fruit.fly{transition:left .5s ease-in,top .5s ease-in,transform .5s ease-in,opacity .5s;transform:scale(.3);opacity:.2;pointer-events:none}
.basket{position:absolute;right:3%;justify-content:flex-end;bottom:4%;display:flex;align-items:flex-end;gap:.3em;padding:.4em .7em .5em;min-width:7em;min-height:3.6em;border-radius:.6em .6em 1.4em 1.4em;background:linear-gradient(180deg,#c98a4b,#8d5a2b);box-shadow:inset 0 .25em 0 #e0a868,0 .3em 1em rgba(58,42,32,.25)}
.basket span{width:2.6em;height:2.6em;display:block;animation:popin .35s}
.basket span svg{width:100%;height:100%}
.count{position:absolute;right:4%;bottom:calc(4% + 4.6em);font-family:var(--font-d);font-weight:900;font-size:2.2em;color:#e08a00}
.squint .f-eyes{opacity:0}.squint .f-squint{opacity:1}
.oh .f-smile{opacity:0}.oh .f-o{opacity:1}
.f-eyes{transform-box:fill-box;transform-origin:center;transition:transform .08s}
.blink .f-eyes{transform:scaleY(.1)}
.row.wide{left:3%;right:3%;top:30%;height:46%}
.row.wide button{width:19%}
.row button>svg{transform-origin:50% 100%}
/* «Танцы»: idle groove on the beat (--beat set from JS), reactions below override it */
.row.disco button>svg{animation:groove var(--beat,.52s) ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.row.disco button:nth-child(3n+2)>svg{animation-name:grooveSway}
.row.disco button:nth-child(3n)>svg{animation-name:grooveHop;animation-direction:normal;animation-duration:calc(var(--beat,.52s)*2)}
@keyframes grooveSway{0%{transform:rotate(-9deg) translateX(-3%)}100%{transform:rotate(9deg) translateX(3%) translateY(-3%)}}
@keyframes grooveHop{0%,50%,100%{transform:none}20%{transform:translateY(-12%) scale(.95,1.06)}45%{transform:scale(1.08,.92)}70%{transform:translateY(-5%)}}
@keyframes groove{0%{transform:rotate(-6deg) scale(1.04,.96)}100%{transform:rotate(6deg) translateY(-6%) scale(.97,1.03)}}
.row.disco button.dance>svg{animation:dance .9s ease-in-out}
.row.disco button.jump>svg{animation:jump .8s cubic-bezier(.3,.7,.4,1)}
.row.disco button.spin>svg{animation:spin .9s ease-in-out}
.row.disco button.wobble>svg{animation:wobble .8s}
.row.disco button.boing>svg{animation:boing .9s ease-out}
.row.disco button.flip>svg{animation:flip 1s ease-in-out;transform-origin:50% 55%}
.row.disco button.still>svg{animation:none}
@keyframes boing{0%,100%{transform:none}15%{transform:scale(1.15,.85)}30%{transform:translateY(-22%) scale(.92,1.08)}45%{transform:scale(1.12,.88)}60%{transform:translateY(-12%)}75%{transform:scale(1.05,.95)}}
@keyframes flip{0%{transform:none}20%{transform:scale(1.15,.85)}55%{transform:translateY(-45%) rotate(180deg)}85%{transform:translateY(0) rotate(360deg) scale(1.1,.9)}100%{transform:rotate(360deg)}}
.wow .f-eyes{transform:scale(1.2)}
.disco-note{position:absolute;z-index:3;pointer-events:none;font-size:1.8em;font-weight:900;animation:note 1.4s ease-out forwards}
@keyframes note{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--nx,1em),-4em) scale(1.3) rotate(15deg)}}
.lights{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle at 20% 30%,rgba(255,143,168,.28),transparent 22%),radial-gradient(circle at 80% 25%,rgba(74,168,255,.22),transparent 22%),radial-gradient(circle at 50% 60%,rgba(242,183,5,.2),transparent 26%);
  animation:lights calc(var(--beat,.52s)*8) linear infinite}
.lights.on{opacity:1}
#game.stage{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222048%22 height=%221536%22 viewBox=%220 0 2048 1536%22%3E%3Cdefs%3E%3ClinearGradient id=%22sp%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22rgb%28255,235,210%29%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.7%22 stop-color=%22rgb%28255,235,210%29%22 stop-opacity=%22.04%22/%3E%3Cstop offset=%221%22 stop-color=%22%23000%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22fl%22 cx=%2250%25%22 cy=%2250%25%22 r=%2250%25%22%3E%3Cstop offset=%220%22 stop-color=%22rgb%28255,235,210%29%22 stop-opacity=%22.14%22/%3E%3Cstop offset=%221%22 stop-color=%22%23000%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%222048%22 height=%221536%22 fill=%22%23000%22/%3E%3Cpath d=%22M860.16 0 H1187.84 L1638.4 1413.12 H409.6 Z%22 fill=%22url%28%23sp%29%22/%3E%3Cellipse cx=%221024%22 cy=%221290.24%22 rx=%22655.36%22 ry=%22107.52%22 fill=%22url%28%23fl%29%22/%3E%3C/svg%3E") center bottom/cover no-repeat,#000}
#game.stage .task{color:#fff3df}#game.stage .task small{color:#c9bba8}
#game.stage .lights{mix-blend-mode:screen;opacity:.0}#game.stage .lights.on{opacity:.8}
@keyframes lights{0%{background-position:0 0,0 0,0 0;filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
.dance>svg{animation:dance .9s ease-in-out}
@keyframes dance{0%,100%{transform:none}15%{transform:rotate(-12deg) scale(1.05,.95)}35%{transform:rotate(12deg) scale(.95,1.05)}55%{transform:rotate(-10deg) translateY(-8%)}75%{transform:rotate(8deg)}}
.jump>svg{animation:jump .8s cubic-bezier(.3,.7,.4,1)}
@keyframes jump{0%{transform:scale(1.1,.85)}35%{transform:translateY(-28%) scale(.92,1.1)}70%{transform:translateY(0) scale(1.12,.86)}100%{transform:none}}
.spin>svg{animation:spin .9s ease-in-out}
@keyframes spin{0%{transform:none}50%{transform:rotate(180deg) scale(1.15)}100%{transform:rotate(360deg)}}
.wobble>svg{animation:wobble .8s}
@keyframes wobble{0%,100%{transform:none}20%{transform:scale(1.2,.8)}40%{transform:scale(.85,1.15)}60%{transform:scale(1.1,.9)}80%{transform:scale(.97,1.03)}}
.tapped::after{content:"";position:absolute}
.row button{position:relative}
.row button.seen::before{content:"";position:absolute;left:30%;right:30%;bottom:-2%;height:5%;border-radius:50%;background:var(--gold);opacity:.5;filter:blur(4px)}
.task small{display:block;font-family:var(--font-b);font-weight:700;font-size:.42em;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.row{position:absolute;left:6%;right:6%;top:33%;height:44%;display:flex;justify-content:space-around;align-items:flex-end}

.row button{height:100%;width:28%;display:flex;align-items:flex-end;justify-content:center}
.row svg{height:100%;width:100%}
.row:not(.field) button>svg{height:auto;max-height:100%}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6%) rotate(-4deg)}40%,80%{transform:translateX(6%) rotate(4deg)}}
.hop{animation:hop .6s}
@keyframes hop{40%{transform:translateY(-14%) scale(1.06)}}
.praise{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);font-family:var(--font-d);font-weight:900;font-size:1.6em;color:var(--green);opacity:0;transition:opacity .3s}
.praise.on{opacity:1}
.toast{position:absolute;left:50%;top:16%;transform:translateX(-50%);background:var(--gold);color:#1a1424;font-weight:900;padding:.6em 1.2em;border-radius:99px;opacity:0;transition:opacity .3s;white-space:nowrap}
.toast.on{opacity:1}
.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@media (prefers-reduced-motion:reduce){.bob,.play,.lights,.row.disco button>svg{animation:none}}

/* UI-кит из «Интерфейс»: контур #15121a, плоский цвет, тень-полумесяц, блик; нажатие 0.12 с */
.corner{width:9%;aspect-ratio:200/224;border-radius:0;background:none;border:0;top:2.5%}
.corner svg{width:100%;display:block}
.lockring{inset:auto;left:7%;top:4%;width:86%;height:auto;aspect-ratio:1;border:.25em solid #ffc93a}
.stars{background:none;border:0;padding:0;width:16%;top:3%}
.stars svg{width:100%;display:block}
.ui{transition:transform .12s}
.ui.tap{transform:translateY(5%) scale(.96)}
.play.ui.tap{transform:translateX(-50%)}
.play{width:21%;aspect-ratio:360/392;border-radius:0;background:none;box-shadow:none;display:block;animation:playpulse 2s ease-in-out infinite;bottom:6%}
.play span{display:block}.play svg{width:100%;margin:0;display:block}
.play .pr{display:none}.play.tap .nr{display:none}.play.tap .pr{display:block}
@keyframes playpulse{0%,100%{scale:1}50%{scale:1.05}}
.bubble{background:#fff;color:#15121a;border:.22em solid #15121a;box-shadow:inset -.35em -.35em 0 #e9e2d6;border-radius:.9em;font-weight:900}
.bubble::after{content:"";position:absolute;left:1.1em;bottom:-.62em;width:1em;height:1em;background:#fff;border-right:.22em solid #15121a;border-bottom:.22em solid #15121a;transform:skewY(-20deg) rotate(45deg)}
.today{left:3%;bottom:4%;display:block}
.today .sign{width:8.4em;margin-bottom:.3em}.today .sign svg{width:100%;display:block}
.today .tiles{display:flex;gap:.4em}
.today .mini{position:relative;width:4.4em;height:auto;aspect-ratio:200/212;background:none;border:0;border-radius:0;display:block}
.today .mini>svg{position:absolute;inset:0;width:100%;height:100%}
.today .mini .hero{position:absolute;left:16%;top:9%;width:66%;height:72%;display:grid;place-items:center}
.today .mini .hero svg{width:100%;height:100%}
.today .mini.done{border:0;box-shadow:none;filter:drop-shadow(0 0 .35em rgba(63,207,79,.95))}
.today .mini{cursor:pointer;padding:0;transition:transform .12s}.today .mini.tap{transform:scale(.92)}
.br{position:absolute;z-index:6;right:2.5%;bottom:4%;display:flex;gap:.5em}
.rbtn{width:4.6em}.rbtn svg{width:100%;display:block}
.rbtn.off{opacity:.4}
.dance-only{display:none}#game.dancing .dance-only{display:flex}
.drawer-tab{background:#fff3df;border:.22em solid #15121a;border-right:0;box-shadow:inset -.3em -.3em 0 #ecd6b2}
.drawer-tab i{border:.16em solid #15121a}
.drawer .tile{background:#fff3df;color:#15121a;border:.22em solid #15121a;box-shadow:inset -.45em -.45em 0 #ecd6b2,0 .3em .6em rgba(0,0,0,.12)}
.corner,.stars{z-index:6}
.drawer{z-index:8}
.row.disco button.spin>svg,.row.disco button.flip>svg{transform-origin:50% 55%}

/* stil-pix-2 heroes inside the game */
.cat.walking .sp-hero{animation:walk .45s ease-in-out infinite}
.cat .sp-body>svg{transition:transform .3s}
.catwrap.left .cat .sp-body>svg{transform:scaleX(-1)}
.catwrap.gcw.leap .cat .sp-hero{animation:leap .55s ease-out}
.row .sp-body.sp-spin{transform-origin:50% 55% !important}
.row button .sp-hero{width:100%}
.row.field .cat .sp-hero{width:100%}


/* «Собери машинку» / «Пирамидка» */
#build .stars{right:3%}
.pills{position:absolute;z-index:6;left:50%;top:4.5%;transform:translateX(-50%);display:flex;gap:.35em;padding:.35em .45em;background:#fff3df;border:.22em solid #15121a;border-radius:1.2em;box-shadow:0 .25em 0 #e2d3b8}
.pills i{width:2.6em;height:1.3em;border-radius:.7em;background:#fff;border:.18em solid #15121a;box-shadow:inset 0 -.25em 0 #e7ddcc;transition:background .3s}
.pills i.on{background:#3FCF4F;box-shadow:inset 0 -.25em 0 #2a9e38}
.bframe{position:absolute;aspect-ratio:400/440;z-index:2}
.bframe>svg,.bframe .ksil{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kpart{position:absolute;display:block;transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(var(--s,.8));transition:filter .2s;z-index:3}
.kpart.placed{transform:none;cursor:default}
.kpart.flying{z-index:50 !important}
.stars.hop{animation:hop .6s}
.kpart .pin{position:absolute;inset:0;display:block;transform-origin:50% 90%}
.kpart:not(.placed) .pin{animation:ksway 2.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.kpart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
@keyframes ksway{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-3%)}}
.kpart.click .pin{animation:kclick .45s ease-out}
@keyframes kclick{0%{transform:scale(1.12,.86)}45%{transform:scale(.95,1.06) translateY(-4%)}100%{transform:none}}
.kpart.nope .pin{animation:knope .5s ease-in-out}
@keyframes knope{20%,60%{transform:translateX(-8%) rotate(-5deg)}40%,80%{transform:translateX(8%) rotate(5deg)}}
.kpart.hint::before{content:"";position:absolute;inset:-14% -10%;border-radius:50%;border:.32em solid #FFC93A;box-shadow:0 0 0 .5em rgba(255,201,58,.18);animation:khint 1s ease-in-out infinite;z-index:-1}
.kpart.hint::after{content:"";position:absolute;inset:-24% -18%;border-radius:50%;border:.18em dashed #FFC93A;opacity:.7;animation:khint 1s ease-in-out infinite reverse;z-index:-1}
@keyframes khint{50%{transform:scale(1.07);opacity:.75}}
.kspark{position:absolute;z-index:30;width:1.4em;height:1.4em;margin:-.7em;pointer-events:none;animation:kspark .7s ease-out forwards}
.kspark svg{width:100%;height:100%;display:block}
@keyframes kspark{from{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}to{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.2) rotate(120deg)}}
.knum{position:absolute;z-index:25;width:3.2em;height:3.2em;margin:-1.6em;border-radius:50%;border:.2em solid #15121a;display:grid;place-items:center;color:#fff;font-family:var(--font-d);font-weight:900;font-size:1.1em;-webkit-text-stroke:.06em #15121a;box-shadow:inset -.25em -.3em 0 rgba(0,0,0,.18);animation:popin .35s cubic-bezier(.3,1.6,.5,1)}
.bpix{position:absolute;left:3%;bottom:28%;width:19%;z-index:4;transition:left .7s ease-in,bottom .7s ease-in,width .7s,opacity .3s}
.bpix .cat{display:block;width:100%}
.bpix .cat .sp-hero{width:100%}
.bpix .cat .sp-body>svg{transform:scaleX(-1)} /* Пикс смотрит и показывает на детали справа */
.bsay{position:absolute;left:15%;top:20%;z-index:7;font-size:1.35em;padding:.5em 1em;max-width:52%;white-space:normal;transition:opacity .3s}
.bsay.off{opacity:0}
.kwin{position:absolute;overflow:hidden;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.kwin.on{opacity:1}
.kwin .cat{position:absolute;display:block}
.kwin .sp-hero{width:100%}
.bframe.drive{transition:transform 2.2s cubic-bezier(.5,0,.8,.6);transform:translateX(160%)}
.bframe.back{transition:none;transform:translateX(-180%)}
.bframe.arrive{transition:transform 1.2s cubic-bezier(.2,.7,.3,1);transform:none}
.bframe.drive .kpart.wheel .pin,.bframe.arrive .kpart.wheel .pin{animation:kroll .45s linear infinite;transform-origin:50% 50%}
@keyframes kroll{to{transform:rotate(360deg)}}
.bframe.drive .kbody{animation:kbump .3s ease-in-out infinite alternate}
@keyframes kbump{to{translate:0 -1.2%}}
.kdust{position:absolute;z-index:1;pointer-events:none;width:2.4em;height:2.4em;margin:-1.2em;border-radius:50%;background:#fff3df;border:.18em solid #15121a;animation:kdust .9s ease-out forwards}
@keyframes kdust{from{transform:scale(.3);opacity:1}to{transform:translate(-3em,-1em) scale(1.3);opacity:0}}
/* «Сортер»: доска 800×620 из Код/Сортер, фигурки на полу — кнопки, летят в домик сами */
.sframe{position:absolute;left:29%;top:12%;width:66%;aspect-ratio:800/620;z-index:2}
.sframe>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.sframe.tuk>svg{animation:sotuk .3s ease-out}
.sframe.win>svg{animation:sowin .9s ease-in-out 2}
@keyframes sotuk{40%{transform:translateY(.6%) scaleY(.985)}}
@keyframes sowin{30%{transform:translateY(-3%) rotate(-1deg)}70%{transform:translateY(-1%) rotate(1deg)}}
.sframe .sohl{animation:khint 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sozone{position:absolute;z-index:3;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.spiece{position:absolute;z-index:5;width:10.4%;aspect-ratio:192/148;padding:0;border:0;background:none;cursor:pointer;transform:rotate(var(--r));-webkit-tap-highlight-color:transparent}
.spiece .pin{position:absolute;inset:0;display:block;transform-origin:50% 90%;animation:ksway 2.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.spiece svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.spiece.flying{z-index:50}.spiece.flying .pin{animation:none}
.spiece.nope .pin{animation:knope .5s ease-in-out}
.spiece.sel{z-index:6}.spiece.sel .pin{animation:sosel .6s ease-in-out infinite alternate}
@keyframes sosel{from{transform:translateY(-10%) scale(1.12)}to{transform:translateY(-16%) scale(1.15)}}
.spiece.hint::before,.spiece.sel::before{content:"";position:absolute;inset:-14% -10%;border-radius:50%;border:.32em solid #FFC93A;box-shadow:0 0 0 .5em rgba(255,201,58,.18);animation:khint 1s ease-in-out infinite;z-index:-1}
.spiece.hint::after{content:"";position:absolute;inset:-24% -18%;border-radius:50%;border:.18em dashed #FFC93A;opacity:.7;animation:khint 1s ease-in-out infinite reverse;z-index:-1}
.pills .socnt{font-family:var(--font-d);font-weight:900;font-size:1.25em;color:#3a2a20;padding:.05em .7em;white-space:nowrap}
svg.soicon{width:100%;height:auto}
/* Отдельное меню «Игры» (открывается из боковой панели) */
#games .stars{right:3%}
.gmtitle{position:absolute;left:50%;top:4%;transform:translateX(-50%);z-index:5;font-family:var(--font-d);font-weight:900;font-size:2.1em;color:#fff;-webkit-text-stroke:.09em #15121a;paint-order:stroke fill;background:#A35CFF;border:.11em solid #15121a;border-radius:.6em;padding:.05em .9em .12em;box-shadow:inset 0 -.14em 0 rgba(0,0,0,.2),0 .1em 0 #15121a}
.gmpix{position:absolute;left:1.5%;bottom:10%;width:19%;z-index:4}
.gmpix .cat{display:block;width:100%;position:relative;background:none;border:0;padding:0}
.gmpix .cat .sp-hero{width:100%}
.gmsay{position:absolute;left:8%;top:-34%;font-size:1.05em;white-space:nowrap;z-index:5}
.gmgrid{position:absolute;left:22%;right:3%;top:17%;bottom:6%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:1.1em;z-index:3}
.gmcard{position:relative;display:flex;flex-direction:column;background:#fff3df;border:.22em solid #15121a;border-radius:1.3em;box-shadow:inset -.45em -.45em 0 #ecd6b2,0 .3em .6em rgba(0,0,0,.12);overflow:hidden;min-height:0}
.gmcard::before{content:"";position:absolute;left:0;right:0;top:0;height:.55em;background:var(--c);border-bottom:.18em solid #15121a}
.gmcard.done{box-shadow:inset -.45em -.45em 0 #ecd6b2,0 0 0 .25em #3FCF4F,0 0 1.2em rgba(63,207,79,.6)}
.gmcard.done::after{content:"✓";position:absolute;right:.45em;top:.75em;width:1.5em;height:1.5em;border-radius:50%;background:#3FCF4F;border:.15em solid #15121a;color:#fff;font-weight:900;display:grid;place-items:center;font-size:.85em}
.gmmain{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;background:none;border:0;padding:1em .4em .3em;font-family:var(--font-d);font-weight:900;font-size:1.05em;color:#15121a;cursor:pointer}
.gmmain:active{transform:scale(.96)}
.gmic{flex:1;min-height:0;width:78%;display:grid;place-items:center}
.gmic>svg{width:100%;height:100%;max-height:100%}
.gmlv{display:flex;justify-content:center;gap:.35em;padding:0 .4em .6em}
.gmlv button{min-width:2.4em;height:2.4em;padding:0 .35em;border-radius:1.1em;border:.15em solid #15121a;background:var(--c);color:#fff;font-family:var(--font-d);font-weight:900;font-size:.9em;-webkit-text-stroke:.05em #15121a;box-shadow:inset 0 -.2em 0 rgba(0,0,0,.2);cursor:pointer}
.gmlv button svg{width:1.5em;height:1.5em;display:block}
.gmlv button:active{transform:translateY(.1em)}
.gmcard.pop{animation:kclick .45s ease-out}
/* «Яички»: лоток 1240×620 из Код/Яички, половинки на полу летят к донышку */
.eframe{position:absolute;left:21%;top:21%;width:76%;aspect-ratio:1240/620;z-index:2}
.eframe>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.eframe .egw{transform-box:fill-box;transform-origin:50% 92%}
.eframe .egw.wob{animation:egwob .8s ease-in-out}
@keyframes egwob{15%{transform:rotate(-9deg)}35%{transform:rotate(8deg)}55%{transform:rotate(-6deg)}75%{transform:rotate(4deg) scale(1.04)}}
.eframe.win>svg{animation:sowin .9s ease-in-out 2}
.egclk{position:absolute;z-index:30;transform:translate(-50%,-50%) rotate(-8deg);font-family:var(--font-d);font-weight:900;font-size:1.5em;color:#FFC93A;-webkit-text-stroke:.08em #15121a;paint-order:stroke fill;pointer-events:none;animation:egclk .9s ease-out forwards}
@keyframes egclk{0%{opacity:0;transform:translate(-50%,-30%) rotate(-8deg) scale(.5)}25%{opacity:1;transform:translate(-50%,-60%) rotate(-8deg) scale(1.15)}100%{opacity:0;transform:translate(-50%,-110%) rotate(-8deg) scale(1)}}
.egchk{position:absolute;z-index:30;transform:translate(-50%,-50%);pointer-events:none;animation:egchk 1.5s ease-out forwards}
.egchk svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes egchk{0%{opacity:0;transform:translate(-50%,0) scale(.3)}25%{opacity:1;transform:translate(-50%,-55%) scale(1.1)}40%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-40%) scale(.9)}}
.egdance{position:absolute;z-index:6;bottom:17%;width:10%;padding:0;border:0;background:none;cursor:pointer;animation:egdance .42s ease-in-out infinite alternate}
.egdance svg{width:100%;height:auto;display:block;overflow:visible;transform:scaleX(var(--fx,1))}
@keyframes egdance{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-22%) rotate(6deg)}}
/* «Пазлы» */
#build.pz .bpix{left:70%;bottom:2%;width:14%}
#build.pz .bpix .cat .sp-body>svg{transform:none}
#build.pz .bsay{left:auto;right:31%;top:auto;bottom:9%;max-width:30%}
#build.pz .bsay::after{left:auto;right:1.1em;transform:scaleX(-1) skewY(-20deg) rotate(45deg)}
#build.pzpick .bsay{left:22%;top:auto;bottom:10%}
#build.pzfin .bnext{left:62%}
.bsay{pointer-events:none}
.pzsel{position:absolute;left:25%;right:3%;top:15%;display:flex;gap:2.5%;z-index:3}
.pzcard{flex:1;display:flex;flex-direction:column;align-items:center;gap:.45em;min-width:0}
.pzpic{width:100%;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pzpic svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 .4em 0 rgba(90,60,30,.18))}
.pzcard b{font-family:var(--font-d);font-weight:900;font-size:1.35em;color:#3a2a20}
.pzlv{display:flex;gap:.35em}
.pzlv button{width:2.3em;height:2.3em;border-radius:50%;border:.16em solid #15121a;background:#fff;font-family:var(--font-d);font-weight:900;font-size:.95em;color:#3a2a20;cursor:pointer;padding:0;box-shadow:inset 0 -.2em 0 #e7ddcc}
.pzlv button.on{background:#ffc93a;box-shadow:inset 0 -.2em 0 #e6a400}
.pzlv button.want{outline:.2em solid #2EC4B6;outline-offset:.12em}
.pzcard.pop .pzpic{animation:kclick .45s ease-out}
.pzcard.hint .pzpic{animation:khint 1s ease-in-out infinite}
.pzboard{position:absolute;left:50%;top:12%;width:45%;aspect-ratio:1;z-index:2;cursor:pointer}
.pzboard>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.pzboard.tuk>svg{animation:sotuk .3s ease-out}
.pzhl{animation:pzblink .9s ease-in-out infinite}
@keyframes pzblink{50%{opacity:.25}}
.spiece.pzp{transform:var(--ft)}
.spiece.pzp svg{filter:drop-shadow(0 .35em 0 rgba(90,60,30,.18))}
.spiece.pzp.hint::before{inset:8%;border-width:.4em}
.spiece.pzp.hint::after{inset:0}
.pzlive{position:absolute;padding:0;border:0;background:none;cursor:pointer;z-index:3}
.pzlive .sp-hero{width:100%}
.pzsnd{position:absolute;z-index:8;font-size:1.5em;padding:.35em .8em;opacity:0;pointer-events:none}
.pzsnd.on{animation:pzsnd 2.2s ease-out forwards}
@keyframes pzsnd{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.1)}25%{transform:none}85%{opacity:1}100%{opacity:0}}
.pzalb{position:absolute;left:3%;bottom:3%;z-index:6;display:flex;flex-direction:column;gap:.25em}
.pzalb small{font-family:var(--font-d);font-weight:900;color:#3a2a20;font-size:.95em}
.pzalb div{display:flex;gap:.45em}
.pzalb button{width:4.4em;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer}
.pzalb button.no{filter:grayscale(1);opacity:.35}
.pzalb svg{width:100%;height:100%;display:block}
/* «Ёжик» */
.hframe{position:absolute;left:40%;top:8%;width:47%;aspect-ratio:1;z-index:2;cursor:pointer}
.hframe>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 95%;animation:hgbreath 3.2s ease-in-out infinite}
@keyframes hgbreath{50%{transform:scale(1.012,.988)}}
.hframe.hop{animation:hghop .5s ease-out}
@keyframes hghop{30%{transform:translateY(-3%)}60%{transform:translateY(.5%) scaleY(.97)}}
.hframe .hgpop{transform-box:fill-box;transform-origin:center;animation:hgpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hgpop{0%{transform:scale(.6)}100%{transform:none}}
.hframe .sozone{border-radius:50%}
.spiece.hgp{width:9.5%}
.hgsay{font-size:1.4em}
.knum.hgnum{font-size:.8em}
.hgstump{position:absolute;z-index:1;left:82%;top:46%;width:14%;opacity:0;transition:opacity .6s}
.hgstump.on{opacity:1}
.hgstump svg{width:100%;display:block;overflow:visible}
/* «Хлопушка» (сцена 2048×1536 Ника, масштабируется под экран) */
#build.hl .bpix{display:none}
#build.hl .bsay{left:11.7%;top:16%}
.hlstage{position:absolute;left:0;top:0;width:2048px;height:1536px;transform-origin:0 0;overflow:hidden;z-index:1}
.hlstage svg{display:block;width:100%;height:100%;overflow:visible}
.hlbg,.hllayer{position:absolute;inset:0}
.hltub{position:absolute;left:374px;top:560px;width:1300px;height:967px;padding:0;border:0;background:none;cursor:pointer;animation:hlbob 3.2s ease-in-out infinite;transform-origin:50% 70%;-webkit-tap-highlight-color:transparent}
.hltub>div{position:absolute;inset:0}
@keyframes hlbob{50%{transform:translateY(-6px) rotate(-.3deg)}}
.hlbub{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:pointer;will-change:transform;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hlbub svg{pointer-events:none}
.hlpop{position:absolute;width:320px;height:320px;pointer-events:none;animation:hlpop .45s ease-out forwards}
@keyframes hlpop{0%{transform:scale(.4);opacity:1}70%{opacity:1}100%{transform:scale(1.25);opacity:0}}
.hlboom{position:absolute;pointer-events:none;font-family:var(--font-d);font-weight:900;font-size:84px;color:#fff;-webkit-text-stroke:14px #2a74d4;paint-order:stroke fill;transform:translate(-50%,-50%) rotate(-8deg);animation:hlboom .8s ease-out forwards;white-space:nowrap}
@keyframes hlboom{0%{transform:translate(-50%,-50%) rotate(-8deg) scale(.5);opacity:0}25%{opacity:1;transform:translate(-50%,-60%) rotate(-8deg) scale(1.1)}100%{opacity:0;transform:translate(-50%,-120%) rotate(-8deg)}}
.hlfly{position:absolute;left:0;top:0;width:170px;height:170px;pointer-events:none;z-index:3}
.hlshelf{position:absolute;left:880px;top:200px;width:1120px;height:224px;z-index:2}
.hlshelf>svg{position:absolute;inset:0}
.hlslot{position:absolute;width:134px;height:134px;border-radius:50%;border:5px dashed #9cc9e6;box-sizing:border-box;top:26px}
.hlslot.full{border-color:transparent;animation:hlland .5s ease-out;cursor:pointer}
.hlslot.hint{box-shadow:0 0 0 10px #ffc93a,0 0 0 18px #15121a;animation:khint 1s ease-in-out infinite}
@keyframes hlland{0%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:none}}
.hlring{position:absolute;left:0;top:0;width:300px;height:300px;border-radius:50%;border:10px solid #ffc93a;box-sizing:border-box;box-shadow:0 0 0 8px #15121a inset,0 0 0 8px #15121a;pointer-events:none;animation:khint 1s ease-in-out infinite}
.hlstage .hllayer{transition:opacity .4s}
.hlstage.hlcount .hllayer{opacity:.25;pointer-events:none}
.hlstage .knum.hlnum{font-size:34px;z-index:4}
.bnext{position:absolute;z-index:8;left:50%;bottom:7%;transform:translateX(-50%);display:flex;gap:1.2em;opacity:0;pointer-events:none;transition:opacity .4s}
.bnext.on{opacity:1;pointer-events:auto}
.bbtn{white-space:nowrap;display:flex;align-items:center;gap:.5em;font-family:var(--font-d);font-weight:900;font-size:1.5em;color:#fff;padding:.45em 1.1em .5em;border-radius:1.2em;border:.16em solid #15121a;box-shadow:inset 0 -.28em 0 rgba(0,0,0,.2),0 .2em 0 #15121a;-webkit-text-stroke:.04em #15121a}
.bbtn svg{width:1.6em;height:1.6em}
.bbtn.g{background:#3FCF4F}.bbtn.b{background:#3F9BFF}.bbtn.o{background:#FF8A1F}
.bbtn:active{transform:translateY(.12em)}
.drawer .tile svg.kicon{width:56%;height:auto}

/* «Мир Пикса» */
#stars{cursor:pointer;overflow:visible}
#stars .wring{position:absolute;inset:-18% -8%;border-radius:50%;border:.2em solid #FFC93A;animation:khint 1.4s ease-in-out infinite;pointer-events:none}
#stars .wlbl{position:absolute;left:0;right:0;top:96%;text-align:center;font-family:var(--font-d);font-weight:900;font-size:.85em;color:#fff;-webkit-text-stroke:.18em #15121a;paint-order:stroke fill;white-space:nowrap}
#world.nostars>.stars{display:none}
#world .stars{right:3%}
.wpage{position:absolute;inset:0}
.wpage .wsay{position:absolute;left:19%;top:32%;z-index:7;font-size:1.25em;padding:.45em .9em;max-width:48%;white-space:normal;transition:opacity .3s}
.wpage .wsay.off{opacity:0}
.wpix{position:absolute;z-index:4}.wpix .cat{display:block;width:100%;cursor:pointer}.wpix .sp-hero{width:100%}
.wst{width:1em;height:1em;vertical-align:-.12em}
.wprice{display:inline-flex;align-items:center;gap:.15em;padding:.05em .45em .05em .25em;border-radius:1em;background:#fff3df;border:.14em solid #15121a;font-family:var(--font-d);font-weight:900;font-size:.9em;color:#15121a;white-space:nowrap}
.wprice.dim{background:#ece6dc;color:#8a8396}
.wplate{display:inline-block;font-family:var(--font-d);font-weight:900;text-transform:uppercase;color:#fff;-webkit-text-stroke:.05em #15121a;padding:.2em .7em .25em;border-radius:.8em;border:.14em solid #15121a;box-shadow:inset 0 -.22em 0 rgba(0,0,0,.2),0 .15em 0 #15121a;font-size:.95em;white-space:nowrap}
.wplate.green{background:#3FCF4F}.wplate.blue{background:#3F9BFF}.wplate.pink{background:#FF6FAE}.wplate.grey{background:#8a8396;box-shadow:none}
button.wplate:active{transform:translateY(.1em)}
.wscene{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1000/700}
.wscene svg{width:100%;height:100%;display:block}
.wscene.full{inset:0;aspect-ratio:auto}
.wscene .smoke{animation:wsmoke 2.4s ease-in-out infinite alternate}
@keyframes wsmoke{to{transform:translateY(-8px);opacity:.6}}
.wgoal{position:absolute;z-index:5;left:50%;top:3%;transform:translateX(-50%);width:46%;display:flex;align-items:center;gap:.7em;padding:.35em .9em .35em .4em;background:#fff;border:.2em solid #15121a;border-radius:1em;box-shadow:inset -.3em -.3em 0 #e9e2d6;font-family:var(--font-d);text-align:left}
.wgoal.done{justify-content:center;font-size:1.3em;padding:.5em}
.wgoal.ready{animation:playpulse 1.2s ease-in-out infinite}
.wgoal .wthumb{width:22%;flex:none}.wgoal .wthumb svg{width:100%;display:block}
.wgt{display:flex;flex-direction:column;gap:.2em}.wgt b{font-weight:900;font-size:1.1em}.wgt em{font-style:normal;font-weight:900;color:#8a8396;margin-left:.5em}
.wgoal.ready em{color:#2ea83c}
.wjar{position:absolute;z-index:5;right:3%;top:2%;width:8%}
.wjarsvg{width:100%;display:block}
.wplaces{position:absolute;z-index:5;left:2%;right:2%;bottom:1.5%;display:flex;justify-content:space-between}
.wplace{width:11%;display:flex;flex-direction:column;align-items:center}
.wplace svg{width:88%;display:block}
.wplace b{margin-top:-.4em;font-family:var(--font-d);font-weight:900;font-size:.85em;color:#fff;-webkit-text-stroke:.2em #15121a;paint-order:stroke fill}
.w-build .wsay{left:3%;top:14%}
.wbigjar{position:absolute;left:4%;top:28%;width:24%}
.wbigjar svg{width:100%}
.wbcard{position:absolute;left:32%;top:24%;width:54%;height:54%;background:#fff;border:.22em solid #15121a;border-radius:1.2em;box-shadow:inset -.4em -.4em 0 #e9e2d6;display:flex;flex-direction:column;padding:1.5% 2.5%}
.wbimg{flex:1;min-height:0}.wbimg svg{width:100%;height:100%;display:block}
.wbrow{display:flex;align-items:center;justify-content:space-between;padding-top:.4em}
.wbrow>div{display:flex;flex-direction:column;align-items:flex-start;gap:.2em}
.wbname{font-family:var(--font-d);font-weight:900;font-size:1.6em;text-transform:uppercase}
.wbrow .wplate{font-size:1.3em}
.wsteps{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.2em}
.wsteps .pills{position:static;transform:none}.wsteps small{color:#8a8396;font-weight:800}
.w-party .wscene{bottom:0}
.w-party .wsay{left:auto;right:6%;top:13%}
.wsticker{position:absolute;z-index:6;right:4%;top:40%;width:22%;background:#fff;border:.22em solid #15121a;border-radius:1em;box-shadow:inset -.35em -.35em 0 #e9e2d6;display:flex;flex-direction:column;align-items:center;padding:.6em;font-family:var(--font-d);text-align:center;animation:popin .5s .4s cubic-bezier(.3,1.6,.5,1) both}
.wsth{position:absolute;top:-1.3em;font-size:1.25em;color:#fff;-webkit-text-stroke:.2em #15121a;paint-order:stroke fill;text-transform:uppercase}
.wcirc{width:70%;aspect-ratio:1;border-radius:50%;border:.2em solid #15121a;overflow:hidden;background:#fff;display:grid;place-items:center}
.wcirc svg{width:100%;height:100%;display:block}
.wstkicker small,.wstk small{color:#8a8396;font-size:.75em;font-weight:700}
.wcam{position:absolute;z-index:6;right:8%;bottom:4%;width:8%;animation:playpulse 1.2s infinite}
.wcam svg{width:100%;display:block}
.wconf{position:absolute;top:-4%;width:.7em;height:1.1em;border-radius:.2em;border:.1em solid #15121a;z-index:9;pointer-events:none;animation:wconf 3.2s ease-in forwards}
.wconf.star{width:1.3em;height:1.3em;border:0}.wconf.star svg{width:100%;height:100%}
@keyframes wconf{to{transform:translate(var(--x),110vh) rotate(var(--r))}}
.wtabs{position:absolute;z-index:5;left:12%;right:20%;top:4.5%;display:flex;gap:.5em;justify-content:center}
.wtab{font-family:var(--font-d);font-weight:900;font-size:1.05em;padding:.3em .8em;border-radius:1em;background:#fff;border:.18em solid #15121a;box-shadow:0 .15em 0 #15121a}
.wtab.on{background:#FFC93A}
.w-shop .wsay{left:4%;top:42%;max-width:24%}
.wgrid{position:absolute;left:28%;right:3%;top:15%;bottom:3%;display:grid;gap:2%}
.wgrid.g-toys{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.wgrid.g-food{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));bottom:22%}
.wgrid.g-clothes{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.wgrid.g-veh{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;bottom:35%}
.wgrid.g-home{grid-template-columns:1fr;bottom:20%}
.wcard{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.15em;background:#fff;border:.2em solid #15121a;border-radius:1em;box-shadow:inset -.3em -.3em 0 #e9e2d6;padding:.3em .3em .4em;font-family:var(--font-d)}
.wcard .wimg{flex:1;min-height:0;width:100%;display:flex;justify-content:center}.wcard .wimg svg{height:100%;max-width:100%;display:block}
.wcard b{font-weight:900;font-size:.85em}
.wcard .wfoot{display:flex;align-items:center;gap:.3em;font-size:.85em}
.wcard .wfoot em{font-style:normal;font-weight:800;color:#8a8396;font-size:.85em}
.wcard.dim .wimg{opacity:.55;filter:grayscale(.5)}
.wcard.wide{font-size:1.3em}
.wcount{font-weight:900;color:#2ea83c}
.w-wardrobe .wsay{left:30%;top:10%}
.wlab{position:absolute;left:4%;top:16%;font-family:var(--font-d);font-weight:900;font-size:1.3em}
.whoods{position:absolute;left:3%;top:23%;width:22%;display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.whood{position:relative;aspect-ratio:1;border-radius:50%;background:var(--c);border:.22em solid #15121a;box-shadow:inset -.35em -.4em 0 var(--d)}
.whood.on::after{content:"✓";position:absolute;right:-12%;top:-8%;width:46%;aspect-ratio:1;border-radius:50%;background:#3FCF4F;border:.18em solid #15121a;color:#fff;font-weight:900;display:grid;place-items:center;font-size:1.2em}
.whood.locked{opacity:.75}.whood .wprice{position:absolute;left:50%;bottom:-10%;transform:translateX(-50%);font-size:.75em}
.waccs{position:absolute;right:3%;top:13%;bottom:3%;width:38%;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:.5em}
.wacc{position:relative;min-height:0;background:#fff;border:.2em solid #15121a;border-radius:.9em;overflow:hidden;display:flex;flex-direction:column;align-items:center;font-family:var(--font-d)}
.wacc .wimg{flex:1;min-height:0;width:100%}.wacc .wimg svg{width:100%;height:100%;display:block}
.wacc b{font-size:.8em;font-weight:900;position:absolute;bottom:.2em;left:0;right:0;text-align:center;color:#fff;-webkit-text-stroke:.18em #15121a;paint-order:stroke fill}
.wacc.on{border-color:#3FCF4F;box-shadow:0 0 0 .2em #3FCF4F}
.wacc.on::after{content:"✓";position:absolute;right:.2em;top:.2em;width:1.6em;height:1.6em;border-radius:50%;background:#3FCF4F;border:.16em solid #15121a;color:#fff;font-weight:900;display:grid;place-items:center}
.wacc.locked .wimg{opacity:.5}.wacc .wprice{position:absolute;top:.25em;left:.25em;font-size:.75em}
.w-kitchen .wsay{left:auto;right:4%;top:12%}
.wtable{position:absolute;left:20%;right:12%;top:55%;height:5%;background:#d99a4e;border:.2em solid #15121a;border-radius:.6em;box-shadow:inset 0 -.35em 0 #b8783a;z-index:2}
.wfood{position:absolute;left:2%;right:2%;bottom:3%;height:24%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.4em}
.wcard.small{padding:.2em .15em .3em}.wcard.small b{font-size:.68em}.wcard.small .wfoot{font-size:.7em}
.w-toys .wsay{left:auto;right:6%;top:52%}
.wshelf{position:absolute;left:4%;right:4%;top:40%;height:3.5%;background:#d99a4e;border:.2em solid #15121a;border-radius:.5em;box-shadow:inset 0 -.3em 0 #b8783a}
.wtoys{position:absolute;left:4%;right:4%;top:15%;height:26%;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.4em;align-items:end}
.wtoy{position:relative;height:100%}.wtoy .wimg svg{width:100%;height:100%;display:block}.wtoy .wimg{position:absolute;inset:0}
.wtoy.locked .wimg{opacity:.5;filter:grayscale(.6)}
.wlock{position:absolute;left:28%;right:28%;top:58%}.wlock svg{width:100%;display:block}
.whint{position:absolute;left:0;right:0;bottom:2%;text-align:center;color:#8a8396;font-weight:800}
.w-garage .wsay{left:30%;top:14%}
.wgar{position:absolute;left:3%;right:3%;top:30%;height:44%;background:#e3ecf6;border:.22em solid #15121a;border-radius:1.2em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2%;padding:1% 2%}
.wveh{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.wveh .wv{display:block;width:100%;flex:1;min-height:0}.wveh .wv .sp-hero{width:100%;height:100%}
.wveh .wroad{display:block;height:.5em;background:#FFC93A;border:.15em solid #15121a;border-radius:.3em;margin-top:.2em}
.wveh.locked .wv{opacity:.45;filter:grayscale(.6)}
.wveh .wlock{left:35%;right:35%;top:30%}
.wvprices{position:absolute;left:3%;right:3%;top:79%;display:grid;grid-template-columns:repeat(3,1fr);gap:2%;font-size:1.2em}
.wpp{justify-self:center;display:flex;align-items:center;gap:.5em;background:#fff;border:.2em solid #15121a;border-radius:1em;padding:.3em .7em}
.wpp em{font-style:normal;font-weight:800;color:#8a8396}
.wbook{position:absolute;left:5%;right:3%;top:15%;bottom:5%;display:grid;grid-template-columns:1fr 1fr;gap:.6%}
.wpg{background:#fff3df;border:.22em solid #15121a;border-radius:1.2em;padding:3% 4%;display:flex;flex-direction:column}
.wpg h3{margin:0 0 .4em;font-family:var(--font-d);font-weight:900;text-transform:uppercase;font-size:1.4em}
.wsts{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:.6em}
.wstk{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--font-d);min-height:0}
.wstk .wcirc{width:92%}.wstk b{font-size:.72em;font-weight:900;line-height:1.15;margin-top:.2em}
.wstk.empty .wcirc{border:.18em dashed #cbb994;background:#efe4cf;color:#cbb994;font-weight:900;font-size:2em}
.wstk.empty b{color:#cbb994}
.wpolar{position:absolute;left:8%;top:9%;width:60%;background:#fff;border:.22em solid #15121a;border-radius:.6em;padding:2.2% 2.2% 1%;transform:rotate(-2deg);box-shadow:0 .5em 1em rgba(0,0,0,.12);font-family:var(--font-d)}
.wpolar b{display:block;font-weight:900;font-size:1.4em;padding:.4em .2em}
.wshot{position:relative;aspect-ratio:1000/640;overflow:hidden;border:.18em solid #15121a;background:#fffdf7}
.wshot .wscene{bottom:0}
.wpbtns{position:absolute;left:10%;width:56%;bottom:5%;display:flex;justify-content:space-around;font-size:1.3em}
.wfly{position:absolute;z-index:40;width:2.2em;height:2.2em;pointer-events:none}.wfly svg{width:100%;height:100%;display:block}
.wparent{position:absolute;inset:0;z-index:30;background:rgba(21,18,26,.45);display:none;place-items:center}
.wparent.on{display:grid}
.wpbox{width:70%;background:#fff;border-radius:1em;border:3px solid #15121a;padding:1.2em 1.5em;font-size:.95em}
.wpbox h3{margin:0 0 .4em;font-family:var(--font-d)}.wpbox h4{margin:.6em 0 .2em}.wpbox ul{margin:0;padding-left:1.2em}.wpbox li small{color:#8a8396}
.wpbox{max-height:88%;overflow:auto}
.wpkids{display:flex;flex-direction:column;gap:.35em}.wpkid{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.wpkid.on input{border-color:#2e9d5a}.wpkid small{color:#2e9d5a;font-weight:800}
.wpkid .av{width:2.4em;height:2.4em;padding:0;border:0;background:none;cursor:pointer}.wpkid .av svg{width:100%;height:100%}
.wpkid input{font:inherit;padding:.25em .5em;border:2px solid #c9bba8;border-radius:.5em;width:9em}
.wpkid button:not(.av){font:inherit;font-weight:800;padding:.25em .7em;border-radius:.6em;border:2px solid #15121a;background:#fff3df;cursor:pointer}
.wpkid .del.sure{background:#ffd9d6}
.wpacc{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}.wpacc button{font:inherit;font-weight:800;padding:.25em .7em;border-radius:.6em;border:2px solid #15121a;background:#fff3df;cursor:pointer}
.login{position:absolute;inset:0;z-index:45;background:#fbf7ee;display:grid;place-items:center}
.lbox{width:min(30em,86%);background:#fff;border:.18em solid #15121a;border-radius:1.2em;box-shadow:inset 0 -.3em 0 #e9e2d6;padding:1.2em 1.6em 1.3em;display:flex;flex-direction:column;gap:.6em;color:#3a2a20;font-size:1.05em}
.lbox h2{margin:0;font-family:var(--font-d);font-weight:900;font-size:1.7em}.lbox p{margin:0;color:#8a7766}
.lbox label{display:flex;flex-direction:column;gap:.2em;font-weight:800}
.lbox input{font:inherit;font-size:max(16px,1em);font-weight:600;padding:.45em .6em;border:2px solid #c9bba8;border-radius:.6em;color:#3a2a20;background:#fffdf8}
.lbox input:focus{outline:none;border-color:#2e9d5a}
.lerr{min-height:1.2em;color:#e3202b;font-weight:800}
.lerr.ok{color:#2e9d5a}
.lbox .lcode,.lbox .lsendbtns,.lbox .lresetbtns{display:none}
.lbox[data-m=send] .lpw,.lbox[data-m=send] .lmainbtns,.lbox[data-m=send] .lforgot,.lbox[data-m=send] .lskip{display:none}.lbox[data-m=send] .lsendbtns{display:flex}
.lbox[data-m=send] p,.lbox[data-m=reset] p{display:none}.lbox[data-m=reset] .lcode{display:flex}.lbox[data-m=reset] .lmainbtns,.lbox[data-m=reset] .lforgot,.lbox[data-m=reset] .lskip{display:none}.lbox[data-m=reset] .lresetbtns{display:flex}
.lbox .lforgot{align-self:flex-end;margin-top:-.4em;font:inherit;font-size:.85em;background:none;border:0;color:#2a74d4;cursor:pointer}
.lbtns{display:flex;gap:.6em}.lbtns button{flex:1;font:inherit;font-weight:900;padding:.55em .8em;border-radius:.8em;border:.15em solid #15121a;background:#fff3df;cursor:pointer}
.lbtns .lmain{background:#2e9d5a;color:#fff}
.lbox .lskip{align-self:center;font:inherit;background:none;border:0;color:#8a7766;text-decoration:underline;cursor:pointer}
.lbox small{color:#8a7766;font-size:.75em;text-align:center}
.lbox.busy{opacity:.6;pointer-events:none}
.kidpick{position:absolute;inset:0;z-index:40;background:#fbf7ee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em}
.kidpick h2{margin:0;font-family:var(--font-d);font-weight:900;font-size:2.6em;color:#3a2a20}
.kidpick .kids{display:flex;gap:1.3em;flex-wrap:wrap;justify-content:center;max-width:92%}
.kidpick button{display:flex;flex-direction:column;align-items:center;gap:.2em;width:9em;padding:.7em .5em .6em;border-radius:1.2em;border:.18em solid #15121a;background:#fff;box-shadow:inset 0 -.3em 0 #e9e2d6;font-family:var(--font-d);font-weight:900;font-size:1.15em;color:#3a2a20;cursor:pointer}
.kidpick button svg{width:6.5em;height:6.5em}
.kidpick button.tap{transform:scale(.94)}
.kidbtn{position:absolute;z-index:6;left:14%;top:4%;width:6.5%;aspect-ratio:1;border-radius:50%;background:#fff;border:.18em solid #15121a;box-shadow:inset 0 -.25em 0 #e9e2d6;display:grid;place-items:center;padding:0;cursor:pointer}
.kidbtn svg{width:80%;height:80%}
.wpb{display:flex;gap:.6em;flex-wrap:wrap;margin-top:.8em}.wpb button{font:inherit;font-weight:800;padding:.4em .8em;border-radius:.6em;border:2px solid #15121a;background:#fff3df;cursor:pointer}
#homeCam svg{width:100%;display:block}
/* notes */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:28px}
.notes div{border-top:2px solid var(--line);padding-top:10px}
.notes b{display:block;font-family:var(--font-d);font-weight:900;font-size:15px;margin-bottom:4px;color:#c46a00}
.notes p{margin:0;color:var(--muted);font-size:15px}
.hint{color:var(--muted);font-size:14px;margin-top:10px}
/* ============ СТИЛЬ ПИКС 2 — движения ============ */
.sp-hero { width: 100%; aspect-ratio: 400 / 440; transform-origin: 50% 96%; }
.sp-hero svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sp-emo, .sp-pose { transition: opacity .06s; }

/* разовые движения (класс ставит StilPix.play) */
@keyframes sp-bounce { 0%{transform:scale(1,1)} 25%{transform:scale(1.12,.88)} 50%{transform:scale(.92,1.1) translateY(-6%)} 75%{transform:scale(1.04,.96)} 100%{transform:scale(1,1)} }
@keyframes sp-jump   { 0%,100%{transform:translateY(0)} 15%{transform:scale(1.1,.9)} 45%{transform:translateY(-22%) scale(.95,1.06)} 75%{transform:translateY(0) scale(1.08,.92)} }
@keyframes sp-wiggle { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-8deg)} 40%{transform:rotate(7deg)} 60%{transform:rotate(-5deg)} 80%{transform:rotate(3deg)} }
@keyframes sp-shake  { 0%,100%{transform:translateX(0)} 15%,45%,75%{transform:translateX(-5%)} 30%,60%,90%{transform:translateX(5%)} }
@keyframes sp-nod    { 0%,100%{transform:rotate(0)} 30%{transform:rotate(6deg) translateY(2%)} 60%{transform:rotate(-3deg)} }
@keyframes sp-spin   { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(.9) translateY(-10%)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes sp-flip   { 0%{transform:scaleX(1)} 50%{transform:scaleX(-1) translateY(-8%)} 100%{transform:scaleX(1)} }
@keyframes sp-pop    { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 80%{transform:scale(.95)} 100%{transform:scale(1)} }
@keyframes sp-hide   { 0%{transform:scale(1)} 30%{transform:scale(1.1)} 100%{transform:scale(0);opacity:0} }
@keyframes sp-hop2   { 0%,50%,100%{transform:translateY(0) scale(1,1)} 20%,70%{transform:translateY(-14%) scale(.96,1.05)} 45%,95%{transform:scale(1.08,.92)} }
.sp-bounce{animation:sp-bounce .55s ease-out}  .sp-jump{animation:sp-jump .7s ease-out}
.sp-wiggle{animation:sp-wiggle .6s ease-in-out} .sp-shake{animation:sp-shake .5s ease-in-out}
.sp-nod{animation:sp-nod .6s ease-in-out}       .sp-spin{animation:sp-spin .8s ease-in-out}
.sp-flip{animation:sp-flip .6s ease-in-out}     .sp-pop{animation:sp-pop .5s ease-out both}
.sp-hide{animation:sp-hide .4s ease-in both}    .sp-hop2{animation:sp-hop2 .9s ease-out}

/* постоянные движения (StilPix.loop) */
@keyframes sp-breathe { 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.015,1.035)} }
@keyframes sp-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4%)} }
@keyframes sp-dance   { 0%,100%{transform:rotate(0) translateY(0)} 25%{transform:rotate(-9deg) translateY(-6%)} 50%{transform:rotate(0) translateY(0) scale(1.05,.95)} 75%{transform:rotate(9deg) translateY(-6%)} }
@keyframes sp-sway    { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes sp-sleepy  { 0%,100%{transform:scale(1,1) rotate(0)} 50%{transform:scale(1.02,1.05) rotate(2deg)} }
.sp-loop-breathe{animation:sp-breathe 2.6s ease-in-out infinite}
.sp-loop-float{animation:sp-float 2.2s ease-in-out infinite}
.sp-loop-dance{animation:sp-dance .9s ease-in-out infinite}
.sp-loop-sway{animation:sp-sway 1.8s ease-in-out infinite}
.sp-loop-sleepy{animation:sp-sleepy 3.4s ease-in-out infinite}

/* лапка Пикса машет; zZz плывут вверх */
@keyframes sp-wave { 0%,100%{transform:rotate(0)} 25%{transform:rotate(16deg)} 75%{transform:rotate(-12deg)} }
.sp-waving .sp-arm-wave{animation:sp-wave .5s ease-in-out infinite}
@keyframes sp-zzz { 0%{transform:translate(0,0);opacity:0} 30%{opacity:1} 100%{transform:translate(6%,-10%);opacity:0} }
.sp-zzz{animation:sp-zzz 2.4s ease-out infinite;transform-box:view-box}

@media (prefers-reduced-motion: reduce){ .sp-hero, .sp-hero *{animation:none !important} }

/* ============ 2.1 — живой Пикс: хвостик, ушки, ножки, голова ============ */
.sp-rig .sp-tail, .sp-rig .sp-ear-l, .sp-rig .sp-ear-r, .sp-rig .sp-leg-l, .sp-rig .sp-leg-r, .sp-rig .sp-head { transition: transform .25s ease; }
@keyframes sp-tail-sway { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(9deg)} }
@keyframes sp-tail-wag  { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(16deg)} }
.sp-rig .sp-tail { animation: sp-tail-sway 2.6s ease-in-out infinite; }
.sp-rig.sp-p-wag .sp-tail { animation: sp-tail-wag .34s ease-in-out infinite; }
.sp-rig.sp-p-tailDown .sp-tail { animation: none; transform: rotate(16deg) translate(-6px, 8px); }
@keyframes sp-ear-tw-l { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-16deg)} 65%{transform:rotate(6deg)} }
@keyframes sp-ear-tw-r { 0%,100%{transform:rotate(0)} 35%{transform:rotate(14deg)} 65%{transform:rotate(-5deg)} }
.sp-rig.sp-tw-l .sp-ear-l { animation: sp-ear-tw-l .38s ease-in-out; }
.sp-rig.sp-tw-r .sp-ear-r { animation: sp-ear-tw-r .38s ease-in-out; }
.sp-rig.sp-p-earsUp .sp-ear-l { transform: rotate(-12deg) translateY(-6px); }
.sp-rig.sp-p-earsUp .sp-ear-r { transform: rotate(14deg) translateY(-6px); }
.sp-rig.sp-p-earsDown .sp-ear-l { transform: rotate(22deg) translateY(8px); }
.sp-rig.sp-p-earsDown .sp-ear-r { transform: rotate(-18deg) translateY(10px); }
@keyframes sp-step  { 0%,50%,100%{transform:translateY(0) rotate(0)} 22%{transform:translateY(-18px) rotate(-5deg)} }
@keyframes sp-tap-l { 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-16px) rotate(-14deg)} 50%{transform:translateY(0)} }
@keyframes sp-tap-r { 0%,100%{transform:translateY(0) rotate(0)} 75%{transform:translateY(-16px) rotate(14deg)} 50%{transform:translateY(0)} }
.sp-rig.sp-p-walk .sp-leg-l { animation: sp-step .5s ease-in-out infinite; }
.sp-rig.sp-p-walk .sp-leg-r { animation: sp-step .5s ease-in-out infinite; animation-delay: -.25s; }
.sp-rig.sp-p-walk .sp-body { animation: sp-walkbob .25s ease-in-out infinite; }
@keyframes sp-walkbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.5%)} }
.sp-rig.sp-p-dance .sp-leg-l { animation: sp-tap-l .9s ease-in-out infinite; }
.sp-rig.sp-p-dance .sp-leg-r { animation: sp-tap-r .9s ease-in-out infinite; }
.sp-rig.sp-p-tuck .sp-leg-l { transform: translateY(-16px) rotate(-10deg); }
.sp-rig.sp-p-tuck .sp-leg-r { transform: translateY(-16px) rotate(10deg); }
@keyframes sp-headbob { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(4deg) translateY(2px)} }
.sp-rig.sp-p-headbob .sp-head { animation: sp-headbob .45s ease-in-out infinite; }
.sp-rig.sp-p-tilt .sp-head { transform: rotate(-7deg); }
.sp-rig.sp-p-lookUp .sp-head { transform: rotate(4deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce){ .sp-rig *{animation:none !important;transition:none !important} }

/* ============ 2.2 — усы и кончик хвостика ============ */
.sp-rig .sp-tailtip, .sp-rig .sp-wh-l, .sp-rig .sp-wh-r { transition: transform .25s ease; }
@keyframes sp-tip-sway { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(16deg)} }
@keyframes sp-tip-wag  { 0%,100%{transform:rotate(-22deg)} 50%{transform:rotate(24deg)} }
@keyframes sp-tip-flick{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(-34deg)} 60%{transform:rotate(12deg)} }
.sp-rig .sp-tailtip { animation: sp-tip-sway 2.6s ease-in-out infinite; animation-delay: -.45s; }      /* догоняет хвост */
.sp-rig.sp-p-wag .sp-tailtip { animation: sp-tip-wag .34s ease-in-out infinite; animation-delay: -.09s; }
.sp-rig.sp-tw-tip .sp-tailtip { animation: sp-tip-flick .5s ease-in-out; }
.sp-rig.sp-p-tailDown .sp-tailtip { animation: none; transform: rotate(18deg); }
@keyframes sp-wh-l { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-3deg)} }
@keyframes sp-wh-r { 0%,100%{transform:rotate(0)} 50%{transform:rotate(3deg)} }
@keyframes sp-wh-tw-l { 0%,100%{transform:rotate(0)} 25%{transform:rotate(9deg)} 50%{transform:rotate(-4deg)} 75%{transform:rotate(6deg)} }
@keyframes sp-wh-tw-r { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-9deg)} 50%{transform:rotate(4deg)} 75%{transform:rotate(-6deg)} }
@keyframes sp-wh-talk-l { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(5deg)} }
@keyframes sp-wh-talk-r { 0%,100%{transform:rotate(2deg)} 50%{transform:rotate(-5deg)} }
.sp-rig .sp-wh-l { animation: sp-wh-l 3.4s ease-in-out infinite; }
.sp-rig .sp-wh-r { animation: sp-wh-r 3.4s ease-in-out infinite; animation-delay: -1.1s; }
.sp-rig.sp-tw-wh .sp-wh-l { animation: sp-wh-tw-l .45s ease-in-out; }
.sp-rig.sp-tw-wh .sp-wh-r { animation: sp-wh-tw-r .45s ease-in-out; animation-delay: .05s; }
.sp-rig.sp-p-headbob .sp-wh-l { animation: sp-wh-talk-l .22s ease-in-out infinite; }
.sp-rig.sp-p-headbob .sp-wh-r { animation: sp-wh-talk-r .22s ease-in-out infinite; }
.sp-rig.sp-p-earsDown .sp-wh-l { animation: none; transform: rotate(-11deg); }     /* грусть/сон — усы опустились */
.sp-rig.sp-p-earsDown .sp-wh-r { animation: none; transform: rotate(11deg); }
.sp-rig.sp-p-earsUp .sp-wh-l { animation: none; transform: rotate(9deg); }        /* удивился — усы торчком */
.sp-rig.sp-p-earsUp .sp-wh-r { animation: none; transform: rotate(-9deg); }



/* ---- сайт: игра во весь экран в коричневой рамке планшета, как в макете ---- */
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{display:grid;place-items:center;height:100dvh;background:#fbf7ee}
.tablet{padding:clamp(6px,1.4vmin,16px);border-radius:clamp(16px,3vmin,30px)}
.screen{--sw:min(calc(100vw - 8vmin),calc((100dvh - 8vmin)*4/3));width:var(--sw);max-width:none;border-radius:clamp(10px,1.8vmin,18px);font-size:calc(var(--sw)*.018)}