/* Scene v2: original palette, tactile doors, bounded mischief. */
.page { width:min(1320px,calc(100% - 88px)); }
header { height:86px; }
.intro { padding-top:30px; }
.eyebrow { margin-bottom:12px; }
h1 { font-size:clamp(30px,3.5vw,49px); }
.intro-note { margin-top:19px; }
.playground { max-width:1120px; margin-top:22px; }
.dialogue { min-width:292px; padding:15px 22px; background:#fffdf7; border-color:#d8dcc8; box-shadow:0 4px 0 #e3e4d4,0 10px 24px #4c563505; }
.scene { height:490px; isolation:isolate; margin-top:10px; }
.landscape { position:absolute; inset:15px 1% 44px; z-index:-3; overflow:hidden; border-radius:50% 50% 46% 46%; pointer-events:none; }
.landscape svg { position:absolute; inset:0; width:100%; height:100%; }
.sun-disc { position:absolute; width:180px; height:180px; right:16%; top:25px; border-radius:50%; background:radial-gradient(circle,#ecdec0 0 56%,#eee3cc 57% 62%,transparent 63%); opacity:.7; }
.ground { left:1%; right:1%; bottom:22px; height:285px; z-index:-2; border:1px solid #d6debf; background:radial-gradient(ellipse at 65% 30%,#f1f1dd 0,#e5ead2 53%,#dbe4c5 100%); box-shadow:0 10px 0 -2px #d0d8b866,0 19px 0 -7px #e6e7d833; }
.ground:after { content:""; position:absolute; inset:15px 17px; border:1px dashed #c7d1b273; border-radius:50%; }
.paths { opacity:.6; top:50px; height:calc(100% - 65px); stroke:#aebd94; stroke-width:2.4; }
.ground-detail { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.ground-detail i { position:absolute; width:15px; height:24px; border-left:2px solid #a4b88b; border-radius:50%; transform:rotate(-24deg); }
.ground-detail i:after { content:""; position:absolute; width:13px; height:17px; border-left:2px solid #a4b88b; border-radius:50%; left:5px; top:8px; transform:rotate(45deg); }
.ground-detail i:nth-child(1){left:11%;top:62%}.ground-detail i:nth-child(2){left:85%;top:78%;transform:scale(.75) rotate(12deg)}.ground-detail i:nth-child(3){left:37%;top:81%;transform:scale(.7)}.ground-detail i:nth-child(4){left:90%;top:56%;transform:scale(.65)}.ground-detail i:nth-child(5){left:5%;top:77%;transform:scale(.6)}.ground-detail i:nth-child(6){left:60%;top:66%;transform:scale(.5)}
.scene-note { position:absolute; bottom:25px; left:18%; font-size:10px; letter-spacing:3px; color:#8c9b75; transform:rotate(-8deg); }
.door { width:198px; z-index:2; -webkit-user-select:none; user-select:none; }
.expert { left:24%; top:12px; transition:transform .26s cubic-bezier(.2,.8,.2,1); transform:translateX(-50%) translate(var(--escape-x,0px),var(--escape-y,0px)); }
.rookie { left:76%; top:12px; }
.door-top { font-size:9px; margin:5px 0 12px; letter-spacing:2.5px; }
.arch { width:166px; height:220px; position:relative; perspective:650px; isolation:isolate; background:#4a503e; border:7px solid #e3ddc9; border-bottom-width:6px; box-shadow:0 0 0 1.5px #b7baa3,4px 5px 0 2px #c2c5ad,6px 10px 0 1px #b4bea04a,0 20px 16px -15px #4b5c3c60; border-radius:95px 95px 4px 4px; margin-bottom:21px; }
.arch:before { inset:0; border:1px solid #ffffff75; border-radius:inherit; pointer-events:none; z-index:6; opacity:1; }
.door-leaf { display:block; position:absolute; inset:0; border:2px solid var(--door-dark); border-radius:85px 85px 1px 1px; background:linear-gradient(100deg,#ffffff12,transparent 35%,#00000014),var(--door); transform-origin:0 50%; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s; box-shadow:inset 3px 0 1px #ffffff15,inset -3px 0 3px #00000013; z-index:3; backface-visibility:hidden; }
.door-leaf:before { content:""; position:absolute; inset:10px; border:1px solid var(--door-light); opacity:.35; border-radius:70px 70px 1px 1px; }
.door-leaf:after { content:""; position:absolute; left:11px; right:11px; bottom:12px; height:42px; border:1px solid var(--door-light); opacity:.22; }
.door .door-emblem { top:38px; left:45px; width:62px; height:62px; filter:drop-shadow(0 1px 0 #ffffff30); }
.door-line { bottom:60px; left:27px; width:95px; }
.door-knob { top:133px; right:14px; width:9px; height:9px; background:radial-gradient(circle at 30% 25%,#f8e5ac,#b99a62); border:1px solid #79674666; box-shadow:1px 2px 2px #0004; }
.door-sill { position:absolute; bottom:-13px; left:-13px; right:-15px; height:13px; background:linear-gradient(#eee8d5 45%,#c7cbb5 46%); border:1px solid #b8bea6; border-radius:2px; z-index:4; box-shadow:0 5px 7px #59674520; }
.portal { display:block; position:absolute; inset:0; border-radius:85px 85px 0 0; overflow:hidden; background:linear-gradient(#f4dba6,#f8ecd1 65%,#b6c9a0); box-shadow:inset 6px 3px 15px #555a3d50; }
.portal-sun { position:absolute; width:40px; height:40px; border-radius:50%; background:#fff4cc; top:43px; left:60px; box-shadow:0 0 30px #fff2bd; }
.portal-hill { position:absolute; bottom:-20px; left:-15px; width:150%; height:100px; background:#8da578; transform:rotate(-15deg); border-radius:50%; box-shadow:20px -18px 0 #b7c49a; }
.portal-trail { position:absolute; bottom:-10px; left:56px; width:48px; height:100px; border-left:18px solid #eee1b9; border-radius:50%; transform:rotate(18deg); }
.portal-star { position:absolute; top:35px; right:20px; color:#fff5dc; font-size:17px; }
.rookie:after { content:""; position:absolute; left:10px; right:10px; height:150px; top:210px; background:linear-gradient(#f5deb480,transparent); clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); z-index:-1; opacity:0; transition:opacity .7s; pointer-events:none; }
.rookie.open .door-leaf { transform:rotateY(-82deg); filter:brightness(.88); }
.rookie.open:after { opacity:1; }
.door:hover .arch { transform:none; }
.rookie:hover .door-leaf { filter:brightness(1.07); }
.door strong { font-size:19px; letter-spacing:2px; }
.door-caption { font-size:11px; color:#727b61; margin-top:9px; }
.door.chosen .arch { box-shadow:0 0 0 1.5px #9d9d77,4px 5px 0 2px #c2c5ad,0 0 36px #e5c99890; }
.actor { left:50%; top:324px; width:137px; height:158px; transition:left .85s cubic-bezier(.35,0,.3,1),top 1s ease,transform 1s ease,opacity .45s; transform:translateX(-50%) scale(1); transform-origin:50% 90%; }
.character { width:137px; height:154px; filter:drop-shadow(1px 2px 0 #ffffff40); }
.actor-shadow { bottom:3px; left:20px; width:102px; height:14px; background:radial-gradient(ellipse,#82966d60,transparent 70%); }
.actor-name { font-size:10px; margin-top:-1px; }
.actor.entering .actor-name,.actor.entering .actor-shadow { opacity:0; }
.actor.entering .face { opacity:0; }
.actor.entering .backpack { opacity:1; }
.actor.inside { opacity:0; }
.actor .face { transform:translate(var(--look-x,0px),var(--look-y,0px)); }
.actor.amused .brow-right { transform:translateY(-3px) rotate(-5deg); transform-origin:99px 68px; }
.actor.amused .thought { opacity:1; }
.actor.walking .character { animation-duration:.24s; }
.actor.walking.entering .character { animation-duration:.32s; }
.ground-mark { opacity:.45; }
.spark-one { left:7%; top:68px; }.spark-two { right:6%;top:125px; }
.game-bottom { margin-top:7px; min-height:58px; gap:20px; }
.game-bottom p { max-width:calc(100% - 105px); line-height:1.6; }
.game-bottom button { min-height:44px; }
footer { margin-top:12px; padding:17px 0; }
@media(min-width:1700px){.playground{max-width:1240px}.scene{height:535px}.door{width:218px}.arch{width:186px;height:245px}.door .door-emblem{left:54px;top:47px;width:66px;height:66px}.door-knob{top:149px}.door-line{width:115px}.actor{top:359px;width:150px;height:174px}.character{width:150px;height:169px}.ground{height:320px}.intro{padding-top:36px}.intro-note{font-size:14px}.door-caption{font-size:12px}.door strong{font-size:21px}}
@media(max-width:700px){
 .page{width:calc(100% - 32px)}header{height:76px}.intro{padding-top:27px}h1{font-size:clamp(26px,6.5vw,38px)}.intro-note{font-size:11px;margin-top:19px}.eyebrow{font-size:8px}.playground{margin-top:20px}.dialogue{font-size:11px;min-width:260px;max-width:100%;padding:14px 10px}.dialogue-dot{display:none}
 .scene{height:495px;margin-top:18px}.door{width:136px}.expert{left:24%;top:14px}.rookie{left:77%;top:14px}.door-top{font-size:7px;letter-spacing:1.3px;margin:4px 0 11px}.arch{width:110px;height:162px;border-width:5px;margin-bottom:18px;border-radius:66px 66px 3px 3px}.door-leaf,.portal{border-radius:58px 58px 0 0}.door-leaf:before{inset:7px;border-radius:50px 50px 0 0}.door-leaf:after{bottom:8px;left:7px;right:7px;height:30px}.door .door-emblem{top:29px;left:28px;width:42px;height:42px}.door-knob{top:96px;right:10px;width:7px;height:7px}.door-line{bottom:45px;left:16px;width:64px}.door-sill{left:-8px;right:-9px;bottom:-11px;height:10px}.door strong{font-size:15px;letter-spacing:.5px}.door-caption{font-size:8px;letter-spacing:0;margin-top:8px}.door strong>span{font-size:12px;margin-left:2px}.rookie:after{top:170px;height:120px}.portal-sun{left:40px;top:32px;width:28px;height:28px}.portal-hill{height:70px}.portal-trail{left:35px;height:70px;width:33px;border-left-width:13px}.portal-star{top:20px;right:12px;font-size:12px}
 .actor{top:349px;width:112px;height:130px}.character{width:112px;height:126px}.actor-shadow{left:16px;width:84px;bottom:4px}.actor-name{font-size:9px}.ground{bottom:20px;height:280px;left:-1%;right:-1%}.landscape{inset:30px 0 40px;border-radius:38%}.sun-disc{right:4%;top:55px;width:120px;height:120px}.paths{top:80px;height:calc(100% - 95px);opacity:.4}.scene-note{left:9%;bottom:47px;font-size:8px;letter-spacing:1px}.mark-left{left:8%;bottom:90px}.mark-right{bottom:95px}.game-bottom{font-size:10px;gap:9px;min-height:64px;margin-top:0}.game-bottom p{max-width:calc(100% - 85px)}.game-bottom button{font-size:10px;padding-left:12px}.ground-detail i:nth-child(1){top:59%;left:8%}.ground-detail i:nth-child(3){top:85%;left:70%}footer{font-size:9px;padding:15px 0;margin-top:8px}
}
@media(max-width:360px){.door{width:124px}.arch{width:99px}.door .door-emblem{left:23px}.door strong{font-size:14px}.door-caption{font-size:7.5px}.dialogue{min-width:245px;font-size:10px}.scene{height:490px}.actor{top:345px}.door-line{width:54px}.header-note{font-size:8px}}

/* Keep feedback space stable; show copy only after an interaction. */
.dialogue { min-height:52px; }
.dialogue:has(#line:empty) { opacity:0; pointer-events:none; }
.game-bottom button { border-left:0; padding:11px 16px; }
footer { justify-content:flex-end; }

/* Shared sprout identity and restrained, rounded illustration details. */
.brand { gap:11px; }
.brand-mark { display:block; width:46px; height:46px; transform:rotate(-5deg); }
.brand-wordmark { width:78px; height:39px; color:#354434; }
.ground { border-radius:49% 51% 45% 55% / 50% 48% 52% 50%; background:radial-gradient(ellipse at 56% 22%,#eff0da,#e1e8cd 72%); box-shadow:0 7px 0 -2px #cbd6b44d; }
.ground:after { border:0; border-top:1px solid #c5d0b266; inset:20px 28px; }
.paths { inset:0; width:100%; height:100%; opacity:.55; stroke:#acba8f; stroke-width:3; stroke-linecap:round; stroke-dasharray:1 12; }
.playground[data-state="dodging"] #expert-path { opacity:.35; }
.door-leaf:after { opacity:.12; }
.door .door-emblem { stroke-width:2.8; }
.emblem-fill { fill:var(--door-light); fill-opacity:.12; }
.emblem-star { fill:var(--door-light); stroke:none; }
.portal { isolation:isolate; z-index:0; }
.rookie strong { transition:opacity .18s; }
.rookie.chosen strong { opacity:0; }
.actor { width:144px; height:162px; top:306px; transform-origin:50% 95.5556%; transition:left .94s linear,top .94s linear,transform .94s linear,opacity .3s; }
.character { width:100%; height:100%; filter:none; }
.actor-shadow { bottom:1px; left:18%; width:64%; height:10px; background:#7f936c; opacity:.18; }
.pose { display:none; }
.pose-front { display:inline; }
.actor.facing-side .pose-front,.actor.facing-back .pose-front { display:none; }
.actor.facing-side .pose-side,.actor.facing-back .pose-back { display:inline; }
.limb { stroke-width:4.5; }
.actor.turning .character { animation:turn-body .22s ease-in-out; }
.actor.walking .character { animation:none; }
.actor.walking .torso { animation:body-step .18s ease-in-out infinite; }
.actor.walking .step-leg { animation:side-step .36s linear infinite; transform-origin:80px 143px; }
.actor.walking.facing-back .step-leg { animation-name:back-step; }
.actor.walking .step-right { animation-delay:-.18s; }
.actor.crossing { transition-duration:.48s; }
.actor.in-portal { z-index:2; transition:top .65s linear,transform .65s linear,opacity .3s; }
.actor.in-portal .actor-shadow { opacity:.12; }
.actor.in-portal.inside { opacity:0; }
@keyframes turn-body { 50% { transform:scaleX(.58); } }
@keyframes body-step { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1.5px); } }
@keyframes side-step {
  0%,100% { transform:translate(14px,0); }
  50% { transform:translate(-14px,0); }
  75% { transform:translate(0,-7px); }
}
@keyframes back-step {
  0%,50%,100% { transform:translateY(0); }
  75% { transform:translateY(-10px); }
}
.game-bottom button { font-size:13px; color:#59664a; border:1px solid #cbd2bc; border-radius:22px; padding:10px 18px; background:#fffdf64d; }
.playground:is([data-state="approach"],[data-state="opening"],[data-state="entering"],[data-state="inside"]) #replay { border-color:#b98a69; background:#fff8eb; color:#815037; }
.motion-setting { font-size:12px; color:#59664a; min-height:44px; gap:9px; }
@media(min-width:1700px){.actor{top:339px;width:160px;height:180px}}
@media(max-width:700px){
 .brand-mark{width:40px;height:40px}.brand-wordmark{width:68px;height:34px}
 .scene{height:440px}.actor{top:300px;width:112px;height:126px}.ground{height:245px}
 .paths{inset:0;height:100%;opacity:.5}.game-bottom button{font-size:12px}.motion-setting{font-size:11px}
}