/* Scene Studio — same family as the 3D Studio: one accent, greyscale
   everything else, multiples of 4, surfaces not borders. */
:root{
  --bg:#0A0A0B; --surface:#131316; --raised:#1A1A1E; --border:#26262B;
  --text:#FAFAFA; --text-2:#A1A1AA; --text-3:#52525B;
  --accent:#8B5CF6; --accent-glow:rgba(139,92,246,.20);
  --bad:#EF4444; --r:8px; --micro:120ms ease-out;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
/* Pinned and gesture-proof: the page itself can never zoom, scroll or
   bounce on a phone. The canvas takes all fingers; the shelf rows keep
   one-finger horizontal scrolling. */
html,body{height:100%;touch-action:none;overscroll-behavior:none;
  overflow:hidden;position:fixed;inset:0;width:100%}

/* NOTHING HERE IS TEXT TO BE SELECTED.
   His screenshots, 19 Aug 2026: every button in the toolbar rendered blue
   and highlighted, a selection handle on "New", and Safari's own Copy /
   Look-up bubble across the props drawer. Holding a finger down to drag a
   model is also how iOS starts selecting text, so the studio kept handing
   the gesture to the system instead of to the scene - and once the page is
   in that state every later tap fights the selection.
   -webkit-touch-callout stops the long-press menu; user-select stops the
   highlight. The one place text must stay selectable is a real input. */
.sc-app,.sc-app *{-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.sc-app input,.sc-app textarea,.sc-app [contenteditable]{
  -webkit-user-select:text;user-select:text}
body.sc-body{margin:0;background:var(--bg);color:var(--text);
  font:400 15px/1.5 Inter,system-ui,sans-serif;overflow:hidden;
  -webkit-font-smoothing:antialiased}

.sc-app{display:flex;flex-direction:column;height:100dvh}

.sc-top{display:flex;align-items:center;gap:12px;flex:none;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 8px;background:var(--surface)}
.sc-back{color:var(--text-2);text-decoration:none;font-size:13px;flex:none}
.sc-logo{font:600 16px/1.2 'Space Grotesk',Inter,sans-serif;flex:none}
.sc-logo b{color:var(--accent)}
.sc-title{color:var(--text-3);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-actions{display:flex;gap:8px;flex:none}
.sc-actions button{min-height:36px;padding:0 12px;border:none;border-radius:var(--r);
  background:var(--raised);color:var(--text);font:500 13px/1.5 Inter,sans-serif;cursor:pointer;
  transition:background var(--micro)}
.sc-actions button:hover{background:var(--border)}
.sc-actions .sc-accent{background:var(--accent)}
.sc-actions .sc-accent:hover{background:#9d74f8}
.sc-actions button:disabled{opacity:.5;cursor:default}

/* On a phone the header ran off the right and hid Save file and New (the
   owner, 16 Aug 2026: "I still can't see: new, save file"). The logo and the
   "Scene Studio" title are decoration there, so they step aside and the four
   actions tighten up, and all of them fit on the row. */
@media (max-width:480px){
  .sc-logo,.sc-title{display:none}
  .sc-top{gap:8px}
  .sc-actions{gap:6px;flex:1;justify-content:flex-end}
  .sc-actions button{padding:0 9px;font-size:12px;min-height:36px}
}

.sc-view{position:relative;flex:1;min-height:0;background:var(--bg)}
.sc-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}

.sc-empty{z-index:2;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;gap:8px;text-align:center;pointer-events:none;max-width:340px}
.sc-empty b{font:600 18px/1.3 'Space Grotesk',Inter,sans-serif}
.sc-empty span{font-size:13px;color:var(--text-2)}

/* THE TOOLS ACROSS THE TOP, ALL TEN, ALWAYS. This bar tried three homes: a
   centred row that clipped off both edges, a wrapped block that sat over the
   model ("stuck me in the face"), and a right column that spilled into a
   second column. The owner's order, 16 Aug 2026: "all the buttons will be
   visible and active in perfect fit on the top." So it is one full-width
   strip pinned to the top of the view, and the ten buttons SHARE the width
   equally - each flexes to an even slice - so they fit exactly at any screen
   size and none can ever be cut off. */
.sc-tools{z-index:2;position:absolute;left:8px;right:8px;top:8px;
  display:flex;gap:4px;
  background:rgba(19,19,22,.82);padding:5px;border-radius:12px;
  backdrop-filter:blur(8px)}
.sc-tools button{flex:1 1 0;min-width:0;height:42px;border:none;border-radius:var(--r);
  background:var(--raised);color:var(--text);font-size:17px;cursor:pointer;
  transition:background var(--micro)}
.sc-tools button:hover{background:var(--border)}
.sc-tools .sc-danger{color:var(--bad)}

.sc-note{z-index:2;position:absolute;left:50%;top:66px;transform:translateX(-50%);
  background:rgba(19,19,22,.92);padding:8px 16px;border-radius:var(--r);
  font-size:13px;color:var(--text-2);max-width:88%;text-align:center}

.sc-shelf{flex:none;background:var(--surface);
  padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 8px)}
.sc-shelf-title{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px}
.sc-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;min-height:64px;touch-action:pan-x}
.sc-strip-props{margin-bottom:8px}
.sc-strip-empty{color:var(--text-3);font-size:13px;align-self:center}
.sc-item{flex:none;width:64px;height:64px;border-radius:var(--r);background:var(--raised);
  border:1px solid transparent;padding:0;cursor:pointer;overflow:hidden;position:relative;
  transition:border-color var(--micro)}
.sc-item:hover{border-color:var(--accent)}
.sc-item img{width:100%;height:100%;object-fit:cover;display:block}
.sc-item span{position:absolute;inset:auto 0 0 0;font-size:9px;line-height:1.2;color:var(--text-2);
  background:rgba(10,10,11,.75);padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-item.sc-built i{display:flex;align-items:center;justify-content:center;height:100%;font-size:24px;font-style:normal}
.sc-tools button[aria-pressed="true"]{background:var(--accent)}

.sc-modal{position:fixed;inset:0;background:rgba(10,10,11,.7);display:flex;
  align-items:center;justify-content:center;padding:24px;z-index:20}
.sc-modal[hidden]{display:none}
.sc-modal-card{background:var(--surface);border-radius:16px;padding:24px;max-width:360px;width:100%;
  display:flex;flex-direction:column;gap:12px;text-align:center}
.sc-modal-card h3{margin:0;font:600 18px/1.3 'Space Grotesk',Inter,sans-serif}
.sc-hint{margin:0;font-size:13px;color:var(--text-2)}
/* THE WAIT, SHOWN. Packing a scene and minting the camera link takes a few
   seconds, and a still screen reads as dead - the owner, 16 Aug 2026: "they
   exit the page or refresh cuz they sure it's not work while it's just
   loading". A spinner turns, a bar fills, the line changes with the work. */
.sc-wait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.sc-wait[hidden]{display:none}
.sc-spin{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);
  border-top-color:var(--accent);animation:scspin 800ms linear infinite}
@keyframes scspin{to{transform:rotate(360deg)}}
.sc-bar{width:200px;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.sc-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width 400ms linear}
@media (prefers-reduced-motion:reduce){.sc-spin{animation-duration:2400ms}}
.sc-qr{background:var(--text);border-radius:12px;padding:16px;margin:0 auto;line-height:0}
.sc-qr:empty{display:none}
.sc-qr svg{width:200px;height:200px;display:block}
.sc-modal-card button{min-height:40px;border:none;border-radius:var(--r);
  background:var(--raised);color:var(--text);font:500 13px/1.5 Inter,sans-serif;cursor:pointer}

/* ── EVERY PROP, IN ONE GRID ───────────────────────────────────────────
   His order, 18 Aug 2026: a visible button that opens all the props "like
   a uniform grid with X to close it", with the hundreds of them cut down to
   categories. The shelf strip keeps the handful he uses most; this is the
   whole library, and it has to work with a thumb on a phone. */
.sc-all-props{margin-left:8px;border:none;border-radius:999px;padding:3px 10px;
  background:var(--accent);color:#fff;font:600 11px/1.6 Inter,sans-serif;
  letter-spacing:.04em;text-transform:none;cursor:pointer;vertical-align:1px}
.sc-all-props:hover{background:#9d74f8}

.sc-props-all{position:fixed;inset:0;z-index:30;background:var(--bg);
  display:flex;flex-direction:column}
.sc-props-all[hidden]{display:none}
.sc-props-head{display:flex;align-items:center;gap:10px;flex:none;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;background:var(--surface)}
.sc-props-head h3{margin:0;font:600 18px/1.2 'Space Grotesk',Inter,sans-serif}
.sc-props-count{color:var(--text-3);font-size:12px;flex:1}
.sc-props-x{width:36px;height:36px;border:none;border-radius:50%;flex:none;
  background:var(--raised);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.sc-props-x:hover{background:var(--border)}
/* The categories: one row, scrolled sideways, never wrapped into a wall. */
.sc-props-cats{display:flex;gap:6px;overflow-x:auto;flex:none;padding:0 16px 10px;
  background:var(--surface);scrollbar-width:none;touch-action:pan-x}
.sc-props-cats::-webkit-scrollbar{display:none}
.sc-props-cats button{flex:none;border:none;border-radius:999px;padding:7px 14px;
  background:var(--raised);color:var(--text-2);font:500 13px/1 Inter,sans-serif;cursor:pointer}
.sc-props-cats button[aria-selected="true"]{background:var(--accent);color:#fff}
/* A UNIFORM grid: every tile the same size, however many there are. */
.sc-props-grid{flex:1;min-height:0;overflow-y:auto;display:grid;gap:10px;padding:14px 16px 24px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;
  overscroll-behavior:contain;touch-action:pan-y}
.sc-prop{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;
  border:none;border-radius:12px;background:var(--surface);color:var(--text);
  font:500 11px/1.3 Inter,sans-serif;text-align:left;cursor:pointer;
  transition:background var(--micro)}
.sc-prop:hover{background:var(--raised)}
.sc-prop img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--raised);display:block}
.sc-prop b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-prop span{color:var(--text-3);font-size:10px}
/* The add button on every tile, so it is never a guess what a tap does. */
.sc-prop-add{position:absolute;right:10px;top:10px;width:26px;height:26px;border:none;
  border-radius:50%;background:var(--accent);color:#fff;font-size:17px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.sc-prop-add:hover{background:#9d74f8}
.sc-props-empty{grid-column:1/-1;color:var(--text-3);font-size:13px;padding:24px 0;text-align:center}
/* A prop built in code has no photograph, so it shows its own icon at the
   same size as a thumbnail - the grid stays uniform either way. */
.sc-prop-icon{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;border-radius:8px;background:var(--raised);
  font-size:34px;font-style:normal;line-height:1}