/* Whole-board play: the pattern and all tray columns remain visible. */
#app[data-screen="play"]{height:auto;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
#app[data-screen="play"] .top{height:calc(48px + env(safe-area-inset-top))!important;padding:calc(3px + env(safe-area-inset-top)) 12px 1px;align-items:center}
.feedback-controls{display:flex;gap:9px}.feedback-controls .icon-button{width:48px!important;height:40px;font-size:12px;transform:none!important;white-space:nowrap}
#home{height:40px}#sound[aria-pressed="true"],#haptics[aria-pressed="true"]{box-shadow:inset 0 1px 2px #fff4da,0 3px 1px #996334,0 0 0 2px #476c66}
#play{display:flex;flex-direction:column;padding:0 8px 8px;gap:0}
#play[hidden]{display:none}.level-heading{height:62px;flex:none;gap:10px}.level-ticket{padding:5px 10px}.preview-button{min-width:58px;min-height:56px}.preview-button canvas{width:38px;height:38px}
.level-note{font-size:12px;margin-top:3px;padding:2px 10px}.progress-line{height:12px;margin:3px 6px 1px}.instruction{font-size:11px;line-height:1.4;min-height:20px;margin:3px auto 5px;padding:2px 6px}
.board-scroll,.board-scroll:has(.zoomed){flex:none;align-self:center;width:100%;height:auto;min-height:0;max-height:none;padding:5px;overflow:visible;border-radius:7px;touch-action:manipulation}
.board,.board.zoomed{width:100%;min-width:0;max-width:100%;aspect-ratio:1;grid-template-rows:repeat(16,minmax(0,1fr));gap:0}
.board .cell{touch-action:manipulation;cursor:pointer}.board .bead{inset:12% 13% 18%}
.board .cell.selected .bead{outline:1.5px solid #fff;transform:translateY(-3px) scale(1.08);z-index:3}
.board .cell.settled:not(.selected) .bead{opacity:.42;box-shadow:inset 0 1px 1px #fffa,inset 0 -1px 1px #0003;transform:none}
.board .cell.settled:not(.selected) .bead:after{opacity:.4}
.board .cell.destination:after{outline-width:1.5px;box-shadow:0 0 0 2px #243a45,inset 1px 2px 2px #1a171a4d}
.selection-bar{min-height:42px;margin:4px 0;gap:5px}.selection-bar>span{text-align:left;font-size:11px;line-height:1.4;padding-left:3px}
.selection-bar button,#peek-board{min-height:40px;padding:4px 9px;font-size:12px;min-width:42px}
.tray-dock{border-radius:8px;background:#c7955e;box-shadow:0 4px 0 #986233,0 7px 9px #59321f40;overflow:hidden}
.tray-label{margin:0;padding:0 8px;min-height:40px;gap:6px;font-size:14px;box-shadow:inset 0 1px 1px #fff4de;border-bottom:1px solid #a5703f88}.tray-label>span{flex:1}.tray-label small{font-size:10px}
.tray-label button{min-height:40px;padding:3px 6px;font-size:12px;white-space:nowrap}#stash{color:#fff8e8;background:#355c66;border:1px solid #294752;border-radius:4px;margin:2px 0;min-height:36px;padding:5px 9px}#stash:disabled{background:#9e7b53;color:#fff3df;opacity:.65}
.tray-scroll{height:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#946835 #dbb47e;background:linear-gradient(#f7d39d66,#d7a26455),url('assets/counter-scene.jpg') center 60%/480px}
.tray-scroll.has-more{box-shadow:inset 0 -3px 4px #79502d55}.tray-label small{display:block;line-height:1.3;margin-left:0;white-space:nowrap}
.buffer{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:auto;width:100%;min-width:0;gap:7px 4px;padding:8px 9px 10px;border:0;border-radius:0;box-shadow:none;background:transparent}.buffer .cell{width:100%;height:auto;min-height:0;aspect-ratio:1;touch-action:manipulation}.buffer .bead{inset:5% 6% 10%}.buffer .cell.destination{animation:none;outline:1.5px solid #fff5d0;outline-offset:-1.5px}
.tools{grid-template-columns:repeat(3,1fr);margin:10px 2px 0;padding:0 3px 5px;gap:12px;min-height:53px}.tools button{min-height:48px;font-size:11px;padding:4px 1px;line-height:1.15}.tools b{height:21px;font-size:23px;margin-bottom:1px}.tools svg{width:23px;height:23px}.footnote{font-size:9px;margin:5px 0 0}
button:active:not(:disabled){filter:brightness(.96)}.cell:active{transform:none!important}.touch-ring{position:fixed;left:var(--x);top:var(--y);width:26px;height:26px;margin:-13px;border:1.5px solid #fff9e0;border-radius:50%;box-shadow:0 0 0 1px #4c625b77;pointer-events:none;z-index:9999;animation:touch-bloom .32s ease-out forwards}
@keyframes touch-bloom{from{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.25)}}
@media(max-width:360px){#play{padding-left:6px;padding-right:6px}.level-heading{height:56px}.level-ticket{padding:4px}.level-heading h1{font-size:17px}.preview-button{min-width:50px;min-height:50px}.preview-button canvas{width:32px;height:32px}.tray-label{padding:0 5px;gap:2px}.tray-label button{font-size:11px}.tray-label small{margin-left:2px}.tools{gap:9px}.level-note{font-size:11px}.buffer{padding:8px;gap:6px 3px}}
@media(max-height:740px){#app[data-screen="play"] .top{height:calc(44px + env(safe-area-inset-top))!important}.level-note,.footnote{display:none}.level-heading{height:48px}.preview-button canvas{width:28px;height:28px}.preview-button{min-height:44px}.instruction{margin:2px auto 4px}.level-ticket{padding-top:3px;padding-bottom:3px}.tools{min-height:49px}.tools button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.touch-ring{animation:none!important;opacity:.6}}