:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#272530;background:#f7eee2;--red:#ef3c43;--ink:#272530;--paper:#fffbf5}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 70% 10%,#ffdcc9,transparent 45%),#f7eee2}main{max-width:1000px;margin:auto;padding:24px 34px 16px;min-height:100svh}header{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:15px;font-weight:900;color:var(--ink);text-decoration:none;letter-spacing:-.6px}.brand:first-letter{color:var(--red)}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #4844b9;outline-offset:6px}.settings{display:flex;gap:6px}.settings button{border:1px solid #27253026;border-radius:50px;background:#ffffff60;padding:9px 12px;font-size:11px;font-weight:800}#intro{text-align:center;padding-top:40px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:900;color:#847877}h1{font-size:clamp(64px,12vw,112px);line-height:.86;letter-spacing:-7px;margin:20px 0}h1 em{font-style:normal;color:var(--red)}.subtitle{font-size:18px;font-weight:700}.hero{height:210px;position:relative;width:100%;max-width:380px;margin:14px auto}p{line-height:1.6;font-size:14px}.muted,.fine{color:#817779}.fine{font-size:10px}.primary{background:var(--ink);color:white;border:0;border-radius:14px;padding:18px 27px;font-weight:900;box-shadow:0 5px 0 #131219;font-size:13px;letter-spacing:1px}.primary span{margin-left:24px;color:#ffb19e}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #131219}footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#948888;margin-top:32px;gap:8px}.chapter{display:flex;justify-content:space-between;margin-top:36px;font-size:10px;letter-spacing:2px;font-weight:900}.track{height:4px;background:#e3d9cf;margin-top:14px;border-radius:10px}.track div{height:100%;background:var(--red);transition:width .5s}.dialogue{text-align:center;min-height:155px;padding:30px 10px 0;max-width:680px;margin:auto}h2{font-size:clamp(22px,4vw,34px);letter-spacing:-1px;line-height:1.18;margin:12px 0}#translation{font-size:13px;color:#776274;margin:8px 0}.stage{position:relative;height:340px;max-width:720px;margin:auto;overflow:hidden;border-radius:24px;background:radial-gradient(ellipse at 50% 70%,#fffaf1 10%,#f5e4d5 70%);border:1px solid #e3d6cc}.spotlight{position:absolute;width:70%;height:100%;left:15%;background:linear-gradient(0deg,#fff8e980,transparent);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}.floor{position:absolute;bottom:0;height:65px;width:100%;background:#e6cbb6;border-top:2px solid #d8b6a0}.actor{position:absolute;left:50%;top:47%;width:190px;height:200px;transform:translate(-50%,-50%);border:0;background:transparent;padding:0;z-index:3;transition:left .35s,top .35s,opacity .35s;filter:drop-shadow(0 12px 3px #70433224);user-select:none}.actor svg{overflow:visible;width:100%;height:100%;transition:transform .45s}.actor .pupil{transition:transform .12s}.actor .brow{transition:transform .2s;transform-origin:center}.actor.suspicious .brow{transform:rotate(-10deg)}.actor.angry .brow{transform:rotate(13deg)}.actor .tongue{display:none}.actor.tease .tongue{display:block}.actor.back .front{opacity:0}.actor.back svg{transform:rotateY(180deg)}.actor.jump svg{animation:hop .65s ease-in-out infinite alternate}.actor.angry svg{animation:shake .25s 4}.actor.plead svg{animation:plead 1s infinite alternate}.actor.small{width:130px;height:145px}.actor.enter{animation:arrive .5s ease-out}.actor.walk{left:76%!important;opacity:0;transition:all 1.1s}.actor.disguise .glasses{display:block}.glasses{display:none}.actor:active svg{transform:translateY(7px) scale(.97)}.actor.back:active svg{transform:rotateY(180deg) translateY(7px)}.shadow{position:absolute;width:150px;height:20px;border-radius:50%;background:#6e453c26;bottom:32px;left:calc(50% - 75px)}.door{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:245px;background:#49333c;border:10px solid #7a534f;border-bottom:0;border-radius:70px 70px 0 0;z-index:4;perspective:500px}.door-panel{position:absolute;inset:0;transform-origin:left;transition:transform .6s;background:linear-gradient(110deg,#e4a86e,#b97d50);border-radius:55px 55px 0 0;border:3px solid #9b603d}.door.open .door-panel{transform:rotateY(-80deg)}.knob{position:absolute;right:12px;top:60%;width:16px;height:16px;border-radius:50%;background:#ffe07b;box-shadow:0 3px 0 #ae823e}.sign{position:absolute;top:70px;left:7px;right:7px;background:#fff4d7;padding:10px 3px;font-size:11px;font-weight:900;text-align:center;transform:rotate(-7deg)}.peek{position:absolute;top:65px;left:34px;color:white;font-size:30px}.prop{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%) rotate(-5deg);z-index:5;border:2px solid #c9ac88;background:#fff9de;border-radius:8px;padding:15px;color:#574738;font-weight:900;max-width:90%;text-align:center}.prop small{display:block;font-size:10px;margin-top:5px}.choices{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0 0;min-height:47px}.choice{border:1px solid #cfc0b5;border-radius:12px;background:#fffaf2;padding:13px 20px;font-size:13px;font-weight:800;min-height:46px}.choice:hover{background:#ffe1cd}.choice:disabled{opacity:.45;cursor:default}.hint{font-size:11px;color:#827476;text-align:center;margin:10px 0 0}.clock{text-align:center;font-size:12px;height:20px;color:#a55c55;font-weight:bold}.confetti{position:absolute;top:-15px;width:9px;height:15px;background:var(--red);animation:fall 2s linear forwards;z-index:6;pointer-events:none}.crown{position:absolute;top:12%;left:50%;transform:translateX(-50%);font-size:65px;z-index:5}#result{text-align:center;padding:45px 0 15px}.result-card{background:#fffbf5;border:1px solid #d8c5b5;border-radius:25px;padding:30px;max-width:540px;margin:20px auto;box-shadow:0 15px 0 #e8d5c6}.result-card h2{font-size:34px}.medal{font-size:65px;animation:arrive .7s}.stat{text-align:left;margin:20px 0;font-size:11px;letter-spacing:1px;font-weight:900}.stat label{display:flex;justify-content:space-between}.meter{height:9px;background:#ece1d6;border-radius:20px;margin-top:8px;overflow:hidden}.meter i{display:block;height:100%;background:var(--red);border-radius:20px;animation:grow 1.2s ease-out}.final-quote{background:#f5e8da;border-radius:12px;padding:15px;font-size:13px}#result .choices{margin-top:28px}@keyframes hop{to{transform:translateY(-24px) rotate(7deg)}}@keyframes shake{50%{transform:rotate(-7deg)}100%{transform:rotate(7deg)}}@keyframes plead{to{transform:scale(1.04) rotate(-3deg)}}@keyframes arrive{from{opacity:0;transform:translateY(25px)}}@keyframes fall{to{transform:translateY(360px) rotate(540deg);opacity:.2}}@keyframes grow{from{width:0}}.reduced *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) *{animation:none!important;transition:none!important}}@media(max-width:600px){main{padding:18px 16px}header{gap:5px}.brand{font-size:12px}.settings button{font-size:10px;padding:8px}#intro{padding-top:32px}h1{letter-spacing:-4px}.hero{height:190px}.stage{height:300px}.actor{width:165px;height:180px}.actor.small{width:105px;height:125px}.dialogue{min-height:155px;padding-top:25px}.chapter{margin-top:25px}.choice{padding:12px 15px}.result-card{padding:25px 18px}.result-card h2{font-size:27px}footer{letter-spacing:.7px}.door{height:225px;width:140px}}@media(max-height:700px) and (min-width:700px){.stage{height:270px}.dialogue{min-height:125px;padding-top:15px}#intro{padding-top:16px}.hero{height:170px}h1{font-size:80px}}

/* Deliberate, player-led comic rhythm. */
.dialogue{background:#fffbf5;border:2px solid #e5d1bf;border-radius:22px;margin-top:22px;margin-bottom:20px;padding:22px 20px;min-height:150px;box-shadow:0 6px 0 #ead7c5}
.dialogue h2{font-size:clamp(27px,4.6vw,40px);line-height:1.25;margin-bottom:6px}
#translation{font-size:clamp(18px,2.8vw,23px);line-height:1.45;color:#614e66;border-top:1px solid #e7d7c7;padding-top:12px;margin-top:12px}
.actor{width:210px;height:230px;filter:drop-shadow(0 12px 3px #70433224)}
.actor.active-target{filter:drop-shadow(0 0 8px #ffbd45) drop-shadow(0 0 15px #ffda7780)}
.choice.active-target,.prop.active-target,.door.active-target{outline:3px solid #efb641;outline-offset:4px;box-shadow:0 0 18px #ffc65160}
.actor.pressed svg{animation:button-pop .55s cubic-bezier(.2,.8,.2,1)}
.actor.angry .brow{transform:rotate(19deg)}
.actor.angry svg{animation:grumble .8s ease-in-out 2}
.actor.angry.pressed svg{animation:button-pop .55s cubic-bezier(.2,.8,.2,1)}
.pop-word{position:absolute;left:50%;top:8%;transform:translateX(-50%) rotate(-8deg);font-size:32px;font-weight:1000;color:#ef3c43;text-shadow:2px 2px #fff;animation:pop-word .65s forwards;pointer-events:none;z-index:8}
.hint{font-size:14px;font-weight:700;color:#65555a;line-height:1.5}
@keyframes button-pop{0%{transform:translateY(0) scale(1)}20%{transform:translateY(10px) scale(1.12,.82)}50%{transform:translateY(-22px) scale(.9,1.12) rotate(-9deg)}75%{transform:translateY(3px) rotate(8deg)}100%{transform:translateY(0) scale(1)}}
@keyframes grumble{25%{transform:translateX(-14px) rotate(-6deg)}75%{transform:translateX(14px) rotate(6deg)}}
@keyframes pop-word{0%{opacity:1;scale:.6}45%{opacity:1;scale:1.15}100%{opacity:0;scale:1;top:0}}
@media(max-width:600px){.actor{width:190px;height:210px}.actor.small{width:112px;height:140px}.dialogue{padding:18px 14px;min-height:150px}.dialogue h2{font-size:28px}.settings button{padding:7px 6px;font-size:9px}.stage{height:310px}}
.reduced .pop-word{display:none}

#count.completed{color:#34735f}#count{font-size:12px;letter-spacing:1px}.next{min-width:155px}.next.active-target{outline-color:#efb641}

/* Interaction stays on the character and occasional scene props. */
#game .choices{display:none}
.object-icon{width:70px;height:70px;padding:5px;border:0;border-radius:50%;background:#fff8e8;font-size:40px;top:79%;left:78%;transform:translate(-50%,-50%);line-height:1;box-shadow:0 5px 0 #c9a67e}
.object-icon:active{transform:translate(-50%,-43%) scale(.93)}

/* Result translations follow the existing dialogue toggle. */
.result-ru{display:none;font-size:15px;line-height:1.5;letter-spacing:0;font-weight:400;color:#70556f;margin:5px 0 12px}
#result.translated .result-ru{display:block}
.stat .result-ru{font-size:13px;margin:4px 0}
.primary .result-ru{color:#f6d4e7;font-size:12px;margin:4px 0 0}
.choice .result-ru{font-size:12px;margin:4px 0 0}
#learn{max-width:135px;white-space:normal;line-height:1.3}
@media(max-width:600px){#learn{max-width:106px}header .brand{flex-shrink:0}.settings{gap:4px}}

.stat-joke{font-size:14px;font-weight:400;line-height:1.5;letter-spacing:0;margin:9px 0 0;color:#51474d}.stat-joke .result-ru{margin:5px 0 0;font-size:14px}