/* UTXO Timelapse Landscape: app shell. Tokens follow site/styles.css. */
:root {
  --bg: #080b0e;
  --panel: #10171b;
  --ink: #edece4;
  --muted: #a1adae;
  --dim: #6f7d7f;
  --line: #2c393b;
  --mint: #a8d6b3;
  --amber: #edbf76;
  --red: #e78a7e;
  --blue: #93b5e6;
  --glass: rgba(8, 11, 14, 0.74);
  --glass-strong: rgba(8, 11, 14, 0.9);
  --edge: rgba(237, 236, 228, 0.1);
  --display: 'Instrument Serif', Georgia, serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Safe areas (viewport-fit=cover); all zero on desktop browsers. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --tl-h: calc(58px + var(--sab));
  --full-h: 100vh;
  --gap: 16px;
  --hud-w: 300px;
  --panel-w: 360px;
  --insp-w: 460px;
  --legend-w: 336px;
  --mm-w: 300px;
  --panel-space: 0px;
  --insp-space: 0px;
  color-scheme: dark;
}
body.panel-open { --panel-space: calc(var(--panel-w) + var(--gap)); }
body.inspector-open { --insp-space: calc(var(--insp-w) + var(--gap)); }
/* The visible height on phones (the URL bar stays shown because the page never scrolls). */
@supports (height: 1dvh) {
  :root { --full-h: 100dvh; }
}

* { box-sizing: border-box; }
/* pan-x pan-y: no page pinch or double-tap zoom; panels still scroll. The canvas and minimap use none. */
html, body { height: 100%; overscroll-behavior: none; touch-action: pan-x pan-y; }
body {
  margin: 0;
  overflow: hidden;
  background: #000;
  color: var(--ink);
  font: 13px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--mint); }

/* ---- canvas and overlays ---------------------------------------------------- */
#view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  outline: none;
}
#view.dragging { cursor: grabbing; }
#view.flight { cursor: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
/* Axis labels: render/terrain/labels.js sets the base look inline on .lbl-layer. The amount
   scale reads a little brighter than the block axis; 2x and 5x steps sit back; the replay
   block's label is a small chip on the block axis. */
#labels .lbl-amount { color: rgba(240, 244, 255, 0.92); }
#labels .lbl-minor { color: rgba(235, 240, 255, 0.56); }
#labels .lbl-tip {
  padding: 1px 6px;
  border: 1px solid rgba(168, 214, 179, 0.55);
  border-radius: 4px;
  background: rgba(8, 11, 14, 0.78);
  color: var(--ink);
  text-shadow: none;
}
/* On a light ground (Paper's white page) the labels turn to dark ink with a light halo; main.js
   sets .lbl-on-light from the Empty cells colour. The replay block's chip keeps its dark look. */
#labels.lbl-on-light .lbl { color: rgba(22, 26, 34, 0.88); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); }
#labels.lbl-on-light .lbl-minor { color: rgba(22, 26, 34, 0.56); }
#labels.lbl-on-light .lbl-tip { color: var(--ink); text-shadow: none; }
#overlay { position: fixed; top: var(--gap); left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none; }
#overlay > * { pointer-events: auto; }

.glass,
#hud, #minimap, #legend, #inspector, #places, #fun, #funcard, #timeline {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
}

.eyebrow {
  font: 500 10px/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.brand em { font-style: normal; font-weight: 400; color: var(--muted); }
/* The HUD wordmark links to the guide (ui/hud.js) without looking like a link. */
.brand-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 3px; }
.brand-link:focus-visible { outline-offset: 4px; }
.mark { width: 19px; height: 20px; display: flex; gap: 2px; align-items: flex-end; flex: none; }
.mark i { display: block; width: 2.5px; background: var(--mint); }
.mark i:nth-child(1) { height: 5px; }
.mark i:nth-child(2) { height: 9px; }
.mark i:nth-child(3) { height: 13px; }
.mark i:nth-child(4) { height: 17px; }
.mark i:nth-child(5) { height: 20px; background: var(--amber); }

.icon-btn {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.icon-btn:hover { color: var(--ink); border-color: var(--muted); }
/* × in the header of a box that can be hidden until reload (ui/dismiss.js). The negative
   margins keep the header height and put the glyph on the box's right content edge. */
.box-close {
  width: 20px;
  height: 20px;
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.box-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }

/* ---- HUD (left) -------------------------------------------------------------- */
#hud {
  position: fixed;
  top: calc(var(--gap) + var(--sat));
  left: calc(var(--gap) + var(--sal));
  width: var(--hud-w);
  padding: 14px 18px 12px;
  border-radius: 8px;
  z-index: 5;
}
.hud-block { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.hud-block strong { font: 400 46px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hud-date { margin-top: 4px; font: 12px var(--mono); color: #cfd6d3; }
.hud-play { margin-top: 8px; font: 11px var(--mono); color: var(--muted); }
.hud-play.warn { color: var(--amber); }
.hud-stats { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 5px; }
.hud-stats div { display: flex; justify-content: space-between; gap: 12px; }
.hud-stats dt { align-self: center; font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.hud-stats dd { margin: 0; font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hud-status { margin-top: 10px; display: flex; gap: 8px; align-items: center; font: 11px var(--mono); color: var(--mint); }
.pulse { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--mint); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
.hud-foot { margin-top: 10px; font: 10px var(--mono); color: var(--dim); letter-spacing: 0.02em; }
.hud-more { display: none; }
#hud .brand .box-close { margin-left: auto; }

/* ---- minimap (bottom left) ------------------------------------------------------ */
#minimap {
  position: fixed;
  left: var(--gap);
  bottom: calc(var(--tl-h) + var(--gap));
  width: var(--mm-w);
  padding: 10px 12px 12px;
  border-radius: 8px;
  z-index: 5;
}
.mm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.mm-meta { margin-left: auto; font: 10px var(--mono); color: var(--muted); }
.mm-canvas { display: block; width: 100%; border-radius: 3px; background: #05070a; cursor: crosshair; touch-action: none; }

/* ---- legend (top right, clear of the tip corner and its amount scale) -------------- */
#legend {
  position: fixed;
  right: calc(var(--gap) + var(--panel-space) + var(--insp-space));
  top: calc(var(--gap) + var(--sat));
  width: var(--legend-w);
  padding: 12px 14px;
  border-radius: 8px;
  z-index: 5;
  transition: right 0.25s ease;
}
.lg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.lg-measure { margin-left: auto; font-size: 12px; color: var(--ink); }
.lg-strip { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; margin: 4px 0; font: 10px var(--mono); color: var(--muted); }
.lg-strip canvas { display: block; width: 100%; height: 11px; border-radius: 2px; }
.lg-ticks { position: relative; height: 15px; margin-left: 106px; font: 10px var(--mono); color: var(--muted); }
.lg-ticks span { position: absolute; top: 1px; transform: translateX(-50%); white-space: nowrap; }
.lg-ticks span:first-child { transform: none; }
.lg-ticks span:last-child { transform: translateX(-100%); }
.lg-note { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.lg-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: baseline; margin-top: 8px; font-size: 12px; }
.lg-edit-height { grid-column: 2; justify-self: start; padding: 3px 0; border: 0; background: none; color: var(--amber); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lg-edit-height:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.lg-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; }
.lg-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.45; color: var(--dim); }

/* ---- settings panel and inspector (right) ---------------------------------------------- */
#panel {
  position: fixed;
  top: var(--gap);
  bottom: calc(var(--tl-h) + var(--gap));
  right: var(--gap);
  width: var(--panel-w);
  display: none;
  overflow: hidden;
  z-index: 7;
  border-radius: 8px;
}
#panel.open { display: block; }
#inspector {
  position: fixed;
  top: var(--gap);
  right: calc(var(--gap) + var(--panel-space));
  width: var(--insp-w);
  max-height: calc(100vh - var(--tl-h) - 2 * var(--gap));
  overflow: auto;
  padding: 16px 18px 18px;
  border-radius: 8px;
  z-index: 6;
  background: var(--glass-strong);
  animation: slidein 0.22s ease;
  transition: right 0.25s ease;
}
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } }
.in-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.in-head > div { min-width: 0; }
.in-head h2 { margin: 6px 0 7px; font: 400 30px/1.05 var(--display); letter-spacing: -0.01em; }
.in-head .icon-btn { flex-shrink: 0; }
.in-sub { margin: 3px 0 0; font: 12px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.in-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.in-sec h3 { margin: 0 0 10px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 8px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint); }
.in-sec h3 span { color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.in-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; }
.in-section-head h3 { margin: 0; }
.in-verified { color: var(--mint); font: 12px/1.5 var(--body); white-space: nowrap; }
.in-primary { display: grid; grid-template-columns: minmax(90px, .65fr) minmax(0, 1.35fr); margin: 0; gap: 12px; }
.in-primary > div { display: flex; flex-direction: column; min-width: 0; }
.in-primary > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.in-primary dt { order: 1; font: 14px/1.5 var(--body); color: var(--muted); }
.in-primary dd { margin: 0; font: 500 27px/1.25 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.in-primary dd.in-btc { order: 2; color: var(--muted); font: 12px/1.7 var(--mono); }
.in-value { font-size: 23px; }
.in-value-long { font-size: 17px; }
.in-grid { margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.in-grid dt { font: 11px/1.5 var(--body); color: var(--muted); }
.in-grid dd { margin: 3px 0 0; font: 12px/1.6 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.in-check { margin: 12px 0 0; padding: 10px; border-radius: 4px; font: 12px/1.5 var(--body); }
.in-check.bad { color: var(--red); background: rgba(231, 138, 126, 0.1); border: 1px solid rgba(231, 138, 126, 0.35); }
.in-warn { color: var(--amber); font-size: 13px; line-height: 1.5; }
.in-muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.in-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px; border: 1px solid #485c56; background: rgba(168, 214, 179, 0.05); border-radius: 5px; font: 12px/1.5 var(--body); }
.in-flow > span { text-align: center; }
.in-flow strong { color: var(--ink); font: 500 15px var(--mono); }
.in-flow > span[aria-hidden] { color: var(--muted); }
.in-cutoff { margin: 8px 0 14px; font: 11px/1.6 var(--mono); color: var(--muted); }
.in-chart { display: block; width: 100%; height: auto; overflow: visible; }
.in-chart text { fill: var(--muted); font: 17px var(--mono); }
.in-chart .in-chart-label { fill: var(--ink); font-family: var(--body); }
.in-chart .in-chart-current { fill: var(--amber); font-family: var(--body); }
.in-chart circle { fill: var(--mint); }
.in-chart-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.in-chart-line { stroke: var(--mint); fill: none; stroke-width: 2; }
.in-chart-fill { fill: rgba(168, 214, 179, 0.10); }
.in-chart-selected { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 4 3; }
.in-summary { margin: 10px 0; color: var(--muted); font: 12px/1.5 var(--body); }
.in-summary strong { font-weight: 500; color: var(--ink); }
.in-disclosure summary { cursor: pointer; font: 13px/1.5 var(--body); color: var(--mint); padding: 7px 0; min-height: 34px; }
.in-disclosure > p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 8px 0; }
.in-disclosure[open] > summary { margin-bottom: 6px; }
.in-scope { margin-top: 12px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; }
.in-scope summary { color: var(--ink); }
.in-scope > p { margin-bottom: 12px; }
.in-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.in-tabs button { flex: 1; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; padding: 8px 6px; min-height: 40px; font: 12px/1.4 var(--body); cursor: pointer; }
.in-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--mint); background: rgba(168, 214, 179, 0.06); }
.in-tabs button span { margin-left: 4px; font-family: var(--mono); }
/* Fixed columns keep both tabs and every header aligned with the same row content. */
.in-table-note { margin: -3px 0 10px; color: var(--muted); font: 11px/1.5 var(--body); }
.in-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.in-col-amount { width: 22%; }
.in-col-date { width: 27%; }
.in-col-held { width: 24%; }
.in-table th { padding: 0 8px 7px 0; border-bottom: 1px solid var(--line); text-align: left; font: 11px/1.5 var(--body); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.in-table td { padding: 4px 8px 4px 0; border-bottom: 1px solid rgba(44, 57, 59, 0.6); vertical-align: top; text-align: left; }
.in-table :is(th, td):last-child { padding-right: 0; }
.in-cell-main { display: block; color: var(--ink); font: 12px/1.45 var(--body); overflow-wrap: anywhere; }
.in-amount .in-cell-main { font-family: var(--mono); }
.in-table small { display: block; margin-top: 1px; color: var(--muted); font: 10.5px/1.4 var(--mono); overflow-wrap: anywhere; }
.in-table .in-spent.ok .in-cell-main { color: var(--mint); }
.in-table .in-spent.later .in-cell-main { color: var(--blue); }
.in-more { margin: 7px 0 0; font: 12px/1.5 var(--body); color: var(--muted); }
.in-more-button { display: block; padding: 8px 0; border: 0; background: none; color: var(--mint); font: 13px/1.5 var(--body); min-height: 40px; cursor: pointer; }
.in-links { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.in-links a { display: block; border: 1px solid var(--mint); border-radius: 4px; padding: 10px 8px; text-align: center; font: 14px/1.5 var(--body); text-decoration: none; }
.in-links a:hover { background: rgba(168, 214, 179, 0.1); }
#inspector :is(button, summary, a):focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 480px) {
  .in-value { font-size: 21px; }
  .in-value-long { font-size: 16px; }
  .in-primary > div + div { padding-left: 12px; }
  .in-flow { padding: 8px; gap: 4px; }
}
#inspector pre, .loading-card pre {
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0b1216;
  font: 11.5px/1.6 var(--mono);
}

/* ---- selection marker and flight crosshair ----------------------------------------------- */
#marker { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; }
#marker i {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(8, 11, 14, 0.55), 0 0 18px rgba(237, 191, 118, 0.6);
}
#marker i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--amber); }
#crosshair { position: fixed; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; z-index: 4; pointer-events: none; }
#crosshair::before, #crosshair::after {
  content: '';
  position: absolute;
  background: rgba(237, 236, 228, 0.9);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
#crosshair::before { left: 11px; top: 0; width: 2px; height: 24px; }
#crosshair::after { left: 0; top: 11px; width: 24px; height: 2px; }

/* ---- hover readout: docked under the HUD, same edge and width (ui/hover.js) ------------------ */
#hover {
  position: fixed;
  left: calc(var(--gap) + var(--sal));
  top: calc(var(--gap) + var(--sat) + 290px);
  width: var(--hud-w);
  z-index: 6;
  padding: 14px 18px 12px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
}
#hover[hidden] { display: none; }
#hover.undocked { top: calc(var(--gap) + var(--sat)); }
/* Header with the × (ui/dismiss.js). Lingering (nothing under the pointer) dims the reading. */
#hover .hv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#hover.linger .hv-body { opacity: 0.45; }
#hover dl { margin: 10px 0 0; display: grid; gap: 5px; }
#hover dl div { display: flex; justify-content: space-between; gap: 12px; }
#hover dt { align-self: center; font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
#hover dd { margin: 0; font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
#hover .stale dd { opacity: 0.5; }
#hover p { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font: 10px/1.4 var(--mono); color: var(--dim); }

/* ---- plane mode: nose circle and the readout at the top centre ----------------------------- */
#plane-nose {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px;
  z-index: 4;
  pointer-events: none;
  border: 2px solid rgba(237, 191, 118, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 4px rgba(0, 0, 0, 0.8);
}
#planehud {
  position: fixed;
  top: calc(var(--gap) + var(--sat));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 2 * (var(--hud-w) + 2 * var(--gap)));
  padding: 7px 14px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
  font: 11.5px/1.3 var(--mono);
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}
.ph-ground { overflow: hidden; text-overflow: ellipsis; }
.ph-game { flex: none; color: var(--amber); }
/* Stack sats: a collected coin's value rises and fades under the readout. */
#funpops {
  position: fixed;
  top: calc(var(--gap) + var(--sat) + 44px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.ph-pop {
  font: 600 15px/1.2 var(--mono);
  color: #f7931a;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(247, 147, 26, 0.45);
  animation: ph-pop 0.8s ease-out forwards;
}
@keyframes ph-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  15% { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 0; transform: translateY(-16px) scale(1); }
}
.ph-throttle { flex: none; width: 64px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.ph-throttle i { display: block; width: 30%; height: 100%; border-radius: 3px; background: var(--mint); transition: width 0.12s linear; }
#planehud.boost .ph-throttle i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ph-stick { position: relative; flex: none; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.04); }
.ph-stick::before, .ph-stick::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.12); }
.ph-stick::before { left: 11px; top: 3px; width: 1px; height: 16px; }
.ph-stick::after { left: 3px; top: 11px; width: 16px; height: 1px; }
.ph-stick i { position: absolute; left: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
body.plane #legend { display: none; }
#planekeys {
  position: fixed;
  right: calc(var(--gap) + var(--sar) + var(--panel-space) + var(--insp-space));
  bottom: calc(var(--tl-h) + var(--gap));
  z-index: 5;
  width: 300px;
  padding: 11px 14px 10px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}
.pk-head { margin-bottom: 6px; }
#planekeys dl { margin: 0; display: grid; gap: 4px; }
#planekeys dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; }
#planekeys dt { font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
#planekeys dd { margin: 0; font-size: 12px; color: var(--ink); }
#planekeys kbd {
  display: inline-block;
  min-width: 18px;
  margin-right: 3px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  font: 10.5px/16px var(--mono);
  text-align: center;
  color: var(--ink);
}

/* ---- timeline (bottom) ---------------------------------------------------------------- */
#timeline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tl-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 calc(var(--gap) + var(--sar)) var(--sab) calc(var(--gap) + var(--sal));
  border-width: 1px 0 0;
  z-index: 8;
}
.tl-transport { display: flex; align-items: center; gap: 2px; }
.tl-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink); }
.tl-btn svg { width: 15px; height: 15px; fill: currentColor; }
.tl-btn:hover { background: rgba(255, 255, 255, 0.07); }
.tl-play { width: 40px; height: 40px; margin: 0 4px; border-radius: 50%; background: var(--mint); color: #122019; }
.tl-play:hover { background: #c5ebcd; }
.tl-play.on { background: var(--amber); color: #241a08; }
.tl-play.on:hover { background: #f5d39c; }
.tl-speed {
  flex: none;
  height: 34px;
  padding: 0 26px 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(168, 214, 179, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8d6b3' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px;
  font: 12px var(--mono);
  color: var(--mint);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tl-speed:hover, .tl-speed:focus-visible { border-color: var(--mint); outline: none; }
.tl-speed option { background: #10171a; color: var(--ink); }
.tl-track { position: relative; flex: 1; min-width: 160px; height: 34px; display: flex; align-items: center; }
.tl-marks { position: absolute; left: 7px; right: 7px; top: 50%; height: 0; pointer-events: none; }
.tl-mark { position: absolute; top: -10px; width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: var(--amber); opacity: 0.75; }
.tl-scrub { --fill: 0%; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tl-scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--mint) var(--fill), #2a3537 var(--fill)); }
.tl-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(168, 214, 179, 0.25); }
.tl-scrub::-moz-range-track { height: 4px; border-radius: 2px; background: #2a3537; }
.tl-scrub::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--mint); }
.tl-scrub::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.tl-field { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.02); }
.tl-field:focus-within { border-color: var(--mint); }
.tl-field span { font: 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.tl-field input { border: 0; outline: none; background: transparent; font: 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.tl-where { gap: 5px; }
.tl-where .tl-sep { font: 13px var(--mono); letter-spacing: 0; color: var(--dim); }
.tl-block { width: 6.6ch; -moz-appearance: textfield; }
.tl-block::-webkit-inner-spin-button, .tl-block::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tl-date { width: 16.4ch; }
.tl-tools { display: flex; gap: 6px; }
.tl-text { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font: 12px var(--body); color: var(--ink); }
.tl-text:hover { border-color: var(--mint); color: var(--mint); }
.tl-text.on { border-color: var(--mint); background: rgba(168, 214, 179, 0.16); color: var(--mint); }
.tl-text svg { display: none; }
.tl-round { width: 34px; padding: 0; border-radius: 50%; font-family: var(--mono); }

/* ---- places popover -------------------------------------------------------------------- */
#places {
  position: fixed;
  right: var(--gap);
  bottom: calc(var(--tl-h) + 10px);
  width: min(460px, calc(100vw - 2 * var(--gap)));
  padding: 14px 16px;
  border-radius: 8px;
  z-index: 9;
  background: var(--glass-strong);
}
.pl-col h3 { margin: 0 0 8px; font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.pl-col h3 span { display: block; margin-top: 2px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); }
.pl-item { width: 100%; display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; text-align: left; }
.pl-item:hover:not(:disabled) { background: rgba(168, 214, 179, 0.1); }
.pl-item:disabled { opacity: 0.4; cursor: default; }
.pl-key { font: 12px var(--mono); color: var(--ink); white-space: nowrap; }
.pl-title { font-size: 12.5px; color: #cfd6d3; }
.pl-meta { font: 10.5px var(--mono); color: var(--dim); white-space: nowrap; }
/* A place: its name and amounts on one line, what it is under them. */
.pl-item.pl-place { grid-template-columns: 1fr auto; grid-template-areas: 'key meta' 'title title'; row-gap: 3px; padding: 7px 8px; }
.pl-place .pl-key { grid-area: key; font: 500 12.5px var(--body); }
.pl-place .pl-meta { grid-area: meta; }
.pl-place .pl-title { grid-area: title; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pl-place.later .pl-key::after { content: ' \2192 latest block'; font: 10.5px var(--mono); color: var(--dim); }

/* ---- Fun popover (crafts and Stack sats) and the Stack sats end card ---------------------- */
#fun {
  position: fixed;
  right: var(--gap);
  bottom: calc(var(--tl-h) + 10px);
  width: min(640px, calc(100vw - 2 * var(--gap)));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  padding: 14px 16px 10px;
  border-radius: 8px;
  z-index: 9;
  background: var(--glass-strong);
}
#fun .pl-item { grid-template-columns: 76px 1fr auto; }
/* Play items: the name and its shortcut or best on one line, the description under them. */
#fun .pl-item.fn-play { grid-template-columns: 1fr auto; grid-template-areas: 'key meta' 'title title'; row-gap: 2px; }
.fn-play .pl-key { grid-area: key; }
.fn-play .pl-title { grid-area: title; font-size: 12px; color: var(--muted); }
.fn-play .pl-meta { grid-area: meta; }
.fn-craft.on { background: rgba(247, 147, 26, 0.12); box-shadow: inset 2px 0 0 #f7931a; }
.fn-craft.on .pl-key { color: #f7b45a; }
.fn-craft.on .pl-meta { color: #f7b45a; }
.fn-foot { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font: 10.5px var(--mono); color: var(--dim); }
#funcard {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 9;
  width: min(380px, calc(100vw - 2 * var(--gap)));
  padding: 18px 22px 18px;
  border-radius: 10px;
  background: var(--glass-strong);
  text-align: center;
}
#funcard h2 { margin: 10px 0 2px; font: 400 30px/1.15 var(--display); letter-spacing: -0.01em; }
#funcard h2 em { font-style: normal; color: #f7b45a; }
.fc-sub { margin: 0; font: 12px var(--mono); color: var(--muted); }
.fc-best { margin: 12px 0 0; font-size: 13px; color: var(--ink); }
.fc-best.new { color: var(--mint); }
.fc-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.fc-btn { height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font: 12.5px var(--body); color: var(--ink); }
.fc-btn:hover { border-color: var(--mint); color: var(--mint); }
.fc-btn.primary { border-color: #f7931a; background: rgba(247, 147, 26, 0.16); color: #f7b45a; }
.fc-btn.primary:hover { background: rgba(247, 147, 26, 0.26); }
.fc-btn kbd { margin-left: 6px; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; font: 10px/14px var(--mono); color: var(--muted); }

/* ---- toast ------------------------------------------------------------------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tl-h) + 22px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 10;
  pointer-events: none;
}
.toast-item {
  max-width: min(640px, 90vw);
  padding: 8px 14px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--glass-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font: 12px var(--body);
  animation: toastin 0.2s ease;
  transition: opacity 0.25s, transform 0.25s;
}
.toast-item[data-kind='warn'] { color: var(--amber); border-color: rgba(237, 191, 118, 0.45); }
.toast-item[data-kind='error'] { color: var(--red); border-color: rgba(231, 138, 126, 0.5); }
.toast-item.leaving { opacity: 0; transform: translateY(6px); }
@keyframes toastin { from { opacity: 0; transform: translateY(6px); } }

/* ---- help ---------------------------------------------------------------------------- */
#help {
  width: min(900px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  padding: 26px 30px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: rgba(10, 14, 17, 0.97);
  color: var(--ink);
}
#help::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.help-head { display: flex; justify-content: space-between; gap: 20px; }
.help-head h2 { margin: 8px 0 0; font: 400 38px/1.05 var(--display); letter-spacing: -0.02em; }
.help-tools { display: flex; flex: none; align-items: center; align-self: flex-start; gap: 10px; }
.help-guide {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--mint);
}
.help-guide:hover { color: var(--ink); border-color: var(--muted); }
.help-head h2 em, .loading-card h1 em { font-style: italic; color: var(--mint); }
.help-lead { max-width: 740px; margin: 14px 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.help-grid { columns: 2; column-gap: 36px; }
.help-grid section { break-inside: avoid; margin-bottom: 20px; }
.help-grid h3 { margin: 0 0 8px; font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.help-grid dl { margin: 0; }
.help-grid dl div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(44, 57, 59, 0.6); }
.help-grid dd { margin: 0; font-size: 12.5px; color: #c7cfcc; }
kbd {
  display: inline-block;
  min-width: 20px;
  margin-right: 4px;
  padding: 2px 6px;
  border: 1px solid #445456;
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #152024;
  font: 11px var(--mono);
  text-align: center;
  color: var(--ink);
}
.gesture { margin-right: 8px; font: 11px var(--mono); color: var(--amber); }

/* ---- welcome: a first visit to the bare domain (ui/welcome.js) ------------------------------ */
#welcome {
  width: min(600px, calc(100vw - 32px));
  max-height: calc(var(--full-h) - 32px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #0a0e11;
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
#welcome::backdrop { background: rgba(3, 5, 6, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.welcome-card { padding: 30px 32px 32px; }
.welcome-card:focus { outline: none; }
.welcome-card h2 { margin: 10px 0 12px; font: 400 42px/1.04 var(--display); letter-spacing: -0.02em; }
.welcome-card h2 em { font-style: italic; color: var(--mint); }
.welcome-card p { max-width: 510px; margin: 0 0 26px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.welcome-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.welcome-choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  min-height: 80px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(237, 236, 228, 0.03);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.welcome-choice strong { font-size: 15px; font-weight: 500; }
.welcome-choice span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.welcome-choice:hover { border-color: var(--muted); background: rgba(237, 236, 228, 0.07); }
.welcome-choice.primary { border-color: var(--mint); background: var(--mint); color: #0d1f15; }
.welcome-choice.primary span { color: rgba(13, 31, 21, 0.72); }
.welcome-choice.primary:hover { border-color: #c4e5cc; background: #c4e5cc; }
@media (max-width: 560px) {
  .welcome-card { padding: 22px 18px 20px; }
  .welcome-card h2 { font-size: 32px; }
  .welcome-choices { grid-template-columns: 1fr; }
  .welcome-choice { min-height: 64px; }
}

/* ---- loading and fatal ------------------------------------------------------------------ */
#loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 640px at 50% 62%, #0d1a17 0%, #06080a 60%, #030405 100%);
  transition: opacity 0.45s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
.loading-card { width: min(580px, calc(100vw - 48px)); }
.loading-card h1 { margin: 26px 0 22px; font: 400 54px/1 var(--display); letter-spacing: -0.03em; }
.loading-status { margin: 0 0 10px; font: 12px var(--mono); letter-spacing: 0.04em; color: var(--mint); }
.loading-bar { height: 2px; overflow: hidden; border-radius: 1px; background: #1c2729; }
.loading-bar span { display: block; width: 0; height: 100%; background: var(--mint); transition: width 0.25s; }
#loading.indeterminate .loading-bar span { width: 30%; animation: indeterminate 1.2s ease-in-out infinite; }
@keyframes indeterminate { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.loading-detail { min-height: 1.5em; margin: 10px 0 0; font: 11px var(--mono); color: var(--dim); }
.loading-detail.problem { color: var(--red); white-space: pre-wrap; }
.loading-guide { margin: 34px 0 0; font-size: 11px; color: var(--dim); }
#loading.fatal .loading-card p { color: var(--muted); }
#loading.fatal .loading-card code { font-family: var(--mono); color: #bcdbca; }
.loading-error { white-space: pre-wrap; font: 12px var(--mono); color: var(--red) !important; }
.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; color: var(--muted); }

/* ---- responsive --------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  body.panel-open.inspector-open #legend { display: none; }
}
@media (max-width: 1280px) {
  :root { --legend-w: 300px; --mm-w: 260px; --insp-w: 380px; }
  .tl-where .tl-sep, .tl-where .tl-date, .tl-where .tl-utc { display: none; }
  body.panel-open #legend, body.inspector-open #legend { display: none; }
}
@media (max-width: 980px) {
  #legend { display: none; }
  .tl-transport .tl-btn:first-child, .tl-transport .tl-btn:last-child { display: none; }
}
/* Just wider, the 1,008-block steps return: tighter gaps keep the tool buttons inside. */
@media (min-width: 981px) and (max-width: 999px) {
  #timeline { gap: 11px; }
}
@media (max-height: 760px) {
  #minimap { display: none; }
}

/* ---- tablets in portrait ------------------------------------------------------------------ */
/* Icon-only tool buttons and tighter gaps. The labelled tool buttons need 940 px. */
@media (min-width: 701px) and (max-width: 939px) and (min-height: 501px) {
  #timeline { gap: 10px; }
  .tl-tools { gap: 4px; }
  .tl-track { min-width: 120px; }
  .tl-tools .tl-text:not(.tl-round) { width: 34px; padding: 0; display: grid; place-items: center; }
  .tl-text svg { display: block; width: 16px; height: 16px; fill: currentColor; }
  .tl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* The narrower of those windows (701-800 px) with Follow, Fly and Fun: tighter gaps keep the row
   inside. */
@media (min-width: 701px) and (max-width: 800px) and (min-height: 501px) {
  #timeline { gap: 8px; }
  .tl-tools { gap: 2px; }
}

/* ---- phones -------------------------------------------------------------------------------- */
/* Portrait phones (up to 700 px wide) and landscape phones (up to 500 px tall, under 1,024 px wide).
   The HUD collapses to block, date and play state, the minimap, legend and block/date inputs hide,
   touch targets are at least 40 px, and the inspector and the settings panel become sheets in one
   place: the one opened last is in front (body.inspector-front, ui/inspector.js). */
@media (max-width: 700px), (max-height: 500px) and (max-width: 1023px) {
  :root {
    --gap: 8px;
    --tl-h: calc(56px + var(--sab));
    --sheet-w: min(372px, 52vw);
  }
  body.panel-open { --panel-space: 0px; }
  body.inspector-open { --insp-space: 0px; }
  #minimap, #legend { display: none; }
  #overlay { top: calc(var(--sat) + 84px); }

  #hud {
    width: auto;
    max-width: calc(100vw - 2 * var(--gap) - var(--sal) - var(--sar));
    padding: 8px 4px 9px 12px;
    display: grid;
    grid-template-columns: auto 158px 40px;
    grid-template-areas: 'block date more' 'block play more' 'status status status';
    column-gap: 12px;
    align-items: end;
  }
  #hud .brand { grid-area: brand; display: none; }
  #hud .box-close { display: none; }
  #hud .hud-block { grid-area: block; margin: 0; }
  #hud .hud-block strong { font-size: 32px; }
  #hud .hud-date { grid-area: date; margin: 0; font-size: 11px; line-height: 1.45; white-space: nowrap; }
  #hud .hud-play { grid-area: play; margin: 0; font-size: 11px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hud .hud-stats { grid-area: stats; display: none; margin: 10px 0 0; }
  #hud .hud-status { grid-area: status; margin-top: 8px; }
  #hud .hud-foot { grid-area: foot; display: none; margin-top: 8px; padding-right: 8px; }
  #hud .hud-more {
    grid-area: more;
    align-self: center;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    -webkit-tap-highlight-color: transparent;
  }
  #hud .hud-more svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
  #hud .hud-more:active { background: rgba(255, 255, 255, 0.08); }
  #hud.expanded { grid-template-areas: 'brand brand more' 'block date date' 'block play play' 'stats stats stats' 'status status status' 'foot foot foot'; }
  #hud.expanded .brand { display: flex; align-self: center; }
  #hud.expanded .hud-more svg { transform: rotate(180deg); }
  #hud.expanded .hud-stats { display: grid; padding-right: 8px; }
  #hud.expanded .hud-foot { display: block; }
  #hud.expanded .hud-play { white-space: normal; }
  /* The details wrap inside the compact card instead of widening it. */
  #hud .hud-stats, #hud .hud-foot, #hud .hud-status { contain: inline-size; }

  #timeline { gap: 10px; padding: 0 calc(10px + var(--sar)) var(--sab) calc(10px + var(--sal)); }
  #timeline button { -webkit-tap-highlight-color: transparent; }
  .tl-btn { width: 40px; height: 40px; }
  .tl-btn:active, .tl-text:active { background: rgba(255, 255, 255, 0.1); }
  .tl-play { width: 44px; height: 44px; margin: 0 2px; }
  .tl-play:active { background: #c5ebcd; }
  .tl-play.on:active { background: #f5d39c; }
  .tl-speed { height: 40px; min-width: 64px; }
  .tl-where { display: none; }
  .tl-track { min-width: 120px; height: 40px; }
  .tl-marks { left: 11px; right: 11px; }
  .tl-scrub { height: 40px; }
  .tl-scrub::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  .tl-scrub::-moz-range-thumb { width: 22px; height: 22px; }
  .tl-tools { gap: 6px; }
  .tl-text { height: 40px; }
  .tl-round { width: 40px; }

  #panel .lil-gui.root { width: 100%; height: 100%; max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  #panel .lil-gui.root > .children { flex: none; overflow: visible; }
  body.inspector-front #inspector { z-index: 7; }
  #inspector { padding: 0 14px 14px; overscroll-behavior: contain; }
  #inspector .in-head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -14px;
    padding: 12px 10px 10px 14px;
    background: rgba(9, 12, 15, 0.97);
    border-bottom: 1px solid var(--line);
  }
  #inspector .in-head h2 { margin: 4px 0 2px; font-size: 23px; }
  #inspector .icon-btn { width: 40px; height: 40px; -webkit-tap-highlight-color: transparent; }
  #inspector .in-sec:first-of-type { border-top: 0; }

  #places, #fun {
    right: calc(var(--gap) + var(--sar));
    bottom: calc(var(--tl-h) + 6px);
    width: min(660px, calc(100vw - 2 * var(--gap) - var(--sal) - var(--sar)));
    max-height: calc(var(--full-h) - var(--tl-h) - var(--sat) - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
  }
  .pl-item { min-height: 40px; align-items: center; }

  #toast { bottom: calc(var(--tl-h) + 12px); width: calc(100vw - 24px - var(--sal) - var(--sar)); }
  .toast-item { max-width: 100%; text-align: center; }

  #help {
    width: calc(100vw - 2 * var(--gap) - var(--sal) - var(--sar));
    max-height: calc(var(--full-h) - 2 * var(--gap) - var(--sat) - var(--sab));
    padding: 18px 16px 20px;
  }
  .help-head h2 { font-size: 28px; }
  .help-guide { padding: 13px 12px; border-radius: 20px; }
  .help-lead { margin: 10px 0 16px; font-size: 13px; }
  #help .icon-btn { width: 40px; height: 40px; }

  .loading-card { width: calc(100vw - 40px); }
  .loading-card h1 { margin: 20px 0 18px; font-size: 38px; }
}

/* Narrow screens: Places and Settings show icons. */
@media (max-width: 700px) {
  .tl-tools .tl-text:not(.tl-round) { width: 40px; padding: 0; display: grid; place-items: center; }
  .tl-text svg { display: block; width: 18px; height: 18px; fill: currentColor; }
  .tl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Portrait phones: a two-row timeline (scrubber, then the buttons) and bottom sheets above it.
   The button row (steps, play, speed, Follow, Sound, Places, Settings, Help) needs 428 px. */
@media (max-width: 700px) and (min-height: 501px) {
  :root { --tl-h: calc(100px + var(--sab)); --sheet-h: calc(var(--full-h) * 0.58); --insp-h: calc(var(--full-h) * 0.45); }
  #timeline {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: 40px 44px;
    grid-template-areas: 'track track track track' 'transport speed . tools';
    align-content: start;
    gap: 4px;
    padding-top: 4px;
  }
  .tl-transport { grid-area: transport; }
  .tl-speed { grid-area: speed; }
  .tl-track { grid-area: track; min-width: 0; }
  .tl-tools { grid-area: tools; gap: 4px; }

  #panel, #inspector {
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--tl-h);
    width: auto;
    border-width: 1px 0 0;
    border-radius: 12px 12px 0 0;
  }
  #panel { height: var(--sheet-h); }
  #inspector {
    max-height: var(--insp-h);
    padding-left: calc(14px + var(--sal));
    padding-right: calc(14px + var(--sar));
    animation-name: sheetup;
  }
  #inspector .in-head { margin: 0 calc(-14px - var(--sar)) 0 calc(-14px - var(--sal)); padding-left: calc(14px + var(--sal)); padding-right: calc(10px + var(--sar)); }
  body.panel-open.inspector-front #inspector { min-height: var(--sheet-h); }
  body.inspector-open #toast { bottom: calc(var(--tl-h) + var(--insp-h) + 12px); }
  body.panel-open #toast { bottom: calc(var(--tl-h) + var(--sheet-h) + 12px); }

  #places, #fun { grid-template-columns: 1fr; gap: 12px; }
  .help-grid { columns: 1; }
  .help-grid dl div { grid-template-columns: 128px 1fr; gap: 10px; }
}
/* Phones narrower than the 428 px button row (320 to 414 px): the scrubber replaces the
   single-block steps. */
@media (max-width: 427px) {
  .tl-transport [data-act='back'], .tl-transport [data-act='fwd'] { display: none; }
}
/* The narrowest phones (320 px): the tool buttons take the desktop size. */
@media (max-width: 343px) {
  .tl-tools .tl-text:not(.tl-round), .tl-tools .tl-round { width: 34px; }
}
@keyframes sheetup { from { opacity: 0; transform: translateY(24px); } }

/* Landscape phones: a one-row timeline; the inspector and the panel are sheets at the right. */
@media (max-height: 500px) and (max-width: 1023px) {
  #panel, #inspector {
    top: calc(var(--gap) + var(--sat));
    right: calc(var(--gap) + var(--sar));
    bottom: calc(var(--tl-h) + var(--gap));
    width: var(--sheet-w);
    max-height: none;
  }
  body.panel-open #toast, body.inspector-open #toast {
    left: calc(var(--gap) + var(--sal));
    right: calc(var(--sheet-w) + 2 * var(--gap) + var(--sar));
    width: auto;
    transform: none;
  }
  .loading-card h1 { margin: 14px 0 12px; font-size: 30px; }
  .loading-guide { margin-top: 18px; }
}

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

/* Share the visible view or an exact cell; the link is a frozen snapshot. */
.in-head-actions { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.in-share { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--mint); padding: 4px 0; font: 12px var(--body); cursor: pointer; white-space: nowrap; }
.in-share svg { width: 16px; height: 16px; }
.tl-share { color: var(--mint); border-color: #587260; }
#share { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow: auto; border: 1px solid #3c4f4c; border-radius: 12px; background: #0d1418; color: var(--ink); box-shadow: 0 24px 90px #0009; }
#share::backdrop { background: #040809ba; backdrop-filter: blur(5px); }
#share [hidden] { display: none !important; }
.share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.share-head h2 { margin: 6px 0 20px; font: 400 36px/1.1 var(--display); }
.share-head .icon-btn { flex-shrink: 0; }
.share-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.share-modes legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.share-modes label { display: flex; align-items: flex-start; gap: 9px; padding: 13px 10px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: #111b20; }
.share-modes label:has(:checked) { border-color: var(--mint); background: #a8d6b30b; }
.share-modes label:has(:disabled) { opacity: .5; cursor: default; }
.share-modes input { accent-color: var(--mint); margin: 3px 0 0; flex-shrink: 0; }
#share strong { display: block; font: 500 14px/1.5 var(--body); }
#share small { display: block; color: var(--muted); font: 12px/1.5 var(--body); margin-top: 4px; }
.share-summary { padding: 14px; background: #080e12; border: 1px solid var(--line); border-radius: 6px; }
#share .share-summary strong { font: 500 22px/1.3 var(--mono); }
.share-summary p { margin: 7px 0 0; color: var(--muted); font: 12px/1.6 var(--body); }
.share-play { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; }
.share-play:has(:disabled) { cursor: default; }
.share-play input { appearance: none; flex-shrink: 0; width: 42px; height: 24px; padding: 3px; border: 1px solid #587260; border-radius: 20px; background: #2b3939; cursor: pointer; }
.share-play input::before { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #c7d4ce; transition: transform .15s; }
.share-play input:checked { background: var(--mint); }
.share-play input:checked::before { transform: translateX(17px); background: #15251b; }
.share-play input:disabled { opacity: .45; cursor: default; }
.share-link-label { display: block; color: var(--muted); font: 12px var(--body); margin-bottom: 8px; }
.share-link-row { display: flex; border: 1px solid #40554d; border-radius: 6px; overflow: hidden; }
#share textarea { flex: 1; width: 100%; min-width: 0; resize: none; padding: 10px; border: 0; border-radius: 0; background: #080e12; color: var(--ink); font: 11px/1.6 var(--mono); }
#share [data-copy] { border: 0; border-left: 1px solid #40554d; padding: 12px; min-width: 90px; color: #13271c; background: var(--mint); font: 500 13px var(--body); cursor: pointer; }
.share-status { min-height: 18px; margin: 8px 0; color: var(--mint); font: 12px/1.5 var(--body); }
.share-local { font: 12px/1.5 var(--body); color: var(--amber); margin: 0 0 12px; }
.share-destinations { display: flex; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.share-destinations a, .share-destinations button { flex: 1; display: block; padding: 10px; min-height: 42px; border: 1px solid var(--line); border-radius: 5px; text-align: center; text-decoration: none; font: 13px/1.5 var(--body); color: var(--ink); background: #152024; cursor: pointer; }
.share-destinations a:hover, .share-destinations button:hover { border-color: var(--mint); }
#share :is(input, textarea, button, a):focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 700px) {
  .tl-share { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }
  .tl-share svg { display: block; width: 18px; height: 18px; }
}
@media (max-width: 700px) and (min-height: 501px) {
  #timeline { grid-template-areas: 'track track track share' 'transport speed . tools'; }
  .tl-share { grid-area: share; justify-self: end; }
}
@media (max-width: 480px) {
  #share { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; }
  .share-modes { gap: 8px; }
  .share-modes label { padding: 10px 8px; gap: 6px; }
  #share [data-copy] { min-width: 76px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) { .share-play input::before { transition: none; } }

.share-modes label:has(:focus-visible) { outline: 2px solid var(--mint); outline-offset: 3px; }
#share .share-modes input:focus-visible { outline: none; }
@media (max-width: 480px) {
  #share .icon-btn { width: 44px; height: 44px; }
  .share-destinations a, .share-destinations button { min-height: 44px; }
}