/* Align text inside the wooden face, away from the tassel and cloud corners. */
#hud .hud-row{align-items:center;gap:5px}
#hud .hud-row>div:first-child,#hud .scorebox{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;height:78px;min-width:0;padding:24px 14% 12px;position:relative;background:none}
#hud .hud-row>div:first-child{flex:0 0 32%;padding-left:5%;padding-right:5%}
#hud .scorebox{flex:1;max-width:none;padding-left:5%;padding-right:6%}
#hud .hud-row>div:first-child:before,#hud .scorebox:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/ui/controls/hud-wood.png') center/100% 100% no-repeat;pointer-events:none}
#hud .hud-row>div:first-child,#hud .scorebox{isolation:isolate}
#hud .mini{display:block;width:100%;text-align:center;line-height:1;font-size:9px;letter-spacing:.08em}
#hud .big{display:block;width:100%;text-align:center;line-height:1.05;font-size:clamp(20px,6vw,26px);white-space:nowrap;letter-spacing:-.025em}
#hud #score{font-size:clamp(18px,5.6vw,25px)}#hud .big small{font-size:11px}
/* Scale all three real touch targets around their existing centers. */
.moveBtn{transform:scale(1.3);transform-origin:50% 50%}
.moveBtn:active{transform:scale(1.3) translateY(3px)}
.perfBtn{transform:translateX(-50%) scale(1.3);transform-origin:50% 50%}
.perfBtn:active{transform:translateX(-50%) scale(1.3) translateY(3px)}
/* Keep audio toggles above the play area and clear of the larger controls. */
#shell[data-screen="play"] #soundBtn,#shell[data-screen="play"] #sfxBtn{top:calc(154px + env(safe-area-inset-top));bottom:auto;min-height:28px;font-size:9px;padding:3px 9px}
@media(max-height:700px){#hud .hud-row>div:first-child,#hud .scorebox{height:70px;padding-top:21px;padding-bottom:10px}#hud .mini{font-size:8px}#shell[data-screen="play"] #soundBtn,#shell[data-screen="play"] #sfxBtn{top:calc(144px + env(safe-area-inset-top))}}