:root{--magic-pink:#ff78d2;--magic-lilac:#b88cff;--magic-violet:#7d5cff;--magic-gold:#ffd66b;--magic-sky:#bfeeff;--magic-water:#79d8ff;--magic-water-deep:#48b7e7;--magic-green:#62c66f;--magic-dark:#2c1856}.castle-magic-world,.castle-magic-world *{box-sizing:border-box}.castle-magic-world{position:fixed;inset:0;z-index:99998;overflow:hidden;pointer-events:auto;background:linear-gradient(180deg,#ffd7ef 0%,#d9c8ff 38%,#bfeeff 68%,#f9c9e8 100%);transition:opacity 1.1s ease,filter 1.1s ease;isolation:isolate}.castle-magic-world::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 72%,rgba(255,255,255,.25),transparent 38%),linear-gradient(90deg,rgba(255,120,210,.12),rgba(184,140,255,.1));pointer-events:none}.castle-scene-ready .castle-magic-world{z-index:0;pointer-events:none;opacity:.48;filter:saturate(1.05)}body.magic-night .castle-magic-world{background:linear-gradient(180deg,#28184f 0%,#5d3e90 42%,#9468bb 70%,#eaa3d2 100%);opacity:.58}.magic-theme-toggle,.magic-skip{position:fixed;right:18px;border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--magic-pink),var(--magic-violet));box-shadow:0 10px 30px rgba(125,92,255,.35);font-weight:700;z-index:100001;cursor:pointer;backdrop-filter:blur(8px)}.magic-theme-toggle{top:18px;padding:12px 18px;font-size:13px}.magic-skip{top:68px;padding:10px 16px;font-size:12px;background:rgba(69,46,105,.55);border:1px solid rgba(255,255,255,.45)}.castle-scene-ready .magic-skip{display:none}.magic-sky{position:absolute;inset:0;background:radial-gradient(circle at 83% 15%,rgba(255,255,255,.9),rgba(255,236,162,.5) 7%,transparent 18%),radial-gradient(circle at 12% 16%,rgba(255,255,255,.55),transparent 20%)}.magic-stars{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.8px),radial-gradient(circle,#ffeffb 0 1px,transparent 1.7px);background-size:170px 170px,230px 230px;background-position:20px 40px,90px 20px;animation:starsTwinkle 5s ease-in-out infinite}.castle-scene-ready .magic-stars{opacity:.08}body.magic-night .magic-stars{opacity:.55}.magic-sun-moon{position:absolute;right:9vw;top:9vh;width:86px;height:86px;border-radius:50%;background:#fff7a1;box-shadow:0 0 0 18px rgba(255,245,164,.22),0 0 65px 35px rgba(255,217,103,.55);transition:all 1s ease}.magic-sun-moon span{position:absolute;inset:-24px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 12deg,rgba(255,216,96,.55) 13deg 22deg,transparent 23deg 45deg);animation:spin 16s linear infinite}body.magic-night .magic-sun-moon{background:#f6f0ff;box-shadow:0 0 0 14px rgba(255,255,255,.11),0 0 58px 22px rgba(213,193,255,.65);transform:translate(-4vw,1vh)}body.magic-night .magic-sun-moon:after{content:"";position:absolute;width:66px;height:66px;border-radius:50%;right:-10px;top:-6px;background:#5d3e90}body.magic-night .magic-sun-moon span{display:none}.magic-rainbow{position:absolute;left:50%;top:14vh;width:min(720px,58vw);height:min(360px,28vw);border-radius:720px 720px 0 0;transform:translateX(-50%) scaleX(.15);opacity:0;border-top:12px solid rgba(255,100,180,.55);box-shadow:0 -12px 0 rgba(255,210,95,.5),0 -24px 0 rgba(103,226,149,.45),0 -36px 0 rgba(89,196,255,.38),0 -48px 0 rgba(174,124,255,.32);filter:blur(.2px);transition:opacity 1s ease,transform 1.7s cubic-bezier(.2,.8,.2,1)}.castle-gates-open .magic-rainbow{opacity:.68;transform:translateX(-50%) scaleX(1)}.cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.82);filter:drop-shadow(0 14px 14px rgba(140,91,190,.16));transition:transform .15s linear}.cloud i,.cloud b,.cloud em{position:absolute;border-radius:50%;background:inherit}.cloud-left-frame{left:-4vw;top:-4vh;width:230px;height:70px}.cloud-right-frame{right:-5vw;top:-3vh;width:330px;height:92px}.cloud-small{width:170px;height:52px}.cloud-one{left:13vw;top:6vh}.cloud-two{right:22vw;top:14vh}.cloud i{width:46%;height:130%;left:12%;bottom:10%}.cloud b{width:40%;height:120%;right:11%;bottom:12%}.cloud em{width:30%;height:92%;left:42%;bottom:35%}.land{position:absolute;left:0;right:0;bottom:0;height:29vh;background:linear-gradient(180deg,transparent,#b3e89d 12%,#64c66b 100%);opacity:.9}.river{position:absolute;bottom:5vh;height:21vh;background:linear-gradient(180deg,#b9f0ff,var(--magic-water) 36%,var(--magic-water-deep));box-shadow:inset 0 18px 30px rgba(255,255,255,.34),0 0 28px rgba(80,190,255,.32);overflow:hidden}.river:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,transparent 0 38px,rgba(255,255,255,.46) 40px 44px,transparent 47px 86px);animation:waterMove 6s linear infinite}.river-left{left:-5vw;width:50vw;border-radius:0 55% 45% 0;transform:skewY(-4deg)}.river-right{right:-5vw;width:50vw;border-radius:55% 0 0 45%;transform:skewY(4deg)}.river-shine{position:absolute;left:23vw;right:23vw;bottom:11vh;height:9vh;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.55),transparent 65%);animation:riverPulse 4s ease-in-out infinite}.waterfall{position:absolute;width:70px;height:45px;border-radius:0 0 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(118,214,255,.32));filter:blur(.2px);animation:fall 1.8s linear infinite}.wf-a{left:18%;top:5%}.wf-b{left:43%;top:24%}.wf-c{right:32%;top:15%}body.magic-night .river{background:linear-gradient(180deg,#69dcff,#8d8cff 42%,#ee8fff);box-shadow:inset 0 18px 30px rgba(255,255,255,.22),0 0 44px rgba(224,130,255,.75)}body.magic-night .river:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 40%,rgba(255,255,255,.75) 0 3px,transparent 5px),radial-gradient(circle at 70% 56%,rgba(255,133,231,.7) 0 4px,transparent 7px);background-size:150px 80px;animation:waterMove 4s linear infinite}.castle-code-object{position:absolute;left:50%;bottom:24vh;width:min(610px,58vw);height:min(390px,45vh);transform:translateX(-50%);filter:drop-shadow(0 22px 28px rgba(83,51,128,.25));animation:castleFloat 6s ease-in-out infinite}.castle-shadow{position:absolute;left:8%;right:8%;bottom:-15px;height:26px;border-radius:50%;background:rgba(77,54,118,.22);filter:blur(9px)}.tower,.castle-main,.castle-wall{position:absolute;bottom:0;background:linear-gradient(90deg,#d78acb,#ffd0eb 48%,#be7fd8);border:2px solid rgba(255,255,255,.25);box-shadow:inset -12px 0 28px rgba(110,62,170,.18),inset 8px 0 18px rgba(255,255,255,.26)}.tower{width:17%;border-radius:25px 25px 12px 12px}.t-left.small{left:0;height:47%}.t-left.big{left:16%;height:70%}.t-center{left:41%;width:18%;height:100%;z-index:4}.t-right.big{right:16%;height:70%}.t-right.small{right:0;height:47%}.roof,.main-roof{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:130%;height:35%;clip-path:polygon(50% 0,100% 100%,0 100%);background:repeating-linear-gradient(180deg,#7e78c8 0 5px,#635aab 6px 9px);filter:drop-shadow(0 -3px 2px rgba(255,255,255,.18))}.flag{position:absolute;left:58%;bottom:133%;width:4px;height:36px;background:#ffd66b}.flag:after{content:"";position:absolute;left:4px;top:3px;border-left:25px solid #ff78d2;border-top:7px solid transparent;border-bottom:7px solid transparent;animation:flagWave 1.5s ease-in-out infinite}.window{position:absolute;left:50%;top:43%;width:22px;height:45px;transform:translateX(-50%);border-radius:13px 13px 4px 4px;background:#ffd66b;box-shadow:0 0 18px #ffce6a;animation:windowGlow 2.8s ease-in-out infinite}.castle-main{left:29%;width:42%;height:64%;border-radius:28px 28px 12px 12px;z-index:3}.main-roof{width:74%;height:53%;bottom:100%}.castle-wall{height:36%;width:30%;bottom:0;z-index:2;background:linear-gradient(90deg,#b39ebd,#eac2e8 52%,#a98bc1)}.wall-left{left:11%;border-radius:22px 0 0 12px}.wall-right{right:11%;border-radius:0 22px 12px 0}.arch,.balcony{position:absolute;left:50%;transform:translateX(-50%)}.arch{bottom:10%;width:48px;height:58px;border-radius:28px 28px 8px 8px;background:rgba(83,51,128,.2)}.balcony{bottom:40%;width:82%;height:10px;border-radius:99px;background:repeating-linear-gradient(90deg,#8a6b9f 0 6px,#ead5ef 7px 12px)}.castle-gate{position:absolute;left:50%;bottom:0;width:29%;height:39%;transform:translateX(-50%);z-index:7;border-radius:90px 90px 8px 8px;overflow:hidden;background:#25163d;box-shadow:0 0 35px rgba(255,198,89,.45)}.gate-leaf{position:absolute;top:0;width:51%;height:100%;background:linear-gradient(90deg,#79451f,#b66a31 50%,#5f3418);border:2px solid rgba(255,214,107,.45);transition:transform 2.2s cubic-bezier(.18,.75,.25,1)}.gate-left{left:0;transform-origin:left center}.gate-right{right:0;transform-origin:right center}.gate-leaf i{position:absolute;inset:12%;border-radius:50%;border:2px solid rgba(255,214,107,.55)}.castle-gates-open .gate-left{transform:perspective(600px) rotateY(-72deg)}.castle-gates-open .gate-right{transform:perspective(600px) rotateY(72deg)}.gate-glow{position:absolute;inset:24% 28% 0;border-radius:50%;background:radial-gradient(circle,#fff3a8,rgba(255,152,209,.7),transparent 65%);opacity:0;transition:opacity .7s ease .9s}.castle-gates-open .gate-glow{opacity:1}.gate-sparks{position:absolute;left:50%;bottom:18%;width:7px;height:7px;border-radius:50%;background:#9c53aa;box-shadow:10px -20px 0 #ffd66b,-18px -12px 0 #ff78d2,28px -42px 0 #fff,-35px -38px 0 #b88cff,4px -58px 0 #ffd66b;opacity:0}.castle-gates-open .gate-sparks{animation:sparks 1.8s ease-in-out infinite;opacity:1}.wizard{position:absolute;left:50%;bottom:21vh;width:58px;height:115px;z-index:20;transform:translateX(-50%) translateY(-16px) scale(.82);opacity:0;transition:transform 1.5s ease 1.05s,opacity .7s ease 1.05s}.castle-gates-open .wizard{opacity:1;transform:translateX(-50%) translateY(34px) scale(1)}.wizard .hat{position:absolute;left:12px;top:0;width:34px;height:38px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(90deg,#5a3aa2,#b88cff)}.wizard .head{position:absolute;left:20px;top:34px;width:20px;height:20px;border-radius:50%;background:#ffd9bf}.wizard .beard{position:absolute;left:14px;top:49px;width:32px;height:36px;border-radius:0 0 50% 50%;background:#fff}.wizard .robe{position:absolute;left:10px;top:58px;width:42px;height:57px;clip-path:polygon(23% 0,77% 0,100% 100%,0 100%);background:linear-gradient(90deg,#513085,#935cff,#513085);box-shadow:0 0 20px rgba(184,140,255,.45)}.wizard .staff{position:absolute;right:3px;top:34px;width:4px;height:76px;background:#6b4521;transform-origin:bottom;animation:staffWave 3.7s ease-in-out infinite 2.1s}.wizard .staff:after{content:"";position:absolute;left:-8px;top:-12px;width:20px;height:20px;border-radius:50%;background:#ffd66b;box-shadow:0 0 22px 8px #ff78d2}.wizard .spell{position:absolute;right:-20px;top:6px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,120,210,.5),transparent 70%);opacity:0}.castle-gates-open .wizard .spell{animation:spellPulse 3s ease-in-out infinite 2s}.stone-path{position:absolute;left:50%;bottom:0;width:240px;height:29vh;transform:translateX(-50%);clip-path:polygon(37% 0,63% 0,100% 100%,0 100%);background:repeating-linear-gradient(0deg,#d7c3dd 0 18px,#c8b1d5 19px 21px),repeating-linear-gradient(90deg,transparent 0 36px,rgba(110,75,128,.3) 37px 39px);z-index:10}.magic-bridge{position:absolute;left:20vw;bottom:20vh;width:185px;height:65px;border-radius:90px 90px 12px 12px;border-top:16px solid #f4d6ef;background:linear-gradient(#d6b7d7,#a88fbc);z-index:14;transition:filter .3s}.magic-bridge:hover{filter:drop-shadow(0 0 20px #ffd66b)}.rail{position:absolute;top:-32px;width:100%;height:36px;border-top:5px solid #c676d6;border-radius:100px 100px 0 0}.rail-b{top:-22px;transform:scaleX(.82)}.bridge-light{position:absolute;left:0;top:-30px;width:20px;height:6px;border-radius:99px;background:#ffd66b;box-shadow:0 0 14px #ffd66b;animation:bridgeSpark 3.5s linear infinite}.lantern{position:absolute;width:22px;height:46px;border-radius:12px 12px 6px 6px;background:#42284f;z-index:17}.lantern:after{content:"";position:absolute;left:5px;top:8px;width:12px;height:18px;border-radius:50%;background:#ffd66b;box-shadow:0 0 20px 8px rgba(255,214,107,.7);animation:lanternGlow 2s ease-in-out infinite}.lantern-a{left:37vw;bottom:17vh}.lantern-b{left:59vw;bottom:17vh}.lantern-c{left:28vw;bottom:7vh}.lantern-d{right:27vw;bottom:7vh}.fairy{position:absolute;width:34px;height:34px;z-index:18;filter:drop-shadow(0 0 10px #fff)}.fairy span{position:absolute;left:14px;top:12px;width:8px;height:16px;border-radius:9px;background:#fff}.fairy:before,.fairy:after{content:"";position:absolute;top:5px;width:17px;height:23px;border-radius:80% 20% 80% 20%;background:rgba(255,255,255,.68);border:1px solid rgba(255,120,210,.8)}.fairy:before{left:0;transform:rotate(-30deg)}.fairy:after{right:0;transform:scaleX(-1) rotate(-30deg)}.fairy-a{left:28vw;top:20vh;animation:fairyFly 7s ease-in-out infinite}.fairy-b{right:27vw;top:25vh;animation:fairyFly 8s ease-in-out infinite reverse}.fairy-c{left:43vw;top:10vh;transform:scale(.75);animation:fairyFly 9s ease-in-out infinite}.fairy-d{right:40vw;top:37vh;transform:scale(.65);animation:fairyFly 6s ease-in-out infinite reverse}.magic-carriage{position:absolute;left:-140px;top:17vh;width:90px;height:48px;z-index:22;opacity:0;animation:carriageFly 24s linear infinite 7s}.carriage-body{position:absolute;inset:16px 22px 4px;border-radius:18px;background:linear-gradient(90deg,#ff78d2,#ffd66b);box-shadow:0 0 18px #ffd66b}.carriage-wing{position:absolute;top:3px;width:36px;height:26px;border-radius:80% 20% 80% 20%;background:rgba(255,255,255,.72)}.wing-a{left:4px;transform:rotate(-20deg)}.wing-b{right:4px;transform:scaleX(-1) rotate(-20deg)}.carriage-dust{position:absolute;right:70px;top:20px;width:110px;height:8px;border-radius:99px;background:linear-gradient(90deg,transparent,#ffd66b,#ff78d2,transparent);filter:blur(3px)}.pegasus,.griffin{position:absolute;z-index:16;animation:creatureBreathe 3s ease-in-out infinite}.pegasus{width:110px;height:80px}.pegasus-left{left:8vw;bottom:14vh}.pegasus-right{right:24vw;bottom:13vh;transform:scale(.88)}.pegasus .body,.griffin .body{position:absolute;left:20px;top:35px;width:58px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.6)}.pegasus .head{position:absolute;right:8px;top:21px;width:28px;height:23px;border-radius:50%;background:#fff}.pegasus .head:after{content:"";position:absolute;right:3px;top:-8px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:15px solid #fff}.pegasus .wing,.griffin .wing{position:absolute;left:33px;top:6px;width:54px;height:42px;border-radius:80% 20% 80% 20%;background:rgba(255,255,255,.82);transform:rotate(-18deg);animation:wingSoft 2s ease-in-out infinite}.pegasus .leg{position:absolute;top:57px;width:6px;height:22px;background:#fff;border-radius:4px}.pegasus .l1{left:34px}.pegasus .l2{left:60px}.griffin{right:13vw;bottom:11vh;width:105px;height:72px}.griffin .body{background:#d39b57}.griffin .head{position:absolute;right:9px;top:23px;width:30px;height:24px;border-radius:50% 50% 35% 35%;background:#fff}.griffin .head:after{content:"";position:absolute;right:-13px;top:8px;border-left:18px solid #f4c55e;border-top:7px solid transparent;border-bottom:7px solid transparent}.griffin .wing{background:#f4d0a0}.oak-tree{position:absolute;right:1vw;bottom:11vh;width:250px;height:350px;z-index:15}.oak-trunk{position:absolute;left:96px;bottom:0;width:64px;height:210px;border-radius:35px 35px 10px 10px;background:linear-gradient(90deg,#5d351d,#8b572e,#472713)}.oak-crown{position:absolute;border-radius:50%;background:radial-gradient(circle,#8be06e,#4da553 65%,#2e7838);box-shadow:0 0 22px rgba(98,198,111,.3)}.c1{width:210px;height:150px;left:12px;top:10px}.c2{width:170px;height:140px;left:80px;top:65px}.c3{width:160px;height:135px;left:0;top:82px}.gold-chain{position:absolute;left:60px;bottom:112px;width:150px;height:105px;border-radius:50%;border:7px dashed #ffd66b;transform:rotate(-18deg);filter:drop-shadow(0 0 6px #ffd66b)}.scholar-cat{position:absolute;right:48px;top:82px;width:52px;height:58px;border-radius:45% 45% 40% 40%;background:#6f6772;box-shadow:0 0 10px rgba(255,255,255,.25);animation:catBlink 4s ease-in-out infinite}.scholar-cat:before,.scholar-cat:after{content:"";position:absolute;top:20px;width:7px;height:7px;border-radius:50%;background:#ffe56b;box-shadow:0 0 0 2px rgba(0,0,0,.15)}.scholar-cat:before{left:14px}.scholar-cat:after{right:14px}.ears{position:absolute;top:-10px;left:8px;width:36px;height:18px;background:linear-gradient(135deg,transparent 50%,#6f6772 51%),linear-gradient(225deg,transparent 50%,#6f6772 51%);background-size:18px 18px;background-position:left,right;background-repeat:no-repeat}.book{position:absolute;left:9px;bottom:8px;width:38px;height:19px;border-radius:3px;background:#f7dca0;transform:rotate(-5deg)}.tail{position:absolute;right:-12px;bottom:7px;width:26px;height:10px;border-radius:10px;background:#6f6772;transform-origin:left;animation:tailWave 2s ease-in-out infinite}.mermaid{position:absolute;left:6px;bottom:7px;width:48px;height:32px;border-radius:50% 50% 30% 30%;background:linear-gradient(90deg,#ffd9c8,#75d9d0);transform:rotate(-12deg)}.gold-fish{position:absolute;left:-24px;bottom:20px;width:24px;height:12px;border-radius:50%;background:#ffd66b;box-shadow:0 0 12px #ffd66b;animation:fishJump 5s ease-in-out infinite}.hut-legs{position:absolute;right:22vw;bottom:20vh;width:54px;height:45px;border-radius:6px;background:#9b6f48;z-index:9;opacity:.55}.hut-legs:before,.hut-legs:after{content:"";position:absolute;bottom:-28px;width:8px;height:30px;background:#5f3d22;border-radius:8px}.hut-legs:before{left:12px;transform:rotate(13deg)}.hut-legs:after{right:12px;transform:rotate(-13deg)}body:not(.castle-scene-ready)>:not(#castle-magic-world):not(script):not(style):not(noscript){opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}body.castle-scene-ready>:not(#castle-magic-world):not(script):not(style):not(noscript){opacity:1;transform:none}body.castle-scene-ready .header,body.castle-scene-ready .hero,body.castle-scene-ready main,body.castle-scene-ready section,body.castle-scene-ready footer{position:relative;z-index:2}.hero.colorful-gradient-1{background:transparent!important}.header{z-index:5!important}.mobile-bottom-nav{z-index:10000!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes starsTwinkle{50%{opacity:.04}}@keyframes waterMove{to{background-position:220px 0}}@keyframes riverPulse{50%{opacity:.35;transform:scaleX(1.08)}}@keyframes fall{50%{opacity:.45;transform:translateY(10px)}}@keyframes castleFloat{50%{transform:translateX(-50%) translateY(-6px)}}@keyframes flagWave{50%{transform:skewY(-12deg)}}@keyframes windowGlow{50%{box-shadow:0 0 28px 8px #ffd66b}}@keyframes sparks{50%{transform:translate(-8px,-22px) scale(1.7);opacity:.75}}@keyframes staffWave{45%,55%{transform:rotate(-25deg)}}@keyframes spellPulse{35%,60%{opacity:.75;transform:scale(1.25)}100%{opacity:0}}@keyframes bridgeSpark{to{left:100%}}@keyframes lanternGlow{50%{box-shadow:0 0 30px 12px rgba(255,214,107,.9)}}@keyframes fairyFly{50%{transform:translate(24px,-18px) scale(1.1)}}@keyframes carriageFly{0%{opacity:0;transform:translateX(0) translateY(20px)}8%,80%{opacity:1}100%{opacity:0;transform:translateX(112vw) translateY(-70px)}}@keyframes creatureBreathe{50%{filter:drop-shadow(0 0 10px rgba(255,255,255,.7));transform:translateY(-4px)}}@keyframes wingSoft{50%{transform:rotate(-28deg) scaleY(1.08)}}@keyframes catBlink{48%,52%{filter:brightness(.7)}}@keyframes tailWave{50%{transform:rotate(20deg)}}@keyframes fishJump{0%,72%,100%{transform:translateY(0);opacity:0}80%{transform:translateY(-40px);opacity:1}88%{transform:translateY(0);opacity:.7}}@media (max-width:900px){.castle-code-object{width:76vw;height:330px;bottom:25vh}.oak-tree{right:-50px;transform:scale(.72);transform-origin:right bottom}.pegasus-right,.griffin,.hut-legs{display:none}.magic-bridge{left:8vw;transform:scale(.8)}.stone-path{width:170px}.magic-theme-toggle{max-width:180px;font-size:11px}.river{height:18vh}.cloud-right-frame{width:260px}.cloud-left-frame{width:190px}}@media (prefers-reduced-motion:reduce){.castle-magic-world *{animation:none!important;transition:none!important}} /* === FIX: 2026-05-29 composition corrections === */ .magic-theme-toggle{ width:48px!important;height:48px!important;padding:0!important; top:16px!important;right:18px!important;border-radius:50%!important; display:flex!important;align-items:center!important;justify-content:center!important; font-size:22px!important;line-height:1!important;color:#fff!important; z-index:100002!important;pointer-events:auto!important; background:linear-gradient(135deg,#ff78d2,#7d5cff)!important; border:1px solid rgba(255,255,255,.55)!important; box-shadow:0 10px 28px rgba(125,92,255,.35),0 0 18px rgba(255,120,210,.35)!important; } .magic-skip{top:18px!important;right:76px!important;} body.castle-scene-ready>.magic-theme-toggle{ opacity:1!important;transform:none!important;visibility:visible!important; } body:not(.castle-scene-ready)>:not(#castle-magic-world):not(.magic-theme-toggle):not(script):not(style):not(noscript){ opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease; } body.magic-night .magic-theme-toggle{background:linear-gradient(135deg,#5d3e90,#1c123b)!important;} /* Water now stays away from the castle base and the oak tree */ .river{bottom:5vh!important;height:16.5vh!important;} .river-left{left:-4vw!important;width:35vw!important;border-radius:0 48% 42% 0!important;} .river-right{right:16vw!important;width:36vw!important;border-radius:30% 0 0 38%!important;} .river-shine{left:14vw!important;right:30vw!important;bottom:10vh!important;height:5.5vh!important;opacity:.55!important;} .waterfall{width:54px!important;height:34px!important;opacity:.75!important;} /* The bridge is removed, as requested */ .magic-bridge{display:none!important;} /* Pegasi stand on grass at the water edge and lean toward the river */ .pegasus{z-index:18!important;} .pegasus-left{left:8vw!important;bottom:25vh!important;transform:rotate(0deg)!important;} .pegasus-right{right:39vw!important;bottom:10vh!important;transform:scale(.88) rotate(0deg)!important;} .pegasus .head{top:34px!important;right:0!important;transform:rotate(20deg);transform-origin:left center;} .pegasus .head:before{content:"";position:absolute;left:8px;top:19px;width:18px;height:20px;border-radius:50%;background:#fff;transform:rotate(20deg);} .pegasus .leg{top:58px!important;height:24px!important;} /* Oak stays in place; chain wraps around the trunk instead of floating as a ring */ .gold-chain{ left:82px!important;bottom:54px!important;width:92px!important;height:172px!important; border:none!important;border-radius:0!important;transform:none!important; background: radial-gradient(ellipse at center,transparent 44%,#ffd66b 46% 49%,transparent 51%) 0 0/92px 38px repeat-y; filter:drop-shadow(0 0 5px rgba(255,214,107,.9)); animation:chainGlow 3s ease-in-out infinite; } .gold-chain:before,.gold-chain:after{ content:"";position:absolute;left:10px;right:10px;height:28px;border-radius:50%; border:5px dashed #ffd66b;transform:rotate(-12deg); } .gold-chain:before{top:28px}.gold-chain:after{bottom:18px;transform:rotate(12deg)} /* A smaller cat walks around the chain/trunk; no cigarette-looking detail */ .scholar-cat{ width:36px!important;height:28px!important;right:auto!important;left:103px!important;top:auto!important;bottom:168px!important; border-radius:50% 45% 45% 50%!important;background:#5d5563!important; box-shadow:0 0 8px rgba(255,255,255,.22)!important; animation:catAroundTree 8s ease-in-out infinite!important; transform-origin:22px 94px; } .scholar-cat:before,.scholar-cat:after{ top:8px!important;width:5px!important;height:5px!important;background:#ffe56b!important;box-shadow:none!important; } .scholar-cat:before{left:10px!important}.scholar-cat:after{right:11px!important} .scholar-cat .ears{top:-7px!important;left:7px!important;width:23px!important;height:12px!important;background:linear-gradient(135deg,transparent 50%,#5d5563 51%),linear-gradient(225deg,transparent 50%,#5d5563 51%)!important;background-size:12px 12px!important;background-position:left,right!important;background-repeat:no-repeat!important;} .scholar-cat .book{left:8px!important;bottom:-11px!important;width:23px!important;height:11px!important;background:#f7dca0!important;border-radius:3px!important;transform:rotate(5deg)!important;} .scholar-cat .tail{right:-13px!important;bottom:5px!important;width:18px!important;height:7px!important;background:#5d5563!important;} .mermaid{display:none!important;} /* Hut remains, but it is pushed farther into the background */ .hut-legs{right:24vw!important;bottom:24vh!important;transform:scale(.72)!important;opacity:.42!important;} @keyframes chainGlow{50%{filter:drop-shadow(0 0 9px rgba(255,214,107,1));}} @keyframes catAroundTree{ 0%{transform:translateX(-26px) scale(1);z-index:16;} 22%{transform:translateX(18px) translateY(12px) scale(.88);z-index:14;opacity:.86;} 50%{transform:translateX(50px) translateY(-2px) scale(1);z-index:17;opacity:1;} 75%{transform:translateX(6px) translateY(-18px) scale(.92);z-index:14;opacity:.88;} 100%{transform:translateX(-26px) scale(1);z-index:16;} } @media (max-width:900px){ .river{height:14vh!important;} .river-right{right:20vw!important;width:32vw!important;} .pegasus-left{bottom:17vh!important;transform:scale(.72)!important;transform-origin:left bottom!important;} .magic-theme-toggle{width:44px!important;height:44px!important;font-size:20px!important;} .magic-skip{right:70px!important;} } /* === FIX: requested only - build delay, round right river, 4-strip chain, cat, remove hut/griffin === */ .griffin,.hut-legs{display:none!important;} .river-right{ right:1000vw!important; bottom:3vh!important; width:60vh!important; height:17vh!important; border-radius:50%!important; transform:none!important; } .river-right:before{border-radius:50%!important;} .gold-chain{ left:95px!important; bottom:45px!important; width:65px!important; height:96px!important; border:0!important; border-radius:0!important; transform:none!important; background: linear-gradient(90deg,#b57b00 0%,#ffe88d 22%,#ffd66b 50%,#fff2a8 76%,#b57b00 100%) 0 8px/92px 9px no-repeat, linear-gradient(90deg,#b57b00 0%,#ffe88d 22%,#ffd66b 50%,#fff2a8 76%,#b57b00 100%) 0 34px/92px 9px no-repeat, linear-gradient(90deg,#b57b00 0%,#ffe88d 22%,#ffd66b 50%,#fff2a8 76%,#b57b00 100%) 0 60px/92px 9px no-repeat, linear-gradient(90deg,#b57b00 0%,#ffe88d 22%,#ffd66b 50%,#fff2a8 76%,#b57b00 100%) 0 86px/92px 9px no-repeat!important; box-shadow:0 0 10px rgba(255,214,107,.7)!important; filter:drop-shadow(0 0 5px rgba(255,214,107,.85))!important; animation:chainGlow 3s ease-in-out infinite!important; } .gold-chain:before,.gold-chain:after{display:none!important;content:none!important;} .scholar-cat{ width:42px!important; height:27px!important; left:88px!important; right:auto!important; top:auto!important; bottom:130px!important; border-radius:48% 52% 45% 48%!important; background:#5d5563!important; box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.18)!important; animation:catWalkStrips 7s ease-in-out infinite!important; transform-origin:center bottom!important; z-index:24!important; } .scholar-cat:before,.scholar-cat:after{ content:""!important; position:absolute!important; top:9px!important; width:5px!important; height:5px!important; border-radius:50%!important; background:#ffe56b!important; box-shadow:0 8px 0 -2px #2d2534!important; } .scholar-cat:before{left:11px!important;} .scholar-cat:after{left:23px!important;right:auto!important;} .scholar-cat .ears{ position:absolute!important; top:-10px!important; left:7px!important; width:29px!important; height:14px!important; background: linear-gradient(135deg,transparent 49%,#5d5563 50%) left/14px 14px no-repeat, linear-gradient(225deg,transparent 49%,#5d5563 50%) right/14px 14px no-repeat!important; } .scholar-cat .book{display:none!important;} .scholar-cat .tail{ position:absolute!important; right:-16px!important; bottom:9px!important; width:23px!important; height:8px!important; border-radius:12px!important; background:#5d5563!important; transform-origin:left center!important; animation:tailWave 1.6s ease-in-out infinite!important; } .scholar-cat .tail:after{ content:""; position:absolute; right:-3px; top:-4px; width:9px; height:9px; border-radius:50%; background:#5d5563; } @keyframes catWalkStrips{ 0%{transform:translate(0,0) scaleX(1);} 24%{transform:translate(70px,0) scaleX(1);} 25%{transform:translate(70px,26px) scaleX(-1);} 49%{transform:translate(0,26px) scaleX(-1);} 50%{transform:translate(0,52px) scaleX(1);} 74%{transform:translate(70px,52px) scaleX(1);} 75%{transform:translate(70px,78px) scaleX(-1);} 100%{transform:translate(0,78px) scaleX(-1);} } @media (max-width:900px){ .river-right{right:20vw!important;width:16vh!important;height:16vh!important;} /* Оставляем только замок, волшебника и дорожку */ .river, .river-left, .river-right, .river-shine, .waterfall, .oak-tree, .gold-chain, .scholar-cat, .pegasus, .griffin, .fairy, .magic-carriage, .cloud, .magic-rainbow, .lantern, .magic-bridge, .hut-legs, .mermaid, .gold-fish{ display:none !important; } } .fairy-left-world, .forest-right-world { position: absolute; bottom: 8%; width: 34%; height: 45%; z-index: 12; opacity: 0; transform: translateY(30px); transition: 1.4s ease; pointer-events: none; } .fairy-left-world { left: 3%; } .forest-right-world { right: 3%; } .castle-scene-ready .fairy-left-world, .castle-scene-ready .forest-right-world { opacity: 1; transform: translateY(0); } .tree { position: absolute; bottom: 0; width: 55px; height: 150px; background: #4b2e18; border-radius: 20px; } .tree::before { content: ""; position: absolute; left: -35px; top: -70px; width: 125px; height: 125px; background: radial-gradient(circle, #2f9e44, #14532d); border-radius: 50%; } .tree.t1 { left: 15%; height: 130px; bottom: 130px; } .tree.t3 { left: 30%; height: 145px; bottom:-45px; } .tree.t4 { left: 48%; height: 175px;bottom: 1500px; } .tree.t5 { left: 55%; height: 140px;bottom: -65px; } .tree.t6 { left: 100%; height: 160px;bottom: -40px; } .baba-house { position: absolute; right: 36%; bottom: 46%; width: 120px; height: 90px; background: #8b5a2b; border-radius: 12px; box-shadow: inset 0 0 0 4px #5c3317; } .baba-house::before { content: ""; position: absolute; left: -15px; top: -48px; width: 150px; height: 70px; background: #5c3317; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .baba-house::after { content: ""; position: absolute; left: 25px; bottom: -45px; width: 18px; height: 55px; background: #d6a15c; box-shadow: 55px 0 #d6a15c; } .baba-yaga { position: absolute; right:22%; bottom: 10%; width: 42px; height: 80px; background: #5b3a70; border-radius: 50% 50% 35% 35%; } .baba-yaga::before { content: ""; position: absolute; top: -24px; left: 8px; width: 28px; height: 28px; background: #f1c27d; border-radius: 50%; } .baba-yaga::after { content: ""; position: absolute; top: -36px; left: 0; width: 48px; height: 20px; background: #2b1b35; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .mushroom { position: absolute; bottom: 0; width: 22px; height: 50px; background: #f5deb3; border-radius: 8px; } .mushroom::before { content: ""; position: absolute; left: -10px; top: -16px; width: 42px; height: 24px; background: #dc2626; border-radius: 50% 50% 20% 20%; } .m1 { left: 15%;bottom:50px; } .m2 { left: 42%; transform: scale(0.8); } .m3 { left: 72%; transform: scale(1.1);bottom:-50px; } .dragon { position: absolute; left: 45%; bottom: 5%; width: 110px; height: 55px; background: #22c55e; border-radius: 60% 40% 50% 50%; animation: dragonFloat 3s ease-in-out infinite; } .dragon::before { content: ""; position: absolute; right: -35px; top: 5px; width: 45px; height: 35px; background: #16a34a; border-radius: 50%; } .dragon::after { content: ""; position: absolute; left: 20px; bottom: -60px; top: -38px; width: 60px; height: 45px; background: #15803d; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .mermaid, .braid-princess, .knight, .adventurer { position: absolute; bottom: 0; width: 44px; height: 90px; border-radius: 40% 40% 20% 20%; } .mermaid { left: 28%; background: linear-gradient(#f9a8d4 0 45%, #06b6d4 45% 100%); } .braid-princess { left: 45%; bottom: 150px; background: #f472b6; z-index: 30; } .knight { position: absolute; left: 87%; bottom: -55px; width: 60px; height: 120px; background: repeating-radial-gradient( circle at center, rgba(255, 240, 180, .18) 0 2px, transparent 3px 9px ), linear-gradient( 90deg, #8a6a24, #d8bf74 35%, #fff0a8 50%, #b08d3a 70%, #806425 ); border-radius: 30% 30% 15% 15%; box-shadow: inset 0 0 0 2px rgba(255,230,150,.5), inset 0 0 20px rgba(255,240,180,.25), 0 0 12px rgba(255,214,107,.35); z-index: 25; } /* шлем */ .knight::before { content: ""; position: absolute; left: 13px!important; top: -46px; width: 35px !important; height: 50px; background: linear-gradient( 90deg, #806425, #d8bf74 40%, #fff0a8 55%, #9b7830 ); border-radius: 50% 50% 35% 35%; clip-path: polygon( 50% 0, 95% 25%, 90% 85%, 50% 100%, 10% 85%, 5% 25% ); box-shadow: inset 0 0 0 2px rgba(255,230,150,.5), 0 0 8px rgba(255,214,107,.35); z-index: 30; } /* забрало */ .knight::after { content: ""; position: absolute; top: -15px; left: 35px; width: 15px; height: 6px; background: #111827; border-radius: 15px; box-shadow: 0 0 3px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.25); z-index: 35; } /* наплечники */ .shoulder { position: absolute; width: 32px; height: 22px; background: linear-gradient( 180deg, #fff0a8, #d8bf74, #8f6d28 ); border-radius: 50%; z-index: 29; box-shadow: inset 0 0 0 2px rgba(120,90,30,.35), 0 0 8px rgba(255,214,107,.3); } .shoulder.left { left: -12px; top: 2px; transform: rotate(-18deg); } /* руки */ .arm { position: absolute; width: 14px; height: 62px; background: linear-gradient( 180deg, #d8bf74, #9b7830, #6f541d ); border-radius: 20px; z-index: 24; box-shadow: inset 0 0 0 2px rgba(255,230,150,.25); } .arm-right { right: -31px; top: -8px; transform: rotate(-90deg); } .arm-left { right: 50px; top: 5px; transform: rotate(0deg); } .shield { position: absolute; left: -25px; top: 20px; transform: rotate(85deg); width: 55px; height: 110px; z-index: 25; background: linear-gradient( 200deg, #f3e3b2, #9b7830 ); border: 2px solid #6f541d; box-shadow: 0 0 10px rgba(255,215,0,.3); clip-path: polygon( 50% 0, 100% 20%, 100% 70%, 50% 100%, 0 70%, 0 20% ); box-shadow: 0 0 10px rgba(2, 2, 0, 0.4); } .knight { background: radial-gradient( circle at 20% 30%, rgba(255,240,180,.35), transparent 30% ), repeating-radial-gradient( circle at center, rgba(120,90,30,.15) 0 2px, transparent 2px 6px ), linear-gradient( 180deg, #d8bf74, #9b7830 ); } .adventurer { left: 20%;bottom:-60px; background: linear-gradient(#7c2d12, #f59e0b); } .mermaid::before, .braid-princess::before, .knight::before, .adventurer::before { content: ""; position: absolute; top: -26px; left: 8px; width: 28px; height: 28px; background: #f1c27d; border-radius: 50%; } .flower { position: absolute; bottom: 0; width: 12px; height: 45px; background: #22c55e; } .flower::before { content: ""; position: absolute; left: -13px; top: -18px; width: 38px; height: 38px; background: radial-gradient(circle, #f472b6 35%, #fb7185 36%); border-radius: 50%; } .f1 { left: 5%;bottom:150px; } .f2 { left: 110%; transform: scale(0.8);bottom:50px; } @keyframes dragonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .sword-hill { position: absolute !important; left: 97% !important; bottom: -73px !important; width: 90px !important; height: 80px !important; background: radial-gradient( ellipse at center, #d9ddd9 0%, #b5b9b9 55%, #5b5f5b 100% ) !important; border-radius: 50% 50% 0 0 !important; z-index: 80 !important; opacity: 1 !important; display: block !important; } .sword-ground { position: absolute !important; left: 42px !important; bottom: 62px !important; width: 8px !important; height: 35px !important; background: linear-gradient( 180deg, #ffffff, #cbd5e1, #64748b ) !important; border-radius: 3px !important; z-index: 90 !important; box-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 18px rgba(255,214,107,.5); } .sword-ground::before { content: ""; position: absolute; left: -14px; top: -6px; width: 36px; height: 11px; background: #d8bf74; border-radius: 8px; } .sword-ground::after { content: ""; position: absolute; left: 1px; top: -28px; width: 6px; height: 28px; background: #5a3a15; border-radius: 4px; } .butterflies { position: absolute; inset: 0; pointer-events: none; } .butterfly { position: absolute; width: 14px; height: 14px; z-index: 200; } .butterfly::before, .butterfly::after { content: ""; position: absolute; width: 10px; height: 14px; background: linear-gradient( 180deg, #ff7ac8, #ffd93d ); border-radius: 80% 20% 80% 20%; } .butterfly::before { left: -4px; transform-origin: right center; animation: wingLeft .25s infinite alternate; } .butterfly::after { right: -4px; transform-origin: left center; animation: wingRight .25s infinite alternate; } @keyframes wingLeft { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } } @keyframes wingRight { from { transform: rotate(25deg); } to { transform: rotate(-25deg); } } .b1 { animation: fly1 23s linear infinite; } .b2 { animation: fly2 27s linear infinite; } .b3 { animation: fly3 31s linear infinite; } .b4 { animation: fly4 21s linear infinite; } .b5 { animation: fly5 29s linear infinite; } .b6 { animation: fly6 25s linear infinite; } .b7 { animation: fly7 35s linear infinite; } .b8 { animation: fly8 22s linear infinite; } .b9 { animation: fly9 33s linear infinite; } .b10 { animation: fly10 28s linear infinite; } .b11 { animation: fly11 24s linear infinite; } .b12 { animation: fly12 37s linear infinite; } .b13 { animation: fly13 26s linear infinite; } @keyframes fly1 { 0% { transform: translate(20px,220px); } 25% { transform: translate(120px,60px); } 50% { transform: translate(260px,120px); } 75% { transform: translate(180px,260px); } 100% { transform: translate(20px,220px); } } @keyframes fly2 { 0% { transform: translate(80px,140px); } 25% { transform: translate(260px,40px); } 50% { transform: translate(420px,160px); } 75% { transform: translate(220px,280px); } 100% { transform: translate(80px,140px); } } @keyframes fly3 { 0% { transform: translate(30px,320px); } 25% { transform: translate(180px,150px); } 50% { transform: translate(320px,220px); } 75% { transform: translate(120px,360px); } 100% { transform: translate(30px,320px); } } .b1 { animation: fly1 23s linear infinite; } .b2 { animation: fly2 27s linear infinite; } .b3 { animation: fly3 31s linear infinite; } .b4 { animation: fly4 21s linear infinite; } .b5 { animation: fly5 29s linear infinite; } .b6 { animation: fly6 25s linear infinite; } .b7 { animation: fly7 35s linear infinite; } @keyframes fly4 { 0% { transform: translate(160px, 40px); } 25% { transform: translate(330px, 80px); } 50% { transform: translate(360px, 240px); } 75% { transform: translate(120px, 300px); } 100% { transform: translate(160px, 40px); } } @keyframes fly5 { 0% { transform: translate(10px, 80px); } 25% { transform: translate(90px, 20px); } 50% { transform: translate(180px, 90px); } 75% { transform: translate(70px, 180px); } 100% { transform: translate(10px, 80px); } } @keyframes fly6 { 0% { transform: translate(240px, 20px); } 25% { transform: translate(430px, 60px); } 50% { transform: translate(390px, 190px); } 75% { transform: translate(260px, 140px); } 100% { transform: translate(240px, 20px); } } @keyframes fly7 { 0% { transform: translate(50px, 260px); } 25% { transform: translate(160px, 210px); } 50% { transform: translate(280px, 330px); } 75% { transform: translate(90px, 380px); } 100% { transform: translate(50px, 260px); } } @keyframes fly8 { 0% { transform: translate(310px, 70px); } 25% { transform: translate(470px, 130px); } 50% { transform: translate(420px, 300px); } 75% { transform: translate(290px, 220px); } 100% { transform: translate(310px, 70px); } } .knight { animation: knightTryPull 4s ease-in-out infinite; transform-origin: center bottom; } .arm-right { right: -31px; top: -6px; transform: rotate(-90deg); transform-origin: left center; animation: knightArmPull 4s ease-in-out infinite; } .shield { animation: shieldShake 4s ease-in-out infinite; transform-origin: center center; } .sword-ground { animation: swordStuck 4s ease-in-out infinite; transform-origin: center bottom; } @keyframes knightTryPull { 0%, 100% { transform: rotate(0deg) translateX(0); } 25% { transform: rotate(0deg) translateX(0); } 45% { transform: rotate(8deg) translateX(12px); } 60% { transform: rotate(10deg) translateX(18px); } 72% { transform: rotate(4deg) translateX(8px); } 82% { transform: rotate(9deg) translateX(15px); } } @keyframes knightArmPull { 0%, 100% { height: 62px; transform: rotate(-90deg); } /* тянется к мечу */ 40% { height: 50px; transform: rotate(-100deg); } /* схватился */ 55% { height: 40px; transform: rotate(-130deg); } /* тянет на себя */ 70% { height: 40px; transform: rotate(-120deg); } /* не получилось */ 85% { height: 50px; transform: rotate(-85deg); } } @keyframes shieldShake { 0%, 100% { transform: rotate(85deg); } 45% { transform: rotate(78deg) translateY(3px); } 60% { transform: rotate(92deg) translateY(-2px); } 72% { transform: rotate(80deg) translateY(2px); } } @keyframes swordStuck { 0%, 100% { transform: rotate(0deg) translateY(0); } 45% { transform: rotate(-2deg) translateY(-2px); } 55% { transform: rotate(2deg) translateY(1px); } 65% { transform: rotate(-1deg) translateY(0); } 75% { transform: rotate(1deg) translateY(0); } } .shoulder.right { right: -10px; top: 2px; transform: rotate(18deg); transform-origin: center center; animation: shoulderPull 4s ease-in-out infinite; } @keyframes shoulderPull { 0%,100% { right: -10px; top: 2px; transform: rotate(18deg); } 35% { right: -12px; top: 0px; transform: rotate(5deg); } 55% { right: -15px; top: -2px; transform: rotate(-5deg); } 70% { right: -8px; top: 5px; transform: rotate(25deg); } 85% { right: -10px; top: 3px; transform: rotate(15deg); } }