/* v22 · v7.0 CINEMATIC SPATIAL SYSTEM
   五层空间、单一动态母题、电影镜头、儿童可用性与自适应性能 */
:root{
 --v22-vx:0;--v22-vy:0;--v22-focus-x:50%;--v22-focus-y:48%;
 --v22-space:#061126;--v22-ink:#18283b;--v22-paper:#fffaf0;--v22-paper-edge:#d8c49d;
 --v22-glass:rgba(5,17,39,.9);--v22-glass-line:rgba(171,220,255,.2);
 --v22-spring:cubic-bezier(.16,1,.3,1);--v22-cinema:cubic-bezier(.22,.74,.22,1);
 --v22-world:#78d6f1;--v22-world-rgb:120,214,241;--v22-shadow:0 22px 65px rgba(0,8,28,.28)
}
html{background:#030a18}body{background:var(--v22-space);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.screen{isolation:isolate}.screen.active{view-transition-name:v22-screen}.world-screen{position:relative;overflow-x:hidden;background-color:var(--v22-space)!important}
.world-screen>.experience-head,.world-screen>.imagine-layout,.world-screen>.director-layout,.world-screen>.music-classroom-layout,.world-screen>.memory-inner,.world-screen>.works-planet-shell,.world-screen>.story-tree-dashboard{position:relative;z-index:5}

/* 五层空间：极远景、环境、玩法、角色光、阅读界面。 */
.v22-spatial-scene{position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none;perspective:1100px;contain:strict;transform:translateZ(0)}
.v22-depth{position:absolute;inset:-8%;will-change:transform;transition:transform .9s var(--v22-spring),opacity .7s ease}
.v22-depth-far{inset:-14%;transform:translate3d(calc(var(--v22-vx)*-5px),calc(var(--v22-vy)*-3px),-90px) scale(1.14);background:radial-gradient(circle at 18% 20%,rgba(var(--v22-world-rgb),.15),transparent 24%),radial-gradient(circle at 78% 22%,rgba(160,118,255,.12),transparent 26%),linear-gradient(145deg,#030b19,#091b35 54%,#071225)}
.v22-depth-far:before{content:"";position:absolute;inset:0;opacity:.55;background-image:radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(var(--v22-world-rgb),.7) 0 1px,transparent 1.6px);background-size:91px 91px,137px 137px;background-position:13px 29px,71px 8px}
.v22-depth-environment{transform:translate3d(calc(var(--v22-vx)*-11px),calc(var(--v22-vy)*-7px),-40px) scale(1.08)}
.v22-depth-play{transform:translate3d(calc(var(--v22-vx)*-17px),calc(var(--v22-vy)*-10px),0)}
.v22-depth-character{transform:translate3d(calc(var(--v22-vx)*-23px),calc(var(--v22-vy)*-13px),35px);filter:drop-shadow(0 20px 28px rgba(0,0,0,.2))}
.v22-depth-interface{inset:0;transform:none!important;background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(2,8,22,.27) 100%)}
.screen:not(.active) .v22-depth{animation-play-state:paused!important;will-change:auto}

/* 首页：不增加操作项，只通过光、景深、镜头与大气层强化现有星球。 */
.home-screen{perspective:1400px;transform-style:preserve-3d}.v22-home-atmosphere{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.v22-home-atmosphere:before{content:"";position:absolute;inset:-12%;background:radial-gradient(ellipse at var(--v22-focus-x) var(--v22-focus-y),rgba(var(--v22-world-rgb),.18),transparent 22%),radial-gradient(circle at 12% 68%,rgba(74,111,221,.12),transparent 24%),radial-gradient(circle at 86% 23%,rgba(170,104,211,.1),transparent 23%);transition:background 1s ease;filter:saturate(1.12)}
.v22-home-atmosphere:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,6,18,.38),transparent 24% 76%,rgba(1,6,18,.35)),linear-gradient(0deg,rgba(1,6,18,.34),transparent 30%)}
#home .sky-copy,#home .planet-wrap,#home .lumi-home,#home .planet-tip,#home .planet-arrow,#home .lumi-task-center{z-index:4}
#planetWrap{transform-style:preserve-3d;filter:drop-shadow(0 34px 48px rgba(0,4,20,.38));transition:transform .8s var(--v22-spring),filter .8s ease!important}
#planetWrap.camera-medium{transform:translateY(-50%) scale(1.035) rotateX(calc(var(--v22-vy)*-1.3deg))!important}
#planetWrap.camera-close{transform:translateY(-50%) scale(1.085) translate3d(calc(var(--v22-vx)*-8px),calc(var(--v22-vy)*-5px),0)!important}
#planetWrap.camera-entering{transform:translateY(-50%) scale(1.24)!important;filter:brightness(1.16) saturate(1.1) blur(.2px)!important}
.story-planet:after{content:"";position:absolute;inset:-3%;border-radius:50%;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.28),transparent 18%),radial-gradient(circle at 65% 78%,rgba(var(--v22-world-rgb),.18),transparent 34%);mix-blend-mode:screen;pointer-events:none}
.planet-halo{box-shadow:0 0 80px rgba(var(--v22-world-rgb),.32),0 0 170px rgba(var(--v22-world-rgb),.13)!important;transition:box-shadow .8s ease}
.planet-place{transform-style:preserve-3d;backface-visibility:hidden;transition:opacity .55s ease,filter .55s ease,box-shadow .55s ease,transform .55s var(--v22-spring)!important}
.planet-place.is-focused{filter:brightness(1.08) saturate(1.12)!important;box-shadow:0 18px 55px rgba(0,8,28,.38),0 0 0 2px rgba(var(--v22-world-rgb),.32),0 0 42px rgba(var(--v22-world-rgb),.22)!important}
.planet-place.is-focused .world-icon{transform:translateY(-5px) scale(1.08);filter:drop-shadow(0 12px 16px rgba(var(--v22-world-rgb),.32))}
.planet-place .world-icon{transition:transform .55s var(--v22-spring),filter .55s ease}.planet-place .place-text{background:linear-gradient(145deg,rgba(6,19,43,.94),rgba(14,35,65,.88))!important;border:1px solid rgba(188,226,255,.24)!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 12px 30px rgba(0,7,24,.24)!important}

/* 三类材质严格分层。 */
.topbar,.experience-head,.voice-panel,.music-modal,.generating,.model-status,.pill-tool{background:linear-gradient(150deg,rgba(6,19,43,.94),rgba(10,29,59,.87))!important;border-color:var(--v22-glass-line)!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 38px rgba(0,5,22,.19)!important}
.story-chat-panel,.music-teacher-panel,.creation-guide,.guide-fanfan,.story-host,.music-host,.transcript,.type-box{background:linear-gradient(146deg,#fffdf5,#f5ead4)!important;color:var(--v22-ink)!important;border-color:rgba(115,83,42,.2)!important;box-shadow:inset 0 1px #fff,var(--v22-shadow)!important}
.primary-action,.type-box button,.voice-leaf,.music-confirm-actions button{position:relative;isolation:isolate;border-radius:16px!important;box-shadow:inset 0 2px rgba(255,255,255,.5),0 7px 0 rgba(22,53,106,.52),0 15px 28px rgba(0,18,54,.2)!important;transition:transform .22s var(--v22-spring),filter .22s ease,box-shadow .22s ease!important}
.primary-action:focus-visible,.type-box button:focus-visible,.voice-leaf:focus-visible,.planet-place:focus-visible{outline:4px solid #fff!important;outline-offset:4px!important;box-shadow:0 0 0 7px rgba(var(--v22-world-rgb),.65),var(--v22-shadow)!important}

/* 世界一：想象星滩。唯一动态是潮汐。 */
.world-imagine{--v22-world:#74d9e2;--v22-world-rgb:116,217,226}
.world-imagine .v22-depth-far{background:radial-gradient(circle at 75% 15%,#fff7d999 0 4%,transparent 10%),linear-gradient(170deg,#071a37 0 38%,#15506b 64%,#287c83)}
.world-imagine .v22-depth-environment:before{content:"";position:absolute;left:-10%;right:-10%;bottom:7%;height:42%;border-radius:50% 50% 0 0;background:linear-gradient(180deg,rgba(105,226,225,.42),rgba(15,83,107,.74)),repeating-radial-gradient(ellipse at 50% 110%,transparent 0 29px,rgba(220,255,248,.22) 31px 33px,transparent 35px 54px);transform-origin:50% 100%;animation:v22-tide 10s ease-in-out infinite}
.world-imagine .v22-depth-play:before,.world-imagine .v22-depth-play:after{content:"";position:absolute;bottom:12%;width:80px;height:46px;border-radius:54% 46% 60% 40%;background:radial-gradient(circle at 40% 25%,#fff9d7,#d9a76b 48%,#70513d);box-shadow:0 14px 20px rgba(0,20,36,.2)}.world-imagine .v22-depth-play:before{left:8%;transform:rotate(-18deg) scale(.7)}.world-imagine .v22-depth-play:after{right:11%;transform:rotate(14deg) scale(.46)}
@keyframes v22-tide{50%{transform:translateY(-3.5%) scaleX(1.035);filter:brightness(1.06)}}

/* 世界二：导演月谷。唯一动态是摄影机推光。 */
.world-director{--v22-world:#b29ae9;--v22-world-rgb:178,154,233}
.world-director .v22-depth-far{background:radial-gradient(circle at 78% 18%,#e9ddff77 0 4%,transparent 12%),linear-gradient(150deg,#06091a,#16133b 58%,#34265a)}
.world-director .v22-depth-environment:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 244deg at 52% 22%,transparent 0 8%,rgba(233,219,255,.12) 10% 13%,transparent 15% 24%,rgba(255,210,118,.1) 26% 29%,transparent 31%);transform-origin:52% 22%;animation:v22-camera-light 8.5s ease-in-out infinite}
.world-director .v22-depth-play:before{content:"";position:absolute;left:8%;right:8%;bottom:7%;height:24%;background:repeating-linear-gradient(90deg,rgba(255,223,142,.13) 0 4px,transparent 4px 52px);border-top:2px solid rgba(255,217,125,.2);transform:perspective(380px) rotateX(62deg)}
@keyframes v22-camera-light{50%{transform:translateX(3.5%) scale(1.05);opacity:.78}}

/* 世界三：动物变身林。唯一动态是生长。 */
.world-mini[data-game="animalFriend"]{--v22-world:#82d596;--v22-world-rgb:130,213,150}
.world-mini[data-game="animalFriend"] .v22-depth-far{background:radial-gradient(circle at 50% 15%,rgba(205,255,187,.22),transparent 22%),linear-gradient(145deg,#061b1b,#123e2b 55%,#315b38)}
.world-mini[data-game="animalFriend"] .v22-depth-environment:before{content:"";position:absolute;inset:-7%;background:radial-gradient(ellipse at 12% 4%,#285c3c 0 17%,transparent 18%),radial-gradient(ellipse at 88% 2%,#376d43 0 20%,transparent 21%),radial-gradient(ellipse at 48% -4%,#214f35 0 22%,transparent 23%);transform-origin:50% 0;animation:v22-grow 10s ease-in-out infinite}
.world-mini[data-game="animalFriend"] .v22-depth-play:before,.world-mini[data-game="animalFriend"] .v22-depth-play:after{content:"";position:absolute;bottom:3%;width:18%;height:60%;border-radius:50% 50% 0 0;background:linear-gradient(90deg,#18382b,#356844,#1a3c2d)}.world-mini[data-game="animalFriend"] .v22-depth-play:before{left:2%;transform:rotate(5deg)}.world-mini[data-game="animalFriend"] .v22-depth-play:after{right:1%;transform:rotate(-5deg)}
@keyframes v22-grow{50%{transform:scaleY(1.025) scaleX(1.01);filter:brightness(1.04)}}

/* 世界四：心情气象站。唯一动态是天气明暗渐变。 */
.world-mini[data-game="emotionWeather"]{--v22-world:#8ecff0;--v22-world-rgb:142,207,240;animation:none!important;filter:none!important}
.world-mini[data-game="emotionWeather"] .v22-depth-far{background:radial-gradient(circle at 72% 13%,rgba(255,231,151,.52) 0 5%,transparent 14%),linear-gradient(155deg,#123554,#32647c 55%,#81718f)}
.world-mini[data-game="emotionWeather"] .v22-depth-environment:before,.world-mini[data-game="emotionWeather"] .v22-depth-environment:after{content:"";position:absolute;width:55%;height:25%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.4),rgba(221,235,251,.12) 55%,transparent 70%);filter:blur(3px);animation:v22-weather 14s ease-in-out infinite alternate}.world-mini[data-game="emotionWeather"] .v22-depth-environment:before{left:-8%;top:14%}.world-mini[data-game="emotionWeather"] .v22-depth-environment:after{right:-13%;top:36%;animation-delay:-6s}
@keyframes v22-weather{to{transform:translateX(8%) scale(1.06);filter:blur(4px) brightness(1.13)}}

/* 世界五：旋律星湾。唯一动态是音波扩散。 */
.world-music{--v22-world:#6de0d5;--v22-world-rgb:109,224,213}
.world-music .v22-depth-far{background:radial-gradient(circle at 50% 16%,rgba(137,255,233,.2),transparent 26%),linear-gradient(160deg,#06172c,#0d4255 58%,#31547f)}
.world-music .v22-depth-environment:before{content:"";position:absolute;left:5%;right:5%;bottom:-13%;height:65%;border-radius:50%;background:repeating-radial-gradient(ellipse at 50% 75%,transparent 0 34px,rgba(126,246,224,.14) 36px 39px,transparent 41px 65px);animation:v22-sound-wave 4s ease-out infinite}
.world-music .v22-depth-play:before{content:"♫  ♪  ♫";position:absolute;left:12%;right:12%;top:18%;color:rgba(196,255,239,.24);font-size:clamp(34px,6vw,86px);letter-spacing:20vw;text-shadow:0 0 24px rgba(119,255,224,.25)}
@keyframes v22-sound-wave{0%,20%{transform:scale(.91);opacity:.3}75%,100%{transform:scale(1.04);opacity:.8}}

/* 世界六：故事树图书馆。唯一动态是作品归档星轨。 */
.world-library,.memory-screen{--v22-world:#e9bb72;--v22-world-rgb:233,187,114}
.world-library .v22-depth-far,.memory-screen .v22-depth-far{background:radial-gradient(circle at 50% 15%,rgba(255,217,143,.18),transparent 25%),linear-gradient(150deg,#0b1625,#243445 58%,#4a3b39)}
.world-library .v22-depth-environment:before,.memory-screen .v22-depth-environment:before{content:"";position:absolute;left:27%;right:27%;top:-20%;bottom:-12%;border-radius:45%;background:linear-gradient(90deg,transparent,#6d4b2f55 30%,#9b6a3f66 50%,#65452c55 70%,transparent);filter:drop-shadow(0 0 50px rgba(241,192,102,.12))}
.world-library .v22-depth-play:before,.memory-screen .v22-depth-play:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 30deg,transparent 0 8%,rgba(255,212,129,.11) 9% 10%,transparent 11% 24%,rgba(255,212,129,.08) 25% 26%,transparent 27%);animation:v22-archive 24s linear infinite}
@keyframes v22-archive{to{transform:rotate(360deg)}}

/* 露米真正属于空间：状态、目光方向、局部光照。 */
.lumi-home,.guide-fanfan img,.story-host img,.music-host img{filter:drop-shadow(calc(var(--v22-vx)*8px) 16px 18px rgba(0,9,29,.28)) drop-shadow(0 0 16px rgba(var(--v22-world-rgb),.16));transition:filter .6s ease,transform .65s var(--v22-spring)}
.lumi-home{transform-origin:50% 84%}.lumi-home.is-looking{transform:translateX(calc(var(--v22-vx)*8px)) rotate(calc(var(--v22-vx)*2.5deg))}.lumi-home[data-state="listening"] img{transform:scale(1.025) rotate(-1deg)}.lumi-home[data-state="thinking"] img{filter:hue-rotate(7deg)}.lumi-home[data-state="creating"] img{filter:drop-shadow(0 0 24px rgba(255,210,100,.4))}.lumi-home[data-state="complete"] img{filter:drop-shadow(0 0 25px rgba(104,244,174,.45))}

/* 阅读层不参与景深；年轻儿童大触控目标与明确反馈。 */
.world-screen input,.world-screen textarea,.world-screen button,.world-screen .transcript,.world-screen p,.world-screen b,.world-screen small{transform:translateZ(0)}
button,[role="button"]{touch-action:manipulation}.world-screen button,.planet-arrow,.planet-place,.lumi-home{min-height:52px}.primary-action,.voice-leaf,.type-box button{min-height:60px}.world-screen input,.world-screen textarea{min-height:48px}
.world-screen p,.world-screen .transcript{line-height:1.65}.experience-head .back{min-width:112px!important}
@media(pointer:coarse){.world-screen button,.planet-arrow{min-height:56px;min-width:56px}.primary-action,.voice-leaf{min-height:68px}.planet-place{min-height:74px}}

/* 转场保持世界方向与主题色连续。 */
.portal-transition{overflow:hidden}.portal-transition:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 20deg,transparent,rgba(var(--v22-world-rgb),.28),transparent 30%);transform:scale(.5) rotate(-20deg);opacity:0;transition:transform .9s var(--v22-cinema),opacity .5s ease}.portal-transition.active:before{transform:scale(1.4) rotate(16deg);opacity:1}.portal-transition .portal-label{position:relative;z-index:2;text-shadow:0 3px 18px #000}
html[data-transition-world="imagine"]{--v22-world-rgb:116,217,226}html[data-transition-world="director"]{--v22-world-rgb:178,154,233}html[data-transition-world="animalFriend"]{--v22-world-rgb:130,213,150}html[data-transition-world="emotionWeather"]{--v22-world-rgb:142,207,240}html[data-transition-world="music"]{--v22-world-rgb:109,224,213}html[data-transition-world="memory"]{--v22-world-rgb:233,187,114}

/* 自适应质量：低设备保留构图与功能，削减昂贵装饰。 */
html[data-spatial-quality="balanced"] .v22-depth-far:before{opacity:.34}html[data-spatial-quality="balanced"] .v22-depth{will-change:auto}html[data-spatial-quality="lite"] .v22-depth-play:after,html[data-spatial-quality="lite"] .v22-depth-character{display:none}html[data-spatial-quality="lite"] .v22-depth{will-change:auto;filter:none!important}html[data-spatial-quality="lite"] .v22-depth-far:before{opacity:.22;background-size:150px 150px,210px 210px}

@media(max-width:900px){.v22-depth{inset:-4%}.v22-depth-character{display:none}#planetWrap.camera-close{transform:translateY(-50%) scale(1.045)!important}.world-screen>.experience-head{z-index:20}.primary-action,.voice-leaf{min-height:56px}.planet-place .place-text{backdrop-filter:none!important}}
@media(max-width:640px){.v22-depth-play{opacity:.6}.v22-depth-environment{opacity:.75}.v22-home-atmosphere:after{background:linear-gradient(0deg,rgba(1,6,18,.4),transparent 44%)}.lumi-home.is-looking{transform:none}.planet-place.is-focused .world-icon{transform:scale(1.04)}}
@media(prefers-contrast:more){:root{--v22-glass:#06152d;--v22-glass-line:#b9e3ff}.story-chat-panel,.creation-guide,.guide-fanfan,.transcript,.type-box{background:#fffdf5!important;color:#111d2c!important;border-width:2px!important}.planet-place .place-text{background:#081a36!important;border-color:#d4efff!important}}
@media(prefers-reduced-motion:reduce){:root{--v22-vx:0;--v22-vy:0}.v22-depth,.v22-depth:before,.v22-depth:after,.portal-transition:before,.lumi-home,.planet-place,#planetWrap{animation:none!important;transition-duration:.01ms!important;transform:none!important}.planet-wrap,#planetWrap.camera-medium,#planetWrap.camera-close,#planetWrap.camera-entering{transform:translateY(-50%)!important}.v22-depth-far{transform:scale(1.04)!important}.screen{scroll-behavior:auto!important}}