/* A measured map, not a decorative grid: each tile is a real route decision. */
.builder-workbench { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.85fr); align-items:start; gap:24px; }
.builder-map-area { min-width:0; }
.builder-map { position:relative; display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:4px; width:min(100%,400px); margin:auto; background:#080e20; padding:6px; }
.builder-tile { min-width:44px; min-height:44px; aspect-ratio:1; padding:0; position:relative; border:1px solid #53647d; background:#19253d; color:var(--text); display:grid; place-items:center; }
.builder-tile:hover { border-color:var(--cyan); }
.builder-tile[data-road=true] { background:#485475; border-color:#c2b4ff; }
.builder-tile[data-reachable=true] { background:#315556; border-color:var(--cyan); }
.builder-tile[data-hint=true] { outline:3px solid var(--amber); outline-offset:-4px; }
.builder-tile[data-kind=block] { background:#0b1021; border-color:#4b5269; cursor:default; }
.builder-obstacle { width:55%; height:55%; background:#7f8198; border:4px solid #a9abc2; }
.builder-tile[data-kind=start],.builder-tile[data-kind=finish] { background:#3a3445; border-color:var(--amber); }
.builder-tile .learning-picture { width:86%; max-width:70px; }
.builder-start-marker { font-size:.6875rem; position:absolute; top:2px; left:4px; color:var(--amber); }
.builder-walker { position:absolute; inset:0; pointer-events:none; z-index:2; display:grid; place-items:center; }
.builder-walker .explore-portrait { --portrait-size:38px; width:var(--portrait-size); max-width:100%; }
.builder-road-mark { width:48%; height:48%; border-radius:50%; background:#c2b4ff; opacity:.6; }
.builder-tile[data-reachable=true] .builder-road-mark { background:var(--cyan); }
.builder-map-note { display:flex; align-items:center; justify-content:center; gap:8px; font-size:.8125rem; margin:10px 0 0; }
.builder-key-road,.builder-key-block { display:inline-block; width:14px; height:14px; background:#c2b4ff; flex-shrink:0; }
.builder-key-block { background:#7f8198; margin-left:8px; }
.builder-controls { min-width:0; }
.builder-settings { border:0; padding:0; margin:0 0 12px; }
.builder-settings legend { color:var(--muted); font-size:.875rem; margin-bottom:6px; }
.builder-mode-options { display:flex; gap:6px; }
.builder-mode-options .game-button { flex:1; padding:7px 6px; font-size:.875rem; min-width:0; }
.builder-mode-options .game-button[aria-pressed=true] { color:var(--amber); border-color:var(--amber); background:#393044; }
.builder-goal { margin:0 0 12px; font-size:.875rem; min-height:3.4em; }
.builder-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.builder-actions .game-button { min-width:0; padding:8px; font-size:.875rem; }
.builder-actions [data-builder-walk] { grid-column:1 / -1; }
.builder-stage .learning-status { min-height:3.4em; }
.builder-saved { border-top:1px solid var(--line); margin-top:12px; font-size:.8125rem; }
.builder-saved summary { min-height:44px; padding-block:10px; cursor:pointer; color:var(--text); }
.builder-saved p { margin:0 0 8px; }
.builder-saved-list { display:grid; gap:6px; }
.builder-saved-list .game-button { text-align:left; min-height:44px; font-size:.8125rem; padding:6px 10px; }
.builder-stage.is-immersive { display:block; }
.builder-stage.is-immersive .builder-workbench { max-width:850px; margin:20px auto 0; }
@media(max-width:650px) {
  .builder-workbench { grid-template-columns:1fr; gap:16px; }
  .builder-map { width:min(100%,350px); }
  .builder-goal { min-height:0; }
  .builder-mode-options .game-button { min-height:44px; }
  .builder-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .builder-stage.is-immersive .builder-workbench { margin-top:8px; }
}
@media(min-width:650px) and (max-height:600px) {
  .builder-stage.is-immersive { padding:12px 16px; }
  .builder-stage.is-immersive .learning-heading { display:none; }
  .builder-stage.is-immersive .builder-workbench { grid-template-columns:minmax(240px,1fr) minmax(310px,1fr); gap:16px; margin-top:8px; max-width:900px; }
  .builder-stage.is-immersive .builder-map { width:248px; gap:3px; padding:4px; }
  .builder-stage.is-immersive .builder-walker .explore-portrait { --portrait-size:30px; }
  .builder-stage.is-immersive .builder-map-note { margin-top:4px; }
  .builder-stage.is-immersive .builder-goal { display:none; }
  .builder-stage.is-immersive .builder-settings { margin-bottom:8px; }
  .builder-stage.is-immersive .builder-settings legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .builder-stage.is-immersive .builder-actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .builder-stage.is-immersive .builder-actions [data-builder-walk] { grid-column:auto; }
  .builder-stage.is-immersive .builder-actions .game-button { font-size:.8125rem; padding:5px; }
  .builder-stage.is-immersive .learning-status { min-height:3.4em; margin-top:8px; font-size:.875rem; }
  .builder-stage.is-immersive .builder-saved { margin-top:6px; }
}