/* Keyboard instructions stay beside the tools; the material drawer owns its
   screen space without changing the canvas size or interrupting map input. */
#desktop-edit-hint { display:none; }
body[data-material-sampling="true"] #desktop-edit-hint .desktop-mouse-hint { visibility:hidden; }
@media (min-width:761px) {
  html:not([data-mobile-shell="true"]) body { --desktop-drawer-space:0px; }
  html:not([data-mobile-shell="true"]) body[data-inventory-open="true"] { --desktop-drawer-space:calc(var(--drawer-width) + 32px); }
  html:not([data-mobile-shell="true"]) body #selection-panel {
    left:calc((100% - var(--desktop-drawer-space)) / 2);
    max-width:calc(100% - var(--desktop-drawer-space) - 40px);
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel {
    width:max-content; bottom:72px; padding:10px; margin:0; overflow:visible;
    border:1px solid var(--shell-edge); border-radius:12px;
    background:var(--shell-paper); box-shadow:var(--shell-shadow);
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #edit-tools {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel :is(.edit-mode-header,.edit-secondary,.edit-actions) {
    display:contents; margin:0; padding:0; border:0;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel :is(#work-mode-heading,#quick-start) { display:none; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #inventory-open {
    order:0; width:140px; min-width:0; max-width:140px; height:52px; min-height:52px; padding:4px 19px 4px 5px;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-inventory-open="true"] #selection-panel #inventory-open { display:none; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel .toolbar {
    order:1; flex:0 0 auto; width:auto; display:flex; gap:6px; margin:0; padding:0;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel .tool {
    flex:0 0 auto; min-width:98px; min-height:52px; height:52px; padding:6px 10px; gap:5px; font-size:18px;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel .tool .game-tool-art { width:29px; height:29px; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #scope-toggle {
    order:2; width:84px; min-width:84px; height:52px; padding:5px 20px 5px 8px; margin:0 0 0 2px;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel .scope-caption { display:none; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #recent-work {
    order:3; display:flex; flex:0 0 44px; position:static; width:44px; margin:0; padding:0;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #undo {
    width:44px; min-width:44px; height:52px; min-height:52px; margin:0; padding:6px;
    border:1.5px solid var(--shell-control-edge); border-radius:9px; background:var(--shell-paper); box-shadow:var(--shell-control-shadow);
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel .undo-label { display:none; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #edit-close {
    order:4; width:44px; min-width:44px; height:52px; min-height:52px; padding:6px; margin:0;
    border-radius:9px;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #edit-close-label { display:none; }
  /* Keep less frequent view and sampling tools available outside the work rail. */
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #map-view-controls {
    left:22px; right:auto; top:auto; bottom:22px; margin:0;
  }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel #material-pick {
    position:absolute; left:0; bottom:calc(100% + 10px); width:126px; min-width:0; height:36px; min-height:36px; padding:4px 8px; margin:0; font-size:12px;
  }
  html:not([data-mobile-shell="true"]) #desktop-edit-hint:not([hidden]) {
    position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
    display:flex; align-items:center; justify-content:center; gap:20px; width:max-content; max-width:calc(100vw - var(--desktop-drawer-space) - 32px);
    padding:5px 10px; border-radius:8px; color:var(--shell-ink); background:#fffbeeeF;
    font:600 14px/1.3 var(--font-ui); white-space:nowrap;
  }
  #desktop-edit-hint :is(.desktop-move-hint,.desktop-apply-hint,.desktop-move-keys) { display:inline-flex; align-items:center; gap:6px; }
  #desktop-edit-hint .desktop-move-keys { gap:3px; }
  #desktop-edit-hint kbd {
    display:inline-flex; align-items:center; justify-content:center; height:27px; min-width:26px; padding:2px 5px;
    border:1px solid #b7bda9; border-radius:5px; background:#fffefa; box-shadow:0 2px 0 #c8cbbd;
    color:var(--shell-ink); font:700 14px/1 var(--font-ui);
  }
  #desktop-edit-hint .desktop-apply-hint kbd { min-width:62px; background:#fff1c8; border-color:#d5bb70; }
  #desktop-edit-hint .desktop-mouse-hint { border-left:1px solid var(--shell-line); padding-left:18px; font-size:13px; font-weight:400; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"] #recent-work-copy {
    position:absolute; left:138px; right:0; bottom:calc(100% + 10px); width:auto; max-width:none;
  }
}
@media (min-width:1101px) {
  html:not([data-mobile-shell="true"]) #inventory-mount:not([hidden]) { display:block; }
  #inventory-mount #inventory-panel #material-grid:not([data-color-view="true"]) { --inventory-columns:3; }
  #inventory-mount #inventory-panel .inventory-types { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
  #inventory-mount #inventory-panel .inventory-types button { font-size:12px; }
}
@media (min-width:761px) and (max-width:1250px) {
  #desktop-edit-hint .desktop-mouse-hint { display:none; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"][data-material-sampling] #selection-panel .tool { min-width:84px; padding:6px; font-size:16px; }
}
@media (min-width:761px) and (max-width:1160px) {
  html:not([data-mobile-shell="true"]) body[data-world-kind][data-edit-hud="single"] #map-view-controls #view-options #view-mode { width:44px; padding:0; }
  html:not([data-mobile-shell="true"]) body[data-edit-hud="single"] #map-view-controls #view-mode-label { display:none; }
}