/* BAD TAKES — the chrome around the picture is a small old cinema after the
   house lights go down: velvet dark, marquee gold, a red bulb over the door,
   film-strip edges on anything that is a timeline. */

@import url('https://fonts.googleapis.com/css2?family=Limelight&family=Anton&family=Barlow:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --booth: #0C0709;        /* house lights down */
  --panel: #1B0F12;        /* velvet */
  --panel-2: #2A171B;
  --rule: #4A2830;         /* seam in the velvet */
  --needle: #E7B54B;       /* marquee gold */
  --needle-dim: #8E6C2C;
  --tally: #E2352F;        /* the red bulb */
  --bone: #F6EBD3;         /* the screen before the picture */
  --dim: #A08A78;

  --display: 'Limelight', 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --label: 'Space Mono', ui-monospace, monospace;

  --gut: clamp(16px, 3vw, 32px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--booth);
  color: var(--bone);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Ticket-stub caption. Used for every small label in the interface. */
.label {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

button {
  font-family: var(--body);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--panel-2);
  color: var(--bone);
  border-radius: 2px;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
button:hover:not(:disabled) { background: #3A2026; border-color: var(--needle-dim); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--needle);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--needle);
  border-color: var(--needle);
  color: #17110A;
}
.btn-primary:hover:not(:disabled) { background: #FFCA5E; border-color: #FFCA5E; }

.btn-record {
  background: var(--tally);
  border-color: var(--tally);
  color: #fff;
}
.btn-record:hover:not(:disabled) { background: #FF4B44; border-color: #FF4B44; }

input[type="text"], input[type="number"] {
  font-family: var(--body);
  background: var(--booth);
  border: 1px solid var(--rule);
  color: var(--bone);
  border-radius: 2px;
  padding: 12px 14px;
  font-size: 16px; /* keeps iOS from zooming the page on focus */
}

/* ---- the marquee: the one persistent strip, bulbs along the bottom ---- */

.tally {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  min-height: 44px;
}
.tally::after {
  /* a row of bulbs; they chase when the room is live */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 8px;
  background: radial-gradient(circle at 4px 4px, var(--needle-dim) 0 2px, transparent 2.6px) 0 0 / 16px 8px repeat-x;
  pointer-events: none;
}
.tally.is-live::after {
  background-image:
    radial-gradient(circle at 4px 4px, var(--needle) 0 2px, transparent 2.6px),
    radial-gradient(circle at 12px 4px, var(--needle-dim) 0 2px, transparent 2.6px);
  background-size: 32px 8px, 32px 8px;
  animation: chase 0.9s steps(2) infinite;
}
@keyframes chase { to { background-position: 16px 0, 16px 0; } }

.tally-lamp {
  width: 54px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--rule);
  background: var(--panel-2);
}
.tally-bulb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #3A2320;
  box-shadow: inset 0 0 0 1px #000;
}
.tally.is-live .tally-bulb {
  background: var(--tally);
  box-shadow: 0 0 14px var(--tally), inset 0 0 0 1px #7A1D18;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.55; } }

.tally-steps {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.tally-step {
  padding: 0 clamp(8px, 1.6vw, 20px);
  font-family: var(--label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6A5048;
  border-right: 1px solid var(--rule);
  line-height: 44px;
  white-space: nowrap;
}
.tally-step.is-done { color: var(--dim); }
.tally-step.is-active {
  color: #17110A;
  background: var(--needle);
}

/* ---- film strip: the clip timeline with the muted regions marked ---- */

.tape {
  position: relative;
  height: 40px;
  background:
    /* sprocket holes, top and bottom rows */
    radial-gradient(3px 4px at 8px 5px, var(--booth) 98%, transparent) 0 0 / 16px 100% repeat-x,
    radial-gradient(3px 4px at 8px calc(100% - 5px), var(--booth) 98%, transparent) 0 0 / 16px 100% repeat-x,
    var(--panel-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.tape-gap {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(226, 53, 47, 0.24);
  border-left: 2px solid var(--tally);
  border-right: 2px solid var(--tally);
}
.tape-gap::after {
  content: 'YOUR LINE';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bone);
  white-space: nowrap;
}
.tape-head {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--needle);
  box-shadow: 0 0 8px var(--needle);
}
.tape-wave {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
  pointer-events: none;
}
.tape-wave i {
  display: block;
  width: 2px;
  background: var(--needle);
  opacity: 0.85;
  border-radius: 1px;
}

/* the picture itself always sits in a thin gilt frame */
video {
  border: 1px solid var(--needle-dim) !important;
  box-shadow: 0 0 0 1px var(--booth), 0 12px 40px rgba(0,0,0,0.55);
}

.mono-code {
  font-family: var(--label);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--needle);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--tally);
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 2px;
  z-index: 99;
  max-width: min(92vw, 460px);
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.toast[hidden] { display: none; }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}