@font-face { font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('../assets/manrope.ttf') format('truetype'); }
[hidden] { display:none !important; }
#build-grid { position:fixed;inset:0;width:100%;height:100%;pointer-events:none; }
#build-rotate-handle { position:fixed;transform:translate(-50%,-50%);z-index:4;width:48px;height:48px;border-radius:50%;border:2px solid #eafff1;background:#215647e6;color:white;box-shadow:0 3px 14px #092e37a0;font:700 30px/1 system-ui;touch-action:none;cursor:grab;user-select:none; }
#build-rotate-handle:active { cursor:grabbing;background:#327660; }
#build-rotate-handle:focus-visible { outline:3px solid white;outline-offset:4px; }
.build-angle { align-self:center;font-size:11px; }
#build-toggle,#build-drawer,#build-tools { font:500 13px/1.45 Manrope,"Segoe UI",system-ui,sans-serif;color:white; }
#build-toggle,#build-drawer,#build-tools { background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);box-shadow:0 8px 32px #0627242b;border-radius:20px; }
#build-toggle { position:fixed;right:388px;top:14px;padding:12px 22px;z-index:5;font-weight:800;text-shadow:0 1px 8px #102f20; }
#build-toggle[aria-pressed=true] { right:18px;background:rgba(255,255,255,.3); }
#build-drawer { position:fixed;right:14px;top:76px;bottom:20px;width:334px;overflow:hidden;z-index:4;display:flex;flex-direction:column; }
.build-drawer-title { padding:18px 16px 12px;display:flex;gap:12px;justify-content:space-between;align-items:center; }
.build-drawer-title strong { max-width:190px;font-size:16px;letter-spacing:-.4px; }
.build-drawer-title span { white-space:nowrap;font-weight:800; }
.build-families { display:flex;gap:5px;padding:0 12px 12px;overflow-x:auto;flex-shrink:0; }
#build-drawer button,#build-tools button { font:600 12px Manrope,"Segoe UI",system-ui,sans-serif;color:white;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:12px;min-height:40px;padding:9px 12px;touch-action:manipulation; }
#build-drawer button:hover,#build-tools button:hover { background:rgba(255,255,255,.25); }
#build-drawer button[aria-selected=true],#build-drawer button.chosen { background:rgba(242,255,237,.32);border-color:#efffe7; }
.build-items { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px 12px 14px;overflow-y:auto;overscroll-behavior:contain; }
#build-drawer .build-item { padding:6px;display:flex;align-items:center;flex-direction:column;min-height:126px; }
.build-item canvas { width:100%;height:68px;object-fit:contain; }
.build-item span { font-size:11px;font-weight:700;line-height:1.3;flex:1; }
.build-item small { opacity:.8;font-size:10px;margin-top:4px; }
.build-ground-help { margin:0;padding:0 14px 12px;font-size:12px;opacity:.9; }
.build-brush-sizes { display:flex;gap:6px;padding:0 12px 12px; }
#build-drawer [data-brush-size][aria-pressed=true] { background:#f2ffed52;border-color:#efffe7; }
.build-swatch { display:block;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--cover);box-shadow:inset 0 0 0 1px #ffffff45;margin:8px 0; }
.build-families button { flex-shrink:0; }
#build-tools { position:fixed;left:20px;right:374px;bottom:20px;padding:12px 16px;z-index:5; }
#build-hint { min-height:19px;text-shadow:0 1px 10px #123b20; }
.build-summary { display:flex;align-items:center;gap:10px; }
.build-selection-thumb { object-fit:contain;flex-shrink:0;background:#153e3833;border:1px solid #e5f5dc33;border-radius:10px; }
#build-hint strong,#build-hint span { display:block; }
#build-hint span { font-size:11px; }
.catalog-collapse { display:none; }
.build-actions { display:flex;gap:6px;flex-wrap:wrap;margin-top:8px; }
#build-tools button:disabled { opacity:.4;cursor:default; }
#build-tools button[data-build-action=place],#build-tools button[data-build-action=done] { background:rgba(255,255,255,.26);font-weight:800; }
.building #panel,.building #capture,.building #tools,.building .tabbar { display:none; }
.building #flash { z-index:8;bottom:auto;top:28%;max-width:calc(100vw - 70px);font:600 13px Manrope,system-ui,sans-serif;color:white;background:#234c40ba;backdrop-filter:blur(16px);border:1px solid #ffffff60;border-radius:14px; }
:is(#build-toggle,#build-drawer button,#build-tools button):focus-visible { outline:2px solid #fff;outline-offset:3px; }
@media (max-width:700px) {
  #build-toggle,#build-toggle[aria-pressed=true] { right:10px;top:12px;padding:11px 17px;border-radius:16px; }
  #build-drawer { top:auto;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;height:276px;max-height:34vh;border-radius:22px; }
  /* Pond's shared chrome sets body #build-drawer top on desktop. Override its
     specificity here so the phone catalogue actually anchors to the bottom. */
  body.building #build-drawer { top:auto; }
  .build-drawer-title { padding:12px 14px 8px; }
  .build-drawer-title strong { max-width:none;font-size:14px; }
  .build-families { padding-bottom:8px; }
  #build-drawer .build-item { min-height:112px; }
  .build-item canvas { height:54px; }
  #build-tools { left:10px;right:10px;bottom:calc(min(276px,34vh) + 22px);padding:10px 12px;border-radius:18px;font-size:12px; }
  #build-tools:has(button[aria-expanded=false]) { bottom:20px; }
  #build-tools button { padding:8px 10px;min-height:40px; }
  .build-actions { gap:5px;margin-top:6px; }
  .building #hud { max-width:calc(100vw - 96px); }
  body.building #audio-controls,body.building.has-tabbar #audio-controls { top:170px;bottom:auto; }
  body.building #audio-controls .audio-panel { top:46px;bottom:auto; }
}

/* Catalogue: Naturalist Glass, with the garden visible through every surface. */
body.building #build-drawer { width:380px;background:linear-gradient(145deg,#244c42db,#163d38cf);border-color:#e3f2cf63; }
body.building #build-tools { right:420px; }
.catalog-shell { display:flex;flex-direction:column;min-height:0;height:100%; }
.catalog-shell .build-drawer-title { padding:18px 18px 14px;gap:8px; }
.catalog-shell .build-drawer-title div { display:flex;flex-direction:column;gap:5px; }
.catalog-shell .build-drawer-title small { font-size:9px;letter-spacing:1.7px;color:#d2e3b9; }
.catalog-shell .build-drawer-title strong { max-width:none;font-size:19px;letter-spacing:-.6px; }
.catalog-credits { font-size:12px;color:#edf3d5; }
.catalog-search { margin:0 14px 12px;display:flex;align-items:center;gap:7px;border:1px solid #e7f0d44d;border-radius:12px;background:#092c3045;padding:0 10px; }
.catalog-search span { font:26px/1 Georgia,serif;color:#d5e7bb; }
.catalog-search input { width:100%;min-width:0;height:44px;background:transparent;border:0;outline:0;color:#fff;font:500 13px Manrope,system-ui; }
.catalog-search input::placeholder { color:#e1e9d5b0; }
.catalog-search:focus-within { outline:2px solid #e6f4c5;outline-offset:2px; }
.catalog-search kbd { border:1px solid #e7f0d444;border-radius:4px;padding:1px 5px;color:#d7e5c3a0; }
.catalog-tabs { display:flex;padding:0 14px;gap:4px; }
#build-drawer .catalog-tabs button { flex:1;padding:8px 6px;min-height:40px;background:transparent;border-color:transparent;border-radius:10px; }
#build-drawer .catalog-tabs [aria-pressed=true] { background:#e5eec62b;border-color:#e8f2d152;color:#f6ffdf; }
.catalog-filters { margin:10px 14px 0;flex-shrink:0; }
.catalog-filters summary { font-size:11px;color:#d5e3c7;cursor:pointer;padding:5px 0; }
.catalog-filters>div { display:flex;gap:6px;margin:5px 0 4px; }
.catalog-filters label { flex:1;min-width:0;font-size:10px;color:#d7e9d5; }
.catalog-filters select { display:block;width:100%;height:36px;border:1px solid #d2e8d559;border-radius:8px;background:#224b41;color:white;font:11px Manrope,system-ui;margin-top:4px; }
.catalog-heading { padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:12px;color:#e9f1dc;flex-shrink:0; }
#build-drawer .catalog-heading button { min-height:30px;padding:3px 10px; }
.catalog-scroll { overflow:auto;flex:1;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d4e5c750 transparent; }
.catalog-results { margin:0 12px; }
.catalog-packs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:10px; }
#build-drawer .catalog-pack { padding:0;overflow:hidden;text-align:left;display:flex;flex-direction:column;align-items:stretch;background:#d2e9c215; }
.catalog-pack img { width:100%;height:auto;aspect-ratio:5 / 3;object-fit:contain; }
.catalog-pack strong { font-size:12px;padding:9px 10px 2px; }
.catalog-pack small { font-size:10px;color:#d9e7ca;padding:0 10px 12px; }
.catalog-categories { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:12px; }
.catalog-categories button { text-align:left; }
.catalog-categories small { display:block;font-size:10px;opacity:.7;margin-top:4px; }
.catalog-virtual { position:relative; }
.catalog-window { position:absolute;left:0;right:0;display:grid;gap:8px;grid-auto-rows:138px; }
#build-drawer .catalog-window .build-item { padding:5px;min-height:0;height:138px;border-color:#d9e8cf38;background:#d4e9ce12; }
.catalog-window img { max-width:100%;width:100%;height:76px;object-fit:contain;flex-shrink:0; }
.catalog-window .build-item span { font-size:11px; }
.catalog-window .build-item small { color:#e9ecc9;font-size:10px; }
#build-drawer .catalog-window .chosen { background:#eaf4c638;border-color:#f0fbd7; }
.catalog-status { font-size:10px;color:#d9e8ce;min-height:16px;padding:8px 16px 12px;flex-shrink:0; }
#build-drawer button:disabled { opacity:.5; }
@media(min-width:701px) {
  /* Keep Sound beside Building, clear of the catalogue's scrollable cards. */
  body.building #audio-controls,body.building.has-tabbar #audio-controls { top:88px;right:136px;bottom:auto; }
  body.building #audio-controls .audio-panel { top:46px;bottom:auto; }
}
@media(max-width:700px) {
  body.building #build-drawer { left:10px;right:10px;width:auto;height:390px;max-height:46dvh;border-radius:22px; }
  body.building #build-tools,body.building #build-tools:has(button[aria-expanded=false]) { left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));padding:10px;border-radius:18px;background:linear-gradient(145deg,#244c42ed,#163d38df); }
  body.building #hud { display:none; }
  body.building #build-toggle { display:none; }
  #build-rotate-handle { z-index:6; }
  body.building #audio-controls,body.building.has-tabbar #audio-controls { top:72px;right:10px; }
  .build-summary { min-height:48px;padding-right:54px; }
  #build-hint { min-width:0; }
  #build-hint strong { font-size:12px;line-height:1.35; }
  #build-hint span { font-size:11px;line-height:1.35; }
  #build-hint .build-description { display:none; }
  .build-actions { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; }
  #build-tools .build-actions button { min-height:44px;min-width:0;padding:6px 3px;font-size:11px; }
  [data-build-action=rotate] { order:1; }
  [data-build-action=move] { order:2; }
  [data-build-action=remove] { order:3; }
  [data-build-action=undo] { order:4; }
  [data-build-action=drawer] { order:5; }
  [data-build-action=place],[data-build-action=floor] { order:6;grid-column:span 2; }
  [data-build-action=free] { order:7; }
  [data-build-action=cancel] { order:8; }
  [data-build-action=done] { order:9; }
  .build-angle { display:none; }
  #build-drawer .catalog-collapse { display:block;flex-shrink:0;min-width:44px;min-height:44px; }
  .building #flash { top:126px;pointer-events:none; }
  .catalog-shell .build-drawer-title { padding:12px 14px 10px; }
  .catalog-shell .build-drawer-title strong { font-size:16px; }
  .catalog-shell .build-drawer-title small { font-size:8px; }
  .catalog-search { margin-bottom:8px; }
  .catalog-search input { height:40px; }
  .catalog-filters { margin-top:5px; }
  .catalog-heading { padding-top:7px;padding-bottom:7px; }
  .catalog-status { padding-top:5px;padding-bottom:8px; }
}