/*
  Owns Ko no Niwa application styling.
  Do not put catalog data, simulation rules, or DOM wiring here.
  Loaded by ko-no-niwa.html and protected by browser smoke checks plus HTML loading order.
*/
:root{
    --ink:#181b18; --ink2:#2a2e29; --washi:#f0eada; --washi2:#e6dfc9;
    --moss:#6b7c57; --vermil:#b23a2a; --indigo:#41596b; --gold:#b98f33;
    --faint:rgba(24,27,24,.55);
    --panel:rgba(240,234,218,.92);
    --gap:14px;
    --cat-w:282px;        /* catalog width */
    --side-w:246px;       /* scores/inspector width */
    --strip-w:238px;      /* garden-view engine strip width */
    --cat-top:182px;      /* catalog/ugc top - keeps clear of the header column */
    --bottom-clear:88px;  /* catalog/ugc/inspector bottom */
    --facets-max:clamp(120px, 26vh, 260px);
    --sbar-h:30px;        /* bottom status bar height */
    --dock-clear:calc(var(--sbar-h) + var(--gap) + 46px); /* sheets (shop, gardener) rise from just above the dock */
    --kb-inset:0px;       /* soft-keyboard overlap, set by the runtime's VisualViewport tracker */
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
    --sans:"Avenir Next","Segoe UI",Avenir,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;background:var(--ink);font-family:var(--sans);color:var(--ink)}
  #scene{position:fixed;inset:0}
  /* The WebGL canvas fills its container by CSS, decoupled from the renderer's
     drawing-buffer size. The resize path calls setSize(w,h,false) (no inline
     style), so without this the on-screen size would freeze at first paint and
     letterbox when the viewport changes (mobile URL bar, orientation). */
  #scene canvas{width:100%;height:100%}
  canvas{display:block}

  /* ---------- shared panel look ---------- */
  .slip{
    background:var(--panel);
    border:1px solid rgba(24,27,24,.18);
    box-shadow:0 2px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.35);
    border-radius:2px;
  }
  .eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
  button{font-family:var(--sans);cursor:pointer;border:1px solid rgba(24,27,24,.3);background:transparent;color:var(--ink);border-radius:2px;padding:4px 10px;font-size:12px}
  button:hover{background:rgba(24,27,24,.08)}
  button:focus-visible{outline:2px solid var(--vermil);outline-offset:1px}
  button.active{background:var(--ink);color:var(--washi)}
  button:disabled{opacity:.45;cursor:not-allowed}
  button:disabled:hover{background:transparent}
  button.seal{background:var(--vermil);border-color:var(--vermil);color:var(--washi)}
  button.seal:hover{background:#9b3223}
  select{font-family:var(--sans);font-size:12px;padding:3px 4px;border:1px solid rgba(24,27,24,.3);background:transparent;color:var(--ink);border-radius:2px}

  /* ---------- bottom status bar ---------- */
  #statusBar{
    position:fixed;left:0;right:0;bottom:0;height:var(--sbar-h);z-index:20;
    display:flex;align-items:center;justify-content:center;gap:18px;padding:0 14px;
    background:rgba(240,234,218,.88);border-top:1px solid rgba(24,27,24,.14);
    font-size:11px;color:var(--faint);white-space:nowrap;
  }
  #sbCalendar{display:flex;align-items:baseline;gap:8px;border:0;padding:0;font-size:11px;color:var(--ink);background:transparent;min-width:0}
  #sbCalendar:hover{background:transparent;color:var(--vermil)}
  #sbKanji{font-family:var(--serif);font-size:14px;color:var(--vermil);letter-spacing:.08em}
  #sbKo{font-family:var(--serif);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
  #sbMsg{min-width:0;max-width:min(720px,90vw);overflow:hidden;text-overflow:ellipsis;text-align:center;
    font-family:var(--serif);font-style:italic;color:var(--ink2);
    opacity:0;transition:opacity .6s ease}
  #sbSeal{color:var(--vermil);font-style:normal;margin-right:6px}
  #sbSeal:empty{display:none}
  @media (prefers-reduced-motion: reduce){#sbMsg{transition:none}}

  /* Soft keyboard open (tracked via VisualViewport in the runtime): iOS Safari
     never shrinks the layout viewport - it scrolls the page to reveal the
     focused input, which drags the bottom-fixed dock + status bar up into the
     middle of the screen. Hide those transient strips and re-anchor the shop
     sheet directly above the keyboard so typing a search stays tidy. */
  body.kb-open #timebar,
  body.kb-open #statusBar{opacity:0;pointer-events:none}
  body.kb-open #shopBar{
    bottom:calc(var(--kb-inset) + 10px);
    max-height:calc(100vh - var(--kb-inset) - 84px);
  }

  /* ---------- top strip: the garden's whole state in one horizontal read.
     A quiet centered pill (RTS resource-bar information architecture, not its
     density) - empties the top corners and is the band that survives portrait. */
  #topbar{position:fixed;top:var(--gap);left:50%;transform:translateX(-50%);z-index:20;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px;
    max-width:calc(100vw - 2*var(--gap));padding:6px 16px;
    background:rgba(240,234,218,.82);border:1px solid rgba(24,27,24,.10);border-radius:22px;
    box-shadow:0 2px 12px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.3)}
  #topbar #brand{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
  #topbar .tbSep{width:1px;height:15px;background:rgba(24,27,24,.16)}
  #topbar .tbStat{display:flex;align-items:baseline;gap:6px}
  #topbar .tbStat .eyebrow{font-size:9px}
  #topbar .tbStat b{font-family:var(--serif);font-size:15px;font-weight:600}
  #topbar .tbScore{align-items:center}
  #topbar .tbBar{width:32px;height:4px;background:rgba(24,27,24,.12);border-radius:2px;overflow:hidden}
  #topbar .tbBar i{display:block;height:100%;background:var(--moss);border-radius:2px;transition:width .6s}
  #zoneRow{display:flex;gap:6px;align-items:center;font-size:11px}

  /* ---------- the nursery bar: a perma-open SimCity-style build bar.
     One slim head row (handle - tabs - search - stock - note) over a
     horizontally scrolling card tray. Collapses to just the head row via
     body.shop-collapsed; every fixed element above it follows --shopbar-h. */
  :root{--shopbar-h:158px}
  body.shop-collapsed{--shopbar-h:44px}
  .dockPanelBtn{display:inline-flex;align-items:center;gap:7px;font-weight:600}
  .dockPanelBtn .kanji{font-family:var(--serif);font-size:15px;color:var(--vermil);line-height:1}
  .dockPanelBtn.active{background:rgba(178,58,42,.1);border-color:rgba(178,58,42,.4)}
  #shopBar{position:fixed;bottom:var(--dock-clear);left:50%;transform:translateX(-50%);z-index:30;
    width:min(1120px,96vw);height:var(--shopbar-h);display:flex;flex-direction:column;
    padding:6px 12px 8px;transition:height .22s ease}
  #shopBarHead{display:flex;align-items:center;gap:10px;flex:none;min-height:30px}
  #shopBarHandle{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
    font-family:var(--serif);font-size:13px;font-weight:600;padding:3px 4px;white-space:nowrap}
  #shopBarHandle .kanji{color:var(--vermil);font-size:15px;line-height:1}
  #shopBarHandle:hover{background:rgba(24,27,24,.06)}
  #shopBarChevron{color:var(--faint);font-size:10px;transition:transform .22s ease}
  body.shop-collapsed #shopBarChevron{transform:rotate(180deg)}
  #shopBarBody{display:flex;flex-direction:column;flex:1 1 0%;min-height:0}
  body.shop-collapsed #shopBarBody{display:none}
  body.shop-collapsed #shopTabs,body.shop-collapsed #catSearchRow,
  body.shop-collapsed #stockRow{display:none}
  body.shop-collapsed #shopNote{display:inline}
  #shopNote{font-size:10px;color:var(--faint);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* tabs wrap on desktop so every category is always visible; the phone
     block below overrides back to the one swipeable strip */
  #shopTabs{display:flex;flex-wrap:wrap;gap:0;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
  #shopTabs::-webkit-scrollbar{display:none}
  #shopTabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;font-size:11px;letter-spacing:.03em;padding:5px 9px;color:var(--faint);white-space:nowrap;flex:0 0 auto}
  #shopTabs button:hover{color:var(--ink);background:rgba(24,27,24,.05)}
  #shopTabs button.on{color:var(--vermil);border-bottom-color:var(--vermil);font-weight:600}
  #settingsBtn{font-size:14px;line-height:1}
  #settingsBtn.active{color:var(--vermil)}
  #catSearchRow{flex:0 1 220px;min-width:110px}
  #catSearch{width:100%;font-family:var(--sans);font-size:12px;padding:5px 8px;border:1px solid rgba(24,27,24,.3);background:rgba(255,255,255,.45);border-radius:2px;color:var(--ink)}
  #catSearch:focus{outline:none;border-color:var(--vermil)}
  #catSearch::placeholder{color:rgba(24,27,24,.4);font-style:italic}
  #stockRow{display:flex;align-items:center;gap:8px;flex:none}
  #stockRow[hidden]{display:none} /* stock tiers only exist for trees */
  #stockRow .facetLbl{margin-bottom:0}
  #stockRow .chips{gap:4px;flex-wrap:nowrap}
  #stockRow .chip{border-radius:2px}
  .facetRow{margin:6px 0 0}
  .facetLbl{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
  .chips{display:flex;flex-wrap:wrap;gap:3px}
  .chip{font-size:10px;padding:2px 8px;border:1px solid rgba(24,27,24,.28);border-radius:9px;background:transparent;line-height:1.5;display:inline-flex;align-items:center;gap:4px;min-height:22px}
  .chip.on{background:var(--ink);color:var(--washi);border-color:var(--ink)}
  .chip .sw{width:13px;height:13px;border-radius:50%;border:1px solid rgba(24,27,24,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  .chip .ico{width:15px;height:15px;display:inline-flex}
  .chip .ico svg{width:15px;height:15px;display:block}
  #catMeta{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 3px;font-size:10px;color:var(--faint);letter-spacing:.06em}
  #catMeta button{font-size:9.5px;padding:1px 8px}
  #catMeta select{font-size:9.5px;padding:1px 4px;background:transparent;color:var(--faint);border:1px solid rgba(0,0,0,.18);border-radius:2px;max-width:110px}
  .catIcon{width:34px;height:34px;flex:none;margin-top:2px}
  .catIcon svg{width:34px;height:34px;display:block}
  .catBody{flex:1;min-width:0}
  .noMatch{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--faint);padding:16px 8px;line-height:1.5;flex:1}
  /* the tray: fixed-width cards in one horizontal sweep, scroll-snapped */
  #catList{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;
    flex:1 1 0%;min-height:0;padding:6px 2px 4px;scrollbar-width:thin;
    scroll-snap-type:x proximity;align-items:stretch}
  .catItem{flex:0 0 176px;display:flex;gap:8px;align-items:flex-start;padding:7px 8px;
    border:1px solid rgba(24,27,24,.12);border-radius:2px;cursor:pointer;
    background:rgba(255,255,255,.28);scroll-snap-align:start;overflow:hidden}
  .catItem:hover{background:rgba(24,27,24,.06)}
  .catItem.sel{border-color:var(--vermil);background:rgba(178,58,42,.06)}
  /* armed for placement: the card stays lit while its ghost is in hand */
  .catItem.armed{border-color:var(--vermil);background:rgba(178,58,42,.1);box-shadow:inset 0 -3px 0 var(--vermil)}
  .catItem .nm{font-family:var(--serif);font-size:12.5px;line-height:1.2;display:flex;flex-direction:column;gap:1px}
  .catItem .nm .cost{font-size:10.5px;font-family:var(--sans);color:var(--faint)}
  .catItem .role{font-size:9.5px;color:var(--faint);margin-top:2px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .dots{display:none} /* the tray keeps cards lean; detail lives in the tooltip */
  .magicLine{display:none}
  /* a locked card (tech-gated): visible but grey, its unlock cost as a chip */
  .catItem.locked{opacity:.55;filter:saturate(.35)}
  .catItem .lockChip{font-size:9px;color:var(--vermil);letter-spacing:.06em;margin-top:2px}
  #ugcOpenBtn{float:right;font-size:9.5px;padding:2px 8px;margin-top:-2px}
  #ugcPanel{position:fixed;left:calc(2*var(--gap) + var(--cat-w));top:var(--cat-top);bottom:var(--bottom-clear);width:min(360px, calc(100vw - var(--cat-w) - 3*var(--gap) - var(--side-w)));z-index:44;display:none;flex-direction:column;padding:12px 14px;overflow:auto;scrollbar-width:thin}
  #ugcPanel.open{display:flex}
  #ugcPanel .head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid rgba(24,27,24,.14);padding-bottom:8px;margin-bottom:8px}
  #ugcPanel h2{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.15}
  #ugcForm{display:grid;grid-template-columns:1fr 1fr;gap:7px 8px}
  #ugcForm label{display:flex;flex-direction:column;gap:3px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  #ugcForm input,#ugcForm select,#ugcForm textarea{font-family:var(--sans);font-size:12px;border:1px solid rgba(24,27,24,.26);background:rgba(255,255,255,.42);border-radius:2px;color:var(--ink);padding:5px 6px;letter-spacing:0;text-transform:none;min-width:0}
  #ugcForm textarea{min-height:68px;resize:vertical;line-height:1.35}
  #ugcForm .wide{grid-column:1 / -1}
  #ugcEvergreenRow{flex-direction:row!important;align-items:center;justify-content:flex-start;gap:7px;letter-spacing:0;text-transform:none;font-size:11px;color:var(--ink)}
  #ugcEvergreenRow input{width:auto}
  #ugcActions{grid-column:1 / -1;display:flex;gap:6px;align-items:center;margin-top:2px}
  #ugcActions button{flex:1}
  #ugcStatus{grid-column:1 / -1;min-height:28px;font-size:10.5px;line-height:1.35;color:var(--faint)}
  #ugcStatus.bad{color:var(--vermil)}
  #ugcStatus.good{color:var(--moss)}
  /* ---------- the garden's measure: Design/Health live in the top strip;
     the full seasonal + harmony detail lives in the almanac ---------- */
  #almMeasure{margin:6px 0 10px}
  .scoreRow{margin-bottom:8px}
  .scoreRow .lab{display:flex;justify-content:space-between;font-size:11px;margin-bottom:3px}
  .scoreRow .lab b{font-family:var(--serif);font-size:12.5px;font-weight:600}
  .bar{height:4px;background:rgba(24,27,24,.12);border-radius:2px;overflow:hidden}
  .bar i{display:block;height:100%;background:var(--moss);border-radius:2px;transition:width .6s}
  .bar i.v{background:var(--vermil)} .bar i.g{background:var(--gold)} .bar i.b{background:var(--indigo)}
  #seasonMini{display:flex;gap:6px;margin:4px 0 10px}
  .sm{flex:1;text-align:center}
  .sm .n{font-family:var(--serif);font-size:14px}
  .sm .l{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  #harmonyNote{font-size:10px;color:var(--faint);font-style:italic;font-family:var(--serif);margin-top:2px}

  /* ---------- inspector: prose first, the rest behind folds ---------- */
  #inspector{position:fixed;right:var(--gap);bottom:var(--bottom-clear);width:var(--side-w);z-index:15;padding:12px 14px;display:none;max-height:min(64vh,calc(100vh - 160px));overflow-y:auto;scrollbar-width:thin}
  #inspector h3{font-family:var(--serif);font-size:15px}
  #inspector .lat{font-style:italic;font-family:var(--serif);font-size:11px;color:var(--faint);margin-bottom:6px}
  #inspector .stat{display:flex;justify-content:space-between;font-size:11px;margin:3px 0}
  #inspector .stat b{font-weight:600}
  .factor{font-size:10.5px;display:flex;justify-content:space-between;color:var(--faint)}
  .factor.bad{color:var(--vermil)}
  #insStory{font-style:italic;font-family:var(--serif);font-size:11px;color:var(--faint);margin-top:6px;line-height:1.45}
  #insWorst{margin-top:6px;font-size:11px}
  #insWorst[hidden]{display:none}
  .insFold{margin-top:9px;border-top:1px solid rgba(24,27,24,.12);padding-top:4px}
  .insFold>summary{list-style:none;cursor:pointer;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:3px 0}
  .insFold>summary::-webkit-details-marker{display:none}
  .insFold>summary::before{content:"+ ";color:var(--vermil)}
  .insFold[open]>summary::before{content:"- "}
  #insScriptBtn{margin-top:8px;width:100%;font-size:10.5px}
  /* form-script reader: a roomy centered modal, not a cramped side fold */
  #scriptPanel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:105;width:min(680px,94vw);max-height:88vh;display:none;flex-direction:column;padding:16px 18px 14px}
  #scriptPanel.open{display:flex}
  #scriptPanel .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
  #scriptPanelTitle{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:600}
  #scriptPanelMeta{font-size:11px;color:var(--faint);font-style:italic;font-family:var(--serif);margin-bottom:10px}
  #scriptPanelSrc{margin:0;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre;color:var(--ink,#3a352e);background:rgba(0,0,0,.045);border-radius:8px;padding:12px 14px;tab-size:2}
  #scriptPanelFoot{margin-top:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  #scriptPanelClose{font-size:10px;padding:2px 7px}
  #pruneBtns{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
  #pruneBtns button,#waterBtns button{font-size:10.5px;padding:3px 7px}
  #waterBtns{display:flex;gap:4px;margin-top:6px}
  #inspector .secLbl{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:10px}
  #removeBtn{margin-top:10px;width:100%;color:var(--vermil);border-color:rgba(178,58,42,.5)}

  /* ---------- time controls ---------- */
  #timebar{position:fixed;bottom:calc(var(--sbar-h) + var(--gap));left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 2*var(--gap));gap:6px;align-items:center;padding:8px 12px}
  #timebar .divider{width:1px;height:18px;background:rgba(24,27,24,.2);margin:0 4px}
  /* transport controls: compact glyphs, not words - equal-width, currentColor
     so the active (Play) state inverts with the button fill */
  #timebar .tBtn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:5px 8px}
  #timebar .tBtn svg{height:12px;width:auto;display:block;fill:currentColor}
  /* one audio toggle (wind/rain + music): a speaker glyph, waves when on and a
     slash when off. Not a .tBtn - its wave arcs are hollow (fill:none), so it
     must not inherit the .tBtn blanket svg fill; the speaker path fills via its
     own currentColor attribute, which still inverts on the active state. */
  #timebar #audioBtn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:5px 8px}
  #timebar #audioBtn svg{height:12px;width:auto;display:block}
  #timebar #audioBtn .wv{display:none}
  #timebar #audioBtn.active .wv{display:inline}
  #timebar #audioBtn.active .sl{display:none}
  /* ---------- gesture hint (rake mode, placement ghost): floats just above
     the nursery bar so the hand reads it while placing ---------- */
  #placeHint{position:fixed;bottom:calc(var(--dock-clear) + var(--shopbar-h) + 12px);left:50%;transform:translateX(-50%);z-index:32;font-size:11px;color:var(--washi);letter-spacing:.06em;text-shadow:0 1px 4px rgba(0,0,0,.6);display:none}

  /* ---------- intro ---------- */
  #intro{position:fixed;inset:0;z-index:100;background:rgba(16,18,16,.72);display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
  #introCard{width:min(520px,92vw);padding:34px 38px;position:relative}
  #introCard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--vermil)}
  #introCard h1{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.01em}
  #introCard h1 span{color:var(--vermil)}
  #introCard .sub{font-family:var(--serif);font-style:italic;color:var(--faint);margin:4px 0 16px;font-size:14px}
  #introCard p{font-size:12.5px;line-height:1.65;margin-bottom:10px}
  #introCard .zsel{display:flex;align-items:center;gap:10px;margin:16px 0 20px;font-size:12px}
  #introFeed{border-top:1px solid rgba(24,27,24,.14);border-bottom:1px solid rgba(24,27,24,.14);padding:10px 0;margin:12px 0 14px}
  #introFeed .feedBtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:7px}
  #introFeed button{font-size:10px;padding:0;text-align:left;overflow:hidden;background:rgba(255,255,255,.3);border-color:rgba(24,27,24,.18)}
  .introTileThumb{display:block;height:42px;background:linear-gradient(135deg,var(--thumbA),var(--thumbB));background-size:cover;background-position:center;border-bottom:1px solid rgba(24,27,24,.13)}
  .introTileText{display:block;padding:5px 7px;line-height:1.25}
  .introTileText b{display:block;font-family:var(--serif);font-size:11.5px}
  .introTileText small{display:block;color:var(--faint);font-size:8.8px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #introCard button.seal{font-size:13px;padding:8px 22px;letter-spacing:.08em}

  /* ---------- the garden's own settings: a fold inside the gardener drawer ---------- */
  /* the world/app settings: their own small sheet above the dock (oneof with
     shop + gardener), opened by the gear at the end of the play controls */
  /* ---------- the Garden Arts (五道): five columns of renown-bought nodes ---------- */
  /* max-height subtracts the panel's own bottom offset so the top is never
     clipped on short viewports (14" laptops); opening the panel also
     collapses the shop bar, so --shopbar-h is the slim handle here */
  #techPanel{position:fixed;bottom:calc(var(--dock-clear) + var(--shopbar-h) + 8px);left:50%;transform:translateX(-50%);z-index:36;
    width:min(940px,96vw);max-height:calc(100vh - var(--dock-clear) - var(--shopbar-h) - 44px);overflow-y:auto;scrollbar-width:thin;padding:12px 16px 14px}
  #techPanel[hidden]{display:none}
  #techPanel .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  #techNote{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--ink2);margin-top:2px}
  #techClose{font-size:10px;padding:2px 7px}
  #techBranches{display:grid;grid-template-columns:repeat(auto-fit,minmax(164px,1fr));gap:10px;margin-top:10px}
  .techCol{display:flex;flex-direction:column;gap:6px;min-width:0}
  .techColHead{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
    display:flex;align-items:center;gap:6px;padding-bottom:3px;border-bottom:1px solid rgba(24,27,24,.14)}
  .techColHead .kanji{font-family:var(--serif);font-size:16px;color:var(--vermil)}
  .techNode{display:flex;flex-direction:column;gap:3px;text-align:left;padding:7px 8px;font-size:11px;
    border:1px solid rgba(24,27,24,.18);background:rgba(255,255,255,.3);cursor:pointer;min-width:0}
  .techNode b{font-family:var(--serif);font-size:12px}
  .techNode .techDesc{font-size:9.5px;color:var(--faint);line-height:1.35}
  .techNode .techCost{font-size:9.5px;color:var(--vermil);letter-spacing:.05em}
  .techNode.owned{border-color:var(--moss);background:rgba(107,124,87,.12);cursor:default;opacity:.9}
  .techNode.owned .techCost{color:var(--moss)}
  .techNode.affordable{border-color:var(--vermil);box-shadow:inset 0 0 0 1px rgba(178,58,42,.25)}
  .techNode.locked{opacity:.45;cursor:default}
  .techNode.wanting{opacity:.8}
  .techNode:disabled{cursor:default}
  #settingsPanel{position:fixed;bottom:calc(var(--dock-clear) + var(--shopbar-h) + 8px);left:50%;transform:translateX(-50%);z-index:35;width:212px;padding:10px 13px;display:flex;flex-direction:column;gap:6px}
  #settingsPanel[hidden]{display:none}
  #settingsPanel .secLbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1px}
  #settingsPanel button{font-size:10.5px;background:transparent;text-align:left}
  #settingsPanel button.active{background:var(--ink);color:var(--washi)}
  #zoneDesc{font-size:10.5px;color:var(--faint);font-style:italic;white-space:normal}

  /* ---------- app views ---------- */
  body.view-feed{background:#e9e0c8;overflow:hidden}
  #scene{opacity:1;transition:opacity .48s ease,filter .48s ease}
  body.view-feed #scene{opacity:0;filter:blur(8px);pointer-events:none}
  body.view-feed #shopBar,body.view-feed #topbar,body.view-feed #timebar,body.view-feed #settingsPanel,body.view-feed #inspector,body.view-feed #statusBar{opacity:0;pointer-events:none;transition:opacity .32s ease}
  body.view-garden #shopBar,body.view-garden #topbar,body.view-garden #timebar,body.view-garden #settingsPanel,body.view-garden #inspector,body.view-garden #statusBar{opacity:1;transition:opacity .45s ease .12s}

  /* ---------- social seed feed ---------- */
  #simGallery{position:fixed;inset:38px;z-index:80;padding:0;overflow-y:auto;scrollbar-width:thin;background:transparent;border:0;box-shadow:none;transition:left .52s cubic-bezier(.2,.8,.2,1),right .52s cubic-bezier(.2,.8,.2,1),top .52s cubic-bezier(.2,.8,.2,1),bottom .52s cubic-bezier(.2,.8,.2,1),width .52s cubic-bezier(.2,.8,.2,1),max-height .52s cubic-bezier(.2,.8,.2,1),padding .52s cubic-bezier(.2,.8,.2,1),transform .52s cubic-bezier(.2,.8,.2,1),background .52s ease,box-shadow .52s ease}
  #simGallery .head{display:none;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:12px;border-bottom:1px solid rgba(24,27,24,.14);padding-bottom:10px}
  #simGallery .head b{display:block;font-family:var(--serif);font-size:24px;font-weight:600;margin-top:2px}
  #simGallery .head .tiny{font-size:12px;color:var(--faint);line-height:1.35;margin-top:4px;max-width:600px}
  #homeBar{display:none}
  body.view-feed #homeBar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;padding:10px 14px;border:1px solid rgba(24,27,24,.14);border-radius:6px;background:rgba(240,234,218,.92);box-shadow:0 6px 18px rgba(0,0,0,.1)}
  #homeBarText b{display:block;font-family:var(--serif);font-size:16px;font-weight:600}
  #homeAuthStatus{font-size:11px;color:var(--faint)}
  #homeAuthActions{display:flex;align-items:center;gap:10px}
  #homeSignOut{font-size:11px;padding:4px 10px;border:1px solid rgba(24,27,24,.2);border-radius:3px;background:rgba(255,255,255,.4);cursor:pointer}
  .feedDivider{grid-column:1 / -1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid rgba(24,27,24,.14);padding-bottom:4px;margin-top:4px}
  body.view-garden .feedDivider{display:none}
  #engineList{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
  #engineList[data-loading]::before,#engineList[data-error]::before{grid-column:1 / -1;display:block;padding:9px 12px;border:1px solid rgba(24,27,24,.14);border-radius:4px;background:rgba(240,234,218,.92);box-shadow:0 6px 18px rgba(0,0,0,.12);font-size:12px;color:var(--faint)}
  #engineList[data-loading]::before{content:attr(data-loading)}
  #engineList[data-error]::before{content:attr(data-error);color:var(--vermil)}
  .engineItem{border:1px solid rgba(24,27,24,.14);background:rgba(240,234,218,.92);border-radius:6px;overflow:hidden;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.34);transition:transform .24s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease}
  .engineItem:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.14);background:rgba(255,255,255,.48)}
  .engineItem.active{border-color:var(--vermil);box-shadow:0 0 0 1px rgba(178,58,42,.18);background:rgba(178,58,42,.06)}
  .engineThumb{height:156px;position:relative;background:linear-gradient(135deg,var(--thumbA),var(--thumbB));background-size:cover;background-position:center;border-bottom:1px solid rgba(24,27,24,.16);overflow:hidden}
  .engineThumb::before{content:"";position:absolute;left:8%;right:8%;bottom:14px;height:18px;border-radius:50%;background:rgba(240,234,218,.5);box-shadow:40px -20px 0 rgba(24,27,24,.12),95px -5px 0 rgba(255,255,255,.22),145px -28px 0 rgba(24,27,24,.1)}
  .engineThumb::after{content:"";position:absolute;left:18px;bottom:20px;width:44px;height:44px;border-radius:50% 50% 45% 55%;background:rgba(24,27,24,.24);box-shadow:88px 4px 0 rgba(255,255,255,.2),145px -7px 0 rgba(24,27,24,.18)}
  .engineThumb.ai::before,.engineThumb.ai::after{display:none}
  .engineBadge{position:absolute;left:8px;top:8px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--washi);background:rgba(24,27,24,.62);border-radius:2px;padding:2px 6px}
  .engineBody{padding:11px 12px 12px}
  .engineTop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
  .engineTitle{font-family:var(--serif);font-size:18px;line-height:1.12}
  .engineCreator{font-size:9.5px;color:var(--faint);margin-top:2px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .engineLineage{font-size:9.5px;color:var(--indigo);margin-top:5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .engineSocial{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:7px;font-size:9px;color:var(--faint)}
  .engineSocial span{border:1px solid rgba(24,27,24,.16);background:rgba(255,255,255,.32);border-radius:2px;padding:3px 4px;text-align:center;white-space:nowrap}
  .engineSocial b{display:block;font-size:11px;line-height:1;color:var(--ink);font-weight:600}  .engineSocial small{display:block;font-size:8px;line-height:1.1;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}  .engineActions button.primary{background:var(--ink);color:var(--washi);border-color:var(--ink)}
  .engineDesc{font-size:10.5px;color:var(--ink);line-height:1.32;margin-top:7px;min-height:42px}
  .engineTags,.engineTrials{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
  .engineTags span,.engineTrials span{font-size:9px;border:1px solid rgba(24,27,24,.2);border-radius:8px;padding:1px 6px;color:var(--faint);background:rgba(240,234,218,.45)}
  .engineTrials span{color:var(--moss);border-color:rgba(107,124,87,.35)}
  .engineActions{display:flex;gap:4px;margin-top:8px}
  .engineActions button{font-size:10px;padding:2px 7px;flex:1}
  #activeEngineLine{font-size:10.5px;color:var(--faint);font-style:italic;margin-top:9px;line-height:1.35}
  #versionPanel{border-top:1px solid rgba(24,27,24,.14);margin-top:10px;padding-top:9px}
  #versionPanel .versionTop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
  #versionPanel .versionTop b{font-family:var(--serif);font-size:12.5px}
  #versionPanel .versionTop button{font-size:9.5px;padding:2px 7px}
  #seedList{display:flex;flex-direction:column;gap:4px;max-height:124px;overflow:auto;scrollbar-width:thin}
  .seedRow{display:grid;grid-template-columns:1fr auto auto;gap:4px;align-items:center;font-size:10px;color:var(--faint);line-height:1.25}
  .seedRow .seedName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .seedRow button{font-size:9px;padding:1px 6px}
  #seedEmpty{font-size:10px;color:var(--faint);font-style:italic;line-height:1.35}
  #cloudSync{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center;border:1px solid rgba(24,27,24,.12);background:rgba(255,255,255,.24);padding:7px 8px;margin-bottom:7px;border-radius:2px}
  #cloudStatus{font-size:10px;color:var(--faint);line-height:1.3;min-width:0}
  #cloudUser{font-size:9.5px;color:var(--indigo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
  #googleSignIn{min-height:32px;justify-self:end}
  #cloudActions{grid-column:1 / -1;display:flex;gap:4px;justify-content:flex-end}
  #cloudActions button{font-size:9px;padding:1px 6px}
  #vcsExplainer{display:none;grid-template-columns:1fr auto;gap:12px;margin:0 0 12px;align-items:stretch}
  .vcsBox{border:1px solid rgba(24,27,24,.14);background:rgba(255,255,255,.28);border-radius:4px;padding:8px 10px}
  .vcsBox b{display:block;font-family:var(--serif);font-size:13px;margin-bottom:5px}
  .vcsBox p{font-size:10.5px;line-height:1.35;color:var(--faint);margin:0}
  .branchGraph{display:grid;grid-template-columns:12px repeat(3,minmax(0,1fr));gap:5px 8px;margin-top:7px;font-size:10px;color:var(--ink);align-items:start}
  .graphDot{width:9px;height:9px;border-radius:50%;background:var(--vermil);margin-top:3px;box-shadow:0 17px 0 var(--moss),0 34px 0 var(--indigo)}
  .branchGraph span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  .branchGraph span b{display:block;font-family:var(--sans);font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:0 0 2px}  .graphLine{grid-row:1 / span 1;width:1px;background:rgba(24,27,24,.25);justify-self:center;margin-top:6px;margin-bottom:5px}
  .diffPreview{font-size:10px;color:var(--faint);line-height:1.3;margin-top:7px;border-top:1px solid rgba(24,27,24,.12);padding-top:6px}
  .diffPreview span{display:block;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mergeQueue{display:flex;gap:4px;margin-top:7px;font-size:10px;min-width:330px}
  .mergeQueue div{display:flex;justify-content:space-between;gap:8px;border:1px solid rgba(24,27,24,.12);background:rgba(240,234,218,.45);padding:3px 5px;border-radius:2px}
  body.view-garden #simGallery{inset:auto var(--gap) calc(var(--sbar-h) + var(--gap)) auto;transform:none;width:var(--strip-w);max-height:calc(100vh - 130px);padding:10px;z-index:18;background:rgba(240,234,218,.9);border:1px solid rgba(24,27,24,.18);box-shadow:0 2px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.35)}
  body.view-garden #simGallery .head{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px}
  body.view-garden #simGallery .head .eyebrow,body.view-garden #simGallery .head .tiny,body.view-garden #vcsExplainer,body.view-garden #activeEngineLine,body.view-garden #versionPanel{display:none}
  body.view-garden #simGallery .head b{font-size:14px;margin:0;line-height:1.1}
  body.view-garden #galleryHide{font-size:10px;padding:2px 7px;flex:none}
  body.view-garden #engineList{display:flex;flex-direction:column;gap:8px}
  body.view-garden .engineItem{display:grid;grid-template-columns:74px 1fr;border-color:rgba(24,27,24,.12);background:rgba(255,255,255,.35);min-height:58px}
  body.view-garden .engineItem:hover{grid-template-columns:92px 1fr;transform:translateX(-3px);box-shadow:0 10px 24px rgba(0,0,0,.2);background:rgba(240,234,218,.98);z-index:2}
  body.view-garden .engineThumb{height:100%;min-height:58px;border-bottom:0;border-right:1px solid rgba(24,27,24,.14)}
  body.view-garden .engineBadge{font-size:8px;left:5px;top:5px;padding:1px 4px}
  body.view-garden .engineBody{padding:6px 7px;min-width:0}
  body.view-garden .engineTitle{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.view-garden .engineCreator{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.view-garden .engineLineage,body.view-garden .engineDesc,body.view-garden .diffPreview,body.view-garden .engineTags,body.view-garden .engineTrials,body.view-garden .engineActions{display:none}
  body.view-garden .engineSocial{gap:3px;margin-top:5px;font-size:8.5px}
  body.view-garden .engineSocial span{padding:1px 4px}
  body.view-garden .engineSocial span:nth-child(3){display:none}
  body.view-garden .engineItem:hover .engineLineage,body.view-garden .engineItem:hover .diffPreview{display:block}
  body.view-garden .engineItem:hover .engineTags,body.view-garden .engineItem:hover .engineActions{display:flex}
  body.view-garden .engineItem:hover .engineActions button{font-size:9px;padding:2px 5px}
  /* engine rail removed: side panels sit at the right edge */

  /* ---------- laptop-size responsive pass ---------- */
  @media (max-width:1440px){
    #timebar{gap:4px;padding:6px 8px}
    #timebar button{font-size:11px;padding:3px 7px}
  }
  @media (max-width:1280px){
    /* garden view: engine strip becomes a horizontal band between the side columns */
    body.view-garden #simGallery{left:calc(2*var(--gap) + var(--cat-w));right:calc(2*var(--gap) + var(--side-w));top:auto;bottom:calc(var(--sbar-h) + 96px);width:auto;max-height:140px}
    body.view-garden #engineList{display:grid;grid-auto-flow:column;grid-auto-columns:214px;overflow-x:auto;overflow-y:hidden;padding-bottom:3px}
    body.view-garden .engineItem:hover{transform:translateY(-2px)}
    body.view-garden #scores,body.view-garden #inspector,body.view-garden #toggles{right:var(--gap)}
  }
  @media (max-width:960px){
    #catalog{width:238px} #scores,#inspector{width:210px}
    #simGallery{inset:14px;min-width:0}
    body.view-garden #simGallery{left:14px;right:14px;top:auto;bottom:calc(var(--sbar-h) + 76px);width:auto;max-height:160px}
    body.view-garden #engineList{display:grid;grid-auto-flow:column;grid-auto-columns:214px;overflow-x:auto;overflow-y:hidden;padding-bottom:3px}
    body.view-garden .engineItem:hover{transform:translateY(-2px)}
    body.view-garden #scores,body.view-garden #inspector,body.view-garden #toggles{right:14px}
    #vcsExplainer{grid-template-columns:1fr} .mergeQueue{min-width:0;flex-direction:column}
    #sbGardener{display:none}
  }
  @media (max-height:820px){
    :root{--gap:10px; --cat-top:146px; --bottom-clear:76px}
    #topbar{padding:5px 13px;gap:11px}
    .chip{min-height:19px;padding:1px 7px}
  }
  /* ---------- portrait / narrow: the bands bend, they do not collide.
     A first down-payment on mobile; the full portrait pass builds on this. */
  @media (max-width:560px){
    /* the pill spans the width and spreads its stats, so state wraps into a
       tidy row or two instead of a narrow stack */
    #topbar{left:var(--gap);right:var(--gap);transform:none;max-width:none;
      gap:7px 10px;padding:5px 12px;border-radius:16px;justify-content:space-around}
    #topbar #brand,#topbar .tbSep{display:none} /* wordmark + rules yield to state */
    #topbar #sbKo{display:none}                 /* keep the season kanji, drop the long line */
    #inspector{width:min(var(--side-w),calc(100vw - 2*var(--gap)))}

    /* The dock must span the width, not center on a half-viewport. A centered
       absolutely-positioned box (left:50% + translateX) shrinks its available
       width to ~half the screen, forcing the seven controls to wrap into a tall
       stack that then collides with the sheet rising above it. Pinned edge to
       edge, the controls sit in one tidy row of bounded height. */
    #timebar{left:var(--gap);right:var(--gap);transform:none;max-width:none;gap:5px 6px;padding:6px 8px}
    /* compact controls: keeps the row short so that if the seven controls do
       wrap on the very narrowest phones, the two-line dock still clears the
       sheet above it */
    #timebar button{padding:3px 8px;font-size:11px}
    #timebar .dockPanelBtn{gap:5px}
    #timebar .dockPanelBtn .kanji{font-size:14px}

    /* The nursery bar goes edge to edge. The head keeps only handle + tabs
       (one swipeable strip); search is desktop-only - on a phone the tabs and
       the tray ARE the browse path. Cards shrink to thumb width. */
    #shopBar{left:0;right:0;transform:none;width:auto;border-radius:0;padding:4px 8px 6px}
    #catSearchRow,#shopNote,#stockRow{display:none}
    #shopTabs{margin-left:2px;flex-wrap:nowrap;
      -webkit-overflow-scrolling:touch;
      /* fade the right edge so the cut-off tab reads as "swipe for more" */
      -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
      mask-image:linear-gradient(90deg,#000 88%,transparent)}
    .catItem{flex:0 0 132px}
    .catItem .role{-webkit-line-clamp:2}
    #techBranches{grid-template-columns:1fr 1fr}
    #techPanel{left:var(--gap);right:var(--gap);transform:none;width:auto}
    /* the settings sheet rises above the bar, edge to edge */
    #settingsPanel{
      left:var(--gap);right:var(--gap);transform:none;width:auto;max-width:none;z-index:41;
      height:auto;max-height:calc(100vh - 78px - var(--dock-clear) - var(--shopbar-h));
      overflow-y:auto;scrollbar-width:none}
    #settingsPanel::-webkit-scrollbar{display:none}
  }
  /* Sub-375 phones: the dock may wrap to two lines; lift the sheets a little */
  @media (max-width:374px){
    #settingsPanel{bottom:calc(var(--dock-clear) + var(--shopbar-h) + 26px)}
  }
  /* ---------- the almanac ---------- */
  #almanac{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:105;width:min(364px,92vw);max-height:92vh;overflow-y:auto;scrollbar-width:thin;padding:18px 22px 20px;display:none;text-align:center}
  #almanac.open{display:block}
  #almanac .head{display:flex;justify-content:space-between;align-items:flex-start;text-align:left;margin-bottom:4px}
  #almTitle{font-family:var(--serif);font-size:17px;font-weight:600;margin-top:2px}
  #almanacClose{font-size:10px;padding:2px 7px}
  #almWheel{display:block;margin:2px auto 0}
  #almNext{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.4;margin-top:2px}
  #almNear{font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1.4;color:var(--vermil);margin-top:5px}
  #almWish{font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1.5;margin-top:7px;padding:7px 10px;border:1px dashed rgba(178,58,42,.35);border-radius:3px;text-align:left}
  #almPlaces{text-align:left;margin-top:4px}
  .almLbl{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:13px 0 4px}
  #almSeals{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:5px}
  .momentSeal{width:34px;height:34px;border-radius:50%;border:1px dashed rgba(24,27,24,.35);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;color:var(--washi)}
  .momentSeal.got{border:none;background:var(--vermil);box-shadow:0 1px 4px rgba(0,0,0,.25)}

  /* while you were away: read once at the top of the almanac, then gone */
  #almAway{text-align:left;margin:8px 0 4px;padding:10px 12px;border:1px solid rgba(178,58,42,.25);border-radius:3px}
  #almAwayTitle{font-family:var(--serif);font-size:15px;font-weight:600;margin:3px 0 6px}
  .recapLine{font-size:12.5px;line-height:1.55;margin:7px 0;padding-left:14px;position:relative}
  .recapLine::before{content:"·";position:absolute;left:2px;color:var(--vermil)}

  /* the garden journal: the words moments used to shout, kept quietly */
  #almJournal{max-height:190px;overflow-y:auto;scrollbar-width:thin;text-align:left;margin-top:4px}
  .jEntry{display:flex;gap:8px;align-items:baseline;margin:6px 0}
  .jWhen{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
  .jSeal{color:var(--vermil);font-family:var(--serif);font-style:normal}
  .jTxt{font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1.5}
  .jEmpty{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--faint);margin:6px 0}

  /* ---------- visiting a shared garden ---------- */
  #visitBanner{position:fixed;top:var(--gap);left:50%;transform:translateX(-50%);z-index:60;padding:10px 18px 12px;text-align:center;display:none;max-width:min(480px,92vw)}
  body.view-visit #visitBanner{display:block}
  #visitBanner .eyebrow{color:var(--vermil)}
  #visitLabel{font-family:var(--serif);font-style:italic;font-size:14px;margin:3px 0 8px}
  #visitActions{display:flex;gap:8px;justify-content:center}
  #visitActions button{font-size:11px;padding:4px 12px}
  body.view-visit #dock,body.view-visit #shopBar,body.view-visit #ugcPanel,body.view-visit #simGallery,
  body.view-visit #waterLbl,body.view-visit #waterBtns,body.view-visit #pruneLbl,body.view-visit #pruneBtns,body.view-visit #removeBtn,
  body.view-visit #shareGardenBtn,body.view-visit #zoneRow,body.view-visit #sbCalendar{display:none!important}
  body.view-visit #scores,body.view-visit #inspector,body.view-visit #toggles{right:var(--gap)}

  @media (prefers-reduced-motion:reduce){ *{transition:none!important} }