@font-face{font-family:Fredoka;src:url('/assets/fredoka.woff2') format('woff2');font-display:swap;font-weight:300 700}
:root{font-family:Fredoka,"Noto Sans",system-ui,sans-serif;color:#202139;background:#fff9f0}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #6d80dc;outline-offset:3px}[hidden]{display:none!important}html:not(.i18n-ready) [data-i18n],html:not(.i18n-ready) #currentLanguage{visibility:hidden}
.page{position:relative;display:flex;justify-content:center;min-height:100dvh;background:radial-gradient(circle at 7% 24%,#fff0ee 0,transparent 32%),radial-gradient(circle at 92% 73%,#f2f9f5 0,transparent 30%),radial-gradient(#eadbc9 1px,transparent 1px),radial-gradient(90deg,#eadbc9 1px,transparent 1px),#fffaf0;background-size:auto,auto,24px 24px,24px 24px,auto;background-position:0 0,0 0,12px 12px,12px 12px,0 0;overflow:hidden}
.page:before{content:"";position:absolute;inset:24px;border:1px solid #ecdfc9;border-radius:32px;pointer-events:none}.ambient{position:absolute;top:18%;display:flex;align-items:center;gap:15px;color:#e7c588;font-size:33px;opacity:.9;animation:ambient 6s ease-in-out infinite}.ambient span{font-size:21px;transform:translateY(44px)}.ambient-left{left:8%}.ambient-right{right:8%;top:22%;animation-delay:-2s}@keyframes ambient{50%{transform:translateY(-14px) rotate(9deg)}}
.experience{position:relative;width:min(690px,100vw);height:100dvh;min-height:620px;overflow:hidden;isolation:isolate;border-radius:22px;background:#f6e7d8;box-shadow:0 0 0 1px #e6d6c5,0 12px 55px #6b423426}.room,.room-tint{position:absolute;inset:0;pointer-events:none}.room{background:url('/assets/room.jpg') center top/cover no-repeat;animation:room-in 1s ease-out both}.room-tint{background:linear-gradient(to bottom,#ffe9d92b 0,transparent 25%,transparent 63%,#35211a25 100%)}@keyframes room-in{from{filter:blur(5px) brightness(1.08);transform:scale(1.03)}to{filter:none;transform:scale(1)}}
.topbar{position:absolute;z-index:7;top:14px;left:50%;width:calc(100% - 30px);display:flex;align-items:flex-start;justify-content:space-between;transform:translateX(-50%);pointer-events:none}.brand{position:relative;display:flex;align-items:baseline;margin:0 auto;padding:5px 15px 7px;border:2px solid #ffeaff;border-radius:15px;background:#fffdfbea;box-shadow:0 5px 14px #7144592b;color:#b24b97;font-size:27px;font-weight:700;letter-spacing:-1.4px;line-height:1;white-space:nowrap;pointer-events:auto;transform:rotate(-2deg)}.brand span:nth-child(2){color:#715ac8}.brand i{position:absolute;top:-9px;right:-8px;color:#e69ac8;font-size:20px;font-style:normal;text-shadow:0 1px #fff}.top-actions{position:absolute;top:1px;right:0;display:flex;gap:7px;pointer-events:auto}.top-actions button{display:inline-flex;align-items:center;justify-content:center;height:36px;border:1px solid #fff9;border-radius:12px;background:#fffc;box-shadow:0 3px 9px #6740382b;color:#775986}.top-actions button:hover{background:#fff;transform:translateY(-2px)}.top-actions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.sound-button{width:36px}.sound-button.is-muted{opacity:.55}.language-button{gap:5px;padding:0 8px;font-size:13px;font-weight:700}.language-button svg{width:17px;height:17px}
.language-menu{position:absolute;z-index:20;top:58px;right:15px;width:196px;max-height:min(62dvh,390px);overflow:auto;padding:6px;border:1px solid #e7cbdf;border-radius:15px;background:#fffdfdf5;box-shadow:0 13px 35px #5e304a3b;scrollbar-width:thin;scrollbar-color:#d6a9c8 transparent}.language-menu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:#51415a;font-size:14px;text-align:left}.language-menu button:hover,.language-menu button[aria-selected=true]{background:#f7e6f0;color:#9e4286}.language-menu button[aria-selected=true]:after{content:"✓";font-size:15px}
.speech{position:absolute;z-index:6;top:20px;left:50%;width:min(368px,calc(100% - 64px));min-height:51px;padding:14px 20px;border-radius:24px;background:#fff;box-shadow:0 4px 0 #c6d6e6,0 8px 17px #2f4b6029;color:#202437;font-size:16px;font-weight:600;line-height:1.35;transform:translateX(-50%);animation:speech-in .3s cubic-bezier(.2,1.3,.4,1)}.speech:after{content:"";position:absolute;left:38px;bottom:-12px;width:22px;height:17px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px #c6d6e6)}@keyframes speech-in{from{opacity:0;transform:translate(-50%,-12px) scale(.95)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.character-hit{position:absolute;z-index:3;top:3.5%;left:50%;display:flex;justify-content:center;align-items:flex-start;width:100%;height:157%;padding:0;border:0;background:none;transform:translateX(calc(-50% + var(--drag-x,0px)));touch-action:pan-y;cursor:pointer}.character{display:block;flex:none;width:auto;height:100%;max-width:none;filter:drop-shadow(0 14px 5px #5836221f);transform-origin:50% 60%;animation:character-idle 4.8s ease-in-out infinite;user-select:none;pointer-events:none}.character-hit:hover .character{filter:drop-shadow(0 0 12px #ffe2f3b8) drop-shadow(0 15px 5px #5836221c)}.character-hit.is-reacting .character{animation:character-react .7s ease-in-out both}@keyframes character-idle{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}@keyframes character-react{0%,100%{transform:translateY(0) rotate(0)}27%{transform:translateY(-18px) rotate(-2deg) scale(1.025)}56%{transform:translateY(-7px) rotate(1.5deg)}}
.reaction-layer{position:absolute;z-index:6;inset:0;pointer-events:none}.reaction{position:absolute;font-size:21px;text-shadow:0 2px #fff,0 0 8px #fff;animation:reaction-float 1.55s ease-out forwards}.reaction.word{padding:3px 10px;border:2px solid #fff;border-radius:999px;background:#ffedfa;color:#b55b95;font-size:16px;font-weight:700;box-shadow:0 4px 10px #70436126}@keyframes reaction-float{0%{opacity:0;transform:translateY(25px) scale(.6) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translateY(-105px) scale(1.22) rotate(13deg)}}
.intro-pill{position:absolute;z-index:5;top:43%;left:50%;padding:9px 17px;border:2px solid #fff;border-radius:999px;background:#fbe2f4e8;box-shadow:0 6px 18px #834e723b;color:#aa568f;font-weight:700;font-size:19px;white-space:nowrap;transform:translateX(-50%) rotate(-4deg);animation:intro-pop 1s .5s both, pill-float 3s 1.5s ease-in-out infinite}@keyframes intro-pop{from{opacity:0;transform:translateX(-50%) scale(.7) rotate(-12deg)}to{opacity:1;transform:translateX(-50%) scale(1) rotate(-4deg)}}@keyframes pill-float{50%{transform:translate(-50%,-8px) rotate(-2deg)}}
.bottom-controls{position:absolute;z-index:8;left:50%;bottom:max(30px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;width:min(328px,calc(100% - 40px));transform:translateX(-50%)}.bottom-controls button{width:100%;font-weight:700;transition:filter .17s,transform .17s,box-shadow .17s}.bottom-controls button:hover{filter:brightness(1.06);transform:translateY(-3px)}.bottom-controls button:active{transform:translateY(2px)}.touch-button{position:absolute;bottom:calc(100% + 57px);left:50%;display:flex;justify-content:center;align-items:center;gap:10px;max-width:238px;height:43px;border:2px solid #fff;border-radius:999px;background:#fb8abcf0;box-shadow:0 4px 0 #c35d94,0 9px 16px #6e335048;color:#fff;text-shadow:0 2px 2px #9a4672;font-size:18px;transform:translateX(-50%);animation:touch-bob 2.7s ease-in-out infinite}.touch-button:hover{transform:translate(-50%,-3px)!important}.touch-icon{font-size:16px;color:#ffeff9}@keyframes touch-bob{50%{transform:translate(-50%,-7px)}}
.start-button{height:72px;border:2px solid #36a326;border-radius:19px;background:linear-gradient(#9bf277 0%,#39d332 19%,#08b715 59%,#009c0d 100%);box-shadow:inset 0 4px 2px #ecffdd9e,inset 0 -5px 1px #167a1b7c,0 5px 0 #147d13,0 10px 18px #304b2e63;color:#fff;font-size:21px;letter-spacing:.5px;text-shadow:0 2px 1px #136b16,0 -1px 1px #4d8a4a}.account-button{height:52px;border:2px solid #fff;border-radius:14px;background:linear-gradient(#fff,#f7fbff 80%,#def0ff);box-shadow:0 4px 0 #7dc5ee,0 8px 13px #3c5a7c50;color:#23439a;font-size:15px;text-shadow:0 1px #fff}.toast{position:absolute;z-index:30;left:50%;bottom:28%;width:max-content;max-width:calc(100% - 40px);padding:11px 17px;border-radius:13px;background:#282838e8;box-shadow:0 8px 25px #0004;color:#fff;text-align:center;transform:translateX(-50%)}
@media(max-width:700px){.page{background:#f3e1d3}.page:before,.ambient{display:none}.experience{width:100%;border-radius:0;box-shadow:none}.brand{font-size:24px}.character-hit{top:4%;height:149%}.speech{top:63px}.topbar{top:13px}.bottom-controls{bottom:max(25px,env(safe-area-inset-bottom))}}@media(max-width:420px){.character-hit{top:5%;height:143%}.bottom-controls{width:min(300px,calc(100% - 35px))}.start-button{height:65px;font-size:19px}.account-button{height:48px;font-size:14px}.touch-button{bottom:calc(100% + 40px)}.speech{font-size:14px;width:calc(100% - 38px);min-height:44px;padding:11px 15px}.brand{margin:0 auto 0 0}.top-actions{right:0}}@media(max-height:700px){.touch-button{bottom:calc(100% + 25px)}.intro-pill{top:38%}.bottom-controls{bottom:max(16px,env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* The character is one illustration, with only its expression regions layered. */
.character-puppet{position:relative;display:block;flex:none;height:100%;aspect-ratio:2/3;animation:puppet-breathe 5.4s ease-in-out infinite;transform-origin:50% 46%;pointer-events:none}
.character-hit .character,.character-hit .expression{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;animation:none;pointer-events:none}
.character-hit.is-reacting .character{animation:none}
.expression{opacity:0;transition:opacity 55ms linear}
.expression-blink{-webkit-mask-image:radial-gradient(ellipse 5.2% 2.5% at 45.5% 10.4%,#000 55%,transparent 100%),radial-gradient(ellipse 5.2% 2.5% at 52.7% 10.8%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 5.2% 2.5% at 45.5% 10.4%,#000 55%,transparent 100%),radial-gradient(ellipse 5.2% 2.5% at 52.7% 10.8%,#000 55%,transparent 100%)}
.expression-talk{-webkit-mask-image:radial-gradient(ellipse 4.1% 2% at 48.3% 13.35%,#000 56%,transparent 100%);mask-image:radial-gradient(ellipse 4.1% 2% at 48.3% 13.35%,#000 56%,transparent 100%)}
.character-puppet.is-blinking .expression-blink,.character-puppet.mouth-open .expression-talk{opacity:1}
.character-puppet.is-winking .expression-blink,.character-puppet.is-smiling .expression-blink,.character-puppet.is-smiling .expression-talk,.character-puppet.is-surprised .expression-talk{opacity:1}
.character-puppet.is-winking:not(.is-blinking) .expression-blink{-webkit-mask-image:radial-gradient(ellipse 5.2% 2.5% at 45.5% 10.4%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 5.2% 2.5% at 45.5% 10.4%,#000 55%,transparent 100%)}
.eye-glint{position:absolute;z-index:2;top:10.1%;width:.48%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 2px #fff;opacity:.7;transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));transition:transform 100ms ease-out;pointer-events:none}
.eye-glint-left{left:44.7%}.eye-glint-right{left:52.2%}.character-puppet.is-blinking .eye-glint,.character-puppet.is-smiling .eye-glint,.character-puppet.is-winking .eye-glint-left{opacity:0}
.cheek-blush{position:absolute;top:11.4%;width:6%;height:2%;border-radius:50%;background:radial-gradient(ellipse,#f57cab75 0,transparent 72%);opacity:0;transition:opacity .18s;pointer-events:none}.cheek-blush-left{left:38.5%}.cheek-blush-right{left:53.2%}.character-puppet.is-blushing .cheek-blush{opacity:1}
.character-puppet.is-idle-blush .cheek-blush,.character-puppet.is-smiling .cheek-blush{opacity:.75}
.character-puppet.is-nodding{animation:puppet-nod .7s ease-out both}.character-puppet.is-hair{animation:puppet-hair .9s ease-in-out both}.character-puppet.is-waving{animation:puppet-wave .72s ease-in-out both}.character-puppet.is-bouncing{animation:puppet-bounce .68s ease-out both}
@keyframes puppet-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.003,1.006)}}
@keyframes puppet-nod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(7px) rotate(-1.2deg)}60%{transform:translateY(-5px) rotate(.7deg)}}
@keyframes puppet-hair{0%,100%{transform:rotate(0)}24%{transform:rotate(-1.6deg)}60%{transform:rotate(1.1deg)}}
@keyframes puppet-wave{0%,100%{transform:translateX(0) rotate(0)}36%{transform:translateX(5px) rotate(1.3deg)}67%{transform:translateX(-3px) rotate(-.5deg)}}
@keyframes puppet-bounce{0%,100%{transform:translateY(0)}32%{transform:translateY(-13px) scale(1.012)}62%{transform:translateY(3px) scale(.996)}}
.touch-button{bottom:calc(100% + 160px)}
.touch-ring,.touch-spark{position:absolute;left:var(--x);top:var(--y);pointer-events:none}.touch-ring{width:42px;height:42px;margin:-21px 0 0 -21px;border:3px solid var(--effect-color,#f68cbd);border-radius:50%;box-shadow:0 0 0 3px #fff9,0 0 18px var(--effect-color,#f68cbd);animation:touch-ring .6s ease-out both}.touch-spark{font-size:var(--size,18px);line-height:1;color:var(--effect-color,#f68cbd);text-shadow:0 0 4px #fff,0 2px 4px #fff;transform:translate(-50%,-50%);animation:touch-spark .9s ease-out both}
@keyframes touch-ring{0%{opacity:1;transform:scale(.25)}100%{opacity:0;transform:scale(2.3)}}@keyframes touch-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}22%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2)}}
@media(max-width:700px){.touch-button{bottom:calc(100% + 145px)}}
@media(max-height:700px){.touch-button{bottom:calc(100% + 85px)}}

.character-puppet.is-squatting{animation:puppet-squat .88s cubic-bezier(.25,.7,.3,1) both}
.character-puppet:not(.has-mesh).is-idle-knee{animation:puppet-squat 1.45s cubic-bezier(.25,.7,.3,1) both}
@keyframes puppet-squat{0%,100%{transform:translateY(0) scale(1)}37%{transform:translateY(22px) scale(1.02,.976)}67%{transform:translateY(-6px) scale(.994,1.008)}}
.character-mesh{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.character-puppet.has-mesh>.character,.character-puppet.has-mesh>.expression{visibility:hidden}
.character-puppet.has-mesh>.character-mesh{opacity:1}