/* Blocks: one screen. The table fills it; the tray sits along the bottom; colours down the left.
   The four corners belong to the shared buttons (🏠 top-left, ⛶ top-right, 📮🔊 bottom-left, the
   portal's 💬 bottom-right), so nothing of ours goes there. */
:root{
  --paper:#fff8ec; --ink:#2b2420; --ink-2:#6b5e55; --rule:#e2d4c3; --accent:#e3000b; --sel:#1f6feb;
  --display:'Baloo 2',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
html,body{height:100%;margin:0;overflow:hidden}
body{background:#cfe8fa;color:var(--ink);font-family:var(--body);font-weight:700;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.bar{position:fixed;left:72px;right:72px;top:0;padding:calc(12px + env(safe-area-inset-top,0px)) 0 0;display:flex;gap:10px;align-items:flex-start;pointer-events:none;flex-wrap:wrap}
.bar>*{pointer-events:auto}
h1{font:800 24px/1 var(--display);margin:0;padding:10px 14px;background:var(--paper);border-radius:14px;box-shadow:0 2px 0 var(--rule),0 8px 24px rgba(40,30,20,.12)}
.pill{font:800 15px/1 var(--display);border:0;background:var(--paper);color:var(--ink);padding:0 14px;border-radius:14px;cursor:pointer;min-height:44px;box-shadow:0 2px 0 var(--rule),0 8px 24px rgba(40,30,20,.12)}
.pill:disabled{opacity:.45;cursor:default}
.pill:focus-visible,.part:focus-visible,.sw:focus-visible,.modes button:focus-visible,.sel button:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
/* the mode switch: what a press on the table does */
.modes{display:flex;background:var(--paper);border-radius:14px;padding:4px;gap:4px;box-shadow:0 2px 0 var(--rule),0 8px 24px rgba(40,30,20,.12)}
.modes button{font:800 16px/1 var(--display);border:0;background:transparent;color:var(--ink-2);padding:0 14px;border-radius:10px;cursor:pointer;min-height:40px}
.modes button[aria-pressed="true"]{background:var(--ink);color:#ffd500}
body.mode-move #stage{cursor:grab}
/* the selected brick's own buttons, floated above it */
.sel{position:fixed;left:0;top:0;transform:translate(-50%,-100%);display:flex;gap:6px;align-items:center;background:var(--paper);padding:6px;border-radius:14px;box-shadow:0 2px 0 var(--rule),0 10px 30px rgba(40,30,20,.2);white-space:nowrap}
.sel button{font:800 16px/1 var(--display);border:0;background:#ffe8a3;color:var(--ink);padding:0 14px;border-radius:10px;cursor:pointer;min-height:44px;box-shadow:inset 0 0 0 2px #f2cd37}
.sel .hint{font:700 13px/1 var(--body);color:var(--ink-2);padding:0 6px}
.sel::after{content:'';position:absolute;left:50%;bottom:-8px;width:16px;height:16px;background:var(--paper);transform:translateX(-50%) rotate(45deg);box-shadow:3px 3px 4px rgba(40,30,20,.08)}
.confirm{display:inline-flex;gap:6px;align-items:center}
/* the tray */
.tray{position:fixed;left:84px;right:100px;bottom:0;padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none}
.parts{pointer-events:auto;display:flex;gap:4px;background:var(--paper);padding:6px;border-radius:18px;box-shadow:0 2px 0 var(--rule),0 10px 30px rgba(40,30,20,.16);flex-wrap:wrap;justify-content:center;max-width:100%;touch-action:none}
.part{width:58px;height:58px;border:0;border-radius:12px;background:transparent;padding:5px;cursor:grab;display:grid;place-items:center;touch-action:none}
.part svg{width:100%;height:100%;overflow:visible;transition:transform .15s;pointer-events:none}
.part.base{width:72px}
.part[aria-pressed="true"]{background:#ffe8a3;box-shadow:inset 0 0 0 3px #f2cd37}
/* colours down the left, clear of the 🏠 above and the 📮🔊 below */
.colors{position:fixed;left:12px;top:calc(84px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px;background:var(--paper);padding:6px;border-radius:30px;box-shadow:0 2px 0 var(--rule),0 10px 30px rgba(40,30,20,.16);max-height:calc(100vh - 290px);overflow:auto;scrollbar-width:none}
.colors::-webkit-scrollbar{display:none}
.sw{width:40px;height:40px;border-radius:50%;border:4px solid transparent;cursor:pointer;flex:0 0 auto;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.35)}
.sw[aria-pressed="true"]{border-color:var(--ink)}
/* coach + toast */
.coach{position:fixed;left:50%;top:calc(50% - 170px);transform:translateX(-50%);background:var(--paper);color:var(--ink);font:800 18px/1.25 var(--display);padding:12px 18px;border-radius:14px;box-shadow:0 2px 0 var(--rule),0 10px 30px rgba(40,30,20,.16);pointer-events:none;max-width:min(90vw,460px);text-align:center}
.coach[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:170px;transform:translateX(-50%);background:var(--ink);color:var(--paper);font:800 16px/1.2 var(--display);padding:10px 16px;border-radius:12px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1}
[hidden]{display:none!important}
@media (max-width:700px){ h1{font-size:20px} .part{width:50px;height:50px} .part.base{width:62px} .sw{width:34px;height:34px} .tray{left:72px;right:88px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
/* what is in your hand, in words, next to the mode switch */
.chip{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:14px;padding:4px 14px 4px 6px;min-height:44px;box-shadow:0 2px 0 var(--rule),0 8px 24px rgba(40,30,20,.12);font:800 15px/1.1 var(--display);color:var(--ink);text-transform:capitalize}
.chip svg{width:40px;height:40px;overflow:visible;transition:transform .15s}
.chip b{color:var(--accent)}
body.mode-move .chip{display:none}
body:not(.mode-move) #stage{cursor:crosshair}
.modes button{title:attr(data-mode)}