@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Patrick+Hand&display=swap");.monster-story{--bedroom-dark:#1a1a2e;--bedroom-mid:#252542;--blanket-purple:#6B5B95;--blanket-light:#8B7BB5;--monster-fur:#7FB069;--monster-fur-light:#9FD089;--monster-fur-dark:#5F9049;--lamp-warm:#FFB347;--lamp-glow:rgba(255,179,71,0.3);--pajama-pink:#FFB6C1;--pajama-blue:#87CEEB;--eye-white:#FFFEF2;--eye-pupil:#2C2C2C;--cheek-blush:#FFB6B6;--pillow-white:#F5F5F0;--wood-brown:#8B6914;--text-cream:#FFF8E7;--text-soft:rgba(255,248,231,0.8);--font-title:"Fredoka",sans-serif;--font-body:"Fredoka",sans-serif;--font-handwritten:"Patrick Hand",cursive;--space-unit:8px;--transition-bounce:0.5s cubic-bezier(0.68,-0.55,0.265,1.55);--transition-gentle:0.4s ease-out;font-family:var(--font-body);background:var(--bedroom-dark);color:var(--text-cream);min-height:100vh;overflow-x:hidden;font-size:22px;line-height:1.7}.monster-story *{margin:0;padding:0;box-sizing:border-box}.story-title{font-family:var(--font-title);font-size:clamp(2.5rem,10vw,5rem);font-weight:700;line-height:1.1;color:var(--text-cream);text-shadow:0 4px 20px rgba(0,0,0,.3)}.story-subtitle{font-family:var(--font-handwritten);font-size:clamp(1.25rem,4vw,1.75rem);color:var(--lamp-warm);margin-top:calc(var(--space-unit) * 2)}.story-text{font-family:var(--font-body);font-size:clamp(1.25rem,5vw,1.5rem);font-weight:500;line-height:1.8;color:var(--text-cream);max-width:550px;text-align:center}.story-text-emphasis{color:var(--lamp-warm);font-weight:600}.story-text-whisper{color:var(--blanket-light);font-style:italic}.story-text-monster,.story-text-whisper{font-family:var(--font-handwritten);font-size:clamp(1.5rem,6vw,2rem)}.story-text-monster{color:var(--monster-fur-light)}.story-ending{font-family:var(--font-title);font-size:clamp(2.5rem,8vw,4rem);font-weight:700;color:var(--lamp-warm);text-align:center;text-shadow:0 0 40px var(--lamp-glow)}.story-section{position:relative;min-height:100dvh;padding:calc(var(--space-unit) * 4);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}.story-section.visible{opacity:1;transform:translateY(0)}.hero-section{background:linear-gradient(180deg,var(--bedroom-dark) 0,var(--bedroom-mid) 100%);position:relative;overflow:hidden}.bedroom-scene{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}.window{position:absolute;top:10%;right:15%;width:120px;height:160px;background:linear-gradient(180deg,#2a2a4a,#3a3a5a);border:8px solid var(--wood-brown);border-radius:8px 8px 0 0;overflow:hidden}.window-moon{position:absolute;top:20px;right:20px;width:40px;height:40px;background:#FFFACD;border-radius:50%;box-shadow:0 0 30px rgba(255,250,205,.5)}.window-stars{position:absolute;inset:0}.window-star{position:absolute;width:3px;height:3px;background:white;border-radius:50%;animation:twinkle 2s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.3}}.bed{position:relative;width:90%;max-width:500px;height:250px}.bed-frame{position:absolute;bottom:0;left:0;right:0;height:200px;background:var(--wood-brown);border-radius:20px 20px 0 0}.mattress{position:absolute;bottom:40px;left:10px;right:10px;height:100px;background:var(--pillow-white);border-radius:15px}.blanket{position:absolute;bottom:50px;left:5px;right:5px;height:120px;background:linear-gradient(135deg,var(--blanket-purple) 0,var(--blanket-light) 100%);border-radius:20px;z-index:5}.pillow{top:-30px;width:140px;height:60px;background:var(--pillow-white);border-radius:50%;z-index:6}.child-in-bed,.pillow{position:absolute;left:50%;transform:translateX(-50%)}.child-in-bed{top:-60px;z-index:10}.child-head{width:80px;height:80px;background:#FFDAB9;border-radius:50%;position:relative}.child-hair{position:absolute;top:-5px;left:-5px;right:-5px;height:50px;background:#4A3728;border-radius:50px 50px 0 0}.child-face{position:absolute;top:25px;left:0;right:0;display:flex;flex-direction:column;align-items:center}.child-eyes{display:flex;gap:15px}.child-eye{width:16px;height:16px;background:var(--eye-white);border-radius:50%;position:relative;overflow:hidden}.child-eye.closed{height:3px;border-radius:10px;background:#4A3728}.child-pupil{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--eye-pupil);border-radius:50%}.child-mouth{margin-top:8px;width:12px;height:6px;background:#D4756A;border-radius:0 0 10px 10px}.child-cheeks{display:flex;gap:35px;margin-top:-15px}.child-cheek{width:12px;height:8px;background:var(--cheek-blush);border-radius:50%;opacity:.6}.under-bed{position:absolute;bottom:0;left:20px;right:20px;height:40px;background:#0a0a15;border-radius:0 0 10px 10px}.monster-eyes-peeking{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:30px;opacity:0;transition:opacity 1s ease}.monster-eyes-peeking.visible{opacity:1}.peeking-eye{width:20px;height:20px;background:var(--eye-white);border-radius:50%;position:relative;animation:peekBlink 4s ease-in-out infinite}.peeking-eye:after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:10px;height:10px;background:var(--eye-pupil);border-radius:50%}@keyframes peekBlink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.bedside-lamp{position:absolute;bottom:180px;right:10%;cursor:pointer;transition:transform .3s ease}.bedside-lamp:hover{transform:scale(1.05)}.lamp-base{width:40px;height:20px;background:var(--wood-brown);border-radius:5px}.lamp-stem{width:10px;background:#B8860B}.lamp-shade,.lamp-stem{height:40px;margin:0 auto}.lamp-shade{width:60px;background:var(--lamp-warm);border-radius:30px 30px 0 0;position:relative}.lamp-glow{position:absolute;top:-20px;left:-30px;right:-30px;bottom:-20px;background:radial-gradient(ellipse,var(--lamp-glow) 0,transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none}.lamp-on .lamp-glow{opacity:1}.lamp-on .lamp-shade{box-shadow:0 0 30px var(--lamp-warm)}.hero-content{position:relative;z-index:20;text-align:center;margin-bottom:200px}.scroll-hint{position:absolute;bottom:calc(var(--space-unit) * 10);left:50%;transform:translateX(-50%);font-family:var(--font-handwritten);font-size:1rem;color:var(--text-soft);animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}.monster-full{position:relative;width:280px;height:320px;cursor:pointer;transition:transform var(--transition-bounce)}.monster-full:hover{transform:scale(1.05)}.monster-full:active{transform:scale(.95)}.monster-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:200px;height:220px;background:var(--monster-fur);border-radius:100px 100px 80px 80px;overflow:hidden}.monster-body:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,var(--monster-fur-light) 2px,transparent 2px),radial-gradient(circle at 80% 20%,var(--monster-fur-light) 2px,transparent 2px),radial-gradient(circle at 40% 70%,var(--monster-fur-light) 2px,transparent 2px),radial-gradient(circle at 70% 60%,var(--monster-fur-light) 2px,transparent 2px),radial-gradient(circle at 30% 90%,var(--monster-fur-light) 2px,transparent 2px);opacity:.5}.monster-belly{bottom:20px;width:120px;height:100px;background:var(--monster-fur-light);border-radius:60px}.monster-belly,.monster-face{position:absolute;left:50%;transform:translateX(-50%)}.monster-face{top:30px;width:180px;display:flex;flex-direction:column;align-items:center}.monster-eyes{display:flex;gap:20px}.monster-eye{width:50px;height:50px;background:var(--eye-white);border-radius:50%;position:relative;box-shadow:inset 0 -5px 10px rgba(0,0,0,.1)}.monster-pupil{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:20px;height:20px;background:var(--eye-pupil);border-radius:50%;transition:all .3s ease}.monster-pupil:after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:white;border-radius:50%}.monster-full.scared .monster-pupil{width:25px;height:25px;bottom:8px}.monster-full.happy .monster-pupil{bottom:15px}.monster-mouth{margin-top:15px;width:40px;height:20px;background:#5F4040;border-radius:0 0 30px 30px;position:relative;overflow:hidden}.monster-tongue{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:20px;height:15px;background:#FF6B6B;border-radius:50%}.monster-full.happy .monster-mouth{height:30px;width:50px}.monster-full.scared .monster-mouth{width:30px;height:30px;border-radius:50%}.monster-cheeks{display:flex;gap:80px;margin-top:-25px}.monster-cheek{width:25px;height:15px;background:var(--cheek-blush);border-radius:50%;opacity:.7}.monster-horns{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:100px}.monster-horn{width:30px;height:50px;background:var(--monster-fur-dark);border-radius:50% 50% 0 0;transform:rotate(-15deg)}.monster-horn:last-child{transform:rotate(15deg)}.monster-arms{position:absolute;top:100px;left:0;right:0;display:flex;justify-content:space-between}.monster-arm{width:50px;height:80px;background:var(--monster-fur);border-radius:30px}.monster-arm.left{transform:rotate(30deg);margin-left:-10px}.monster-arm.right{transform:rotate(-30deg);margin-right:-10px}.monster-full.waving .monster-arm.right{animation:wave .5s ease-in-out infinite}@keyframes wave{0%,to{transform:rotate(-30deg)}50%{transform:rotate(-60deg)}}.monster-feet{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);display:flex;gap:40px}.monster-foot{width:50px;height:30px;background:var(--monster-fur-dark);border-radius:50%}.monster-full.shaking{animation:shake .5s ease-in-out infinite}@keyframes shake{0%,to{transform:translateX(0) rotate(0)}25%{transform:translateX(-5px) rotate(-2deg)}75%{transform:translateX(5px) rotate(2deg)}}.child-standing{position:relative;width:120px;height:200px}.child-standing-body{bottom:0;width:60px;height:100px;background:var(--pajama-pink);border-radius:30px 30px 0 0}.child-standing-body,.child-standing-head{position:absolute;left:50%;transform:translateX(-50%)}.child-standing-head{top:0;width:70px;height:70px;background:#FFDAB9;border-radius:50%}.child-standing-hair{position:absolute;top:-5px;left:-3px;right:-3px;height:40px;background:#4A3728;border-radius:40px 40px 0 0}.child-standing-face{position:absolute;top:25px;left:0;right:0;display:flex;flex-direction:column;align-items:center}.child-standing-eyes{display:flex;gap:12px}.child-standing-eye{width:14px;height:14px;background:var(--eye-white);border-radius:50%;position:relative}.child-standing-eye:after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:7px;height:7px;background:var(--eye-pupil);border-radius:50%}.child-standing-mouth{margin-top:8px;width:15px;height:8px;border-radius:0 0 10px 10px;background:#D4756A}.child-standing-mouth.smiling{height:12px;width:20px}.child-standing-arms{position:absolute;top:80px;left:0;right:0;display:flex;justify-content:space-between}.child-standing-arm{width:20px;height:50px;background:#FFDAB9;border-radius:10px}.child-standing-legs{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:10px}.child-standing-leg{width:20px;height:50px;background:var(--pajama-pink);border-radius:0 0 10px 10px}.child-standing-feet{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);display:flex;gap:15px}.child-standing-foot{width:25px;height:12px;background:#FFE4C4;border-radius:50%}.under-bed-scene{background:linear-gradient(180deg,var(--bedroom-dark) 0,#0a0a15 100%);position:relative}.darkness-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 0,#0a0a15 80%);pointer-events:none}.friendship-scene{background:linear-gradient(180deg,var(--bedroom-mid) 0,var(--bedroom-dark) 100%)}.friends-together{display:flex;align-items:flex-end;gap:calc(var(--space-unit) * 4)}.light-scene{background:radial-gradient(ellipse at 50% 30%,rgba(255,179,71,.15) 0,var(--bedroom-dark) 60%)}.sleep-scene{background:linear-gradient(180deg,var(--bedroom-dark) 0,#0f0f1a 100%)}.zzz-container{position:absolute;top:20%;right:20%;font-family:var(--font-handwritten);font-size:2rem;color:var(--blanket-light);opacity:0;animation:floatZzz 3s ease-in-out infinite}.zzz-container.visible{opacity:1}@keyframes floatZzz{0%,to{transform:translateY(0) rotate(-10deg);opacity:.3}50%{transform:translateY(-20px) rotate(10deg);opacity:1}}.tap-target{cursor:pointer;transition:transform .3s ease}.tap-target:hover{transform:scale(1.05)}.tap-target:active{transform:scale(.95)}.tap-hint{font-family:var(--font-handwritten);font-size:.875rem;color:var(--text-soft);margin-top:calc(var(--space-unit) * 2);opacity:.6}.heart-container{position:absolute;pointer-events:none}.heart{font-size:2rem;color:var(--cheek-blush);opacity:0;animation:floatHeart 2s ease-out forwards}@keyframes floatHeart{0%{opacity:1;transform:translateY(0) scale(.5)}to{opacity:0;transform:translateY(-100px) scale(1.5)}}.story-credits{padding:calc(var(--space-unit) * 8) calc(var(--space-unit) * 4);background:linear-gradient(180deg,var(--bedroom-dark) 0,#0a0a15 100%);text-align:center}.credits-content{max-width:500px;margin:0 auto}.credits-monster{width:80px;height:80px;margin:0 auto calc(var(--space-unit) * 3)}.credits-text{font-family:var(--font-body);font-size:1rem;color:var(--text-soft);line-height:1.8}.credits-text a{color:var(--lamp-warm);text-decoration:none}@media (prefers-reduced-motion:reduce){.monster-story *,.monster-story :after,.monster-story :before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width:768px){.story-section{padding:calc(var(--space-unit) * 3)}.monster-full{width:220px;height:260px}.monster-body{width:160px;height:180px}.child-standing{width:100px;height:160px}.bed{max-width:350px;height:200px}}@supports (padding:env(safe-area-inset-bottom)){.story-credits{padding-bottom:calc(var(--space-unit) * 8 + env(safe-area-inset-bottom))}}