.be-board { max-width: 560px; margin: 16px auto; padding: 22px; border: 1px solid var(--glass-edge); border-radius: 24px; background: var(--glass-strong); box-shadow: var(--glass-shadow); }
.be-equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 90px; font: 700 clamp(18px, 4.4vw, 27px) var(--display); border-bottom: 1px solid var(--glass-edge); }
.be-expression { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }
.be-index { color: var(--muted); font: 500 12px var(--body); margin-right: auto; }
.be-equals { color: var(--muted); }
.be-slot, .be-tile { min-width: 48px; min-height: 48px; border-radius: 13px; font: 800 24px var(--display); cursor: pointer; }
.be-slot { color: var(--text); border: 2px dashed var(--muted); background: var(--glass); }
.be-slot.sel { border: 2px solid var(--select); box-shadow: 0 0 0 3px color-mix(in srgb, var(--select) 20%, transparent); }
.be-bank { display: flex; justify-content: center; gap: 16px; padding-top: 24px; }
.be-tile { min-width: 64px; min-height: 58px; color: #173e3a; border: 1px solid #72cdbd; background: linear-gradient(155deg,#dcfff6,#a7e6d8); box-shadow: inset 0 2px 0 #ffffffa0, 0 4px 8px #0001; }
.be-tile.used { opacity: .55; box-shadow: none; }
.be-slot:focus-visible, .be-tile:focus-visible { outline: 3px solid var(--select); outline-offset: 4px; }
.be-slot:disabled { cursor: default; }
@media (max-width: 480px) { .be-board { padding: 12px 8px; } .be-equation { gap: 5px; min-height: 96px; } .be-expression { gap: 4px; } .be-slot { min-width: 44px; min-height: 44px; font-size: 20px; } .be-index { display: none; } }