/* ============================================================
   MYSTERY EXPERIENCE — the route composer

   The one thing on this site that is genuinely ours: you answer
   the same questions we ask at booking, and the shape of your
   evening assembles in front of you. Then you can play it forward
   and watch it unlock stop by stop, exactly the way the real
   night does.

   It never names a venue. It shows rhythm, timing and shape —
   which is precisely what we sell.

   The whole thing is injected by composer.js. Without JS the
   placeholder copy stands on its own, so nothing here can strand
   a visitor in a broken control.
   ============================================================ */

.composer{
  display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:46px;align-items:start;
}

/* ---------- the questions ---------- */
.cmp-ask{display:grid;gap:26px}
.cmp-field legend,.cmp-field .lg{
  display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;font-weight:600;padding:0;
}
.cmp-field{border:0;padding:0;margin:0;min-width:0}
.cmp-field legend{display:flex;align-items:center;gap:14px;width:100%}

/* the most on-brand control on the site: don't decide */
.cmp-shuffle{
  margin-left:auto;font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-text);font-weight:600;
  border:1px solid var(--line-soft);border-radius:100px;padding:5px 13px;
  transition:color .25s,border-color .25s,background .25s;
}
.cmp-shuffle:hover{color:var(--gold);border-color:var(--line);background:var(--gold-glow)}
.cmp-opts{display:flex;flex-wrap:wrap;gap:9px}

/* real checkboxes and radios, styled as chips — keyboard works for free */
.cmp-opts input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;overflow:hidden}
.cmp-opts label{
  display:inline-block;padding:10px 18px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line-soft);color:var(--mist);font-size:.9rem;
  transition:border-color .25s,background .25s,color .25s,transform .2s var(--ease);
  user-select:none;
}
.cmp-opts label:hover{border-color:var(--line);color:var(--cream)}
.cmp-opts input:checked + label{
  border-color:var(--gold);background:rgba(232,163,61,.12);color:var(--gold);
}
.cmp-opts input:focus-visible + label{outline:2px solid var(--gold);outline-offset:3px}
.cmp-opts input:checked + label{transform:translateY(-1px)}

.cmp-avoid input{
  width:100%;padding:13px 16px;border-radius:10px;background:rgba(14,20,40,.7);
  border:1px solid var(--line-soft);font-size:.95rem;transition:border-color .25s,box-shadow .25s;
}
.cmp-avoid input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.cmp-hint{font-size:.82rem;color:var(--slate-text);margin:8px 0 0}

/* ---------- the stage ---------- */
.cmp-stage{
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(170deg,rgba(26,35,64,.62),rgba(14,20,40,.5));
}
.cmp-art{position:relative;aspect-ratio:680/400;width:100%}
.cmp-art svg{position:absolute;inset:0;width:100%;height:100%}

/* labels ride above the drawing, positioned from the same coordinates */
.cmp-labels{position:absolute;inset:0;pointer-events:none}
.cmp-label{
  position:absolute;transform:translate(-50%,0);text-align:center;width:132px;
  opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.cmp-label.lit{opacity:1}
.cmp-label .lt{
  display:block;font-family:var(--serif);font-size:.98rem;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.cmp-label .ld{
  display:block;font-size:.76rem;color:var(--mist);line-height:1.32;margin-top:3px;
}

/* the clock that runs the evening */
.cmp-clock{
  position:absolute;top:16px;right:18px;font-family:var(--serif);
  font-size:1.5rem;color:var(--cream);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .4s;letter-spacing:.02em;
}
.cmp-clock.on{opacity:1}
.cmp-seal-note{
  position:absolute;top:18px;left:20px;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-text);transition:color .4s,opacity .4s;
}
.cmp-seal-note.live{color:var(--gold)}

/* ---------- readout and actions ---------- */
.cmp-read{
  padding:22px 26px;border-top:1px solid var(--line-soft);
  color:var(--mist);font-size:1.02rem;margin:0;line-height:1.55;
}
.cmp-read strong{color:var(--cream);font-weight:400}
.cmp-read .av{color:var(--gold)}
.cmp-actions{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:0 26px 24px;
}
.cmp-actions .btn{flex:0 0 auto}
.cmp-play{
  display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:100px;
  border:1px solid var(--line);color:var(--cream);font-size:.92rem;font-weight:600;
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.cmp-play:hover:not([disabled]){border-color:var(--gold);background:var(--gold-glow);transform:translateY(-2px)}
.cmp-play[disabled]{opacity:.45;cursor:not-allowed}
.cmp-play .tri{
  width:0;height:0;border-left:9px solid var(--gold);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.cmp-play.playing .tri{
  border:0;width:9px;height:11px;background:var(--gold);border-radius:1px;
}

/* the constraint we plan around, shown as a promise rather than a field */
.cmp-guard{
  display:inline-flex;align-items:center;gap:9px;margin:0 26px 22px;
  padding:8px 15px;border-radius:100px;border:1px dashed var(--line);
  font-size:.82rem;color:var(--gold);
}
.cmp-guard[hidden]{display:none}
.cmp-guard .x{font-size:.9rem;opacity:.8}

/* ---------- empty state ---------- */
.cmp-empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;
  color:var(--slate-text);font-size:.95rem;transition:opacity .4s;
}
.cmp-empty[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .composer{grid-template-columns:1fr;gap:32px}
  .cmp-label{width:104px}
  .cmp-label .lt{font-size:.86rem}
  .cmp-label .ld{font-size:.68rem}
  .cmp-clock{font-size:1.2rem;top:12px;right:14px}
}
@media (max-width:560px){
  .cmp-art{aspect-ratio:1/1}
  .cmp-label{width:92px}
  .cmp-label .ld{display:none}          /* times only — the picture carries the rest */
  .cmp-read{padding:18px 20px;font-size:.95rem}
  .cmp-actions{padding:0 20px 20px}
  .cmp-actions .btn,.cmp-play{width:100%;justify-content:center}
  .cmp-guard{margin:0 20px 18px}
}

/* ---------- reduced motion: no travel, everything simply shown ---------- */
@media (prefers-reduced-motion:reduce){
  .cmp-label{transition:none}
  .cmp-play{display:none}               /* nothing to play if nothing animates */
  .cmp-clock{display:none}
}