#game{--unit:clamp(48px,calc((64vw - 80px)/var(--layout-units,6)),96px)}
.hud{height:180px}
.hud>.round-pips{position:absolute;top:22px;left:50%;right:auto;transform:translateX(-50%);margin:0}
.round-pip{width:38px;height:38px}
.playfield>.level-dots{position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%);margin:0}
.guide-panel{top:72px;right:24px}
.ori-button{position:relative;width:130px;height:130px;isolation:isolate}
.ori-button::before{content:"";position:absolute;inset:-20%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#ffe6a199 0%,#ffd56844 35%,transparent 70%);pointer-events:none}
.speech-bubble{position:relative;clip-path:none!important;border-radius:28px!important;max-width:340px;padding:14px 20px;font-size:18px;line-height:1.3}
.speech-bubble::before,.speech-bubble::after{content:none!important;display:none!important}
.playfield{align-items:center;padding:42px 3vw 10px}
.quilt-frame{width:68vw;min-height:260px;padding:62px 24px 32px;margin-left:20vw;background-size:112% 130%}
.quilt-row{height:96px}
.model-row{height:78px}
.frame-title{top:28px;font-size:22px}
.kena{width:25vw;max-height:46vh;left:1vw;bottom:0;height:auto;filter:drop-shadow(0 0 18px #ffe49bb0) drop-shadow(0 12px 9px #40201366)}
.playfield::before{content:"";position:absolute;left:0;bottom:-15px;width:28vw;height:32vh;background:radial-gradient(ellipse,#ffdc8799 0%,#ffda6540 35%,transparent 70%);pointer-events:none}
.workbench{height:190px;min-height:190px;flex:0 0 190px;padding:12px 125px 30px 170px}
.piece-tray{width:auto;max-width:100%;justify-content:center;gap:12px;padding:12px 18px}
.tray-strip{height:80px}
.check-button{width:86px;height:86px}
body.juice-ready .kena{animation:kena-lively 5s ease-in-out infinite}
body.juice-ready .ori-button img{animation:ori-lively 4.8s ease-in-out infinite;filter:drop-shadow(0 0 8px #fff1b766)}
@keyframes kena-lively{0%,100%{transform:rotate(-2deg) translateY(0)}25%{transform:rotate(2deg) translateY(-7px)}50%{transform:rotate(-1deg) scaleY(1.035)}75%{transform:rotate(2deg) translateY(-4px)}}
@keyframes ori-lively{0%,100%{transform:rotate(-4deg) translateY(0)}35%{transform:rotate(4deg) translateY(-8px)}70%{transform:rotate(-2deg) translateY(-3px)}}
@media(orientation:portrait){
 #game{--unit:clamp(48px,calc((100vw - 64px)/var(--layout-units,6)),110px)}
 .hud{height:210px}
 .hud>.round-pips{top:76px;left:16px;transform:none}
 .round-pip{width:32px;height:32px}
 .guide-panel{top:80px;right:18px}
 .ori-button{width:140px;height:140px}
 .speech-bubble{position:absolute;right:150px;top:42px;width:340px;max-width:calc(100vw - 190px);font-size:17px;padding:12px 16px}
 .playfield{padding:38px 12px 0;align-items:center}
 .playfield>.level-dots{top:0;left:50%;transform:translateX(-50%);padding:2px 8px}
 .quilt-frame{width:100%;margin:0 0 140px;min-height:220px;padding:52px 12px 22px;background-size:118% 135%}
 .frame-title{top:24px;font-size:20px}
 .quilt-row{height:92px}
 .model-row{height:72px}
 .kena{width:clamp(120px,27vw,240px);height:auto;max-height:230px;left:20px;bottom:-8px}
 .playfield::before{width:32vw;min-width:150px;height:240px;max-height:50%;bottom:-25px}
 .workbench{height:240px;min-height:240px;flex:0 0 240px;padding:0 12px 80px}
 .piece-tray{width:max-content;max-width:100%;grid-template-columns:repeat(2,max-content);gap:10px;padding:12px}
 .tray-strip{height:70px}
 .check-button{width:76px;height:76px;bottom:8px;right:90px}
}
@media(orientation:portrait) and (max-width:500px){
 .hud{height:175px}
 .ori-button{width:106px;height:106px}
 .guide-panel{top:72px;right:12px}
 .speech-bubble{right:112px;top:48px;max-width:calc(100vw - 150px);font-size:13px;padding:8px 10px;border-width:3px}
 .hud>.round-pips{top:74px}
 .round-pip{width:28px;height:28px}
 .quilt-frame{min-height:160px;padding:38px 10px 12px;margin-bottom:110px}
 .frame-title{top:14px;font-size:15px}
 .quilt-row{height:76px}
 .model-row{height:60px}
 .kena{width:130px;max-height:145px;left:14px;bottom:-6px}
 .workbench{height:230px;min-height:230px;flex-basis:230px}
 .tray-strip{height:58px}
 .piece-tray{gap:8px;padding:8px}
}
@media(orientation:portrait) and (max-height:720px){
 .hud{height:168px}
 .playfield{align-items:flex-start;padding-top:32px}
 .quilt-frame{margin-bottom:0;min-height:142px;padding-top:34px;padding-bottom:8px}
 .quilt-row{height:68px}.model-row{height:48px}
 .kena{width:102px;max-height:110px;bottom:-10px;left:8px}
 .workbench{height:214px;min-height:214px;flex-basis:214px;padding-bottom:76px}
 .tray-strip{height:52px}
 .quilt-frame:has(.model-wrap:not([hidden])){padding-top:30px;padding-bottom:8px}
 .quilt-frame:has(.model-wrap:not([hidden])) .quilt-row{height:52px}
 .quilt-frame:has(.model-wrap:not([hidden])) .model-row{height:34px}
 #game:has(.model-wrap:not([hidden])) .kena{width:94px;max-height:100px;bottom:-20px}
}
@media(orientation:portrait) and (min-width:600px){
 #game{--unit:clamp(48px,calc((100vw - 96px)/var(--layout-units,6)),130px)}
 .quilt-frame{width:min(100%,calc(var(--target-units,6)*var(--unit) + 150px));min-width:430px;min-height:240px}
 .quilt-row{height:104px}
}
@media(prefers-reduced-motion:reduce){body.juice-ready .kena,body.juice-ready .ori-button img{animation:none!important}}

/* One predictable action group: home, prominent check, restart. */
.task-controls{position:absolute;z-index:12;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:16px;padding:0 12px;border-radius:60px;background:radial-gradient(ellipse,#f9dea85c,transparent 72%)}
.task-controls>#homeButton,.task-controls>#quickRestart,.task-controls>#checkButton{position:relative;inset:auto;flex:none;margin:0;width:64px;height:64px}
.task-controls>#checkButton{width:104px;height:104px;filter:drop-shadow(0 3px 4px #3b211955)}
.task-controls>#checkButton:not(:disabled){filter:drop-shadow(0 0 10px #ffe09ac9) drop-shadow(0 4px 4px #3b211955)}
.task-controls>#checkButton:disabled img{opacity:.8}
.workbench{height:270px;min-height:270px;flex-basis:270px;padding:0 100px 114px 170px}
@media(orientation:portrait){
 .workbench{height:270px;min-height:270px;flex-basis:270px;padding:0 12px 112px}
 .star-jar{bottom:116px;width:50px;height:60px;right:8px}
 .piece-tray{max-width:100%}
}
@media(orientation:portrait) and (max-width:500px){
 .task-controls{gap:12px;padding:0 6px}
 .task-controls>#homeButton,.task-controls>#quickRestart{width:56px;height:56px}
 .task-controls>#checkButton{width:88px;height:88px}
 .workbench{height:248px;min-height:248px;flex-basis:248px;padding-bottom:110px}
 .star-jar{bottom:8px;width:40px;height:48px;right:6px}
}
@media(orientation:portrait) and (max-height:720px){
 .workbench{height:214px;min-height:214px;flex-basis:214px;padding-bottom:114px}
}

/* Navigation is a single row; the answer action stays centred below the task. */
.task-controls{display:flex;top:12px;bottom:auto;left:50%;transform:translateX(-50%);gap:12px;padding:0 8px;z-index:52}
.task-controls>#pauseButton,.task-controls>#gameSoundButton,.task-controls>#quickRestart,.task-controls>#homeButton{position:relative;inset:auto;grid-area:auto;width:56px;height:56px;min-width:48px;margin:0;padding:0;flex:none;border:0;background:transparent;box-shadow:none}
.game-sound img{display:block;width:100%;height:100%;object-fit:contain}
/* Face the guide toward the task; separate scale preserves his reaction animations. */
#oriReplayButton img{scale:-1 1}
body:has(#game.is-active) .global-sound{display:none}
.answer-control{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:12}
.answer-control>#checkButton{position:relative;inset:auto;width:104px;height:104px;margin:0;filter:drop-shadow(0 3px 4px #3b211955)}
.answer-control>#checkButton:not(:disabled){filter:drop-shadow(0 0 10px #ffe09ac9) drop-shadow(0 4px 4px #3b211955)}
.answer-control>#checkButton:disabled img{opacity:.8}
.hud>.round-pips{top:78px;left:20px;transform:none}
@media(orientation:portrait) and (max-width:500px){
 .task-controls{gap:8px}
 .task-controls>#pauseButton,.task-controls>#gameSoundButton,.task-controls>#quickRestart,.task-controls>#homeButton{width:48px;height:48px}
 .answer-control>#checkButton{width:88px;height:88px}
 .hud>.round-pips{top:74px;left:16px}
 .skip-demo{top:12px;right:6px;width:44px;height:44px}
}