/* Born Rule: one dark instrument-panel world. The playfield is the hero and always fits
   the viewport; a rail carries goal / physics / probabilities / setup; a transport bar
   under the field merges the clock with the P_T(t) timeline. Gold is reserved for the
   act of observation (Observe, stars), green for targets, red for mines, blue for physics. */
:root {
  color-scheme: dark;
  --void: #07090f;  --ink: #0e1220;  --bar: #0b0e19;  --rail: #0c1020;
  --panel: #151a2b; --line: #262d45; --fg: #e7e9f2;   --dim: #9097b2; --faint: #5c6383;
  --target: #4ff59a; --mine: #ff5d6c; --obs: #ffc44d; --phys: #8fb4ff; --warn: #e8a33d; --accent: #6ea8ff;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --topbar: 52px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--fg); font: 14.5px/1.5 var(--body); }
[hidden] { display: none !important; }
p { margin: 0 0 6px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--phys); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: default; }
kbd { font: 10.5px var(--mono); color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; background: #0006; }
select { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; }
sub { font-size: .72em; }
.note { color: var(--dim); font-size: 12.5px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.screen { min-height: 100%; }

/* ------------------------------------------------------------ top bar */
.topbar { height: var(--topbar); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bar); }
.topbar .sp { flex: 1; }
.logo { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: 800 19px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.psi { width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: conic-gradient(from 90deg, #ff4d4d, #ffd84d, #4dff7a, #4de1ff, #6a4dff, #ff4dd8, #ff4d4d);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 72%); mask: radial-gradient(circle, #000 35%, transparent 72%); }
.crumb { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb strong { color: var(--fg); font-weight: 600; }
.ghostbtn { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; color: var(--dim); font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ghostbtn:hover:not(:disabled) { color: var(--fg); border-color: #3a4366; }
.ghostbtn.toggle { cursor: pointer; } .ghostbtn.toggle input { margin: 0; accent-color: var(--phys); }
.picker { display: flex; gap: 4px; }
#btnMap { color: var(--fg); font-variant-numeric: tabular-nums; } #btnMap .st { color: var(--obs); }
.starTotal { color: var(--obs); font: 13px var(--mono); }
.stepdots { display: flex; gap: 5px; }
.stepdots i { width: 20px; height: 4px; border-radius: 2px; background: var(--line); }
.stepdots i.done { background: var(--target); } .stepdots i.cur { background: var(--fg); }
.popwrap { position: relative; }
.pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; display: grid; gap: 9px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px #000a; font-size: 13.5px; }
.pop label { display: flex; align-items: center; gap: 8px; } .pop input { accent-color: var(--phys); }

/* ------------------------------------------------------------ play layout */
#gameScreen { height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.play { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 350px; }
.stagecol { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
.stage { container-type: size; min-height: 0; display: grid; place-items: center; padding: 12px; }
.field { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; }
#view { width: 100%; height: 100%; display: block; border-radius: 6px; background: var(--void); touch-action: none; cursor: crosshair; }
.hud { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; max-width: calc(100% - 190px); }
.chip { background: #000b; border: 1px solid #ffffff1a; border-radius: 99px; padding: 2px 10px; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clock { color: var(--fg); font-family: var(--mono); font-variant-numeric: tabular-nums; flex: none; }
.viewtoggle { position: absolute; top: 10px; right: 10px; display: flex; background: #000b; border-radius: 8px; border: 1px solid #ffffff1a; overflow: hidden; }
.viewtoggle button { background: none; border: 0; padding: 3px 9px; font-size: 12.5px; color: var(--dim); }
.viewtoggle button.on { background: #ffffff22; color: var(--fg); }
.worldtoggle { top: 44px; }
.worldtoggle button.on { background: #4ff59a33; }
.legend { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; background: #000b; border-radius: 10px; padding: 5px 10px 5px 5px; font-size: 11px; color: var(--dim); line-height: 1.3; pointer-events: none; }
.legend canvas { width: 32px; height: 32px; }

.transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px 12px; border-top: 1px solid var(--line); background: var(--bar); }
.tgroup { display: flex; gap: 6px; }
.tbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; }
.tbtn:hover:not(:disabled) { border-color: #3a4366; }
#playIcon { width: 1.1em; text-align: center; }
.tbtn.observe { background: var(--obs); color: #221800; border-color: var(--obs); font: 700 17px var(--display); padding: 0 20px; }
.tbtn.observe kbd { color: #221800aa; border-color: #22180044; background: #fff3; }
.timeline { position: relative; height: 56px; min-width: 0; }
.timeline canvas { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ rail */
.rail { overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--rail); min-height: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.eyebrow { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 6px; }
.objective h2 { font: 700 21px/1.15 var(--display); margin: 0 0 6px; text-wrap: balance; }
.objective p:last-child { margin: 0; color: var(--dim); font-size: 14px; }
.physics { border-color: #2f4170; background: linear-gradient(#18213d, var(--panel)); }
.experiment { font-style: italic; color: var(--dim); margin: -4px 0 8px; font-size: 13px; }
.experiment::before { content: "Experiment: "; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--faint); }
.physics .eyebrow { color: var(--phys); }
.physics p { font-size: 14.5px; margin-bottom: 8px; }
.physics .eq { font: 14px var(--mono); color: var(--phys); display: block; margin: 0 0 8px; }
.physics .eq:empty { display: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--phys); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.prob { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.ring { position: relative; width: 92px; height: 92px; }
.ring canvas { width: 100%; height: 100%; }
.ring .v { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .v b { font: 700 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.ring .v small { display: block; font: 10px var(--mono); color: var(--dim); margin-top: 4px; }
.bars { display: grid; gap: 7px; font-size: 12.5px; }
.bars > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; color: var(--dim); }
.bars span { font-family: var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.bars em { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #0008; position: relative; overflow: hidden; }
.bars em i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c); }
.readout { margin: 10px 0 0; font: 11.5px/1.55 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.readout b { color: var(--fg); font-weight: 600; }
.slider { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; gap: 8px; align-items: center; margin: 3px 0; font-size: 13px; color: var(--dim); }
.slider input { width: 100%; accent-color: var(--phys); }
.slider output { font: 12px var(--mono); color: var(--fg); text-align: right; }
.slider.fixed { opacity: .45; }
#inventory, #itemPanel { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
#itemPanel { display: block; }
#inventory h3, #itemPanel h3 { width: 100%; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 4px 0 2px; }
#inventory button, #itemPanel > button, #actions button { background: none; border: 1px dashed #4a5274; border-radius: 8px; padding: 5px 10px; font-size: 13px; }
#actions button { border-style: solid; background: var(--ink); }
#inventory button:hover:not(:disabled), #itemPanel > button:hover { border-color: var(--phys); }

#ledgerRows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
#ledgerRows button { display: grid; grid-template-columns: minmax(0, 1fr) 80px 46px; gap: 8px; align-items: center; text-align: left; padding: 4px 8px; font-size: 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
#ledgerRows button.cur { border-color: var(--accent); background: #1d2a44; }
#ledgerRows .path { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ledgerRows .w { position: relative; height: 8px; background: #0008; border-radius: 4px; overflow: hidden; } #ledgerRows .w i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
#ledgerRows .p { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ result card */
#banner { position: absolute; z-index: 8; left: 14px; top: 46px; width: min(430px, calc(100% - 28px)); max-height: calc(100% - 60px); overflow: auto;
  background: #0b0e19f2; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: 0 20px 60px #000c; }
#banner.win { border-color: var(--target); } #banner.lose { border-color: var(--mine); } #banner.pending { border-color: var(--accent); }
#banner h2 { font: 800 28px/1.1 var(--display); margin: 0; }
#banner.win h2 { color: var(--target); } #banner.lose h2 { color: var(--mine); }
#banner .stars { font-size: 24px; color: var(--obs); letter-spacing: 3px; margin: 2px 0 6px; }
#banner p { color: #c8cce0; font-size: 13.5px; }
#banner .row { margin-top: 12px; }
#banner .row button { height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; }
#banner .row button.primary { background: var(--obs); border-color: var(--obs); color: #221800; }
#banner .copy { background: none; border: 0; padding: 0; color: var(--faint); font-size: 12px; text-decoration: underline; margin-top: 8px; }
.dots { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; margin: 8px 0; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: #343b58; }
.dots i.h { background: var(--target); } .dots i.me { box-shadow: 0 0 0 2px var(--obs); }

/* ------------------------------------------------------------ drawer and sheet */
.drawer { position: absolute; z-index: 20; top: var(--topbar); right: 0; bottom: 0; width: min(560px, 100%); background: #10142a; border-left: 1px solid #2f4170; box-shadow: -30px 0 60px #0009; overflow: auto; padding: 22px 26px 30px; }
.drawer .eyebrow { color: var(--phys); }
.drawer h2 { font: 800 26px/1.1 var(--display); margin: 0 0 10px; letter-spacing: -.01em; text-wrap: balance; padding-right: 80px; }
.drawerPoint { color: var(--fg); font-size: 15px; }
.drawer .tabs { display: flex; gap: 4px; margin: 14px 0 16px; border-bottom: 1px solid var(--line); }
.drawer .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; color: var(--dim); font-size: 13.5px; }
.drawer .tabs button.on { color: var(--fg); border-color: var(--phys); }
#drawerBody p { color: #cfd3e6; margin: 0 0 12px; max-width: 64ch; }
#drawerBody .eqblk { font: 14.5px/1.7 var(--mono); background: #0007; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 4px 0 14px; color: var(--phys); overflow-x: auto; white-space: pre-wrap; }
.close { position: absolute; top: 14px; right: 16px; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 2px 10px; color: var(--dim); font-size: 13px; }
.sheet { position: absolute; inset: var(--topbar) 0 0 0; z-index: 25; background: #04060ccc; display: grid; place-items: start center; overflow: auto; padding: 24px 16px; }
.sheetInner { position: relative; width: min(720px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; }
.sheetInner h2 { font: 700 19px var(--display); margin: 8px 0 10px; }
.sheetInner p { color: #c8cce0; font-size: 13.5px; max-width: 70ch; }
.keys { border-collapse: collapse; width: 100%; font-size: 13.5px; margin-bottom: 8px; }
.keys th { text-align: left; font-weight: 600; padding: 5px 14px 5px 0; white-space: nowrap; vertical-align: top; color: var(--fg); }
.keys td { padding: 5px 0; color: #c8cce0; border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------ tutorial coach marks */
#coachLayer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 2px var(--obs), 0 0 0 9999px #04060c99; transition: all .25s ease; }
#coachLayer.act .spot { box-shadow: 0 0 0 2px var(--obs), 0 0 0 9999px #04060c40; }
.coach { position: fixed; width: min(340px, calc(100vw - 24px)); background: #fdf8ea; color: #1d1b16; border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 16px 40px #000a; pointer-events: auto; transition: left .25s ease, top .25s ease; }
.coach .eyebrow { color: #8a6a10; }
.coach h3 { font: 700 19px/1.2 var(--display); margin: 0 0 6px; }
.coach p { font-size: 14px; margin: 0 0 10px; }
.coach .phys { border-left: 3px solid #3e63c9; padding-left: 9px; color: #2b3a66; font-size: 13.5px; }
.coach .phys:empty { display: none; }
.coach footer { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #6b6450; }
.coach footer .sp { flex: 1; }
.coach .go { background: #1d1b16; color: #fdf8ea; border: 0; border-radius: 8px; padding: 6px 14px; font-weight: 600; }
.coach .wait { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #1d1b16; }
.coach .wait:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d9a400; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ------------------------------------------------------------ title */
#titleScreen { position: relative; height: 100%; min-height: 560px; overflow: hidden; background: #000; display: flex; align-items: center; padding: 40px clamp(20px, 6vw, 90px); }
#titleField { position: absolute; inset: 0; width: 100%; height: 100%; }
.titleInner { position: relative; max-width: 560px; }
#titleScreen h1 { font: 800 clamp(58px, 9vw, 124px)/.9 var(--display); letter-spacing: -.035em; margin: 0 0 20px; }
#titleScreen h1 span { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.lede { font-size: 18px; max-width: 34ch; color: #c8cce0; margin: 0 0 22px; }
.born { font: 15px var(--mono); color: var(--obs); margin: 0 0 26px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.big { height: 50px; padding: 0 22px; border-radius: 12px; font: 700 17px var(--display); border: 1px solid var(--line); background: var(--panel); }
.big.prime { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.big:hover { border-color: var(--fg); }
#titleScreen .foot .ver { margin-left: 10px; font-family: "JetBrains Mono", monospace; opacity: .8; }
#titleScreen .foot { position: absolute; left: clamp(20px, 6vw, 90px); bottom: 18px; font-size: 12px; color: var(--faint); margin: 0; }

/* ------------------------------------------------------------ chapter map */
#mapScreen { display: flex; flex-direction: column; }
.map { padding: 28px clamp(16px, 4vw, 48px) 40px; max-width: 1240px; width: 100%; margin: 0 auto; }
.map h2 { font: 800 34px var(--display); margin: 0 0 4px; letter-spacing: -.02em; }
.mapLede { color: var(--dim); margin: 0 0 22px; max-width: 70ch; }
.chapters { display: grid; }
.chap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.chap h3 { font: 700 19px/1.2 var(--display); margin: 2px 0 4px; }
.chap .idea { font-size: 13px; color: var(--phys); margin: 0; }
.chap .n { font: 600 11px var(--mono); color: var(--faint); letter-spacing: .1em; }
.lvls { display: flex; gap: 10px; flex-wrap: wrap; }
.lv { width: 158px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; text-align: left; padding: 0; }
.lv:hover { border-color: #4a5274; }
.lv .th { width: 100%; aspect-ratio: 1; display: block; background: var(--void); }
.lv div { padding: 7px 10px 9px; }
.lv b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.lv em { display: block; font-style: italic; font-size: 11.5px; line-height: 1.3; color: var(--dim); margin: 1px 0 3px; }
.lv span { font-size: 12px; color: var(--obs); letter-spacing: 1px; }
.lv.cur { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.lv .tag { color: #120d24; background: var(--obs); font: 600 9.5px var(--mono); padding: 1px 5px; border-radius: 4px; letter-spacing: .05em; margin-left: 4px; vertical-align: 1px; }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 980px) {
  .play { grid-template-columns: minmax(0, 1fr) 300px; }
  .crumb { display: none; }
}
@media (max-width: 760px) {
  #gameScreen { height: auto; min-height: 100%; overflow: visible; }
  .topbar { flex-wrap: wrap; height: auto; padding-block: 8px; row-gap: 6px; }
  .topbar .sp { display: none; }
  .picker { margin-left: auto; }
  .play { grid-template-columns: minmax(0, 1fr); }
  .stagecol { border-right: 0; }
  .stage { container-type: inline-size; padding: 8px; }
  .field { width: 100cqw; }
  .transport { grid-template-columns: auto 1fr; }
  .transport .timeline { grid-column: 1 / -1; order: -1; }
  .transport .tgroup:last-child { justify-self: end; }
  .rail { overflow: visible; }
  .drawer, .sheet { position: fixed; top: 0; }
  .sheet { inset: 0; }
  .chap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lv { width: calc(50% - 5px); }
  .hud { max-width: calc(100% - 20px); top: auto; bottom: 10px; }
  .legend { display: none; }
}
@media (prefers-reduced-motion: reduce) { .coach .wait::before { animation: none; } .spot, .coach { transition: none; } }