.board{height:calc(100% - 145px)}
.move-controls{width:min(100%,440px);height:clamp(88px,14vh,112px);display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,46px);margin-top:6px}
.move-controls button{border:2px solid #dfc16a;background:radial-gradient(circle at 32% 28%,#4d9b7d,#16483d 66%,#0b2c29);color:#fff0bf;box-shadow:inset 0 0 14px #c8ffde26,0 0 14px #072119;cursor:pointer}
.drop-orb{width:clamp(64px,10vw,90px);height:clamp(64px,10vw,90px);border-radius:50%;font-size:clamp(17px,2.4vw,27px);font-weight:800}.drop-orb small{display:block;font-size:.45em}
.dpad{width:clamp(100px,16vw,142px);height:clamp(84px,13vw,114px);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px}.dpad button{border-radius:50%;font-size:clamp(19px,2.5vw,28px)}.dpad .rotate{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}.dpad i{grid-column:2;grid-row:2;display:grid;place-items:center;color:#e8c86f;font-style:normal;font-size:clamp(13px,2vw,20px)}
@media(max-width:720px){.board{height:calc(100% - 85px)}.move-controls{height:58px;gap:14px;margin-top:2px}.drop-orb{width:48px;height:48px;font-size:13px}.dpad{width:74px;height:58px;gap:1px}.dpad button{font-size:15px}.dpad i{font-size:10px}}
@media(max-height:640px) and (min-width:721px){.board{height:calc(100% - 112px)}.move-controls{height:70px}.drop-orb{width:57px;height:57px}.dpad{width:85px;height:70px}}