/* Layout: a full-bleed canvas with glass instrument panels pinned to the top and bottom safe areas.
   Single dark look by design: this is a view into space. */
:root {
  --void: #04060d;
  --panel: rgba(11, 15, 27, 0.74);
  --panel-solid: #0b0f1b;
  --line: rgba(150, 172, 226, 0.16);
  --line-strong: rgba(150, 172, 226, 0.3);
  --ink: #e7ebf6;
  --muted: #8d97b2;
  --accent: #ffb85c;      /* stellar amber */
  --accent-ink: #1d1206;
  --cool: #9db8ff;        /* followed-object blue */
  --danger: #ff7a66;
  --font-ui: "Saira Semi Condensed", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-book: "Literata", "Iowan Old Style", "Palatino", Georgia, serif;
  --page: #0c1120;         /* book page: deep ink */
  --page-ink: #ebe5d8;     /* warm text for long reading */
  --page-muted: #a39d92;
  --page-rule: rgba(235, 229, 216, 0.14);
  --gut-l: max(12px, env(safe-area-inset-left, 0px));
  --gut-r: max(12px, env(safe-area-inset-right, 0px));
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--void); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { font: 15px/1.35 var(--font-ui); -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#app { position: fixed; inset: 0; overflow: hidden; overflow: clip; background: var(--void); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gl, #gpu, #glgpu { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#gpu[hidden], #glgpu[hidden] { display: none; }
#view:active { cursor: grabbing; }

/* ---------- glass controls ---------- */
.pill, .icon-btn, .tool, .toggle, .chip, .info-actions button, .settings-actions button {
  border: 1px solid var(--line);
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.pill:active, .icon-btn:active, .tool:active, .toggle:active, .chip:active { transform: scale(0.96); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.icon-btn.small { width: 36px; height: 36px; }
.icon-btn.small svg { width: 18px; height: 18px; }
.pill { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; font-weight: 600; letter-spacing: 0.02em; }

/* ---------- top bar ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gut-r) 0 var(--gut-l);
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.top-right { display: flex; gap: 8px; }
.lock-chip { pointer-events: auto; justify-self: center; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; height: 28px; padding: 0 12px 0 9px; border-radius: 999px; border: 1px solid rgba(157,184,255,.45); background: rgba(157,184,255,.14); color: var(--cool); font-size: 13px; cursor: pointer; max-width: 100%; }
.lock-chip svg { width: 15px; height: 15px; }
.lock-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lock-chip b { font-weight: 600; color: var(--ink); }
#btn-lock.on { color: var(--cool); border-color: rgba(157,184,255,.55); background: rgba(157,184,255,.14); }
.clock { justify-self: center; text-align: center; display: grid; gap: 1px; pointer-events: none; min-width: 0; padding-top: 2px; }
.clock-name { font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-year { font: 500 12px var(--font-data); color: var(--ink, #fff); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-shadow: 0 1px 6px rgba(0,0,0,.9); white-space: nowrap; }
.clock-year b { font-size: 15px; font-weight: 700; margin-right: 4px; }
.clock-time { font: 500 12px var(--font-data); color: var(--muted); font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.limit { justify-self: center; font: 500 11px var(--font-data); color: var(--accent); background: rgba(255,184,92,.12); border: 1px solid rgba(255,184,92,.35); padding: 1px 8px; border-radius: 999px; margin-top: 3px; }

/* ---------- info card ---------- */
.info {
  position: absolute; left: var(--gut-l); top: calc(env(safe-area-inset-top, 0px) + 66px);
  width: min(360px, calc(100% - var(--gut-l) - var(--gut-r)));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  padding: 12px 12px 12px 14px; display: grid; gap: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.info-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; cursor: pointer; }
.info.collapsed .stats { display: none; }
.info-head h2::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 9px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .2s; }
.info.collapsed .info-head h2::after { transform: rotate(-135deg); margin-bottom: -1px; }
.info h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; text-wrap: balance; }
.info-head p { margin: 2px 0 0; font-size: 13px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.stats .wide { grid-column: 1 / -1; }
.stats div { min-width: 0; border-top: 1px solid var(--line); padding-top: 4px; }
.stats dt { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.stats dd { margin: 0; font: 500 13px var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-head > div { flex: 1; min-width: 0; }
.info-head .hab { margin: 3px 0 0; font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 600; color: var(--muted); }
.hab.good { color: #7fe0a0; }
.hab.mid { color: var(--accent); }
.hab.exotic { color: #c7a8ff; font-weight: 500; }
.book-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid rgba(255,184,92,.45); background: rgba(255,184,92,.12); color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; flex: none; }
.book-btn svg { width: 18px; height: 18px; }
.info-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.info-actions button { height: 38px; font-size: 14px; font-weight: 600; padding: 0 6px; white-space: nowrap; }
.info-actions button.on { color: var(--cool); border-color: rgba(157,184,255,.5); }
.info-actions .danger { color: var(--danger); }
.info-more { margin-top: 2px; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.more-lede { all: unset; cursor: pointer; display: grid; gap: 3px; font-size: 14px; line-height: 1.35; color: rgba(236,232,222,.86); }
.more-lede:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.more-kicker { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.more-kicker svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.more-pages { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 24px !important; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px 2px; }
.more-pages::-webkit-scrollbar { display: none; }
.more-pages button { flex: none; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,184,92,.3); background: rgba(255,184,92,.07); color: #f3d6a8; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.info-extra { height: 40px; border-radius: 999px; border: 1px solid rgba(255,122,102,.45); background: rgba(255,122,102,.1); color: #ffb3a6; font-weight: 600; font-size: 14px; cursor: pointer; }

/* ---------- toast + hint ---------- */
.fade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease-in; z-index: 4; }
.fade.on { opacity: 1; transition: opacity .35s ease-out; }
.snap { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; z-index: 4; }
.toast {
  position: absolute; left: 50%; bottom: calc(var(--dock-h, 160px) + 10px);
  transform: translate(-50%, -8px); opacity: 0;
  max-width: min(440px, calc(100% - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 9px 14px; font-size: 14px; text-align: center; text-wrap: balance;
  transition: opacity .3s, transform .3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.big { border-color: rgba(255,184,92,.55); color: #ffe2bb; }

.hint {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, 0);
  text-align: center; font-size: 14px; color: var(--muted); pointer-events: none;
  background: rgba(4,6,13,.55); padding: 10px 16px; border-radius: 12px; width: max-content; max-width: calc(100% - 32px);
  transition: opacity .6s;
}
.hint p { margin: 2px 0; }
.hint b { color: var(--ink); font-weight: 600; }
.hint.gone { opacity: 0; }

/* ---------- dock ---------- */
.dock {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 10px);
  display: grid; gap: 8px; pointer-events: none;
}
.dock > * { pointer-events: auto; min-width: 0; }
.dock > :not(.tray) { margin-left: var(--gut-l); margin-right: var(--gut-r); }
.readout { display: flex; justify-content: space-between; gap: 12px; font: 500 11px var(--font-data); color: var(--muted); pointer-events: none; text-shadow: 0 1px 4px #000; font-variant-numeric: tabular-nums; padding: 0 4px; }

.tray-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gut-r) 4px var(--gut-l); scrollbar-width: none; scroll-snap-type: x proximity; }
.tray-list::-webkit-scrollbar { display: none; }
.chip { flex: none; display: grid; justify-items: center; gap: 4px; width: 74px; padding: 9px 4px 7px; border-radius: 12px; scroll-snap-align: start; }
.chip .swatch { width: 30px; height: 30px; border-radius: 50%; }
.chip-label { font-size: 12px; font-weight: 600; line-height: 1.1; text-align: center; color: var(--muted); }
.chip.active { border-color: var(--accent); background: rgba(255,184,92,.14); }
.chip.active .chip-label { color: var(--ink); }

.timebar { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 4px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.timebar .icon-btn { background: var(--accent); color: var(--accent-ink); border-color: transparent; width: 40px; height: 40px; }
.timebar .icon-btn svg { stroke-width: 2.4; }
.play .i-play { display: none; fill: currentColor; }
.play.paused .i-play { display: block; }
.play.paused .i-pause { display: none; }
.speed { flex: 1; min-width: 0; display: flex; }
#speed-label { font: 500 12px var(--font-data); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(157,184,255,.35), rgba(255,184,92,.6)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--ink); border: 3px solid var(--panel-solid); box-shadow: 0 0 0 1px var(--line-strong), 0 2px 8px rgba(0,0,0,.5); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(157,184,255,.35), rgba(255,184,92,.6)); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 3px solid var(--panel-solid); }

.tools { display: flex; align-items: center; gap: 8px; }
.tools .spacer { flex: 1; }
.tool { height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px 0 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.tool em { font-style: normal; color: var(--accent); }
.tool.active { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.tool.active em { color: var(--accent-ink); }
.toggle { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--muted); }
.toggle.on { color: var(--accent); border-color: rgba(255,184,92,.45); }

/* ---------- sheets ---------- */
.scrim { position: absolute; inset: 0; background: rgba(2,3,8,.5); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(560px, 100%);
  max-height: min(78dvh, 78vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel-solid); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0;
  padding: 6px var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 16px) var(--gut-l);
  transform: translateY(24px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
  -webkit-user-select: text; user-select: text;
}
.sheet.open { transform: none; opacity: 1; }
.sheet-head { position: sticky; top: 0; background: var(--panel-solid); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 8px; z-index: 1; }
.sheet-head h2 { flex: 1; }
.sheet h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.scenario-list { display: grid; gap: 8px; }
.sheet-sub { margin: 14px 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.challenge .scn-meta { color: var(--accent); opacity: 1; }
.challenge.done .scn-title::after { content: ' ✓'; color: #7fe0a0; }
.chal { background: var(--panel); border: 1px solid rgba(255,184,92,.4); border-radius: 14px; padding: 8px 10px 10px 12px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; gap: 4px; max-height: 42vh; overflow-y: auto; }
.chal.won { border-color: rgba(90,220,120,.6); }
.chal.lost { border-color: rgba(255,122,102,.6); }
.chal-top { display: flex; align-items: center; gap: 8px; }
.chal-top b { flex: 1; font-size: 15px; }
.chal-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.chal-goal, .chal-prog, .chal-more { margin: 0; font-size: 13px; line-height: 1.4; }
.chal-prog { font: 500 12px var(--font-data); color: var(--muted); }
.chal.won .chal-prog { color: #7fe0a0; font-weight: 600; }
.chal.lost .chal-prog { color: #ffb3a6; }
.chal-more { color: rgba(236,232,222,.86); }
.chal-more a { color: var(--accent); }
.chal-answer { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.chal-answer input { width: 7em; height: 32px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.05); color: var(--ink); padding: 0 8px; font: 500 14px var(--font-data); }
.chal-answer button, .chal-btns button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,184,92,.35); background: rgba(255,184,92,.08); color: #f3d6a8; font-weight: 600; font-size: 13px; cursor: pointer; }
.chal-btns { display: flex; gap: 6px; }
.scenario { text-align: left; display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; }
.scenario:active { background: rgba(255,255,255,.06); }
.scenario.current { border-color: rgba(255,184,92,.55); }
.scn-title { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; }
.scenario.current .scn-title { color: var(--accent); }
.scn-blurb { font-size: 14px; color: var(--muted); line-height: 1.4; }
.scn-meta { font: 500 11px var(--font-data); color: var(--muted); opacity: .8; margin-top: 2px; }

.settings { display: grid; gap: 4px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch span { order: -1; font-size: 16px; }
.switch input { -webkit-appearance: none; appearance: none; flex: none; width: 48px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(20px); background: var(--accent-ink); }
.views { border: 0; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.views legend { font: 600 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 0 6px; }
.view-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.view-opt:has(input:checked) { border-color: rgba(255,184,92,.6); background: rgba(255,184,92,.08); }
.view-opt.disabled { opacity: .5; cursor: default; }
.view-opt input { accent-color: var(--accent); width: 20px; height: 20px; flex: none; margin: 0; }
.view-opt span { display: grid; gap: 1px; }
.view-opt b { font-size: 16px; }
.view-opt small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.settings-actions button { height: 46px; font-weight: 600; border-radius: 12px; }
.settings-actions .wide { grid-column: 1 / -1; }
.info-extra.zones { border-color: rgba(90,220,120,.4); background: rgba(90,220,120,.08); color: #8be6a4; }
.info-extra.zones.on { background: rgba(90,220,120,.22); }
.info-extra.grav { border-color: rgba(190,140,255,.45); background: rgba(190,140,255,.08); color: #cdb0ff; }
.info-extra.grav.on { background: rgba(190,140,255,.22); }
.info-extra.stand { border-color: rgba(157,184,255,.45); background: rgba(157,184,255,.1); color: var(--cool); }
.info { grid-template-columns: 1fr; }
.surface-bar { position: absolute; left: var(--gut-l); right: var(--gut-r); top: calc(env(safe-area-inset-top, 0px) + 66px); margin: 0 auto; max-width: 460px; display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.surface-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.surface-head button { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); font-weight: 600; cursor: pointer; }
.surface-where { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.surface-where button { height: 34px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 4px; }
.surface-where #sv-parent { grid-column: 1 / -1; }
.surface-where button.on { border-color: var(--accent); color: var(--accent); background: rgba(255,184,92,.1); }
.surface-readout { margin: 0; font: 500 12px var(--font-data); color: var(--muted); }
#app.photo .surface-bar { display: none !important; }
#app.on-surface .lock-chip, #app.on-surface #stat-grid { visibility: hidden; }
.photo-hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); font-size: 13px; color: var(--ink); background: rgba(4,6,13,.6); padding: 6px 12px; border-radius: 999px; opacity: 0; pointer-events: none; white-space: nowrap; }
.photo-bar { display: none; position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateX(-50%); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(4,6,13,.55); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; opacity: .55; transition: opacity .2s; }
.photo-bar:hover, .photo-bar:active, .photo-bar:focus-within { opacity: 1; }
#app.photo .photo-bar { display: flex; }
.photo-bar button { flex: none; height: 30px; padding: 0 11px; border-radius: 999px; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.photo-bar button.on { background: rgba(255,255,255,.14); color: var(--ink); }
#ph-exit { color: var(--accent); }
.photo-hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); }
.photo-hint.fade { animation: photohint 2.6s ease forwards; }
@keyframes photohint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
#app.photo .topbar, #app.photo .dock, #app.photo .info, #app.photo .toast, #app.photo .hint { display: none !important; }
.about { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 14px 0 0; max-width: 62ch; }

/* ---------- book ---------- */
.book {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  background: radial-gradient(120% 70% at 50% 0%, #141b30 0%, var(--page) 60%);
  color: var(--page-ink); -webkit-user-select: text; user-select: text;
  opacity: 0; transform: scale(0.985); transition: opacity .22s ease, transform .22s ease;
}
.book.open { opacity: 1; transform: none; }
.book-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gut-r) 8px var(--gut-l); border-bottom: 1px solid var(--page-rule); }
.book-tabs { justify-self: center; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--page-rule); }
.book-tabs button { border: 0; background: none; height: 32px; padding: 0 14px; border-radius: 999px; color: var(--page-muted); font-weight: 600; font-size: 14px; letter-spacing: .02em; cursor: pointer; }
.book-tabs button.on { background: var(--page-ink); color: var(--page); }
.book-tabs button:disabled { opacity: .4; cursor: default; }
.book-pages { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.book-pages::-webkit-scrollbar { display: none; }
.page { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.page-in { max-width: 38rem; margin: 0 auto; padding: 22px max(20px, env(safe-area-inset-right, 0px)) 32px max(20px, env(safe-area-inset-left, 0px)); font: 17px/1.62 var(--font-book); }
.portrait { width: 132px; height: 132px; margin: 6px auto 18px; }
.portrait.round { border-radius: 50%; box-shadow: 0 0 60px rgba(150,180,255,.12); }
.kicker { margin: 0; font: 600 12px/1.3 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cover .kicker, .cover .book-title { text-align: center; }
.book-title { margin: 4px 0 14px; font: 600 clamp(34px, 9vw, 52px)/1.05 var(--font-book); letter-spacing: -0.01em; text-wrap: balance; }
.lede { margin: 0 0 14px; font-size: 19px; line-height: 1.55; }
.note { margin: 0 0 14px; font-style: italic; color: var(--page-muted); font-size: 15px; }
.sec { margin: 26px 0 6px; font: 600 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--page-muted); }
.page-head { margin: 2px 0 14px; font: 600 30px/1.15 var(--font-book); text-wrap: balance; }
.body-text { margin: 0 0 16px; }
.facts { margin: 0; display: grid; }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--page-rule); }
.facts dt { font: 500 14px var(--font-ui); color: var(--page-muted); letter-spacing: .02em; flex: none; }
.facts dd { margin: 0; text-align: right; font: 500 14px/1.4 var(--font-data); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.dyk { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dyk li { position: relative; padding-left: 22px; }
.dyk li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sources a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sources .url { display: block; font: 12px var(--font-data); color: var(--page-muted); overflow-wrap: anywhere; }
.book-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 10px) var(--gut-l); border-top: 1px solid var(--page-rule); }
.book-foot .icon-btn { background: transparent; color: var(--page-ink); border-color: var(--page-rule); }
.book-foot .icon-btn:disabled { opacity: .3; }
.book-folio { font: 500 12px var(--font-data); color: var(--page-muted); text-align: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-contents { flex: 1; min-height: 0; overflow-y: auto; padding: 8px max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(20px, env(safe-area-inset-left, 0px)); }
.book-contents > * { max-width: 38rem; margin-left: auto; margin-right: auto; }
.toc-intro { font: italic 15px/1.5 var(--font-book); color: var(--page-muted); }
.toc-group { margin: 22px auto 8px; font: 600 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.toc-list { display: grid; }
.toc-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; border: 0; border-bottom: 1px solid var(--page-rule); background: none; padding: 11px 0; cursor: pointer; color: var(--page-ink); }
.toc-title { font: 600 18px var(--font-book); }
.toc-sub { font-size: 13px; color: var(--page-muted); text-align: right; }
.toc-item.in-sim .toc-title::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cool); margin-left: 9px; vertical-align: middle; }
@media (min-width: 900px) and (min-height: 560px) {
  .page-in { padding-top: 40px; }
}

/* Narrow phones */
@media (max-width: 430px) {
  .clock-name { font-size: 16px; }
}

/* Short landscape phones: tuck the tray and shrink the info card. */
@media (max-height: 500px) {
  .info { top: calc(env(safe-area-inset-top, 0px) + 60px); padding: 8px 10px; gap: 6px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .chip { width: 64px; padding: 6px 4px 5px; }
  .chip .swatch { width: 24px; height: 24px; }
  .hint { transform: translate(-50%, 20px); }
}

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

/* ---------- Universe-Sandbox-style layout ---------- */
.chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; pointer-events: auto; }
.lock-chip.surf { border-color: var(--line-strong); background: rgba(255,255,255,.05); color: var(--muted); }
.lock-chip.surf.on { border-color: rgba(255,184,92,.55); background: rgba(255,184,92,.14); color: var(--accent); }
.clock-time { text-shadow: none; }

/* Object panel with tabs */
.info { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 66px - var(--dock-h, 120px) - 12px); grid-template-rows: auto auto minmax(0, 1fr); }
.info-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 -4px; overflow-x: auto; scrollbar-width: none; }
.info-tabs::-webkit-scrollbar { display: none; }
.info-tabs button { flex: 1 0 auto; border: 0; background: none; padding: 6px 8px 8px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.info-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.info.collapsed .info-tabs, .info.collapsed .info-body { display: none; }
.info-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; margin-right: -6px; padding-right: 6px; }
.tab-pane { display: grid; gap: 10px; }
.info-actions.two { grid-template-columns: 1fr 1fr; }
.pane-label { margin: 2px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pane-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.map { width: 100%; aspect-ratio: 2 / 1; border-radius: 8px; border: 1px solid var(--line); image-rendering: auto; background: #050810; }
.map-head { display: flex; justify-content: space-between; align-items: center; }
.legend { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font: 500 11px var(--font-data); color: var(--muted); margin-top: -4px; }
.legend i { height: 8px; border-radius: 4px; }
.seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.seg button { border: 0; background: none; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--panel-solid); }
.bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.06); }
.bar i { display: block; height: 100%; }
.bar-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 12px var(--font-data); color: var(--muted); margin-top: -4px; }
.bar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bar-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.info-actions button.life-on { color: #8be6a4; border-color: rgba(90,220,120,.45); }

/* Bottom bar */
.bar-main { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 5px 6px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bar-main .spacer { flex: 1; }
.bar-main .play { width: 42px; height: 42px; background: var(--accent); color: var(--accent-ink); border-color: transparent; flex: none; }
.bar-main .play svg { stroke-width: 2.4; }
.step { width: 30px; height: 40px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; border-radius: 10px; }
.step svg { width: 18px; height: 18px; }
.step:active { background: rgba(255,255,255,.08); }
.timebox { display: grid; gap: 1px; min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.timebox .clock-time { font-size: 12px; color: var(--ink); white-space: nowrap; }
#speed-label { font: 500 11px var(--font-data); color: var(--muted); white-space: nowrap; min-width: 0; text-align: center; }
.create { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,184,92,.5); background: rgba(255,184,92,.14); color: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; }
.create.on { background: var(--accent); color: var(--accent-ink); }
.panel-btn { width: 46px; height: 44px; border: 0; background: none; color: var(--muted); display: grid; justify-items: center; align-content: center; gap: 1px; padding: 0; cursor: pointer; border-radius: 10px; flex: none; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.panel-btn svg { width: 20px; height: 20px; }
.panel-btn.on { color: var(--ink); background: rgba(255,255,255,.07); }
.panel-btn:active { background: rgba(255,255,255,.1); }
@media (max-width: 380px) { .step { width: 24px; } .timebox { min-width: 60px; } .panel-btn { width: 40px; } .bar-main { gap: 3px; } }

.addbar { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid rgba(255,184,92,.4); border-radius: 999px; padding: 4px 4px 4px 8px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); justify-self: center; max-width: calc(100% - var(--gut-l) - var(--gut-r)); }
.addbar .swatch { width: 26px; height: 26px; border-radius: 50%; flex: none; background-size: cover; }
.addbar-text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.addbar-text b { color: var(--accent); }
.addbar .seg button { height: 26px; padding: 0 10px; font-size: 12px; }
.addbar.paint { border-color: rgba(120,200,255,.45); }
.addbar.paint .seg button { padding: 0 8px; }
.addbar.laser { border-color: rgba(255,90,80,.5); }
.laser-power { width: 110px; display: flex; }
.laser-label { font: 500 11px var(--font-data); color: #ff9c8f; min-width: 64px; }

/* Panels: bottom sheets on phones, a right-hand side panel on wide screens */
.cat-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cat-tabs button.on { border-color: var(--accent); color: var(--accent); background: rgba(255,184,92,.1); }
.star-builder { margin-bottom: 4px; }
.sb-types { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-types button { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sb-types button i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sb-types button.on { border-color: var(--accent); color: var(--text, #fff); background: rgba(255,184,92,.1); }
.sb-row { display: flex; gap: 12px; align-items: center; margin: 12px 0 10px; }
.sb-row canvas { width: 84px; height: 84px; flex: none; }
.sb-ctl { flex: 1; min-width: 0; }
.sb-size { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sb-size input { flex: 1; min-width: 0; accent-color: var(--accent); }
.sb-info { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.sb-info b { color: var(--text, #fff); font-weight: 600; }
.sb-use { width: 100%; height: 40px; border-radius: 12px; border: 1px solid var(--accent); background: rgba(255,184,92,.12); color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; }
.create-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.card { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; }
.card img, .card canvas { width: 64px; height: 64px; }
.card span { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.15; }
.card.active { border-color: var(--accent); background: rgba(255,184,92,.1); }
.card:active { transform: scale(.97); }
.field { display: grid; gap: 2px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.field-label { display: flex; justify-content: space-between; font-size: 16px; }
.field-label output { font: 500 13px var(--font-data); color: var(--accent); }
.field.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-input { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--ink); font: 16px var(--font-ui); padding: 0 14px; margin-bottom: 10px; }
.search-list { display: grid; gap: 4px; }
.search-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border-radius: 10px; border: 0; background: rgba(255,255,255,.03); cursor: pointer; }
.search-item:active { background: rgba(255,255,255,.08); }
.search-item i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.search-item b { font-size: 15px; font-weight: 600; }
.search-item small { margin-left: auto; font-size: 12px; color: var(--muted); }
.tool-list { display: grid; gap: 8px; }
.tool-card { text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; }
.tool-card b { font-size: 17px; }
.tool-card small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tool-card.on { border-color: var(--accent); background: rgba(255,184,92,.08); }
.tool-card.on b { color: var(--accent); }
.settings-actions button[aria-pressed=true] { color: var(--cool); border-color: rgba(157,184,255,.55); }

@media (min-width: 760px) {
  .sheet { left: auto; right: var(--gut-r); top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: calc(var(--dock-h, 90px) + 6px); margin: 0; width: 380px; max-height: none; border: 1px solid var(--line); border-radius: 16px; padding-bottom: 16px; transform: translateX(16px); }
  .sheet.open { transform: none; }
  .scrim.soft { display: none !important; }
  .dock { justify-items: stretch; }
  .bar-main { width: min(720px, 100%); justify-self: center; }
}
#app.photo .addbar { display: none !important; }
/* The bottom bar stays usable while a panel is open; panels sit just above it. */
.dock { z-index: 5; }
.scrim { z-index: 4; }
.sheet { z-index: 6; }
@media (max-width: 759px) { .sheet { bottom: calc(var(--dock-h, 70px) - env(safe-area-inset-bottom, 0px) - 4px); max-height: calc(100dvh - var(--dock-h, 70px) - env(safe-area-inset-top, 0px) - 60px); border-radius: 20px; border-bottom: 1px solid var(--line); padding-bottom: 16px; } }
.dock .readout { visibility: visible; }
body:has(.sheet.open) .dock .readout, body:has(.sheet.open) .addbar { visibility: hidden; }
#sheet-scenarios { z-index: 7; }
@media (max-width: 430px) {
  .bar-main { gap: 2px; padding: 4px 5px; }
  .step { width: 24px; }
  .timebox { min-width: 62px; }
  .create { width: 40px; height: 40px; }
  .panel-btn { width: 40px; font-size: 10px; }
  .bar-main .play { width: 40px; height: 40px; }
  .addbar .addbar-text { font-size: 13px; }
  .laser-power { width: 80px; }
}
#app:has(#tray:not([hidden])) .toast, #app:has(#laserbar:not([hidden])) .toast { bottom: calc(var(--dock-h, 70px) + 62px); }
@media (max-width: 430px) { .photo-bar button { padding: 0 8px; } }

/* Settings → Show performance */
.perf {
  position: absolute; left: var(--gut-l); right: var(--gut-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  text-align: center; font: 500 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: #9fb4d8;
  text-shadow: 0 1px 2px #000; pointer-events: auto; cursor: pointer; z-index: 30;
}

.int-cut { width: 100%; max-width: 300px; height: auto; display: block; margin: 4px auto 2px; }
.int-layers { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; font-size: 12px; }
.int-layers li { display: grid; grid-template-columns: 12px 1fr; gap: 2px 8px; align-items: baseline; }
.int-layers i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); align-self: center; }
.int-layers b { font-weight: 600; }
.int-layers span { grid-column: 2; opacity: 0.75; }

/* Settings → Background music: the track list (tap a track to play it) */
.tracks { margin: 2px 0 8px; font-size: 13px; }
.tracks summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.tracks ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.tracks li button { width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 6px 8px; display: flex; justify-content: space-between; gap: 8px; cursor: pointer; }
.tracks li button:hover { background: rgba(255,255,255,.06); }
.tracks li.now button { color: var(--accent, #6cf); }
.tracks li.now button::after { content: 'playing'; font-size: 11px; opacity: .8; }

/* =====================================================================================================
   Black console (October 2026, from the user's Universe Sandbox screenshots): flat near-black surfaces,
   square corners, thin dividers, a full-width bottom bar, property rows with boxed values, icon tabs,
   a violet hairline accent. This layer overrides the shapes and colours above; layout logic is unchanged.
   ===================================================================================================== */
:root {
  --void: #000;
  --panel: rgba(18, 19, 21, 0.94);
  --panel-solid: #121315;
  --panel-raise: #1b1c1f;     /* buttons, hovered rows */
  --field: #0a0a0b;           /* boxed values */
  --line: #26282c;
  --line-strong: #383b41;
  --ink: #eceef1;
  --muted: #8e939b;
  --accent: #9b7bff;          /* violet hairlines, focus, selection */
  --accent-ink: #0d0a18;
  --amber: #ffb85c;           /* kept for warnings and the habitable-zone "mid" state */
  --cool: #9db8ff;
  --font-ui: "Barlow", "Saira Semi Condensed", "Segoe UI", system-ui, sans-serif;
  --radius: 0px;
}
body { font: 15px/1.35 var(--font-ui); }
svg { stroke-width: 1.6; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* No glass, no rounding: every control is a flat cell. */
.pill, .icon-btn, .tool, .toggle, .chip, .info-actions button, .settings-actions button {
  border-radius: 0; background: var(--panel); border-color: var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pill:active, .icon-btn:active, .tool:active, .toggle:active, .chip:active, .card:active { transform: none; background: var(--panel-raise); }
.icon-btn:hover, .info-actions button:hover, .settings-actions button:hover { background: var(--panel-raise); border-color: var(--line-strong); }

/* Top bar: bare icons in square cells; the lock chips become a toolbar strip. */
.topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
.topbar .icon-btn { width: 40px; height: 40px; background: rgba(12, 13, 15, .72); border-color: transparent; }
.top-right { gap: 2px; }
.clock-name { font-weight: 600; font-size: 15px; letter-spacing: .14em; }
.clock-year { font-size: 12px; }
.limit { border-radius: 0; color: var(--amber); background: rgba(255,184,92,.08); border-color: rgba(255,184,92,.3); }
.chips { gap: 0; background: rgba(12, 13, 15, .86); border: 1px solid var(--line); margin-top: 6px; justify-self: center; width: max-content; max-width: 100%; }
.chips:not(:has(> :not([hidden]))) { display: none; }
.lock-chip, .lock-chip.surf { margin: 0; height: 34px; border-radius: 0; border: 0; border-right: 1px solid var(--line); background: none; color: var(--ink); padding: 0 12px 0 10px; font-size: 13px; }
.lock-chip:last-child { border-right: 0; }
.lock-chip:hover { background: var(--panel-raise); }
.lock-chip b { color: var(--accent); font-weight: 600; }
.lock-chip.surf { color: var(--muted); }
.lock-chip.surf.on { background: rgba(155,123,255,.16); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* Bottom bar: full width, flush to the bottom edge, a violet hairline on top. */
.dock { padding-bottom: 0; gap: 6px; }
.dock > .bar-main { margin: 0; }
.bar-main { width: 100% !important; border-radius: 0; border: 0; border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(155,123,255,.55);
  background: var(--panel-solid); -webkit-backdrop-filter: none; backdrop-filter: none; gap: 4px;
  padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 6px) max(10px, env(safe-area-inset-left, 0px)); }
.bar-main .play { width: 42px; height: 42px; border-radius: 50%; background: #2a2c31; color: var(--ink); border: 0; }
.bar-main .play:hover { background: #34363c; }
.step { border-radius: 0; color: var(--ink); width: 34px; }
.step:hover { background: var(--panel-raise); }
.timebox { text-align: left; min-width: 82px; padding: 0 6px; }
.timebox .clock-time { font-size: 13px; }
#speed-label { text-align: left; }
.create { border-radius: 0; width: 52px; height: 48px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: #1d1e22; color: var(--ink); }
.create:hover { background: #26282d; }
.create svg { width: 24px; height: 24px; }
.create.on { background: rgba(155,123,255,.22); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.panel-btn { border-radius: 0; color: var(--ink); width: 56px; height: 48px; font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.panel-btn svg { width: 21px; height: 21px; }
.panel-btn:hover { background: var(--panel-raise); }
.panel-btn.on { background: rgba(155,123,255,.14); box-shadow: inset 0 -2px 0 var(--accent); }
.readout { padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); }
@media (max-width: 430px) { .panel-btn { width: 44px; } .create { width: 44px; } .timebox { min-width: 66px; } .step { width: 26px; } }
.addbar { border-radius: 0; background: var(--panel-solid); border-color: var(--line-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
.addbar-text b { color: var(--accent); }
.addbar.paint, .addbar.laser { border-color: var(--line-strong); }

/* Object panel: docked full height on the right on wide screens; a flat card on phones. */
.info { border-radius: 0; background: var(--panel-solid); border-color: var(--line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 0; }
.info-head { padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(155,123,255,.55); }
.info h2 { font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.info-head p { color: var(--muted); font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 13px; }
.hab.mid { color: var(--amber); }
.book-btn { border-radius: 0; height: 34px; border: 1px solid var(--line-strong); background: var(--panel-raise); color: var(--ink); font-weight: 500; }
.book-btn:hover { border-color: var(--accent); }
.info .icon-btn.small { background: none; border-color: transparent; }
.info-tabs { margin: 0; gap: 0; border-bottom: 1px solid var(--line); padding: 0 4px; }
.info-tabs button { display: grid; justify-items: center; gap: 3px; padding: 9px 6px 7px; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; border-bottom: 2px solid transparent; min-width: 64px; }
.info-tabs button svg { width: 20px; height: 20px; }
.info-tabs button:hover { color: var(--ink); background: var(--panel-raise); }
.info-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.info-body { padding: 10px 14px 14px; margin: 0; }
/* Property rows: label left, boxed value right. */
.stats { grid-template-columns: 1fr; gap: 0; }
.stats div { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 0; padding: 4px 0; }
.stats dt { font-size: 13.5px; letter-spacing: .01em; text-transform: none; color: #c4c8ce; flex: 1; min-width: 0; }
.stats dd { flex: 0 1 56%; text-align: right; background: var(--field); border: 1px solid var(--line); padding: 5px 9px; font-size: 13px; color: var(--ink); }
.pane-label, .sheet-sub, .views legend { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.info-actions { gap: 4px; }
.info-actions button { border-radius: 0; height: 36px; font-weight: 500; background: var(--panel-raise); }
.info-actions button.on { color: var(--ink); border-color: var(--accent); background: rgba(155,123,255,.14); }
.info-more { border-top-color: var(--line); }
.more-kicker { color: var(--accent); }
.more-pages button { border-radius: 0; border-color: var(--line-strong); background: var(--panel-raise); color: var(--ink); font-weight: 500; }
.info-extra, .info-extra.zones, .info-extra.grav, .info-extra.stand { border-radius: 0; font-weight: 500; }
.map, .bar, .legend i { border-radius: 0; }
.seg { border-radius: 0; background: var(--field); }
.seg button { border-radius: 0; }
.seg button.on { background: var(--ink); color: #000; }
@media (min-width: 900px) {
  .info { left: auto; right: 0; top: 0; width: 380px; height: auto; max-height: none;
    bottom: calc(var(--dock-h, 90px) - 20px); border-width: 0 0 0 1px; }
  .info-head { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  /* Panels open on the left then, so the two sit side by side like the screenshots. */
  .sheet { right: auto !important; left: 0 !important; top: 0 !important; bottom: calc(var(--dock-h, 90px) - 20px) !important; border-width: 0 1px 0 0 !important; transform: translateX(-16px) !important; }
  .sheet.open { transform: none !important; }
  body:has(#info:not([hidden])) .top-right { margin-right: 380px; }
}

/* Panels (scenarios, create, sim, view, tools, settings, find). */
.sheet { border-radius: 0 !important; background: var(--panel-solid); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(155,123,255,.55); }
.sheet-head { background: var(--panel-solid); border-bottom: 1px solid var(--line); margin: 0 calc(-1 * var(--gut-r)) 8px calc(-1 * var(--gut-l)); padding: 12px var(--gut-r) 10px var(--gut-l); }
.sheet h2 { font-size: 17px; font-weight: 600; letter-spacing: .1em; }
.sheet .icon-btn.small, .sheet-head .icon-btn { background: none; border-color: transparent; }
.scenario, .tool-card, .card, .search-item, .view-opt, .chal { border-radius: 0; background: var(--panel-raise); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.scenario:hover, .tool-card:hover, .card:hover, .search-item:hover, .view-opt:hover { border-color: var(--line-strong); background: #212226; }
.scenario.current, .tool-card.on, .card.active, .view-opt:has(input:checked) { border-color: var(--accent); background: rgba(155,123,255,.1); }
.scenario.current .scn-title, .tool-card.on b { color: var(--ink); }
.scn-title { font-weight: 600; }
.challenge .scn-meta, .chal-tag { color: var(--accent); }
.chal { border-color: var(--line-strong); }
.chal-answer input { border-radius: 0; background: var(--field); }
.chal-answer button, .chal-btns button, .sb-use, .cat-tabs button, .sb-types button, .surface-head button, .surface-where button, .photo-bar button { border-radius: 0; }
.chal-answer button, .chal-btns button { border-color: var(--line-strong); background: var(--panel-raise); color: var(--ink); }
.cat-tabs { gap: 0; border-bottom: 1px solid var(--line); padding-bottom: 0; margin-bottom: 10px; }
.cat-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; height: 36px; }
.cat-tabs button.on { color: var(--ink); background: none; border-bottom-color: var(--ink); }
.sb-types button { background: var(--panel-raise); }
.sb-types button.on { border-color: var(--accent); background: rgba(155,123,255,.12); }
.sb-use { border-color: var(--accent); background: rgba(155,123,255,.14); color: var(--ink); font-weight: 600; }
.field-label output { color: var(--ink); background: var(--field); border: 1px solid var(--line); padding: 2px 8px; }
.search-input { border-radius: 0; background: var(--field); border-color: var(--line-strong); }
.settings-actions button { border-radius: 0; background: var(--panel-raise); font-weight: 500; }
.settings-actions button[aria-pressed=true] { color: var(--ink); border-color: var(--accent); }
/* Switches: a slim track, as in the screenshots. */
.switch { min-height: 44px; }
.switch span { font-size: 15px; color: #d3d6db; }
.switch input { width: 38px; height: 20px; background: #2d2f34; }
.switch input::after { top: 3px; left: 3px; width: 14px; height: 14px; background: #9aa0a8; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(18px); background: #fff; }
.view-opt input { accent-color: var(--accent); }
/* Sliders: thin track, small square-ish thumb. */
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 0; background: #3a3d43; }
input[type=range]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: #d8dbe0; border: 0; box-shadow: none; }
input[type=range]::-moz-range-track { height: 3px; border-radius: 0; background: #3a3d43; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #d8dbe0; border: 0; }

/* Notices: a dark bar at the lower right, like "Low Memory Detected". */
.toast { border-radius: 0; background: var(--panel-solid); border-color: var(--line-strong); -webkit-backdrop-filter: none; backdrop-filter: none; text-align: left; padding: 11px 16px; box-shadow: inset 2px 0 0 var(--accent); }
.toast.big { border-color: var(--line-strong); color: var(--ink); box-shadow: inset 2px 0 0 var(--amber); }
@media (min-width: 900px) {
  .toast { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); transform: translate(0, -8px); }
  .toast.show { transform: none; }
  body:has(#info:not([hidden])) .toast { right: 396px; }
}
.hint { border-radius: 0; background: rgba(10, 10, 12, .7); }
.surface-bar { border-radius: 0; background: var(--panel-solid); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(155,123,255,.55); }
.surface-where button.on { border-color: var(--accent); color: var(--ink); background: rgba(155,123,255,.14); }
.photo-bar { border-radius: 0; }
.tracks li button:hover { background: var(--panel-raise); }
.tracks li.now button { color: var(--accent); }
/* The book keeps its reading look, squared off to match. */
.book-tabs, .book-tabs button { border-radius: 0; }
@media (max-width: 759px) { .sheet { bottom: calc(var(--dock-h, 70px) - 20px) !important; border-width: 1px 0 0 !important; } }
.name-edit { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--accent); border-radius: 0; padding: 2px 6px; width: min(100%, 15em); }
.info-head h2:has(.name-edit)::after { display: none; }
.icon-btn.rename { width: 32px; height: 34px; }
.icon-btn.rename svg { width: 16px; height: 16px; }

/* Sky events (js/events.js): the card for a shower going on now, and the Simulation panel's list */
.event-card { position: absolute; z-index: 5; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(var(--dock-h, 90px) + 6px);
  width: min(380px, calc(100% - 24px)); display: flex; gap: 10px; align-items: start; padding: 12px 12px 12px 14px;
  background: var(--panel-solid); border: 1px solid var(--line-strong); box-shadow: inset 2px 0 0 var(--accent); }
.event-card b { font-weight: 600; font-size: 15px; }
.event-card p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.ev-btns { display: flex; gap: 4px; align-items: center; flex: none; }
.ev-btns #ev-watch { height: 34px; padding: 0 12px; border: 1px solid var(--accent); background: rgba(155,123,255,.14); color: var(--ink); font: 600 13px var(--font-ui); cursor: pointer; white-space: nowrap; }
.ev-btns .icon-btn { background: none; border-color: transparent; }
#app.photo .event-card, body:has(.sheet.open) .event-card { display: none; }
.sky-events { list-style: none; margin: 0 0 10px; padding: 0; display: grid; }
.sky-events li { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sky-date { font: 500 12px var(--font-data); color: var(--muted); }
.sky-events button { height: 30px; padding: 0 10px; border: 1px solid var(--accent); background: rgba(155,123,255,.12); color: var(--ink); font: 600 12px var(--font-ui); cursor: pointer; }
@media (max-width: 430px) { .sky-events li { grid-template-columns: 74px 1fr auto; } }

/* Scenarios panel: tabs (scenarios | challenges) and kinds of scenario */
.scn-tabs { margin-top: 2px; }
.sub-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 10px; }
.sub-tabs button { height: 30px; padding: 0 12px; border: 1px solid var(--line); background: var(--panel-raise); color: var(--muted); font: 600 12.5px var(--font-ui); cursor: pointer; }
.sub-tabs button.on { color: var(--ink); border-color: var(--accent); background: rgba(155,123,255,.12); }