/* Shared cream sign palette for the scene, editor, and supporting pages. */
:root {
  color-scheme: light;
  --sign-face: repeating-linear-gradient(174deg, #f8f7ef 0, #f2efe3 5px, #f8f7ef 11px);
  --sign-ink: #783b3b;
  --sign-strong: #4e2222;
  --sign-muted: #786255;
  --sign-border: #d8c8a8;
  --sign-field-border: #b7a384;
  --sign-field: #fffaf0;
  --sign-hover: #fff8e6;
  --sign-wash: #783b3b0a;
  --sign-selected: #eadbb9;
  --sign-success: #42613a;
  --sign-matte: #302b26;
  --sign-backdrop: rgba(38, 29, 24, .96);
  --sign-shadow: 0 3px 10px rgba(48, 29, 22, .25);
  --sign-font: 'Trebuchet MS', system-ui, sans-serif;
}
:where(button, select, input, textarea) { font-family: var(--sign-font); color-scheme: light; }
:where(button, .btn) {
  padding: 7px 10px;
  border: 1px solid var(--sign-field-border);
  border-radius: 4px;
  background: var(--sign-face);
  color: var(--sign-ink);
  font: 700 13px/1.3 var(--sign-font);
  cursor: pointer;
}
:where(button, .btn):hover:not(:disabled) { background: var(--sign-hover); }
:where(button):disabled { opacity: .55; cursor: default; }
:where(button, select, input, textarea, a, summary):focus-visible { outline: 2px solid var(--sign-ink); outline-offset: 3px; }
.gamepad-focus { outline: 3px solid var(--sign-ink); outline-offset: 2px; }
:where(input, select, textarea) { accent-color: var(--sign-ink); }
:where(input, textarea)::placeholder { color: var(--sign-muted); opacity: .85; }
.sign-panel { background: var(--sign-face); border: 2px solid var(--sign-border); border-radius: 5px; color: var(--sign-ink); box-shadow: var(--sign-shadow); }
.sign-error { color: var(--sign-ink); font-weight: 700; }
#loadingOverlay { position: fixed; z-index: 10000; inset: 0; display: flex; align-items: center; justify-content: center; background: #294c6b; color: var(--sign-ink); font: 700 22px/1.3 var(--sign-font); transition: opacity 2s ease; }
.loading-sign { box-sizing: border-box; width: min(390px, calc(100vw - 48px)); padding: 28px 24px; text-align: center; }
.loading-track { height: 6px; margin-top: 18px; overflow: hidden; border-radius: 999px; background: var(--sign-border); }
#loadingError { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
#loadingProgress { width: 0%; height: 100%; border-radius: inherit; background: var(--sign-ink); transition: width .15s ease; }
#performanceTraceStatus { position: fixed; left: 10px; top: 58px; z-index: 30; box-sizing: border-box; max-width: calc(100vw - 20px); padding: 9px 11px; background: var(--sign-face); border: 2px solid var(--sign-border); border-radius: 4px; color: var(--sign-ink); font: 700 12px/1.5 var(--sign-font); box-shadow: var(--sign-shadow); }
#performanceTraceStatus button { margin-left: 6px; }
#siteEditorChangesSummary { cursor: pointer; }
#treeEditorCatalog a { text-decoration-color: var(--sign-field-border); text-underline-offset: 3px; }
#treeEditor button[aria-pressed="true"] { background: var(--sign-selected); border-color: var(--sign-ink); }

html{height:100%}
  body.walk-page{height:100%;margin:0;overflow:hidden;background:#87bffd}
  /* Top banner and sign-panel site menu */
  #topBanner{position:fixed;left:0;top:0;box-sizing:border-box;width:100%;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px;background:var(--sign-face);color:var(--sign-ink);font:700 14px/1 var(--sign-font);border-bottom:2px solid var(--sign-border);z-index:20;box-shadow:var(--sign-shadow)}
  #topBanner a{color:inherit;text-decoration:none}
  #topBanner:has([aria-expanded="true"]){z-index:40}
  #topBanner .banner-actions{display:flex;align-items:center;gap:10px;margin-right:25px}
  #seasonControl{position:relative;min-width:0;color:var(--sign-ink);font:700 12px var(--sign-font)}
  #sceneSettingsToggle{display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 9px;background:var(--sign-field);white-space:nowrap}
  .scene-sun{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .scene-setting-label{display:flex;align-items:center;gap:4px;text-align:left}
  #currentTimeOfDay::after{content:','}
  .scene-chevron{font-size:19px;line-height:1}
  #sceneSettingsPanel{position:absolute;right:0;top:calc(100% + 10px);box-sizing:border-box;width:250px;max-width:calc(100vw - 20px);padding:14px;border:2px solid var(--sign-border);border-radius:5px;background:var(--sign-face);box-shadow:var(--sign-shadow);font:700 13px/1.4 var(--sign-font)}
  #sceneSettingsPanel[hidden]{display:none}
  #sceneSettingsPanel label{display:flex;align-items:center;justify-content:space-between;gap:10px}
  #sceneSettingsPanel label+label{margin-top:12px}
  #sceneSettingsPanel select{min-height:32px;width:150px;padding:5px 7px;border:1px solid var(--sign-field-border);border-radius:4px;background:var(--sign-field);color:var(--sign-ink);font:700 12px var(--sign-font);cursor:pointer;color-scheme:light}
  #sceneSettingsPanel select:focus-visible{outline:2px solid var(--sign-ink);outline-offset:3px}
  #sceneSettingsPanel input[type=checkbox]{width:20px;height:20px;accent-color:var(--sign-ink);cursor:pointer}
  #sceneSettingsPanel input:focus-visible{outline:2px solid var(--sign-ink);outline-offset:3px}
  #sceneSettingsPanel .scene-settings-help{margin:8px 0 0;color:var(--sign-muted);font:12px/1.4 var(--sign-font)}
  body.tree-editor-open #seasonControl{display:none}
  #siteMenu{position:relative}
  #siteMenuToggle,#siteMenuPanel{background:var(--sign-face);color:var(--sign-ink);box-shadow:var(--sign-shadow)}
  #siteMenuToggle{display:grid;align-content:center;gap:4px;box-sizing:border-box;width:42px;height:36px;padding:8px 10px;border:0;cursor:pointer;clip-path:polygon(0 12%,10% 0,90% 0,100% 12%,95% 35%,100% 60%,95% 85%,100% 100%,10% 100%,0 85%,5% 60%,0 35%)}
  #siteMenuToggle span{display:block;height:3px;border-radius:2px;background:currentColor}
  #siteMenuToggle:hover,#siteMenuToggle[aria-expanded="true"]{color:var(--sign-strong);background:var(--sign-hover)}
  #siteMenuPanel{position:absolute;right:0;top:calc(100% + 10px);box-sizing:border-box;width:280px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 68px);overflow-y:auto;padding:12px;border:2px solid var(--sign-border);border-radius:5px;font:700 14px/1.3 var(--sign-font)}
  #siteMenuPanel[hidden],#siteMenuPanel .site-menu-action[hidden]{display:none}
  #siteMenuPanel .site-menu-action{display:block;box-sizing:border-box;width:100%;padding:11px 10px;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
  #siteMenuPanel .site-menu-action:hover:not(:disabled){background:var(--sign-wash)}
  #siteMenuPanel .site-menu-action:disabled{opacity:.55;cursor:wait}
  #siteMenuToggle:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--sign-ink)}
  #siteMenuPanel :focus-visible{outline:2px solid var(--sign-ink);outline-offset:2px}
  #aboutDialog{box-sizing:border-box;width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:22px;color:var(--sign-ink);font:15px/1.55 var(--sign-font)}
  #aboutDialog::backdrop{background:#261d1899}
  .about-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
  #aboutDialog h2{margin:0;font-size:19px}
  #aboutDialog p{margin:12px 0 0}
  #aboutDialog section{margin-top:22px}
  #aboutDialog a{color:inherit;overflow-wrap:anywhere;text-underline-offset:3px}
  #controlsDialog{box-sizing:border-box;width:min(600px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:22px;color:var(--sign-ink);font:14px/1.5 var(--sign-font)}
  #controlsDialog::backdrop{background:#261d1899}
  #controlsDialog h2{margin:0;font-size:19px}
  #controlsDialog h3{margin-bottom:8px}
  #controlsDialog ul{padding-left:22px}
  #controlsDialog a{color:inherit}
  #controlsDialog pre{padding:10px;background:var(--sign-field);white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
  #clearTaskCompletionDialog{box-sizing:border-box;width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow-y:auto;padding:22px;font:14px/1.5 var(--sign-font)}
  #clearTaskCompletionDialog::backdrop{background:#261d1899}
  #clearTaskCompletionDialog h2{margin:0;font-size:19px}
  .task-list-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:20px}
  .task-list-actions button{min-height:40px}
  #pwaInstallDialog{box-sizing:border-box;width:min(540px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:22px;font:14px/1.55 var(--sign-font)}
  #pwaInstallDialog::backdrop{background:#261d1899}
  #pwaInstallDialog h2{margin:0;font-size:19px}
  #pwaInstallDialog ul{padding-left:22px}
  #offlineDownloadDialog{box-sizing:border-box;width:min(590px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:22px;font:14px/1.55 var(--sign-font)}
  #offlineDownloadDialog::backdrop{background:#261d1899}
  #offlineDownloadDialog h2{margin:0;font-size:19px}
  #offlineDownloadProgress{width:100%;height:18px;accent-color:var(--sign-success)}
  #offlineDownloadProgress[hidden],.offline-download-actions [hidden]{display:none}
  .offline-download-actions{display:flex;flex-wrap:wrap;gap:8px}
  .offline-download-note{font-size:12px;color:var(--sign-muted)}
  #controllerStatus{padding:8px 10px;background:var(--sign-selected);border-radius:4px;overflow-wrap:anywhere}
  #exportStatus{position:fixed;right:12px;top:56px;z-index:16;max-width:min(340px,calc(100vw - 24px));padding:8px 10px;border-radius:6px;background:var(--sign-face);border:2px solid var(--sign-border);color:var(--sign-ink);font:700 12px/1.35 var(--sign-font);box-shadow:var(--sign-shadow)}
  #exportStatus[hidden]{display:none}
  #treeEditorToggle:disabled{opacity:.55;cursor:wait}
  #treeEditorToggle[hidden],#treeEditor[hidden]{display:none}
  #treeEditor{position:fixed;inset:48px 0 0;z-index:13;display:grid;grid-template-columns:minmax(260px,38%) minmax(300px,1fr) minmax(260px,320px);background:var(--sign-face);color:var(--sign-ink);font:13px/1.4 var(--sign-font)}
  #treeEditorWalkingView,#treeEditorMapPane,#treeEditorCatalog{min-width:0;min-height:0;position:relative;border-right:2px solid var(--sign-border)}
  #treeEditorWalkingView{overflow:hidden;background:var(--sign-matte)}
  #treeEditorWalkingView canvas{display:block}
  .tree-editor-label{position:absolute;top:10px;left:10px;z-index:2;padding:6px 9px;border-radius:5px;background:var(--sign-face);border:1px solid var(--sign-border);box-shadow:var(--sign-shadow);font-weight:700;pointer-events:none}
  #treeEditorMapPane{display:flex;flex-direction:column;overflow:hidden}
  #treeEditorMapBar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:8px;background:var(--sign-face)}
  #treeEditorMapBar strong{margin-right:auto}
  #treeEditorFollow[aria-pressed="true"]{background:var(--sign-selected);border-color:var(--sign-ink)}
  #treeEditorTreeLegend{display:flex;flex-wrap:wrap;gap:5px 12px;padding:5px 9px;background:var(--sign-face);font-size:11px;color:var(--sign-muted)}
  #treeEditorTreeLegend[hidden],#photoEditorMapLegend[hidden]{display:none}
  #photoEditorMapLegend{display:flex;gap:14px;padding:5px 9px;background:var(--sign-face);font-size:11px}
  #photoEditorMapLegend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:var(--photo-color)}
  #treeEditorTreeLegend span::before,.tree-editor-status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:var(--state-color);vertical-align:middle}
  .tree-state-3d{--state-color:#48e0ed}.tree-state-impostor{--state-color:#ffae55}.tree-state-unloaded{--state-color:#87968b}
  #treeEditor button,#treeEditor select,#treeEditor input{font:inherit}
  #treeEditor button{border:1px solid var(--sign-field-border);border-radius:4px;background:var(--sign-field);color:var(--sign-ink);padding:5px 8px;cursor:pointer}
  #treeEditor button:hover{background:var(--sign-hover)}
  #treeEditor button:disabled{opacity:.5;cursor:default}
  #treeEditorMap{display:block;flex:1;min-height:0;width:100%;touch-action:none;cursor:crosshair;background:var(--sign-matte)}
  #treeEditorMapHint{padding:6px 9px;background:var(--sign-face);color:var(--sign-muted);font-size:11px}
  #treeEditorCatalog{display:flex;flex-direction:column;overflow:hidden;padding:12px;box-sizing:border-box;gap:9px;background:var(--sign-face)}
  #treeEditorCatalog h2,#treeEditorCatalog h3{margin:0;font-size:15px}
  #treeEditorCatalog p{margin:0;color:var(--sign-muted);font-size:12px}
  #treeEditorCatalog a{color:var(--sign-ink)}
  #treeSpeciesPalette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:34vh;overflow-y:auto;flex-shrink:0;padding-right:3px}
  .plant-palette-heading{grid-column:1/-1;padding:5px 0;color:var(--sign-ink);font-size:12px}
  .tree-species-card{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:5px;border:1px solid var(--sign-border);border-radius:6px;background:var(--sign-field);cursor:grab;touch-action:none;text-align:center;font-size:11px;font-weight:700}
  .tree-species-card:active{cursor:grabbing}
  .tree-species-card span{min-height:24px;display:flex;align-items:center;justify-content:center}
  .tree-species-card img{display:block;width:100%;height:54px;object-fit:contain;pointer-events:none;user-select:none;filter:none}
  #treeEditorSelection{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:end;padding:9px;border:1px solid var(--sign-border);border-radius:6px;background:var(--sign-wash)}
  #treeEditorSelection[hidden]{display:none}
  #treeEditorSelection h3,#treeEditorSelection .tree-editor-wide{grid-column:1/-1}
  #treeEditorPreview{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:8px;min-height:96px;padding:5px;border:1px solid var(--sign-border);border-radius:5px;background:var(--sign-field)}
  #treeEditorPreviewImageBox{display:flex;align-items:end;justify-content:center;width:86px;height:90px;overflow:hidden}
  #treeEditorPreviewImage{display:block;object-fit:fill;pointer-events:none;user-select:none;filter:none}
  #treeEditorPreviewDetails{display:grid;gap:5px;align-content:center;font-size:11px;color:var(--sign-muted)}
  #treeEditorPreviewDetails strong{font-size:12px;color:var(--sign-ink)}
  #treeEditorSelection label{display:grid;gap:3px;font-size:11px;color:var(--sign-muted)}
  #treeEditorSelection input,#treeEditorSelection select,#treeEditorSearch{box-sizing:border-box;width:100%;padding:5px;border:1px solid var(--sign-field-border);border-radius:4px;background:var(--sign-field);color:var(--sign-ink)}
  #treeEditorDelete{background:var(--sign-ink)!important;border-color:var(--sign-strong)!important;color:var(--sign-field)!important}
  #treeEditorList{overflow:auto;min-height:150px;flex:1;border:1px solid var(--sign-border);border-radius:5px}
  .tree-editor-row{display:flex;flex-direction:column;align-items:center;gap:2px;width:calc(50% - 3px);padding:5px!important;text-align:center;border:1px solid var(--sign-border)!important;border-radius:4px!important;background:var(--sign-field)!important;font-size:11px!important;overflow:hidden}
  .tree-editor-row:hover,.tree-editor-row[aria-current="true"]{background:var(--sign-selected)!important;border-color:var(--sign-ink)!important}
  .tree-editor-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-weight:700}
  .tree-editor-row small{display:block;color:var(--sign-muted);white-space:nowrap;font-size:10px}
  .tree-editor-status{color:var(--sign-muted);font-size:10px}
  .tree-editor-row img{display:block;width:100%;height:48px;object-fit:contain;pointer-events:none;filter:none}
  #treeEditorCatalogFooter{display:flex;align-items:center;justify-content:space-between;gap:7px}
  #siteEditorToolbar,.site-editor-layer{display:grid;gap:7px;padding:9px;border:1px solid var(--sign-border);border-radius:6px;background:var(--sign-wash)}
  #siteEditorToolbar{flex-shrink:0}
  .site-editor-layer{min-height:0;flex:1;overflow:auto;align-content:start}
  #siteEditorTreeTools{display:flex;flex-direction:column;gap:9px;min-height:0;flex:1;overflow-y:auto}
  #siteEditorTreeTools>*{flex-shrink:0}
  #siteEditorToolbar label,.site-editor-layer label{display:grid;gap:3px;font-size:11px;color:var(--sign-muted)}
  #siteEditorToolbar input,#siteEditorToolbar select,.site-editor-layer input,.site-editor-layer select{box-sizing:border-box;width:100%;padding:5px;border:1px solid var(--sign-field-border);border-radius:4px;background:var(--sign-field);color:var(--sign-ink)}
  .site-editor-row{display:flex;gap:6px;align-items:end}
  .site-editor-row>*{flex:1;min-width:0}
  #siteEditorToolbar .site-editor-check{display:flex;align-items:center;gap:7px}
  #siteEditorToolbar .site-editor-check input{width:auto}
  .fence-part-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .fence-part-catalog button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px!important}
  .fence-part-catalog img{width:100%;height:74px;object-fit:contain}
  .fence-part-catalog button[aria-pressed="true"]{border-color:var(--sign-ink)!important;background:var(--sign-selected)!important}
  #siteEditorObjectList{display:grid;gap:5px}
  #siteEditorObjectList button{text-align:left;overflow-wrap:anywhere}
  #siteEditorObjectList button[aria-current="true"]{background:var(--sign-selected)}
  #siteEditorObjectSelection{border:1px solid var(--sign-border);padding:8px;overflow-wrap:anywhere}
  #siteEditorObjectSelection img{width:100%;max-height:160px;object-fit:contain}
  #fenceEditorConnections{display:grid;gap:5px}
  #treeEditorCatalog [hidden]{display:none!important}
  #siteEditorChanges{font-size:11px;color:var(--sign-ink)}
  #siteEditorChanges ul{margin:4px 0 0;padding-left:18px;max-height:90px;overflow:auto}
  #siteEditorStatus{font-size:11px;color:var(--sign-ink)}
  #siteEditorMissingList,#siteEditorTerrainList{max-height:12vh;overflow:auto;font-size:11px;overflow-wrap:anywhere}
  #photoEditorForm{display:grid;gap:8px;border-top:1px solid var(--sign-border);padding-top:9px}
  #photoEditorSelectedTitle{overflow-wrap:anywhere}
  #photoEditorImagePane{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;background:var(--sign-matte)}
  #photoEditorImagePane[hidden]{display:none}
  #photoEditorImageBar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;background:var(--sign-face)}
  #photoEditorImageTitle{min-width:0;overflow-wrap:anywhere}
  #photoEditorPreview{display:block;flex:1;min-height:0;width:100%;object-fit:contain;background:var(--sign-matte)}
  #photoEditorExportPreview{box-sizing:border-box;width:96vw;max-width:none;max-height:96vh;border:1px solid var(--sign-field-border);border-radius:8px;padding:12px;background:var(--sign-face)}
  #photoEditorExportPreview::backdrop{background:#0009}
  #photoEditorCloseExportPreview{display:block;margin:0 0 10px auto;padding:7px 12px;border:1px solid var(--sign-field-border);border-radius:4px;background:var(--sign-field);color:var(--sign-ink);font:13px var(--sign-font);cursor:pointer}
  #photoEditorExportImage{display:block;width:100%;max-height:calc(96vh - 80px);object-fit:contain}
  #photoEditorDescription{box-sizing:border-box;width:100%;resize:vertical;padding:6px;border:1px solid var(--sign-field-border);border-radius:4px;background:var(--sign-field);color:var(--sign-ink);font:inherit}
  #photoEditorList{display:grid;gap:5px;max-height:32vh;min-height:80px;overflow:auto}
  #photoEditorList .photo-editor-row{display:flex;gap:8px;text-align:left;align-items:center;width:100%;min-height:54px}
  .photo-editor-row img{width:55px;height:44px;object-fit:contain;background:var(--sign-matte);flex:none}
  .photo-editor-row span{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
  .photo-editor-row small{color:var(--sign-muted);font-size:11px}
  #photoEditorList [aria-current="true"],#photoEditorForm [aria-pressed="true"]{border-color:var(--sign-ink);background:var(--sign-selected)}
  body.tree-editor-open #hud,body.tree-editor-open #minimap,body.tree-editor-open #desktopInstructions,body.tree-editor-open #buildingName,body.tree-editor-open #touchControls,body.tree-editor-open #perfPanel{display:none!important}
  @media(max-width:850px){#treeEditor{grid-template-columns:minmax(160px,34%) minmax(240px,1fr) minmax(220px,260px);overflow-x:auto}#topBanner .banner-actions{gap:5px}}
    #hud{position:fixed;right:12px;bottom:10px;z-index:15;
         background:var(--sign-face);border:2px solid var(--sign-border);color:var(--sign-ink);box-shadow:var(--sign-shadow);padding:6px 8px;border-radius:6px;
         font:12px var(--sign-font);pointer-events:none}
    #hud b{color:var(--sign-success)}
    #hud:not(:has(> :not([hidden]))){display:none}
    #workProgress:not([hidden]){display:grid;gap:4px;width:180px;max-width:100%;line-height:1.3}
    #workProgressArea{font-weight:700;overflow-wrap:anywhere}
    #workProgressPercent{font-variant-numeric:tabular-nums;transform-origin:left center}
    #workProgressBar{display:block;width:100%;height:7px;accent-color:var(--sign-success)}
    #desktopInstructions{position:fixed;left:10px;bottom:10px;z-index:15;
      display:flex;align-items:center;box-sizing:border-box;height:38px;padding:7px 10px;
      border-radius:6px;background:var(--sign-face);border:2px solid var(--sign-border);white-space:nowrap;
      color:var(--sign-ink);font:700 12px/1.2 var(--sign-font);pointer-events:none;
      box-shadow:var(--sign-shadow)}
    #photoInstruction:not([hidden]){display:inline-block;margin-left:8px;padding:4px 7px;
      border-radius:4px;background:var(--sign-selected);color:var(--sign-ink);font-weight:700}
    #controllerInstructions{display:none;position:fixed;left:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:15;box-sizing:border-box;max-width:calc(100vw - 20px);padding:8px 10px;border-radius:6px;background:var(--sign-face);border:2px solid var(--sign-border);color:var(--sign-ink);font:700 12px/1.5 var(--sign-font);pointer-events:none;box-shadow:var(--sign-shadow)}
    #controllerPhotoInstruction:not([hidden]){display:inline-block;margin-top:4px;padding:3px 6px;border-radius:4px;background:var(--sign-selected)}
    body.gamepad-active #controllerInstructions{display:block}
    body.gamepad-active #desktopInstructions,body.gamepad-active #touchControls{display:none}
    body.tree-editor-open #controllerInstructions{display:none}
    #perfPanel{position:fixed;left:10px;bottom:56px;z-index:15;display:none;
      box-sizing:border-box;max-width:calc(100vw - 20px);padding:9px 11px;border:2px solid var(--sign-border);border-radius:4px;background:var(--sign-face);
      color:var(--sign-ink);font:12px/1.42 ui-monospace,SFMono-Regular,Menlo,monospace;
      white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;box-shadow:var(--sign-shadow)}
    #perfPanel .good{color:var(--sign-success)}
    /* A 30 m, heading-up view centred on the visitor. */
    #minimap{position:fixed;right:12px;top:60px;z-index:15;width:180px;height:180px;
      overflow:hidden;border:3px solid var(--sign-border);border-radius:4px;
      background:var(--sign-matte);
      box-shadow:var(--sign-shadow);pointer-events:none;}
    #minimapMap{position:absolute;inset:0;width:100%;height:100%;}
    #minimapWorkLegend:not([hidden]){position:absolute;z-index:2;bottom:4px;left:4px;right:4px;display:flex;justify-content:center;gap:8px;
      padding:3px 2px;border-radius:3px;background:var(--sign-face);color:var(--sign-ink);font:700 9px/1 var(--sign-font)}
    #minimapWorkLegend span{display:flex;align-items:center;gap:3px}
    #minimapWorkLegend span::before{content:'';width:7px;height:7px;border:1px solid var(--sign-ink);background:#709e5e}
    #minimapWorkLegend span+span::before{background:#d7bd6f}
    #minimap[data-work="snow"] #minimapWorkLegend span::before{background:#e2ecf4}
    #minimap[data-work="snow"] #minimapWorkLegend span+span::before{background:#62869c}
    #minimap::before{content:'30 m';position:absolute;z-index:2;left:6px;top:5px;padding:2px 4px;
      border-radius:3px;background:var(--sign-face);border:1px solid var(--sign-border);color:var(--sign-ink);font:700 9px/1 var(--sign-font);
      letter-spacing:0.08em;}
    #minimapMarker{position:absolute;z-index:1;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);}
    #minimapMarker::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--sign-field);
      border:2px solid var(--sign-ink);box-shadow:0 0 0 1px rgba(0,0,0,0.45);}
    #minimapHeading{position:absolute;left:4px;top:-4px;width:10px;height:16px;background:var(--sign-ink);
      clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);transform-origin:50% 13px;}
    #buildingName{position:fixed;left:10px;top:118px;z-index:15;box-sizing:border-box;
      width:max-content;max-width:min(460px,calc(100vw - 230px));padding:14px 28px;
      background:var(--sign-face);
      color:var(--sign-ink);text-align:center;text-transform:uppercase;
      font:900 clamp(24px,2.7vw,36px)/1.08 'Arial Rounded MT Bold','Trebuchet MS',sans-serif;
      letter-spacing:0.025em;text-shadow:1px 1px 0 rgba(100,41,43,0.35);
      clip-path:polygon(0 9%,5% 0,95% 0,100% 9%,95% 25%,100% 40%,95% 55%,100% 70%,95% 85%,100% 100%,5% 100%,0 85%,5% 70%,0 55%,5% 40%,0 25%);
      filter:drop-shadow(0 3px 5px rgba(2,6,23,0.45));pointer-events:none}
    #buildingName[hidden]{display:none}
    /* Touch controls (mobile) */
    #touchControls {position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:11;
      display:grid;grid-template-columns:repeat(5,56px);grid-template-rows:56px 56px;gap:10px;
      grid-template-areas:". . up . photo" "strafe-left left down right strafe-right";}
    .touch-btn{display:flex;align-items:center;justify-content:center;
      background:var(--sign-face);color:var(--sign-ink);border-radius:5px;box-shadow:var(--sign-shadow);
      box-sizing:border-box;font:20px/1 var(--sign-font);width:56px;height:56px;border:2px solid var(--sign-border);
      -webkit-user-select:none;user-select:none;touch-action:none;}
    .touch-btn:active{background:var(--sign-ink);color:var(--sign-field);} 
    #btnFwd{grid-area:up} #btnBack{grid-area:down} #btnLeft{grid-area:left} #btnRight{grid-area:right}
    #btnStrafeLeft{grid-area:strafe-left} #btnStrafeRight{grid-area:strafe-right}
    #btnViewPhoto{grid-area:photo;flex-direction:column;gap:1px;font:700 11px/1 var(--sign-font)}
    #btnViewPhoto span:first-child{font-size:19px}
    #btnViewPhoto:not(:disabled){background:var(--sign-selected);color:var(--sign-ink);border-color:var(--sign-ink);
      box-shadow:var(--sign-shadow)}
    #btnViewPhoto:disabled{opacity:0.7}
    #btnViewPhoto[hidden]{display:none}
    #photoViewer{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;
      padding:54px 24px 24px;box-sizing:border-box;background:var(--sign-backdrop)}
    #photoViewer[hidden]{display:none}
    #photoViewerStage{position:relative;width:100%;height:100%}
    #photoViewerStage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
    #photoViewerStage img[hidden]{display:none}
    #photoViewerStatus{position:absolute;left:24px;bottom:6px;margin:0;color:var(--sign-field);font:12px/1.3 var(--sign-font)}
    #photoViewerBack{position:absolute;right:18px;top:16px;padding:9px 12px;border:2px solid var(--sign-border);
      border-radius:4px;background:var(--sign-face);color:var(--sign-ink);font:700 13px/1 var(--sign-font);cursor:pointer}
    @media (max-width:899px){
      #topBanner{height:58px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;padding:0 10px}
      #topBanner .banner-home{max-width:120px;line-height:1.15}
      #seasonControl{grid-column:2}
      #sceneSettingsToggle{gap:5px;padding:5px 7px}
      .scene-setting-label{display:grid;gap:1px;font-size:11px;line-height:1.25}
      #currentTimeOfDay::after{content:none}
      #currentTimeOfDay{font-size:10px;font-weight:400}
      .scene-sun{width:17px;height:17px}
      #topBanner .banner-actions{grid-column:3;gap:5px;margin-right:0}
      #siteMenuPanel{max-height:calc(100dvh - 58px)}
      #treeEditor{inset:58px 0 0}
      #performanceTraceStatus{top:68px;max-width:calc(100vw - min(44vw,160px) - 30px)}
      #performanceTraceStatus button{display:block;margin:6px 0 0}
      #exportStatus{top:calc(68px + min(44vw,160px) + 8px)}
      #desktopInstructions{display:none}
      #hud{right:10px;top:calc(74px + min(44vw,160px) + 8px);bottom:auto;
        max-width:min(44vw,160px);box-sizing:border-box;overflow-wrap:anywhere}
      #perfPanel{left:auto;right:10px;top:calc(74px + min(44vw,160px) + 8px);bottom:auto;padding:7px 10px;font:700 12px/1.4 var(--sign-font)}
      #hud:has(#workProgress:not([hidden]))~#perfPanel{left:10px;right:auto;top:68px;
        max-width:calc(100vw - min(44vw,160px) - 30px)}
      #minimap{right:10px;top:68px;width:min(44vw,160px);height:min(44vw,160px)}
      #buildingName{left:8px;top:124px;max-width:calc(100vw - min(44vw,160px) - 28px);
        padding:10px 15px;font-size:clamp(17px,4.3vw,22px);letter-spacing:0.01em;overflow-wrap:anywhere}
    }
    @media (max-width:350px){
      #topBanner .banner-home{font-size:11px}
      #touchControls{grid-template-columns:repeat(5,50px);gap:7px}
      .touch-btn{width:50px;height:50px}
    }
    @media (min-width:900px) and (pointer:fine){#touchControls{display:none}}

/* A separate multi-touch driving layout keeps steering under the left thumb
   and pedals under the right. The middle of the screen stays available. */
#vehicleTouchControls{--wheel-size:clamp(144px,41vw,180px);position:fixed;inset:auto 0 max(12px,env(safe-area-inset-bottom));height:210px;z-index:18;pointer-events:none;user-select:none;-webkit-user-select:none}
#vehicleTouchControls[hidden]{display:none}
.vehicle-wheel{position:absolute;left:max(10px,env(safe-area-inset-left));bottom:0;width:var(--wheel-size);height:var(--wheel-size);border-radius:50%;background:rgba(17,32,28,.68);box-shadow:0 4px 16px #0005;pointer-events:auto;touch-action:none;outline-offset:4px}
.vehicle-wheel-face{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 2px #0008)}
.wheel-rim{fill:none;stroke:#e7dfc5;stroke-width:17}.wheel-spokes{fill:none;stroke:#899991;stroke-width:13;stroke-linecap:round}.wheel-hub{fill:#31473e;stroke:#d0cbb4;stroke-width:3}.wheel-marker{fill:none;stroke:#d2a851;stroke-width:18;stroke-linecap:butt}
.vehicle-wheel-label{position:absolute;inset:calc(50% - 11px) 12px auto;text-align:center;font:700 10px/1.2 sans-serif;color:#f5f0df;pointer-events:none;text-shadow:0 1px 3px #000}
.vehicle-wheel-label span{display:block;font-size:9px}
.vehicle-pedals{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:0;width:clamp(136px,39vw,154px);pointer-events:auto}
.vehicle-direction{display:flex;gap:6px;margin-bottom:8px}.vehicle-direction[hidden]{display:none}
.vehicle-direction button{flex:1;min-height:43px;border:1px solid #b5ad95;border-radius:7px;background:#243a32ed;color:#f4eddb;font:800 16px/1.1 sans-serif;touch-action:manipulation}.vehicle-direction button span{display:block;font-size:9px;font-weight:500;margin-top:2px}.vehicle-direction button[aria-pressed=true]{background:var(--sign-face);color:var(--sign-ink);box-shadow:0 0 0 2px #d2a851}
.vehicle-pedal-row{display:flex;align-items:flex-end;gap:10px}
.vehicle-pedal{--pedal-travel:0%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;flex:1;height:140px;padding:8px 3px;border:2px solid #c8c0a7;border-radius:16px 16px 9px 9px;background:linear-gradient(to top,#6b9c6e var(--pedal-travel),#253d35 var(--pedal-travel));box-shadow:0 4px 0 #15271f,0 6px 15px #0005;color:#fff7e5;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;cursor:pointer}
.vehicle-pedal.is-pressed{border-color:#f6e3a5;box-shadow:0 2px 0 #15271f,0 3px 12px #0005}
.pedal-grooves{position:absolute;inset:13px 11px 50px;background:repeating-linear-gradient(0deg,transparent 0 9px,#e9efdf40 10px 13px);border-radius:5px;pointer-events:none}.pedal-value{font:800 18px/1 sans-serif;pointer-events:none}.pedal-label{font:800 10px/1.2 sans-serif;letter-spacing:.025em;pointer-events:none}
#vehicleTouchControls[data-mode=cart] .vehicle-secondary{height:94px;background:linear-gradient(to top,#a15e50 var(--pedal-travel),#44332d var(--pedal-travel))}
#vehicleTouchControls[data-mode=cart] .vehicle-secondary .pedal-grooves{bottom:40px}
#vehiclePedalHint{margin:8px -4px 0;text-align:center;color:#fff5df;font:700 10px/1.3 sans-serif;text-shadow:0 1px 4px #000,0 1px 2px #000;pointer-events:none}
body.vehicle-touch-driving #touchControls{display:none}
body.vehicle-touch-driving #sceneInteract{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 218px)}
body.vehicle-touch-driving #vehicleInstructions{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 274px);max-width:calc(100vw - 24px);font-size:11px}
body.vehicle-touch-driving #desktopInstructions{display:none}
@media(max-height:500px) and (orientation:landscape){
    #vehicleTouchControls{--wheel-size:144px;height:162px}.vehicle-pedals{width:158px}.vehicle-pedal{height:105px}.vehicle-direction{margin-bottom:5px}.vehicle-direction button{min-height:35px}.vehicle-direction button span{display:none}
    #vehicleTouchControls[data-mode=cart] .vehicle-secondary{height:78px}#vehiclePedalHint{font-size:9px;margin-top:6px}
    body.vehicle-touch-driving #sceneInteract{bottom:max(14px,env(safe-area-inset-bottom))}
    body.vehicle-touch-driving #vehicleInstructions{bottom:76px;max-width:calc(100vw - 360px)}
    body.vehicle-touch-driving #minimap{width:96px;height:96px}
    #hud{top:68px;right:188px;bottom:auto;max-width:min(220px,calc(100vw - 280px))}
    body.vehicle-touch-driving #hud{right:122px}
}

#sceneInteract{position:fixed;left:50%;bottom:max(115px,calc(env(safe-area-inset-bottom) + 110px));transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:9px;padding:10px 16px;border:2px solid var(--sign-border);border-radius:6px;background:var(--sign-face);color:var(--sign-ink);font:700 14px/1.3 var(--sign-font);box-shadow:var(--sign-shadow);touch-action:manipulation;max-width:calc(100vw - 24px);white-space:nowrap}
#sceneInteract[hidden],#underwaterTint[hidden]{display:none}
#vehicleInstructions{position:fixed;left:50%;bottom:115px;transform:translateX(-50%);z-index:19;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:7px 12px;border-radius:5px;background:rgba(20,30,22,.86);color:#fff;font:13px/1.5 sans-serif;text-align:center;pointer-events:none;width:max-content;max-width:calc(100vw - 36px)}
#vehicleInstructions[hidden]{display:none}
#respawnVehicle{min-height:44px;padding:7px 12px;border:1px solid var(--sign-border);border-radius:5px;background:var(--sign-face);color:var(--sign-ink);font:700 13px/1.3 var(--sign-font);pointer-events:auto;touch-action:manipulation;cursor:pointer}
#respawnVehicle:hover,#respawnVehicle:focus-visible{background:var(--sign-selected)}
#respawnVehicle kbd{margin-left:5px;font:inherit}
body.gamepad-active #respawnVehicle kbd{display:none}
@media(pointer:coarse){#respawnVehicle kbd{display:none}}
@media (pointer:coarse){#vehicleInstructions{bottom:170px;font-size:12px}}
#sceneInteract kbd{font:inherit;border:1px solid var(--sign-border);padding:2px 6px;border-radius:4px;background:var(--sign-selected)}
#sceneInteract:hover,#sceneInteract:focus-visible{background:var(--sign-selected)}
#underwaterTint{position:fixed;inset:0;z-index:9;pointer-events:none;background:linear-gradient(rgba(31,97,105,.48),rgba(13,54,62,.7));box-shadow:inset 0 0 180px rgba(7,38,46,.65)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.tree-editor-open #sceneInteract{display:none}
body.gamepad-active #sceneInteract{bottom:75px}
@media (min-width:900px) and (pointer:fine){#sceneInteract{bottom:64px}}
@media (pointer:coarse){body:not(.gamepad-active) #sceneInteract kbd{display:none}}

.scene-load-notice{position:fixed;left:12px;bottom:70px;z-index:20;max-width:calc(100vw - 24px);padding:8px 12px;font-size:14px}.scene-load-notice[hidden]{display:none}
@media(max-width:899px){.scene-load-notice{bottom:130px}}