/* One viewport, one clear primary action. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body:not(.playing){display:grid!important;grid-template-rows:48px minmax(0,1fr);height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#f6f5ef}
body:not(.playing) header{height:48px;padding:0 20px;border:0}.brand{font-size:21px;gap:8px}.brand img{height:28px;width:28px}#sound{min-width:42px;min-height:42px;padding:8px;border:0;background:#e7ece2}
body:not(.playing) main{position:relative;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0 14px 14px!important;overflow:hidden}
body:not(.playing) .layout{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr);grid-template-rows:minmax(0,1fr);height:100%!important;gap:16px;min-height:0}
body:not(.playing) .world{height:100%!important;min-height:0!important;border-radius:26px;border:0;background:radial-gradient(ellipse at 50% 40%,#f6eedc,#dce8d5)}
body:not(.playing) .panel{min-height:0;height:100%;padding:12px 8px!important;gap:10px;overflow:hidden;display:flex;flex-direction:column}
.panel>h1{display:block!important;font-size:clamp(20px,2.5vw,28px)!important;line-height:1.2;margin:0;color:#354b40;flex:none}
.part-steps{display:none!important}.part-guide{display:flex!important;align-items:center;gap:10px;margin:0;min-height:44px;flex:none}.part-guide svg{width:44px;height:44px}.part-guide b{font-size:15px}.part-guide>span{margin-left:auto;font-size:12px;background:none;color:#849180;padding:0}
.finish-options{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0;flex:none}.finish-options button{min-height:48px;height:48px;padding:6px;border-radius:14px}.texture-demo{width:30px!important;height:30px!important}.color-channels{height:38px;min-height:38px;margin:0;gap:8px}.color-channels[hidden]{display:none!important}.color-channels button{min-height:38px;height:38px;padding:5px 14px;border-radius:12px;font-size:14px}
.palette-group{margin:0;flex:1;min-height:0;display:flex;align-items:center}.palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-height:210px;height:100%;align-items:center;justify-items:center}.palette .swatch{width:min(100%,52px);height:auto;aspect-ratio:1;border:3px solid #f6f5ef;min-height:0}.palette .swatch.selected{outline:3px solid #567863;transform:scale(1.04)}
.dress-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:0;flex:none}.picture-button{height:56px;min-height:56px!important;margin:0!important;border-radius:18px!important;padding:10px 14px!important;font-weight:700}.primary{background:#526f5e}.secondary{background:#e9eee5;border-color:transparent;color:#526951}.picture-button>span{font-size:16px}.ui-icon{width:24px;height:24px}button:active{transform:scale(.97)}
body[data-view="intro"] .journey-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;flex:1;min-height:60px}.journey-maps .map-card{display:flex;flex-direction:column;min-height:0;padding:4px;border:0;background:#e9eee4}.journey-maps img{height:calc(100% - 28px);min-height:0;width:100%;object-fit:cover}.journey-maps span{height:28px;font-size:12px;display:grid;place-items:center}.tap-demo{flex:none;height:82px;min-height:64px;margin:0}.difficulty{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;flex:none}.difficulty button{height:48px;min-height:48px;padding:8px;border-radius:14px}.difficulty button[aria-pressed="true"]{background:#e6efda;border:2px solid #829d6b}.difficulty button>span{font-size:14px}
body[data-view="intro"] #start{margin-top:0!important}body[data-view="intro"] #back{height:44px;min-height:44px!important}
body[data-view="result"] #copy{display:none!important}.result-tally{margin:0;flex:none;font-size:18px;gap:6px}.qr-wrap{flex:1;min-height:0;margin:0;padding:10px;display:flex;align-items:center;justify-content:center;gap:14px;border:0;background:#edf0e7}.qr-wrap canvas{width:min(150px,24vh)!important;height:auto!important;max-height:100%;aspect-ratio:1;object-fit:contain}.qr-wrap:after{max-width:100px;font-size:13px;line-height:1.6}.status:empty{display:none}.status{font-size:12px;line-height:1.4;margin:0}
body[data-view="runway"] .big-score{flex:1;display:grid;place-items:center;margin:0;font-size:56px}
body.playing #gameHud{gap:6px}.hud-pill{box-shadow:none!important}body.playing #finish{box-shadow:none;min-width:48px}body.playing #finish>span{font-size:12px}.route-progress{display:none}#journeyHud{box-shadow:none;padding:8px 12px;font-size:12px}body.playing .finish-actions .picture-button{height:64px}
@media(orientation:portrait){
 body:not(.playing){grid-template-rows:44px minmax(0,1fr)}body:not(.playing) header{height:44px;padding:0 14px}.brand{font-size:19px}
 body:not(.playing) main{padding:0 10px 10px!important}body:not(.playing) .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px,1fr) minmax(0,350px);gap:8px}
 body:not(.playing) .panel{padding:0 4px!important;gap:6px}.panel>h1{display:none!important}.part-guide{height:34px;min-height:34px}.part-guide svg{height:34px;width:34px}.finish-options button{height:42px;min-height:42px}.palette{max-height:none;gap:4px;grid-template-columns:repeat(8,minmax(0,1fr))}.palette .swatch{max-width:44px}.picture-button{height:50px;min-height:50px!important}.color-channels{height:32px;min-height:32px}.color-channels button{height:32px;min-height:32px}
 body[data-view="intro"] .layout{grid-template-rows:minmax(80px,1fr) minmax(0,380px)}body[data-view="result"] .layout{grid-template-rows:minmax(120px,1fr) minmax(0,290px)}.qr-wrap canvas{width:120px!important}.tap-demo{height:72px}.result-tally{font-size:16px}
}
@media(orientation:landscape) and (max-height:540px){
 body:not(.playing){grid-template-rows:36px minmax(0,1fr)}body:not(.playing) header{height:36px}.brand{font-size:17px}.brand img{height:24px}#sound{min-height:32px;height:32px}
 body:not(.playing) main{padding:0 10px 8px!important}body:not(.playing) .layout{grid-template-columns:minmax(0,1fr) minmax(310px,1fr);gap:10px}body:not(.playing) .panel{padding:0!important;gap:5px}.panel>h1{display:none!important}.part-guide{min-height:30px;height:30px}.part-guide svg{height:30px;width:30px}.finish-options button{height:40px;min-height:40px}.texture-demo{width:26px!important;height:26px!important}.color-channels,.color-channels button{height:30px;min-height:30px}.palette{gap:2px}.palette .swatch{max-width:36px}.picture-button{height:44px;min-height:44px!important;padding:6px 10px!important}.picture-button>span{font-size:14px}.tap-demo{height:60px;min-height:60px}.difficulty button{height:40px;min-height:40px}.qr-wrap canvas{width:100px!important}.result-tally{font-size:15px}.ui-icon{width:21px;height:21px}
}
@media(orientation:portrait) and (max-height:690px){body:not(.playing) .layout{grid-template-rows:minmax(80px,1fr) minmax(0,310px)}body[data-view="intro"] .layout{grid-template-rows:minmax(70px,1fr) minmax(0,340px)}body[data-view="result"] .layout{grid-template-rows:minmax(80px,1fr) minmax(0,255px)}}

.scenery-track{animation:none!important;transition:none!important}

.dress-actions{grid-template-columns:1fr}
/* Soft toy-like finish buttons with clear, generous tap targets. */
body.playing.stageclear .finish-actions{gap:20px;align-items:center}
body.playing.stageclear .finish-actions .picture-button{position:relative;min-width:180px;min-height:78px!important;height:78px;padding:15px 25px!important;border:3px solid #fff!important;border-radius:29px!important;font-size:20px!important;font-weight:800;gap:13px!important;box-shadow:0 7px 0 #6b569d,0 12px 22px #40394b20;transition:transform .12s,box-shadow .12s}
body.playing.stageclear .finish-actions .primary{background:#aa8de1;color:#fff;text-shadow:0 1px 1px #70549b35}
body.playing.stageclear .finish-actions .secondary{background:#ffdf90;color:#795727;box-shadow:0 7px 0 #d5ac5c,0 12px 22px #40394b20}
body.playing.stageclear .finish-actions .picture-button .ui-icon{width:34px;height:34px;padding:6px;border-radius:13px;background:#ffffff4d;stroke-width:2.3}
body.playing.stageclear .finish-actions .picture-button>span{font-size:20px;font-weight:800;white-space:nowrap}
body.playing.stageclear .finish-actions .picture-button:active{transform:translateY(5px);box-shadow:0 2px 0 #8971ad}
body.playing.stageclear .finish-actions .picture-button:focus-visible{outline:4px solid #526f5e;outline-offset:6px}
@media(max-width:480px){body.playing.stageclear .finish-actions{gap:14px}body.playing.stageclear .finish-actions .picture-button{min-width:0;min-height:72px!important;height:72px;padding:12px 16px!important;border-radius:25px!important;gap:8px!important}body.playing.stageclear .finish-actions .picture-button>span{font-size:17px}body.playing.stageclear .finish-actions .picture-button .ui-icon{width:30px;height:30px}}

#welcomeScreen{position:fixed;inset:0;z-index:120;isolation:isolate;overflow:hidden;background:#cce4d3 url('background-forest.png') center 48%/cover no-repeat;color:#314b3f;padding:max(22px,env(safe-area-inset-top)) max(30px,env(safe-area-inset-right));display:flex;flex-direction:column}#welcomeScreen[hidden]{display:none}.welcome-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f8f6e8f5 0%,#f7f5e5d6 36%,#edf5e54d 73%,#eaf7e52b),linear-gradient(0deg,#e2eac5c9,transparent 40%)}.welcome-brand{font-weight:950;font-size:clamp(25px,3vw,40px);letter-spacing:-1.5px;display:flex;gap:18px;align-items:center}.welcome-brand span{font-size:11px;letter-spacing:3px;font-weight:700;border-left:1px solid #81937e;padding:8px 18px}.welcome-content{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1300px;width:100%;margin:auto}.welcome-copy{padding-left:5vw;z-index:2}.welcome-tag{display:inline-block;background:#fffaf0dd;border:1px solid #fff;padding:10px 18px;border-radius:30px;font-size:clamp(14px,1.7vw,20px);color:#687d60}.welcome-copy h1{font-size:clamp(40px,6.5vw,90px);letter-spacing:-.065em;line-height:1.12;margin:22px 0 32px;font-weight:900}#enterStudio{display:flex;align-items:center;justify-content:center;gap:12px;min-width:230px;min-height:76px;border:3px solid #fff;border-radius:30px;background:#9880d0;color:#fff;font-size:28px;font-weight:850;box-shadow:0 7px 0 #7058a2,0 14px 30px #61544524;cursor:pointer;touch-action:manipulation}#enterStudio svg{width:32px;height:32px}#enterStudio:active{transform:translateY(5px);box-shadow:0 2px 0 #7058a2}#enterStudio:focus-visible{outline:4px solid #435e4a;outline-offset:6px}.welcome-friend{position:relative;height:min(65vh,620px);display:grid;place-items:center}.welcome-friend img{position:relative;width:95%;height:90%;object-fit:contain;filter:drop-shadow(0 22px 10px #58683922);animation:welcome-sway 5s ease-in-out infinite}.welcome-halo{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff8dbe0,#fffde080 55%,transparent 70%)}.welcome-spark{position:absolute;width:25px;height:25px;background:#fff8bf;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 37%)}.spark-one{top:15%;left:12%}.spark-two{right:8%;top:38%;width:38px;height:38px}.spark-three{bottom:13%;left:22%;width:18px;height:18px}@keyframes welcome-sway{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}@media(orientation:portrait){#welcomeScreen{padding:22px;background-position:58% center}.welcome-shade{background:linear-gradient(#f9f7eae6,#f2f6df83 60%,#e3edcde6)}.welcome-content{display:flex;flex-direction:column-reverse;justify-content:center}.welcome-friend{height:43dvh;width:min(90vw,520px);flex-shrink:1;min-height:120px}.welcome-copy{text-align:center;padding:0 0 max(18px,env(safe-area-inset-bottom));flex-shrink:0}.welcome-copy h1{font-size:clamp(38px,7vw,62px);margin:12px 0 22px}.welcome-copy h1 br{display:none}.welcome-tag{padding:6px 16px}#enterStudio{margin:auto;min-height:66px;width:min(80vw,360px)}.welcome-brand{justify-content:center}}@media(max-height:500px) and (orientation:landscape){.welcome-copy h1{font-size:42px;margin:12px 0 20px}#enterStudio{min-height:58px;font-size:24px}.welcome-friend{height:70vh}}@media(prefers-reduced-motion:reduce){.welcome-friend img{animation:none}}

.practice-map-ui{position:fixed;inset:0;z-index:110;pointer-events:none;padding:max(16px,env(safe-area-inset-top)) 18px}.practice-map-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.practice-map-top b,.practice-map-top button{background:#fff9e8;border:2px solid white;border-radius:20px;padding:12px 18px;color:#526b51;font-size:18px}.practice-map-top span{margin-left:12px}.practice-map-top button{pointer-events:auto;cursor:pointer}#practicePrompt{pointer-events:auto;position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:16px 22px;border:3px solid white;border-radius:30px;background:#fffcf2f5;box-shadow:0 12px 40px #31452125;max-width:calc(100vw - 32px);width:max-content}#practicePrompt[hidden]{display:none}#practicePrompt strong{font-size:clamp(20px,3vw,30px);white-space:nowrap}.practice-symbol{color:#d8a62b;width:68px;height:60px}.practice-symbol svg{width:100%;height:100%}.practice-symbol.is-pink{color:#e282ac}#practiceContinue{background:#9480cc;color:white;border:2px solid white;border-radius:20px;padding:16px 24px;font-size:22px;font-weight:bold;white-space:nowrap;box-shadow:0 4px #71609d;cursor:pointer}#practiceReplay{border:0;background:transparent;color:#5c7560;min-width:44px;min-height:44px;cursor:pointer}#practiceReplay svg{width:26px;height:26px}@media(orientation:portrait){#practicePrompt{display:grid;grid-template-columns:60px 1fr 44px;width:calc(100vw - 40px);gap:10px;padding:15px}.practice-symbol{width:60px}#practiceContinue{grid-column:1/4;grid-row:2}#practiceReplay{grid-column:3;grid-row:1}.practice-map-top b,.practice-map-top button{font-size:15px;padding:10px 12px}}