/* The building table is permanent. Opening a box only covers its edges. */
.account-link { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; color: #355f54; padding: 5px 9px; border: 1px solid #d8e6de; border-radius: 9px; text-decoration: none; font-size: 11px; white-space: nowrap; }
.account-link .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.account-link [data-account-tier] { font-size: 9px; padding-left: 5px; border-left: 1px solid #bed4c9; }
.account-link:focus-visible { outline: 3px solid #147987; outline-offset: 2px; }
@media screen and (max-width: 1100px) { .account-link [data-account-tier] { display: none; } }
@media screen and (max-width: 900px) { .account-link [data-account-label] { display: none; } .account-link { width: 36px; padding: 5px; } }
@media screen and (max-width: 600px) {
  .app-header .brand-copy { display: none; }
  .app-header .mode-button { padding-left: 6px; padding-right: 6px; }
  html[lang="en"] .language-switch [lang="en"], html[lang="zh-CN"] .language-switch [lang="zh-CN"] { display: none; }
}
@media screen {
  html, body { height: 100%; overflow: hidden; background: #eaf3ef; }
  /* Building gestures must not select the game UI or open the iOS copy callout. */
  #app { height: 100dvh; min-height: 0; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #app :is(input, textarea, [contenteditable]:not([contenteditable="false"])) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  .app-header { display: flex; flex: 0 0 56px; height: 56px; padding: 0 18px; gap: 16px; background: #fbfdfb; }
  .brand { gap: 8px; min-width: 0; }
  .brand-mark { width: 32px; height: 36px; margin: 0; transform: scale(.72); transform-origin: left center; }
  .brand-copy strong { font-size: 15px; white-space: nowrap; }
  .brand-copy > span { display: none; }
  .mode-switch { width: auto; max-width: none; padding: 3px; gap: 3px; border-radius: 10px; }
  .mode-button { flex: none; min-height: 35px; padding: 7px 13px; font-size: 11px; gap: 6px; border-radius: 7px; }
  .mode-button .icon { width: 16px; height: 16px; flex-basis: 16px; }
  .header-actions { gap: 10px; }
  .sound-button { min-height: 34px; }
  .save-indicator { font-size: 9px; }
  .app-footer { flex: 0 0 25px; height: 25px; min-height: 0; padding: 3px 15px; gap: 12px; font-size: 9px; line-height: 19px; background: #f6faf7; border-top: 1px solid #dfeae3; }
  #status-message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-footer .footer-note { display: none; }
  .app-footer .active-tool { display: block; white-space: nowrap; flex-shrink: 0; }

  .workshop.canvas-workspace { --left-clearance: 0px; --right-clearance: 0px; --tray-rise: 0px; --materials-bottom: 12px; --materials-height: min(238px, 40dvh); position: relative; display: block; flex: 1 1 0; min-height: 0; width: 100%; padding: 0; gap: 0; overflow: hidden; }
  .canvas-workspace .build-stage { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; max-height: none; border: 0; border-radius: 0; }
  .canvas-workspace .world { inset: 0; width: 100%; height: 100%; }
  .canvas-workspace .stage-heading { top: 14px; left: calc(18px + var(--left-clearance)); right: calc(18px + var(--right-clearance)); gap: 12px; align-items: flex-start; }
  .canvas-workspace .stage-heading > div:first-child { min-width: 0; }
  .canvas-workspace .stage-heading h1 { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; padding: 8px 11px; border-radius: 9px; color: #365c52; background: #f8fcf6c9; font-size: 15px; line-height: 21px; letter-spacing: 0; }
  .canvas-workspace #blueprint-tagline { display: none; }
  .canvas-workspace .stage-reference-actions { flex-direction: row; gap: 5px; flex-shrink: 0; }
  .canvas-workspace .reference-button { min-height: 36px; padding: 7px 10px; font-size: 10px; box-shadow: none; }
  .canvas-workspace .ghost-button { min-height: 36px; padding: 8px; }
  .canvas-workspace .ghost-button > span { display: none; }
  .canvas-workspace .stage-bottom { top: 55px; left: calc(22px + var(--left-clearance)); right: auto; bottom: auto; }
  .canvas-workspace .world-hint { display: none; }
  .canvas-workspace .piece-counter strong { font-size: 10px; font-weight: 500; }
  .canvas-workspace .counter-cube { width: 7px; height: 7px; }
  .canvas-workspace .world-navigation { top: 59px; right: calc(18px + var(--right-clearance)); padding: 3px; }
  .canvas-workspace .world-navigation button { min-height: 31px; padding: 5px 8px; font-size: 10px; }
  .canvas-workspace .world-navigation [data-action^="zoom-"] { min-width: 31px; font-size: 16px; }
  .canvas-workspace .camera-controls { position: absolute; z-index: 2; left: calc(14px + var(--left-clearance)); bottom: 13px; display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #ffffffb3; border-radius: 11px; background: #f8fcfaeb; box-shadow: 0 3px 9px #31564b07; }
  .canvas-workspace .camera-controls .view-controls { position: static; inset: auto; order: 0; gap: 1px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .canvas-workspace .camera-toolbar { position: static; inset: auto; order: 1; display: flex; gap: 1px; width: auto; padding: 0 0 0 3px; border: 0; border-left: 1px solid #d6e5dc; border-radius: 0; background: transparent; box-shadow: none; }
  .canvas-workspace .camera-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 36px; padding: 6px 8px; border-radius: 7px; color: #4c7b70; background: transparent; font-size: 10px; white-space: nowrap; touch-action: manipulation; }
  .canvas-workspace .camera-toolbar .icon { width: 15px; height: 15px; flex: 0 0 15px; }
  .canvas-workspace .camera-toolbar button:hover { background: #e0eee7; }
  .canvas-workspace .camera-toolbar [aria-pressed="true"] { color: #286b5d; background: #dceee5; box-shadow: inset 0 0 0 1px #b6d7c8; }
  .canvas-workspace .camera-toolbar button:focus-visible, .canvas-workspace .view-button:focus-visible { outline: 3px solid #147987; outline-offset: 2px; }
  .canvas-workspace .camera-toolbar kbd { font: inherit; font-size: 9px; line-height: 15px; min-width: 16px; border: 1px solid #cbded3; border-radius: 4px; background: #fff9; }
  .canvas-workspace .camera-controls-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .canvas-workspace .view-button { min-height: 36px; padding: 6px 9px; gap: 4px; font-size: 10px; }
  .canvas-workspace .edit-controls { right: calc(14px + var(--right-clearance)); bottom: 13px; padding: 3px; }
  .canvas-workspace .edit-controls .icon-button { width: 36px; height: 36px; padding: 8px; }
  /* Feedback sits below the title/counter, independent of bottom toolbars. */
  .canvas-workspace .toast, .canvas-workspace .magnet-feedback { top: 76px; bottom: auto; max-width: min(400px, calc(100% - 36px)); }
  .canvas-workspace:has(.magnet-feedback:not([hidden])) .toast { visibility: hidden; }

  .workspace-edge { position: absolute; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 48px; min-height: 48px; border: 1px solid #d6e6db; background: #fcfef9f5; color: #527768; box-shadow: 0 3px 14px #46695712; border-radius: 13px; font-size: 11px; font-weight: 650; touch-action: manipulation; }
  .workspace-edge-library, .workspace-edge-steps { top: 44%; flex-direction: column; gap: 5px; padding: 11px 9px; }
  .workspace-edge-library { left: 12px; }
  .workspace-edge-steps { right: 12px; }
  .workspace-edge-materials { bottom: 12px; left: 50%; transform: translateX(-50%); padding: 9px 16px; background: #fdf8df; color: #786b41; border-color: #e5dcba; }
  .workspace-edge-materials:active:not(:disabled) { transform: translateX(-50%) translateY(1px); }
  .workspace-edge-materials .icon { color: #c39a43; }
  .workspace-edge-hint { margin-left: 7px; font-size: 18px; font-weight: 400; }
  .workspace-edge[aria-expanded="true"] { background: #deeee3; border-color: #9fc4af; color: #376d56; }
  .workspace-edge-materials[aria-expanded="true"] .workspace-edge-hint { transform: rotate(45deg); }
  .workspace-edge:hover { box-shadow: 0 5px 18px #46695720; }
  .workspace-hud { position: absolute; z-index: 12; left: 50%; bottom: calc(75px + var(--tray-rise)); transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
  .workspace-hud button { pointer-events: auto; min-height: 42px; padding: 10px 21px; border-radius: 12px; font-size: 12px; font-weight: 700; color: white; background: #349891; border: 1px solid #2d8d85; box-shadow: 0 4px 0 #277b752b, 0 5px 18px #2b6a6112; white-space: nowrap; }
  .workspace-hud button:hover { background: #278a82; }
  .workspace-hud #workspace-stop { background: #bc645d; border-color: #ad574f; box-shadow: 0 4px 0 #813e3926; }

  .canvas-workspace .workspace-panel { position: absolute; z-index: 10; display: block; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b6cdbf transparent; border: 1px solid #d5e4d9; background: #fbfdf9f7; border-radius: 17px; box-shadow: 0 12px 34px #4264571c, 0 2px 6px #4264570b; padding: 0 14px 14px; }
  .canvas-workspace .workspace-panel[hidden] { display: none !important; }
  .workspace-panel[data-motion] { will-change: transform, opacity; }
  .workspace-panel[data-motion="closing"] { pointer-events: none; }
  #workspace-library { transform-origin: left center; }
  #workspace-steps { transform-origin: right center; }
  #workspace-materials { transform-origin: center bottom; }
  #workspace-library { left: 12px; top: 12px; bottom: 69px; width: 248px; display: flex; flex-direction: column; overflow: hidden; }
  #workspace-steps { right: 12px; top: 12px; bottom: 69px; width: 286px; }
  #workspace-materials { left: 50%; bottom: var(--materials-bottom); transform: translateX(-50%); width: min(706px, calc(100% - 36px)); height: var(--materials-height); padding: 0 15px 13px; }
  .workspace-panel-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 9px; min-height: 48px; margin: 0 -14px 10px; padding: 5px 9px 5px 14px; border-bottom: 1px solid #e4ece3; background: #fbfdf9; }
  .workspace-panel-header h2 { display: flex; align-items: center; gap: 7px; margin: 0; color: #406b58; font-size: 12px; font-weight: 750; line-height: 1.5; white-space: nowrap; }
  .workspace-panel-header h2 .icon { width: 17px; height: 17px; flex-basis: 17px; }
  .workspace-close { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; flex: 0 0 36px; padding: 8px; border-radius: 8px; background: transparent; color: #769586; }
  .workspace-close:hover { background: #e8f1e8; color: #315d4b; }
  .workspace-panel-caption { color: #95a796; font-size: 10px; }
  #workspace-library .workspace-panel-header { flex: 0 0 auto; }
  #workspace-library .blueprint-drawer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  #workspace-library .rail-description, #workspace-library .together-note { display: none; }
  #workspace-library .browse-library { position: static; flex: 0 0 auto; width: 100%; min-height: 39px; margin: 0 0 10px; padding: 8px 10px; }
  #workspace-library .blueprint-list { display: grid; grid-template-columns: 1fr; align-content: start; flex: 1 1 auto; min-height: 0; max-width: none; gap: 7px; overflow-y: auto; overflow-x: hidden; padding: 0 3px 10px 0; scrollbar-width: thin; scrollbar-color: #b6cdbf transparent; }
  #workspace-library .blueprint-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 9px; min-height: 78px; padding: 7px; width: 100%; text-align: left; border-radius: 10px; }
  #workspace-library .model-thumbnail { grid-row: 1 / 3; width: auto; }
  #workspace-library .model-thumbnail svg { width: 100%; height: 60px; }
  #workspace-library .blueprint-card-name { align-self: end; font-size: 11px; margin: 3px 0; }
  #workspace-library .blueprint-card-meta { align-self: start; font-size: 9px; }
  #workspace-library .print-button { position: static; flex: 0 0 auto; width: 100%; min-height: 38px; margin: 7px 0 0; }
  #workspace-steps > * { flex-shrink: 0; }
  #workspace-steps .step-kicker { display: none; }
  #workspace-steps .step-panel-top { justify-content: flex-start; }
  #workspace-steps .step-copy h2 { font-size: 18px; margin: 13px 0 8px; }
  #workspace-steps .step-copy p { font-size: 11px; line-height: 1.85; }
  #workspace-steps .step-progress-wrap { margin: 15px 0; }
  #workspace-steps .start-button, #workspace-steps .play-button { width: 100%; }
  #workspace-steps .materials-section { display: block; margin-top: 18px; padding-top: 14px; }
  #workspace-steps .materials-section h3 { margin-bottom: 6px; }
  #workspace-steps .conversation-card { margin: 17px 0; padding: 13px; }
  #workspace-steps .conversation-card p { font-size: 12px; }
  #workspace-steps .project-actions { margin-top: 12px; }
  #workspace-materials .workspace-panel-header { margin-bottom: 6px; }
  #workspace-materials .tray-tabs { display: flex; padding-bottom: 6px; margin-bottom: 8px; }
  #workspace-materials .tray-tabs button { min-height: 30px; padding: 5px 10px; }
  #workspace-materials .tile-materials { display: flex; flex-wrap: wrap; gap: 9px 14px; align-items: center; }
  #workspace-materials .tray-label { display: none; }
  #workspace-materials .tray-pieces { display: block; flex: 0 0 100%; width: 100%; min-width: 0; }
  #workspace-materials .piece-tools { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
  #workspace-materials .piece-tool { width: 100%; min-width: 0; height: 57px; margin: 0; padding: 4px 2px; font-size: 9px; touch-action: none; }
  #workspace-materials .piece-tool svg { width: 36px; height: 32px; max-width: 100%; }
  #workspace-materials .tray-colors { flex: 0 0 auto; }
  #workspace-materials .color-swatches { max-width: none; flex-wrap: nowrap; gap: 5px; }
  #workspace-materials .tray-placement { flex: 1 1 150px; min-width: 150px; padding: 0; }
  #workspace-materials .tray-height { flex: 0 1 auto; width: auto; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 7px; }
  #workspace-materials .tray-height > .small-label { display: none; }
  #workspace-materials .rail-note { margin: 4px 0 7px; }
  #workspace-materials .rail-tools button { min-height: 59px; }
  #workspace-materials .rail-tools svg { height: 31px; }
  #workspace-materials .rail-actions { margin: 7px 0; }

  .canvas-workspace[data-open-panels~="library"] { --left-clearance: 260px; }
  .canvas-workspace[data-open-panels~="steps"] { --right-clearance: 298px; }
  .canvas-workspace[data-open-panels~="materials"] { --tray-rise: calc(var(--materials-height) + var(--materials-bottom) - 3px); }
  .canvas-workspace[data-open-panels~="library"] .workspace-edge-library,
  .canvas-workspace[data-open-panels~="steps"] .workspace-edge-steps,
  .canvas-workspace[data-open-panels~="materials"] .workspace-edge-materials { visibility: hidden; }
}

/* Reserve the fixed corner controls on narrower screens; never move them when a box opens. */
@media screen and (max-width: 1250px) {
  .workshop.canvas-workspace { --materials-bottom: 68px; }
}

/* Tablets and phones use a single open box; the canvas underneath never reflows. */
@media screen and (max-width: 1100px) {
  .workshop.canvas-workspace { --materials-height: min(238px, 40dvh); }
  .canvas-workspace[data-open-panels~="library"], .canvas-workspace[data-open-panels~="steps"] { --left-clearance: 0px; --right-clearance: 0px; }
  #workspace-library, #workspace-steps { top: 115px; bottom: 67px; width: min(320px, calc(100% - 24px)); }
  #workspace-materials { width: min(670px, calc(100% - 24px)); }
  #workspace-materials .piece-tools { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
  .workspace-edge { min-width: 48px; min-height: 48px; }
  .workspace-close { width: 44px; height: 44px; flex-basis: 44px; }
  .workspace-panel-header { min-height: 50px; }
  .canvas-workspace[data-open-panels~="library"] .workspace-hud,
  .canvas-workspace[data-open-panels~="steps"] .workspace-hud { left: 18px; top: 64px; bottom: auto; transform: none; }
  .canvas-workspace[data-open-panels~="library"] .stage-bottom,
  .canvas-workspace[data-open-panels~="steps"] .stage-bottom { display: none; }
}

/* On short, wide phones the space between title and reference controls is free. */
@media screen and (min-width: 720px) and (max-width: 950px) and (max-height: 500px) {
  .canvas-workspace .stage-heading h1 { max-width: 180px; }
  .canvas-workspace .toast, .canvas-workspace .magnet-feedback { top: 12px; max-width: min(360px, calc(100% - 440px)); }
}

@media screen and (max-width: 899px) {
  .workshop.canvas-workspace { --materials-height: min(300px, 40dvh); }
  #workspace-materials .piece-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  #workspace-materials .piece-tool { height: 56px; }
}

@media screen and (max-width: 600px) {
  .app-header { flex: 0 0 49px; height: 49px; padding: 0 8px; gap: 6px; }
  .brand { gap: 2px; }
  .brand-mark { width: 26px; height: 31px; transform: scale(.58); }
  .brand-copy strong { font-size: 12px; }
  .mode-switch { margin-left: auto; padding: 2px; gap: 1px; border-radius: 8px; }
  .mode-button { min-height: 34px; padding: 5px 8px; font-size: 10px; }
  .mode-button .icon { display: none; }
  .header-actions { gap: 3px; }
  .save-indicator { display: none; }
  .sound-button { min-height: 32px; padding: 5px; border: 0; background: transparent; font-size: 10px; }
  .help-button { width: 29px; height: 29px; padding: 6px; }
  .app-footer { flex-basis: 22px; height: 22px; padding: 2px 9px; font-size: 8px; line-height: 17px; }
  .app-footer .active-tool { display: none; }
  .canvas-workspace .stage-heading { top: 11px; left: 12px; right: 12px; gap: 6px; }
  .canvas-workspace .stage-heading h1 { max-width: 43vw; padding: 8px 9px; font-size: 12px; line-height: 18px; }
  .canvas-workspace .reference-button { min-height: 34px; padding: 6px 8px; font-size: 9px; }
  .canvas-workspace .ghost-button { min-height: 34px; }
  .canvas-workspace .stage-bottom { left: 17px; top: 51px; }
  .canvas-workspace .world-navigation { top: 71px; right: 12px; max-width: calc(100% - 24px); }
  .canvas-workspace .world-navigation .scene-lighting-select { min-width: 0; }
  .canvas-workspace .world-navigation button { min-height: 31px; padding: 4px 6px; font-size: 9px; }
  .canvas-workspace .world-navigation [data-action^="zoom-"] { min-width: 29px; }
  .workshop.canvas-workspace { --materials-bottom: 70px; }
  .canvas-workspace .camera-controls { left: 8px; bottom: 0; flex-direction: column; gap: 0; padding: 1px; }
  .canvas-workspace .camera-controls .camera-toolbar { order: 1; width: 100%; padding: 0; border-left: 0; }
  .canvas-workspace .camera-controls .camera-toolbar button { flex: 1; min-height: 32px; height: 32px; padding: 4px; }
  .canvas-workspace .camera-controls .view-controls { order: 0; }
  .canvas-workspace .camera-controls .view-button { min-height: 32px; height: 32px; }
  .workspace-edge-library { left: 9px; }
  .workspace-edge-steps { right: 9px; }
  .workspace-edge-library, .workspace-edge-steps { padding: 10px 7px; font-size: 10px; min-width: 46px; border-radius: 11px; }
  .workspace-edge-materials { min-height: 44px; padding: 8px 12px; bottom: 10px; font-size: 10px; gap: 5px; }
  .workspace-edge-hint { display: none; }
  .workspace-hud { bottom: calc(73px + var(--tray-rise)); }
  .workspace-hud button { min-height: 40px; padding: 9px 15px; font-size: 11px; }
  .canvas-workspace .view-controls { left: 8px; bottom: 12px; }
  .canvas-workspace .view-button { width: 28px; min-height: 34px; padding: 6px; }
  .canvas-workspace .view-button > span { display: none; }
  .canvas-workspace .view-button .icon { display: block; width: 16px; height: 16px; flex-basis: 16px; }
  .canvas-workspace .edit-controls { right: 8px; bottom: 12px; }
  .canvas-workspace .edit-controls .icon-button { width: 27px; height: 34px; padding: 5px; }
  .canvas-workspace .tool-separator { display: none; }
  .canvas-workspace .toast, .canvas-workspace .magnet-feedback { font-size: 10px; padding: 8px 12px; }
  #workspace-library, #workspace-steps { width: calc(100% - 24px); }
  #workspace-materials { padding-left: 11px; padding-right: 11px; }
  #workspace-materials .workspace-panel-header { margin-left: -11px; margin-right: -11px; padding-left: 11px; }
  .workspace-panel-caption { display: none; }
  #workspace-materials .tile-materials { gap: 8px; }
  #workspace-materials .piece-tool { height: 54px; font-size: 8px; }
  #workspace-materials .piece-tool svg { width: 32px; height: 30px; }
  #workspace-materials .color-swatches { flex-wrap: wrap; max-width: 86px; gap: 6px; }
  #workspace-materials .tray-placement { min-width: 125px; flex: 1; }
  #workspace-materials .tray-height { flex-basis: 100%; justify-content: flex-end; }
  #workspace-materials .rail-actions { gap: 5px; }
  #workspace-materials .rail-actions button { min-height: 34px; padding: 6px 7px; font-size: 9px; }
  #workspace-materials .road-style-switch button { padding: 5px 10px; }
}

@media screen and (max-width: 1100px) {
  .canvas-workspace .camera-controls .view-button > span,
  .canvas-workspace .camera-toolbar button > span,
  .canvas-workspace .camera-toolbar kbd { display: none; }
  .canvas-workspace .camera-toolbar button { width: 32px; padding: 6px; }
  .canvas-workspace .camera-controls .view-button { padding-left: 6px; padding-right: 6px; }
}

@media screen and (max-width: 360px) {
  .brand-copy strong { font-size: 11px; }
  .brand-mark { display: none; }
  .mode-button { padding-left: 7px; padding-right: 7px; }
  .canvas-workspace .view-button { width: 24px; }
  .canvas-workspace .edit-controls .icon-button { width: 25px; }
  .workspace-edge-materials { padding: 8px 9px; }
  .workspace-edge-materials > .icon { display: none; }
}

@media screen and (max-height: 500px) {
  .workshop.canvas-workspace { --materials-height: 42dvh; }
  .canvas-workspace .stage-bottom { display: none; }
  #workspace-library, #workspace-steps { top: 12px; bottom: 65px; }
  .canvas-workspace[data-open-panels~="materials"] .workspace-hud { left: 12px; top: 56px; bottom: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-edge, .workspace-hud button, .workspace-close { transition: none; }
}

/* Keep the captured source button mounted while revealing the landing area. */
@media screen {
  .canvas-workspace[data-material-dragging="true"] #workspace-materials { opacity: 0; pointer-events: none; }
}

/* Small toys get their own tray so the original tile palette stays compact. */
#workspace-materials .prop-tools { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; }
#workspace-materials .prop-tools .piece-tool { height:68px; min-height:0; font-size:10px; }
#workspace-materials .prop-tools .piece-tool svg { width:64px; height:44px; }
.scene-lighting-select { min-height:31px; max-width:140px; border:0; border-radius:7px; padding:5px 6px; color:#4c7b70; background:#e4efe7; font:inherit; font-size:11px; cursor:pointer; }
.lamp-settings { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px; background:#eef3e9; color:#4c7b70; font-size:11px; }
.lamp-settings[hidden] { display:none !important; }
.lamp-settings label { display:flex; gap:5px; align-items:center; white-space:nowrap; }
.lamp-settings select { min-height:31px; max-width:115px; padding:4px 6px; font:inherit; color:inherit; background:#fffdf4; border:1px solid #d5e1d6; border-radius:6px; }
.lamp-settings select:focus-visible { outline:2px solid #cf9b47; outline-offset:2px; }
.piece-controls:has([data-lamp-scope="selected"]:not([hidden])) .piece-controls-tilt { display:none; }
#workspace-materials .lamp-tools { grid-template-columns:80px; flex:0 0 80px; width:80px; min-width:0; }
#workspace-materials [data-lamp-scope="palette"] { margin-top:6px; }
.scene-lighting-select:focus-visible { outline:2px solid #cf9b47; outline-offset:2px; }
html[data-scene-lighting="night"] .scene-lighting-select { color:#f5e6be; background:#344b68; }
@media(max-width:640px) { .scene-lighting-select { max-width:105px; font-size:10px; padding:4px; } }
#workspace-materials #prop-note { font-size:11px; color:#708b80; margin:4px 0 0; line-height:1.4; }
#workspace-materials [hidden] { display:none !important; }
@media(max-width:650px){
  #workspace-materials .prop-tools { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.my-plans-button { display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 11px;border:1px solid #cfdfd7;border-radius:10px;background:#f8fcf9;color:#3b7060;font:inherit;font-size:12px;white-space:nowrap; }
#workspace-library .my-plans-shelf { display:flex;width:100%;margin:0 0 10px;min-height:40px;color:#34705c;background:#ecf6ee; }
@media(max-width:1100px){.my-plans-button{padding:7px;}.my-plans-button span{display:none;}}
@media(prefers-reduced-motion:no-preference){.my-plans-button{transition:background .18s ease;}.my-plans-button:hover{background:#e6f3eb;}}

/* The first brick set stays compact and touch-friendly at every viewport. */
#workspace-materials .brick-tools { grid-template-columns: repeat(3, minmax(0, 100px)); justify-content: start; gap: 10px; }
#workspace-materials .brick-tools .piece-tool { height: 58px; min-height: 58px; font-size: 11px; }
#workspace-materials .brick-tools .piece-tool svg { width: 58px; height: 34px; }
#brick-note { margin: 7px 0 0; font-size: 11px; line-height: 1.5; color: #53776a; }
@media screen and (max-width: 600px) {
  #workspace-materials:has([data-action="bricks-open"][aria-pressed="true"]) .color-swatches { max-width: none; flex-wrap: nowrap; }
  #workspace-materials:has([data-action="bricks-open"][aria-pressed="true"]) .tray-height { flex-basis: auto; margin-left: auto; }
}

/* A small everyday box, with extra materials and settings opened on purpose. */
@media screen {
  #workspace-menu .workspace-menu-section:has(#build-rules-open[hidden]) { display: none; }
  .workshop.canvas-workspace {
    --materials-height: min(480px, 65dvh, calc(100dvh - var(--materials-bottom) - 225px));
  }
  .canvas-workspace #workspace-materials {
    width: min(620px, calc(100% - 24px));
    height: auto;
    max-height: var(--materials-height);
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 12px;
    scroll-padding-top: 56px;
  }
  #workspace-materials .workspace-panel-header { min-height: 50px; margin-bottom: 8px; }
  #workspace-materials .workspace-close { width: 44px; height: 44px; flex-basis: 44px; }
  #workspace-materials .material-pack-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #workspace-materials .material-pack-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #d9e5da;
    border-radius: 10px;
    background: #f7faf3;
    color: #617e6a;
    font-size: 12px;
    line-height: 1.35;
    touch-action: manipulation;
  }
  #workspace-materials .material-pack-tabs button[aria-pressed="true"] {
    border-color: #91bfa5;
    background: #e3f0e5;
    color: #315f4c;
    font-weight: 700;
  }
  #workspace-materials .material-pack-tabs [data-action="premium-materials-open"] > span:first-child {
    color: #846a38;
    font-size: 11px;
  }
  #workspace-materials .material-more,
  #workspace-materials .material-placement-options { width: 100%; min-width: 0; margin: 0; }
  #workspace-materials .material-more { margin: 2px 0 6px; }
  #workspace-materials .material-more > summary,
  #workspace-materials .material-placement-options > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 2px;
    color: #547460;
    font-size: 12px;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  #workspace-materials .material-more > summary::-webkit-details-marker,
  #workspace-materials .material-placement-options > summary::-webkit-details-marker { display: none; }
  #workspace-materials .material-more > summary::after,
  #workspace-materials .material-placement-options > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 5px 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    flex: 0 0 auto;
  }
  #workspace-materials .material-more[open] > summary::after,
  #workspace-materials .material-placement-options[open] > summary::after { margin-top: 4px; transform: rotate(225deg); }
  #workspace-materials .material-category-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
  }
  #workspace-materials .material-category-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    border: 1px solid #dce7d9;
    border-radius: 8px;
    background: #f4f8ef;
    color: #56745f;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    touch-action: manipulation;
  }
  #workspace-materials .material-category-tabs button[aria-pressed="true"] { border-color: #9dc2a9; background: #e1eee2; color: #315f4c; font-weight: 700; }
  #workspace-materials .material-category-tabs small { display: block; margin: 2px 0 0; color: #718575; font-size: 10px; }
  #workspace-materials .tile-materials { gap: 6px 12px; }
  #workspace-materials #piece-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  #workspace-materials .piece-tool {
    height: 62px;
    min-height: 62px;
    padding: 5px 3px;
    gap: 3px;
    font-size: 10px;
    line-height: 1.2;
    color: #55746b;
    background: #f0f5ef;
  }
  #workspace-materials .piece-tool > span { max-width: 100%; overflow-wrap: anywhere; }
  #workspace-materials .piece-tool svg { width: 40px; height: 32px; }
  #workspace-materials .piece-tool[aria-pressed="true"] { border-color: #8cbca5; color: #315f4c; background: #e3f0e5; }
  #workspace-materials .material-premium { width: 100%; min-width: 0; }
  #workspace-materials .material-pack-description { margin: 0 0 10px; color: #687e6c; font-size: 12px; line-height: 1.55; }
  #workspace-materials #premium-piece-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #workspace-materials #premium-piece-tools .piece-tool { height: 74px; min-height: 74px; padding: 8px 4px; font-size: 11px; }
  #workspace-materials #premium-piece-tools .piece-tool svg { width: 48px; height: 36px; }
  #workspace-materials .material-pack-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
  #workspace-materials #premium-material-status { flex: 0 0 100%; margin: 0 0 2px; color: #687e6c; font-size: 12px; line-height: 1.55; }
  #workspace-materials .material-pack-footer > a,
  #workspace-materials .material-pack-footer > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid #d3e1d0;
    border-radius: 9px;
    background: #f2f7ed;
    color: #496e53;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
  }
  #workspace-materials .material-pack-footer [data-action="assemblies-open"] { border-color: #e4dab9; background: #faf4e1; color: #796437; }
  #workspace-materials .tray-colors { flex: 0 0 100%; width: 100%; margin: 0; }
  #workspace-materials .color-swatches { max-width: 100%; flex-wrap: wrap; gap: 2px; }
  #workspace-materials .color-swatch {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 0;
    background: radial-gradient(circle at center, var(--swatch) 0 11px, transparent 11.5px);
    box-shadow: none;
    touch-action: manipulation;
  }
  #workspace-materials .color-swatch::after { inset: 7px; }
  #workspace-materials .material-placement-options { flex: 0 0 100%; border-top: 1px solid #e2eadf; }
  #workspace-materials .material-placement-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 3px 0 7px; }
  #workspace-materials .material-placement-body .tray-placement { flex: 1 1 250px; min-width: 0; }
  #workspace-materials .material-placement-body .tray-height { flex: 0 1 auto; justify-content: flex-start; flex-wrap: wrap; margin: 0; }
  #workspace-materials .material-placement-body .height-control button,
  #workspace-materials .material-placement-body .surface-controls button,
  #workspace-materials .material-placement-body .pose-controls button { min-width: 44px; min-height: 44px; height: auto; font-size: 11px; }
  #workspace-materials .material-placement-body .lamp-settings { flex-wrap: wrap; gap: 8px; margin: 0; }
  #workspace-materials .material-placement-body .lamp-settings select { min-height: 44px; font-size: 13px; }
  #workspace-materials .material-placement-body .lamp-tools { flex: 0 0 80px; }
  #workspace-materials .material-more > summary:focus-visible,
  #workspace-materials .material-placement-options > summary:focus-visible,
  #workspace-materials button:focus-visible,
  #workspace-materials a:focus-visible { outline: 3px solid #147987; outline-offset: 2px; }
  #workspace-materials .rail-actions button,
  #workspace-materials .road-style-switch button,
  #workspace-materials .rail-start { min-height: 44px; }

}

@media screen and (max-width: 600px) {
  #workspace-materials #piece-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #workspace-materials .material-category-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #workspace-materials .piece-tool { height: 62px; min-height: 62px; font-size: 10px; }
  #workspace-materials .color-swatches { gap: 0; }
  #workspace-materials .material-placement-body .tray-placement { flex-basis: 100%; }
  #workspace-materials .material-placement-body .tray-height { flex-basis: 100%; }
}

@media screen and (max-height: 500px) {
  .workshop.canvas-workspace { --materials-height: min(48dvh, calc(100dvh - var(--materials-bottom) - 100px)); }
}

/* Phone materials stay in one swipeable row, leaving the build in view. */
.mobile-material-kind, .mobile-material-color { display: none; }
@media screen and (max-width: 600px) {
  .workshop.canvas-workspace { --materials-height: 144px; }
  .canvas-workspace #workspace-materials {
    width: calc(100% - 16px);
    max-height: min(270px, 48dvh);
    padding: 0 8px 8px;
    border-radius: 14px;
    background: #fbfdf9;
  }
  #workspace-materials .workspace-panel-header {
    min-height: 44px;
    margin: 0 -8px 4px;
    padding: 0 4px 0 8px;
    gap: 4px;
    border: 0;
    position: static;
  }
  #workspace-materials .workspace-panel-header h2,
  #workspace-materials .workspace-panel-caption,
  #workspace-materials .material-pack-tabs,
  #workspace-materials .material-more,
  #workspace-materials .material-placement-options,
  #workspace-materials #brick-note,
  #workspace-materials #prop-note { display: none; }
  #workspace-materials .mobile-material-kind {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 6px 8px;
    color: #406b58;
    font: inherit;
    font-size: 16px;
    font-weight: 650;
  }
  #workspace-materials .mobile-material-color {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    padding: 8px;
    border-radius: 8px;
    background: transparent;
  }
  #workspace-materials .mobile-material-color i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--material-color, #34b9cf);
    box-shadow: 0 0 0 3px #fbfdf9, 0 0 0 4px #bfd5c9;
  }
  #workspace-materials .mobile-material-color[aria-expanded="true"] { background: #e3f0e5; }
  #workspace-materials .workspace-close { margin-left: 0; }
  #workspace-materials .tile-materials { display: block; }
  #workspace-materials #piece-tools,
  #workspace-materials #premium-piece-tools,
  #workspace-materials #brick-tools,
  #workspace-materials #prop-tools,
  #workspace-materials #lamp-tools {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #b4cdc0 transparent;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  #workspace-materials .piece-tool,
  #workspace-materials #premium-piece-tools .piece-tool,
  #workspace-materials .prop-tools .piece-tool,
  #workspace-materials .brick-tools .piece-tool {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    min-height: 64px;
    padding: 5px 3px;
    font-size: 10px;
    touch-action: pan-x;
  }
  #workspace-materials .piece-tool svg,
  #workspace-materials .prop-tools .piece-tool svg { width: 40px; height: 32px; }
  #workspace-materials .tray-colors { display: none; }
  #workspace-materials.show-mobile-colors .tray-colors { display: block; margin: 4px 0 0; }
  #workspace-materials .tray-colors > .small-label { display: none; }
  #workspace-materials .color-swatches { flex-wrap: nowrap; justify-content: center; }
  #workspace-materials .material-pack-description { display: none; }
  #workspace-materials .material-pack-footer { margin-top: 5px; gap: 4px 8px; }
  #workspace-materials #premium-material-status { flex: 1 1 100%; font-size: 11px; }
  #workspace-materials .material-pack-footer > a,
  #workspace-materials .material-pack-footer > button { min-height: 36px; padding: 6px 10px; font-size: 11px; }
  #workspace-materials .rail-tools { display: flex; overflow-x: auto; flex-wrap: nowrap; }
  #workspace-materials .rail-tools > button { flex: 0 0 64px; }
  #workspace-materials .rail-actions { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  #workspace-materials .rail-actions > button { flex: 0 0 auto; }
  #workspace-materials .mobile-material-kind:focus-visible { outline: 3px solid #147987; outline-offset: -2px; }
}