/* ltis · the performance (the cinema), in the board's language: the blue head bar, cyan gauges, Noto Sans Mono. */
.cinema { position: fixed; inset: 0; z-index: 100; background: #000; color: #9a9a9a; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; font-family: "Noto Sans Mono", ui-monospace, Menlo, monospace; font-size: 13px; }
.cinema[hidden] { display: none; }
.cin-head { display: flex; justify-content: space-between; gap: 16px; background: var(--blue, #0000a8); color: #fff; padding: calc(2px + env(safe-area-inset-top, 0px)) 14px 2px; font-size: 14px; }
.cin-head .cin-cy { color: #9fe6ff; font-variant-numeric: tabular-nums; }
.cin-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #1a1a1a; }
.knobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.knobs li { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.2em; align-items: center; gap: 6px; min-width: 0; }
.knobs .cin-n { color: var(--who, #e6d36b); }
.knobs .g { height: 2px; background: #1e1e1e; position: relative; }
.knobs .g i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--cyan, #5fd7ff); transition: width .25s linear; }
.knobs .v { color: #dcdcdc; text-align: right; font-variant-numeric: tabular-nums; }
.layers { display: flex; gap: 6px; }
.layers button { background: none; border: 1px solid #2a2a2a; color: #6a6a6a; font: inherit; font-size: 12px; padding: 1px 8px; cursor: pointer; }
.layers button[aria-pressed="true"] { color: var(--cyan, #5fd7ff); border-color: #1f4a5a; }
.layers button.private[aria-pressed="true"] { color: #ff6b6b; border-color: #5a1f1f; }
.layers button:hover { color: #fff; border-color: #555; }
.layers button:focus-visible, .cin-scrub button:focus-visible, .track input:focus-visible, .mkb:focus-visible { outline: 1px solid var(--cyan, #5fd7ff); outline-offset: 2px; }
.cin-stage { position: relative; min-height: 0; }
.cin-stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.lane { position: absolute; left: 14px; right: 14px; pointer-events: none; }
.lane .m { position: absolute; width: 2px; height: 8px; transform: translateX(-1px); }
.lane-hands { bottom: 56px; height: 8px; } .lane-hands .m { background: var(--who, #e6d36b); }
.lane-creatures { bottom: 70px; height: 64px; } .lane-creatures .m { height: 3px; background: #dcdcdc; opacity: .55; }
.cin-scrub { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #1a1a1a; }
.cin-scrub #cinPlay { background: none; border: 1px solid #2a2a2a; color: #dcdcdc; font: inherit; padding: 2px 12px; cursor: pointer; min-width: 7.5em; }
.cin-scrub #cinPlay:hover { border-color: #555; color: #fff; }
.cin-scrub .cin-tc { color: #dcdcdc; font-variant-numeric: tabular-nums; }
.track { position: relative; padding-top: 18px; }
.track input[type=range] { width: 100%; margin: 0; accent-color: var(--cyan, #5fd7ff); cursor: pointer; }
.marks { position: absolute; left: 0; right: 0; top: 0; height: 18px; }
.marks .mk { position: absolute; top: 0; transform: translateX(-1px); border-left: 1px solid var(--who, #e6d36b); height: 18px; }
.marks .mkb { position: absolute; left: 4px; top: 0; background: none; border: 0; padding: 0; color: var(--who, #e6d36b); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
.marks .mkb:hover { color: #fff; }
.cin-note { position: absolute; left: 14px; top: 10px; margin: 0; color: var(--arrow, #ffff55); font-size: 12px; }
@media (max-width: 900px) {
  .cin-bar { grid-template-columns: minmax(0, 1fr); }
  .knobs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .knobs .g i { transition: none; } }