/* Mechanical Watch Movement Simulator - drafting-table instrument chrome. */

:root {
  --bg: #efece4;
  --panel: rgba(252, 250, 245, 0.74);
  --ink: #1d1c19;
  --ink-dim: #6c675e;
  --rule: rgba(29, 28, 25, 0.16);
  --rule-strong: rgba(29, 28, 25, 0.34);
  --accent: #b0173c;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: rgba(24, 27, 32, 0.74);
    --ink: #ece8e1;
    --ink-dim: #9a958c;
    --rule: rgba(236, 232, 225, 0.16);
    --rule-strong: rgba(236, 232, 225, 0.34);
    --accent: #e2537a;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#stage.is-dragging { cursor: grabbing; }

#labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- exploded view layer labels ---- */
.layerlabel {
  position: absolute;
  transform: translate(-100%, -50%);
  padding: 2px 8px 2px 6px;
  border-right: 2px solid var(--accent);
  background: var(--panel);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 320ms ease;
}
.layerlabel.is-on { opacity: 1; }
.layerlabel i { font-style: normal; color: var(--ink-dim); }

/* ---- HUD ---- */
.hud {
  position: fixed;
  z-index: 3;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  background: var(--panel);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  pointer-events: none;
  max-width: 46vw;
}
.hud--tl { top: 14px; left: 14px; }
.hud--tr { top: 14px; right: 14px; text-align: right; }
.hud--bl { bottom: 14px; left: 14px; }
.hud--br { bottom: 14px; right: 14px; text-align: right; }

.hud__row { display: flex; gap: 12px; justify-content: space-between; white-space: nowrap; }
.hud--tr .hud__row, .hud--br .hud__row { justify-content: flex-end; }
.hud__k { color: var(--ink-dim); }
.hud__v { color: var(--ink); font-variant-numeric: tabular-nums; }
.hud__v--accent { color: var(--accent); }
.hud__v--hint { color: var(--ink-dim); }
.hud__v b { font-weight: 600; color: var(--ink); }
.hud__v--hint b { color: var(--accent); }

/* ---- play / pause ---- */
.playbtn {
  position: fixed;
  z-index: 4;
  right: 14px;
  bottom: 96px;
  padding: 7px 14px;
  border: 1px solid var(--rule-strong);
  background: var(--panel);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.playbtn:hover { border-color: var(--accent); color: var(--accent); }
.playbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.playbtn[hidden] { display: none; }

/* ---- part inspector (hover readout) ---- */
.inspect {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  max-width: min(620px, 88vw);
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
.inspect[hidden] { display: none; }
.inspect__name { color: var(--accent); }
.inspect__sep { color: var(--rule-strong); }
.inspect__fn { color: var(--ink); text-transform: none; letter-spacing: 0.03em; }

/* ---- transient hint ---- */
.hint {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(880px, 94vw);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: opacity 900ms ease;
  pointer-events: none;
}
.hint.is-fading { opacity: 0; }
.hint.is-hidden { display: none; }
.hint--static { position: static; transform: none; margin: 20px; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px), (max-height: 620px) {
  .hud { font-size: 9px; padding: 7px 9px; max-width: 58vw; }
  .hud--tl { top: 10px; left: 10px; }
  .hud--tr { top: 10px; right: 10px; }
  .hud--bl { bottom: 10px; left: 10px; }
  .hud--br { bottom: 10px; right: 10px; }
  .hint { font-size: 8.5px; line-height: 1.6; bottom: 104px; max-width: 88vw; }
  .inspect { bottom: 150px; font-size: 9px; }
  .playbtn { right: 10px; top: 118px; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hint, .layerlabel { transition: none; }
}