/* Decorative depth never changes mathematical widths or touch regions. */
.quilt-frame::before,.quilt-frame::after{content:"";position:absolute;z-index:-1;top:-62px;width:12px;height:88px;border-radius:8px;background:repeating-linear-gradient(32deg,#77502c 0 2px,#d9ae6d 3px 6px,#f6d799 7px 8px,#a4743d 9px 11px);box-shadow:inset 2px 0 2px #fff5,inset -2px 0 2px #54321788,2px 3px 3px #37211366;pointer-events:none}
.quilt-frame::before{left:13%;transform:rotate(-3deg)}
.quilt-frame::after{right:13%;transform:rotate(3deg)}
.piece-tray{position:relative;background:transparent;border-color:transparent;box-shadow:none;isolation:isolate}
.piece-tray::before{content:"";position:absolute;inset:-12px -10px -16px;z-index:-1;background:url('assets/ui/wicker-tray-deluxe.png.webp') center/100% 100% no-repeat;filter:drop-shadow(0 7px 5px #38211655);pointer-events:none}
.tray-strip,.placed-strip{border-radius:13px;box-shadow:inset 0 4px 7px #fff9,inset 0 -6px 8px #62361f55,0 4px 5px #42241844}
.tray-strip::after,.placed-strip::after{border-width:2px;border-radius:8px;filter:drop-shadow(0 1px 0 #6b442a55)}
.stitches i{background:linear-gradient(90deg,transparent 86%,#57332012 97%,#fff3);border-right:2px dashed #fff9df}
.portrait-anchor{opacity:0!important}
.portrait-rig{position:absolute;display:block;pointer-events:none;z-index:3;transform-origin:50% 90%;filter:drop-shadow(0 0 13px #ffe6a17a) drop-shadow(0 8px 6px #38201455)}
.portrait-rig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:none!important;scale:1!important;filter:none!important}
.portrait-kena{animation:kena-lively 5s ease-in-out infinite}
.portrait-ori{scale:-1 1;animation:ori-lively 4.8s ease-in-out infinite}
.portrait-rig .portrait-eyelids{opacity:0;animation:deluxe-blink 6.7s linear infinite!important}
.portrait-kena .portrait-eyelids{mask-image:radial-gradient(ellipse 8% 5% at 25% 25%,#000 70%,transparent 100%),radial-gradient(ellipse 9% 6% at 46% 24%,#000 70%,transparent 100%)}
.portrait-ori .portrait-eyelids{mask-image:radial-gradient(ellipse 7% 6% at 39% 35%,#000 70%,transparent 100%),radial-gradient(ellipse 6% 6% at 57% 32%,#000 70%,transparent 100%);animation-delay:2.1s!important}
.portrait-kena .portrait-wing{clip-path:polygon(63% 42%,77% 42%,94% 49%,100% 64%,95% 71%,80% 71%,64% 62%,60% 51%);transform-origin:64% 44%;animation:deluxe-wing 7.3s ease-in-out infinite!important}
.portrait-ori .portrait-wing{clip-path:polygon(26% 46%,38% 47%,36% 65%,28% 81%,15% 86%,10% 81%,17% 64%);transform-origin:31% 48%;animation:deluxe-wing 5.9s ease-in-out infinite reverse!important}
@keyframes deluxe-blink{0%,42%,46%,100%{opacity:0}43%,45%{opacity:1}}
@keyframes deluxe-wing{0%,60%,100%{transform:rotate(0)}66%,78%{transform:rotate(-6deg)}72%,84%{transform:rotate(2deg)}}
body.is-paused .portrait-rig,body.is-paused .portrait-rig img{animation-play-state:paused!important}
body.wm-four-controls-active .task-controls{visibility:hidden}
body #wm-game-controls{left:50%;transform:translateX(-50%)}
@media(orientation:portrait) and (max-width:500px){.quilt-frame::before,.quilt-frame::after{top:-36px;height:58px;width:9px}.piece-tray::before{inset:-8px -5px -12px}}
@media(prefers-reduced-motion:reduce){.portrait-rig,.portrait-rig img{animation:none!important}.portrait-eyelids{display:none}}
.quilt-frame::before,.quilt-frame::after{top:-100vh;height:calc(100vh + 26px)}
body.portraits-suspended .portrait-rig,body.portraits-suspended .portrait-rig img{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.portrait-rig .portrait-wing,.portrait-rig .portrait-eyelids{animation:none!important}}
@media(orientation:portrait) and (max-height:720px){#game:has(.model-wrap:not([hidden])) .kena{bottom:12px}}
body.is-paused .answer-control{visibility:hidden}
.portrait-anchor{pointer-events:none!important}
@media(orientation:portrait) and (min-height:721px){#game:has(#pieceTray button:nth-child(5)) .kena{bottom:46px}}
@media(orientation:portrait) and (max-height:720px){
 #game:has(#pieceTray button:nth-child(5)) .hud{height:150px}
 #game:has(#pieceTray button:nth-child(5)) .quilt-frame{min-height:112px;padding-top:30px;padding-bottom:8px}
 #game:has(#pieceTray button:nth-child(5)) .quilt-row{height:52px}
 #game:has(#pieceTray button:nth-child(5)) .workbench{height:252px;min-height:252px;flex-basis:252px;padding-bottom:100px}
 #game:has(#pieceTray button:nth-child(5)) .kena{width:60px;max-height:84px;bottom:12px}
 #game:has(#pieceTray button:nth-child(5)) .ori-button{width:88px;height:88px}
 #game:has(#pieceTray button:nth-child(5)) .guide-panel{top:64px}
 #game:has(#pieceTray button:nth-child(5)) .speech-bubble{top:36px;right:94px}
}