:root {
  --bg: #e4e6df; --ink: #1f2a26; --muted: #5d6762; --line: rgba(31, 42, 38, .16);
  --btn: #fbfbf8; --primary: #24352f; --ring: #ffb547;
  --bar-h: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; -webkit-text-size-adjust: 100%; }
.bar { position: fixed; inset: 0 0 auto 0; height: calc(var(--bar-h) + env(safe-area-inset-top)); padding: calc(env(safe-area-inset-top) + 16px) max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 3;
  background: linear-gradient(rgba(228, 230, 223, .92), rgba(228, 230, 223, .72)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
h1 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: .01em; }
.actions { display: flex; gap: 8px; align-items: center; }
button { font: inherit; color: var(--ink); background: var(--btn); border: 1px solid var(--line); border-radius: 10px; min-height: 44px; min-width: 44px; padding: 0 16px; cursor: pointer; touch-action: manipulation; }
button:hover { border-color: rgba(31, 42, 38, .35); }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
button.primary { background: var(--primary); color: #fff; border-color: var(--primary); width: 52px; padding: 0; }
button.ghost { background: transparent; }
#play .ic { display: inline-block; width: 14px; height: 16px; border-left: 4px solid #fff; border-right: 4px solid #fff; vertical-align: middle; }
#play[aria-label="Play"] .ic { width: 0; height: 0; border: 0; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
main { position: fixed; inset: calc(var(--bar-h) + env(safe-area-inset-top)) 0 0 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
canvas.dragging { cursor: grabbing; }
canvas.hot { cursor: pointer; }
#targets { position: absolute; inset: 0; pointer-events: none; }
#targets button { position: absolute; width: 44px; height: 44px; min-width: 0; margin: -22px 0 0 -22px; padding: 0; border-radius: 50%; background: transparent; border: 0; color: transparent; opacity: 0; pointer-events: none; }
#targets button:focus-visible { opacity: 1; outline: 3px solid var(--ring); outline-offset: 0; box-shadow: 0 0 0 6px rgba(20, 24, 22, .55); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sources { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 3; max-width: min(420px, calc(100vw - 24px)); }
.sources summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--muted); background: rgba(250, 250, 246, .82); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center; float: right; backdrop-filter: blur(4px); }
.sources summary::-webkit-details-marker { display: none; }
.sources[open] summary { margin-top: 8px; }
.sources .drawer { clear: both; background: rgba(250, 250, 246, .97); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; font-size: 13.5px; max-height: 60vh; overflow: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.sources[open] { display: flex; flex-direction: column-reverse; }
.sources .drawer p { margin: 0 0 10px; }
.sources .drawer p:last-child { margin: 0; }
.sources a { color: var(--primary); }
@media (max-width: 560px) {
  :root { --bar-h: 58px; }
  .bar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  h1 { font-size: 17px; }
  button { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

#roomControls { position:absolute; left:16px; bottom:16px; width:280px; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(250,250,246,.97); box-shadow:0 5px 24px #14201820; }
.room-heading { display:flex; gap:8px; align-items:center; }
select { font:inherit; color:var(--ink); background:var(--btn); border:1px solid var(--line); border-radius:8px; min-height:44px; min-width:0; padding:0 8px; }
#roomSelect { flex:1; width:130px; font-weight:650; }
#igniteRoom { padding:0 12px; background:#91401f; color:#fff; border-color:#91401f; }
button:disabled { opacity:.5; cursor:default; }
#openingControls { display:grid; gap:6px; margin-top:8px; }
.opening-row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.opening-row span { font-size:13px; }
.opening-row button { min-height:40px; width:88px; padding:0 8px; font-size:13px; }
.opening-row [aria-pressed="true"] { background:#d9e8df; border-color:#688675; }
#roomControls[hidden] { display:none; }
#viewAngle { min-width:70px; text-align:center; font-size:13px; }
@media(max-width:760px) {
 :root { --bar-h:112px; }
 .bar { flex-wrap:wrap; padding-top:10px; padding-bottom:10px; gap:4px; }
 .bar h1 { width:100%; font-size:16px; }
 .actions { width:100%; justify-content:space-between; gap:4px; }
 .actions button { padding:0 9px; }
 #roomControls { left:10px; bottom:52px; width:calc(100% - 20px); }
 #openingControls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; }
 .opening-row { gap:4px; }
 .opening-row span { font-size:12px; }
 .opening-row button { width:66px; min-width:66px; }
}

#roomControls.on-right { left:auto; right:16px; }
@media(max-width:760px) { #roomControls.on-right {left:10px;right:auto;} }

#roomReadout { display:flex;justify-content:space-between;gap:8px;padding-top:10px;margin-top:10px;border-top:1px solid var(--line); }
#roomReadout div { display:grid;gap:2px; }
#roomReadout span {font-size:11px;color:var(--muted);}
#roomReadout output {font-size:19px;font-variant-numeric:tabular-nums;}
.cue {margin:10px 0 0;display:grid;gap:2px;}
.cue span {font-size:11px;color:var(--muted);}.cue output{font-size:13px;}
#modelClock{font-size:20px;font-variant-numeric:tabular-nums;min-width:58px;}
#speed {width:64px;padding:0 5px;}
@media(max-width:760px){:root{--bar-h:158px;}.actions{flex-wrap:wrap;justify-content:flex-start;} .bar{align-content:center;} .bar h1{margin-bottom:4px;}#modelClock{margin-left:auto;}#roomReadout{padding-top:6px;margin-top:6px;}.cue{margin-top:6px;} }

@media(min-width:761px){.panel-right .sources {left:12px;right:auto;}}

@media(max-width:760px){main{bottom:270px;}#roomControls{position:fixed;}body.orbit-view main{bottom:0;}}

.clock-wrap{display:grid;gap:0;}.clock-wrap small{font-size:10px;color:var(--muted);line-height:1;}
@media(max-width:760px){#modelClock{margin-left:0;}.clock-wrap{margin-left:auto;}}


/* Private host acceptance: preserve44px touch targets in compact controls. */
.opening-row button,.sources summary{min-height:44px;}

#roomControls{width:310px;}
.room-heading #roomSelect{width:100%;}
.scenario-state{margin:6px 0 10px;font-size:12px;font-weight:650;}
.source-label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px;}
.source-row{display:flex;gap:8px;}.source-row select{flex:1;width:150px;}#igniteRoom{min-width:70px;}
.room-state{font-size:12px;line-height:1.4;margin:8px 0;}
.recent-change{font-size:11px;color:var(--muted);margin:5px 0 8px;}
@media(max-width:760px){#roomControls{width:calc(100% - 20px);max-height:calc(100svh - 240px);overflow:auto;}main{bottom:calc(var(--room-controls-height,340px) + 64px);}body.orbit-view main{bottom:0;}.scenario-state{margin:4px 0 6px;}.room-state{margin:6px 0;}}

/* Phone (superseded below for <=760px: one row since the camera buttons were removed). */
@media(max-width:560px){
 :root{--bar-h:116px;}
 .bar{display:flex;flex-wrap:wrap;align-content:center;row-gap:6px;column-gap:6px;padding-top:8px;padding-bottom:8px;}
 .bar .actions{display:contents;}
 .bar h1{width:auto;flex:1 1 auto;margin:0;order:0;}
 .clock-wrap{order:1;margin-left:0;}
 #speed{order:2;}
 #reset{order:3;}
 .bar::after{content:"";flex-basis:100%;order:4;height:0;}
 #play{order:7;margin-left:auto;}
}
/* Phone: the 44px sources pill sat on the panel's bottom edge; lift the panel clear of it. */
@media(max-width:760px){#roomControls{bottom:64px;}main{bottom:calc(var(--room-controls-height,340px) + 76px);}body.orbit-view main{bottom:0;}}

/* opening screen over the softened, paused house */
#splash { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); background:rgba(228,230,223,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
#splash[hidden] { display:none; }
.splash-card { width:min(420px,100%); padding:32px 28px 28px; background:rgba(250,250,246,.97); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 40px rgba(20,32,24,.16); }
.splash-card h2 { margin:0 0 14px; font-size:24px; font-weight:650; }
.splash-card p { margin:0 0 12px; }
.splash-card .splash-note { color:var(--muted); font-size:13.5px; margin-bottom:22px; }
#enterHouse { width:100%; background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }

/* Phone and small tablet: the camera buttons are gone, so title, Play, model time, speed and Reset fit one
   row (about 330px of 358px at 390 wide). Replaces the older two/three-row header rules above; 44px targets kept. */
@media(max-width:760px){
 :root{--bar-h:64px;}
 .bar{flex-wrap:nowrap;align-content:normal;padding-top:10px;padding-bottom:10px;column-gap:8px;}
 .bar::after{content:none;}
 .bar h1{width:auto;flex:1 1 auto;min-width:0;margin:0;font-size:16px;white-space:nowrap;}
 .bar .actions{display:flex;width:auto;flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end;gap:6px;}
 #play,.clock-wrap,#speed,#reset{order:0;margin-left:0;}
 .actions button:not(.primary){padding:0 10px;}
}

/* One camera action stays reachable in both views without crowding the phone header. */
#cameraMode { position:absolute; z-index:2; top:12px; left:max(12px,env(safe-area-inset-left)); min-height:44px; background:var(--btn); box-shadow:0 2px 10px #14201818; }
body.orbit-view #cameraMode { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Same-origin evidence drill-in. The Free Play document and its layout stay intact. */
#physicsLab { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--bg); color:var(--ink); }
#physicsLab[open] { display:flex; flex-direction:column; }
#physicsLab [hidden] { display:none!important; }
.physics-toolbar { display:flex; flex-wrap:wrap; gap:8px; padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); background:var(--btn); border-bottom:1px solid var(--line); }
#physicsEntryStatus { padding:12px; background:var(--btn); }
#physicsLabFrame { display:block; flex:1; width:100%; min-height:0; border:0; padding-bottom:env(safe-area-inset-bottom); }
#openPhysicsLab { display:inline-flex; align-items:center; min-height:44px; font-weight:650; }

/* Failed startup is a scrollable document, not an empty canvas or modal barrier. */
#startupFailure[hidden], .bar .actions[hidden], #view[hidden], #targets[hidden], #cameraMode[hidden] { display:none; }
html.startup-failed, body.startup-failed { height:auto; min-height:100%; overflow:auto; }
.startup-failed .bar { position:static; height:auto; min-height:var(--bar-h); }
.startup-failed main { position:static; width:min(720px,calc(100% - 32px)); margin:20px auto 0; }
#startupTitle { margin:0; font-size:20px; font-weight:650; }
#startupTitle:focus { outline:3px solid var(--ring); outline-offset:4px; }
.startup-failed .sources { position:static; width:min(720px,calc(100% - 32px)); max-width:none; margin:12px auto max(16px,env(safe-area-inset-bottom)); }
.startup-failed .sources[open] { display:block; }
.startup-failed .sources summary { float:none; margin:0 0 8px; }
.startup-failed .sources .drawer { max-height:none; overflow:visible; }
#viewLoading { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:12px 18px; background:#fbfbf8ed; border:1px solid #c4cbc3; border-radius:8px; font-size:15px; color:#1f2a26; pointer-events:none; }
html[data-scene-ready] #viewLoading, #startupFailure:not([hidden]) ~ #viewLoading { display:none; }