.boardwrap { width:100%; overflow-x:auto; padding:6px 0 10px; }
.mj { --W:30; --H:16; container-type:inline-size; position:relative; width:100%; min-width:640px; aspect-ratio:calc(var(--W) / (var(--H) * 1.25)); margin:0 auto; padding:0; border-radius:16px; background:radial-gradient(ellipse at 50% 30%, #1f7a58, #0f4a37); }
.mj .mt { --tw:calc(200cqw / var(--W)); position:absolute; left:calc(var(--x) / var(--W) * 94cqw + 2cqw - var(--z) * .8cqw); top:calc(var(--y) / var(--H) * 94% + 3% - var(--z) * 1cqw); width:calc(2 / var(--W) * 94cqw); height:calc(2 / var(--H) * 94%); z-index:calc(var(--z) * 10 + 1); }
.mj .mt .big { font-size:calc(var(--tw) * .46); }
.bar button { min-height:44px; }
#layouts button.on { background:var(--accent); color:var(--accent-ink,#06202e); }