:root {
  --bg-center: #1a2334;
  --bg-edge: #090d16;
  --panel: rgba(16, 22, 34, 0.72);
  --panel-line: rgba(160, 190, 230, 0.16);
  --ink: #dfe6f0;
  --ink-dim: #93a1b5;
  --accent: #e8c26a;
  --excite: #3fd07f;
  --inhibit: #ff5a5a;
  --lesion: #777777;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(120% 90% at 40% 45%, var(--bg-center) 0%, var(--bg-edge) 70%);
  background-color: var(--bg-edge);
  color: var(--ink);
  font: 14px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
}

#gl { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; display: block; pointer-events: none; z-index: 0; }

#app {
  position: relative; z-index: 1; height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 10px 12px 8px;
}

/* ---------- top bar ---------- */
#topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
#title { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; margin: 0; white-space: nowrap; }
#modes { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 3px; }
#modes button { border-radius: 999px; }
#globals { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#globals .group { display: inline-flex; align-items: center; gap: 6px; }

button, select {
  font: inherit; color: var(--ink); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-line); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
button:hover { background: rgba(255, 255, 255, 0.12); }
button[aria-pressed="true"], button[aria-selected="true"] { background: rgba(232, 194, 106, 0.18); border-color: rgba(232, 194, 106, 0.55); color: #fff; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg { display: inline-flex; gap: 2px; }
.seg button { padding: 5px 8px; }

/* ---------- stage ---------- */
/* Caption, labyrinth view and side panels side by side. The caption has its own column (a strip under the
   view on phones), so it never covers the labyrinth and its length never changes the view's size. */
#stage { display: grid; grid-template: minmax(0, 1fr) / clamp(180px, 16%, 250px) minmax(0, 1fr) minmax(300px, min(34%, 420px)); gap: 10px; min-height: 0; }
.view { position: relative; border-radius: var(--radius); border: 1px solid var(--panel-line); min-height: 0; overflow: hidden; touch-action: none; }
#view-lab { grid-area: 1 / 2; cursor: grab; }
#view-lab:active { cursor: grabbing; }
#side { grid-area: 1 / 3; display: grid; grid-template-rows: minmax(140px, 1fr) auto auto; gap: 10px; min-height: 0; overflow-y: auto; }
.side-tabs { display: none; }
.panel { position: relative; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 8px 10px; }
#view-head { background: transparent; padding: 0; cursor: grab; }

.compass { position: absolute; top: 10px; right: 10px; width: 96px; height: 96px; z-index: 2; cursor: pointer; }
.compass .cl { position: absolute; transform: translate(-50%, -50%); font: 600 12px var(--font); color: var(--ink); text-shadow: 0 0 4px #000; pointer-events: none; }
.caption {
  grid-area: 1 / 1; align-self: start; max-height: 100%; overflow: auto;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 8px 12px;
  font-size: 13.5px; line-height: 1.45;
}
.caption:empty { display: none; }
.caption b { color: #fff; }
.hint { position: absolute; left: 12px; top: 10px; z-index: 2; color: var(--ink-dim); font-size: 12px; pointer-events: none; }
.help { position: absolute; top: 6px; right: 6px; z-index: 4; width: 20px; height: 20px; padding: 0; border-radius: 50%; font: 600 12px/18px var(--font); text-align: center; color: var(--ink); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); opacity: 0.5; }
.help:hover, .help:focus-visible, .help[aria-expanded="true"] { opacity: 1; }
.help.corner-bottom { top: auto; bottom: 8px; right: 8px; }
.help.inline { position: static; margin-left: auto; }
.help-pop { position: fixed; z-index: 50; padding: 10px 12px; border-radius: 10px; background: #111823; border: 1px solid var(--panel-line); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 1.45; color: var(--ink); max-height: 60vh; overflow: auto; }
.help-pop p { margin: 0 0 6px; }
.help-pop p:last-child { margin-bottom: 0; }
.badge { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; padding: 2px 10px; border-radius: 10px; font-size: 12px; color: #1a1206; background: #ffb347; pointer-events: none; }
.lab-tools { position: absolute; left: 10px; top: 8px; z-index: 3; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 150px); }
.lab-tools .hint { position: static; }
#lab-drag { display: flex; gap: 6px; align-items: center; color: var(--ink-dim); font-size: 12px; }
#lab-drag .seg button { padding: 2px 8px; font-size: 12px; }

#eyes-panel { display: grid; gap: 6px; }
#eyes { width: 100%; height: 92px; display: block; }
#trace { width: 100%; height: 120px; display: block; }
.nyst-label { font-size: 13px; color: #fff; min-height: 18px; }
.nyst-label small { color: var(--ink-dim); }

#readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; font-size: 12.5px; }
.rate { display: grid; grid-template-columns: 76px 1fr 54px; align-items: center; gap: 6px; }
.rate .bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rate .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-dim); border-radius: 4px; }
.rate .bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: 0.6; }
.rate.up .bar i { background: var(--excite); }
.rate.down .bar i { background: var(--inhibit); }
.rate.lesioned { color: var(--lesion); }
.label .sign:not(:empty) { margin-left: 5px; font-weight: 800; font-size: 1.15em; line-height: 1; }
.label .sign.up { color: var(--excite); }
.label .sign.down { color: var(--inhibit); }
.label .sign.lesioned { color: var(--lesion); }
.rate .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- controls ---------- */
#controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 8px 10px; min-width: 0; }
#controls .group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#controls .group > span { color: var(--ink-dim); font-size: 12px; margin-right: 2px; }

.credit-short { position: fixed; right: 12px; bottom: 2px; z-index: 3; font-size: 10.5px; color: var(--ink-dim); opacity: 0.8; pointer-events: none; }

/* ---------- labels ---------- */
.labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.label { font-size: 11.5px; color: var(--ink); background: rgba(8, 12, 20, 0.55); border: 1px solid var(--panel-line); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }

/* ---------- sheets ---------- */
.sheet { position: fixed; z-index: 10; background: #0f1522; color: var(--ink); border: 1px solid var(--panel-line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
#layers-panel { right: 14px; top: 56px; width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 80px); overflow: auto; padding: 12px; }
dialog.sheet { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 60px); overflow: auto; padding: 18px 22px; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
.sheet h2 { font-size: 16px; margin: 0 0 8px; }
.sheet h3 { font-size: 13px; margin: 16px 0 6px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.sheet p, .sheet li { color: var(--ink); font-size: 13.5px; }
.layer-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--panel-line); }
.layer-row input[type=range] { grid-column: 1 / -1; width: 100%; }

.fatal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: var(--bg-edge); }
.fatal > div { max-width: 560px; background: #111827; border: 1px solid var(--panel-line); border-radius: 14px; padding: 22px 24px; }
.fatal code { background: rgba(255, 255, 255, 0.08); padding: 2px 6px; border-radius: 6px; }
.fps { position: fixed; left: 12px; bottom: 4px; z-index: 5; font: 11px ui-monospace, monospace; color: var(--ink-dim); }

/* ---------- narrower and shorter screens ---------- */
@media (max-width: 1100px) {
  #globals .group > span:first-child { display: none; }
}
/* Short screens (e.g. an embedded iframe) and phones: one side panel at a time. */
@media (max-height: 560px), (max-width: 768px) {
  #side { grid-template-rows: auto minmax(0, 1fr); }
  .side-tabs { display: flex; gap: 4px; }
  #side .panel[data-tab] { display: none; }
  #side .panel[data-tab].active { display: grid; }
  #view-head.active { display: block !important; }
  #eyes { height: 74px; }
  #trace { height: 96px; }
}
@media (max-height: 560px) and (min-width: 769px) {
  #app { gap: 6px; padding: 6px 8px; }
  #title { font-size: 14px; }
  /* The view is small here, so it drops the hint (as on phones; the "?" note says the same) and uses the
     smaller compass. */
  .caption { font-size: 12.5px; }
  .hint { display: none; }
  .compass { width: 76px; height: 76px; }
  #controls { padding: 5px 8px; gap: 6px 10px; }
  button, select { padding: 4px 8px; }
}
@media (max-width: 768px) {
  #app { padding: 6px; gap: 6px; grid-template-rows: auto minmax(0, 1fr) auto; }
  #title { font-size: 14px; }
  /* The caption is a strip under the view, of fixed height (about 3–5 lines, scrolling beyond), so the view
     keeps one size while the captions change. */
  #stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.5fr) auto minmax(0, 1fr); gap: 6px; }
  #view-lab { grid-area: 1 / 1; }
  .caption { grid-area: 2 / 1; align-self: stretch; max-height: none; padding: 6px 8px; font-size: 12px; height: calc(4 * 1.45em + 14px); height: clamp(calc(3 * 1.45em + 14px), 12dvh, calc(5 * 1.45em + 14px)); }
  .caption:empty { display: block; }
  #side { grid-area: 3 / 1; }
  #readout { grid-template-columns: 1fr; }
  .compass { width: 76px; height: 76px; }
  #controls { max-height: 30vh; overflow-y: auto; padding: 6px; gap: 6px 10px; }
  button, select { font-size: 12px; padding: 4px 7px; }
  #modes button { padding: 4px 9px; }
  #topbar { gap: 6px; }
  #globals { gap: 4px; margin-left: 0; }
  #globals .group > span:first-child { display: none; }
  #controls .group > span:first-child { font-size: 11px; }
  .hint { display: none; }
}
/* A small phone held sideways (or a small, wide iframe): a strip would leave the view almost no height, so
   the caption stays a column beside the view, next to a narrower side column. */
@media (max-width: 768px) and (max-height: 560px) and (orientation: landscape) {
  #stage { grid-template: minmax(0, 1fr) / 180px minmax(0, 1fr) minmax(200px, 34%); }
  #view-lab { grid-area: 1 / 2; }
  .caption { grid-area: 1 / 1; align-self: start; max-height: 100%; height: auto; }
  .caption:empty { display: none; }
  #side { grid-area: 1 / 3; }
}