/* ───────────────────────────────────────────────────────────
   Cinema mode — hide all chrome, leave just the scene.
   ─────────────────────────────────────────────────────────── */

body.cinema #toolbar,
body.cinema #panel,
body.cinema #rpanel-wrap,
body.cinema #btn-toolbar-toggle,
body.cinema #panel-edge,
body.cinema #rpanel-edge,
body.cinema #collision-hud,
body.cinema #minimap-wrap {
  opacity: 0 !important;
  pointer-events: none;
}

body.cinema #panel {
  transform: translateX(calc(-1 * (var(--pw) + var(--ab-w) + 32px)));
}
body.cinema #toolbar {
  transform: translateX(calc(-1 * (var(--ab-w) + 32px)));
}
body.cinema #rpanel-wrap {
  transform: translateX(calc(var(--rpw) + 40px));
}
body.cinema #tip {
  display: none;
}

/* Cinema-exit chip — bottom-center floater. */
#cinema-exit {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;

  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font: 500 11px var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-2);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--motion-slow),
    color var(--motion-base),
    border-color var(--motion-base),
    background var(--motion-base);
}
body.cinema #cinema-exit {
  opacity: 0.65;
  pointer-events: auto;
}
#cinema-exit:hover {
  opacity: 1 !important;
  color: var(--bright);
  border-color: var(--accent);
  background: var(--accent-soft);
}