/* Layout: a fixed 2000×1127 (16:9) stage, scaled to fit the window
   and centred on a dark ground. Scenes are stacked layers; only the active one takes input. */
:root {
  --ground: #0b080b;
  --ink: #f3eef2;
  --pink: #f08cb3;
  --pink-deep: #ee2a63;
  --cyan: #8fe3e8;
  --cyan-deep: #5fb9c0;
  --halo: rgba(255, 255, 255, .9);
  --cursor-star: url("../assets/images/cursor-star.svg") 16 16, pointer;
  --cursor-shards: url("../assets/images/cursor-star-shards.svg") 15 16, pointer;
  color-scheme: dark;
}

html, body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--ground);
  color: var(--ink);
  overflow: hidden;
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
[hidden] { display: none !important; }

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2000px;
  height: 1127px;
  transform: translate(-50%, -50%) scale(var(--fit, .5));
  overflow: hidden;
  background: var(--ground);
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 0 0;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- halo: the breathing white outline that marks the one thing to act on ---------- */
.halo-target {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: var(--cursor-shards);
  outline: none;
}
.halo-target::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 4px solid var(--halo);
  filter: blur(3px);
  opacity: .55;
  animation: breathe 2.6s ease-in-out infinite;
  transition: opacity .3s ease;
}
.halo-target:hover::before,
.halo-target:focus-visible::before { animation: none; opacity: .95; }
.halo-target:focus-visible::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  outline: 2px solid #fff;
}
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }

/* ---------- 1. room ---------- */
#tv-hotspot {
  left: 765px;
  top: 428px;
  width: 460px;
  height: 307px;
  border-radius: 14px;
}

/* ---------- 2–3. TV close-up ---------- */
#screen {
  position: absolute;
  left: 395px;
  top: 195px;
  width: 990px;
  height: 740px;
  border-radius: 9% / 12%;
  overflow: hidden;
}
#band {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #c6edf3, #b9e1e8 70%, #a9d2d9);
}
/* the stage and the four members, cut out so each sways on its own (tools/cut-band.py) */
.band-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-image: url("../assets/images/tv-closeup.svg");
  background-size: 2000px 1127px;
  will-change: transform;
}
#curtain-left {
  left: 0;
  background-position: -395px -195px;
  transform-origin: 0 50%;
  box-shadow: 8px 0 18px rgba(0, 0, 0, .35);
}
#curtain-right {
  right: 0;
  background-position: -890px -195px;
  transform-origin: 100% 50%;
  box-shadow: -8px 0 18px rgba(0, 0, 0, .35);
}
#screen-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .12;
  pointer-events: none;
}
/* band members: each sways gently from its feet; the one to click next glows along its outline */
.member, .fig {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  outline: none;
  transform-origin: 50% 100%;
  animation: sway var(--sway-t, 3.6s) ease-in-out var(--sway-d, 0s) infinite alternate;
}
.member img, .fig img {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter .35s ease;
}
.member[data-i="0"], .fig[data-i="0"] { left: 71.1px;  top: 244.2px; width: 147.2px; height: 265.6px; --sway-t: 3.1s; --sway-d: -.4s; }
.member[data-i="1"], .fig[data-i="1"] { left: 436.7px; top: 111px;   width: 195.1px; height: 214.7px; --sway-t: 2.6s; --sway-d: -1.3s; --sway-a: .6deg; }
.member[data-i="2"], .fig[data-i="2"] { left: 743.4px; top: 236.2px; width: 181.6px; height: 288.3px; --sway-t: 3.8s; --sway-d: -2.1s; }
.member[data-i="3"], .fig[data-i="3"] { left: 418.3px; top: 344.1px; width: 287.1px; height: 359.5px; --sway-t: 3.3s; --sway-d: -.9s; --sway-a: .9deg; }
@keyframes sway {
  from { transform: rotate(calc(var(--sway-a, 1.2deg) * -1)); }
  to { transform: rotate(var(--sway-a, 1.2deg)); }
}
.member.is-next {
  pointer-events: auto;
  cursor: var(--cursor-shards);
}
/* the glow animation itself is written by js/looks.js from the glow settings */

/* the play key: the TV's own fourth push-button, cut from the photo so it can sink */
#play {
  position: absolute;
  left: 1523px;
  top: 864px;
  width: 36px;
  height: 92px;
  cursor: var(--cursor-star);
  outline: none;
  pointer-events: none;
}
#play.is-armed { pointer-events: auto; cursor: var(--cursor-shards); }
#play.is-spent { cursor: var(--cursor-star); }
#play-well {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: #0a0507;
}
#play-cap {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/tv-closeup.svg");
  background-size: 2000px 1127px;
  background-position: -1523px -864px;
  border-radius: 2px;
  transition: box-shadow 140ms ease, filter 140ms ease;
}
#play.is-armed:hover #play-cap,
#play.is-contact #play-cap { filter: brightness(1.35); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
#play:focus-visible #play-cap { box-shadow: 0 0 0 3px #fff; }
#play-halo {
  position: absolute;
  inset: -9px;
  border-radius: 7px;
  border: 4px solid var(--halo);
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
}
#play.is-armed #play-halo { opacity: .55; animation: breathe 2.6s ease-in-out infinite; }
#play.is-armed:hover #play-halo,
#play.is-contact #play-halo { animation: none; opacity: .95; }
#play.is-spent #play-halo { animation: none; opacity: 0; }

/* ---------- 4–5. guitar close-up: strum and tear happen inside the TV screen ---------- */
#strum, #tear {
  position: absolute;
  left: 0;
  top: 0;
  width: 990px;
  height: 740px;
  display: block;
  touch-action: none;
  cursor: var(--cursor-star);
  visibility: hidden;
  pointer-events: none;
}
#screen.is-strum #strum { visibility: visible; pointer-events: auto; }
#screen.is-tearing #tear { visibility: visible; pointer-events: auto; animation: fade-in .8s ease both; }
#screen.is-tearing #strum { animation: fade-out .6s ease .8s both; pointer-events: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- 6. inside ---------- */
/* effects over the performance space; everything blends as light */
#inside-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: visible;
}
#room-spots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
#inside-notes, .tv-notes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#inside-fx .beam { transform-box: fill-box; transform-origin: 50% 0; animation: beam-sweep 7s ease-in-out infinite alternate; }
#inside-fx .beam.b2 { animation-duration: 9s; animation-delay: -3s; }
@keyframes beam-sweep { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
#inside-tv {
  position: absolute;
  left: 828px;
  top: 461px;
  width: 277px;
  height: 211px;
  border-radius: 10% / 13%;
  overflow: hidden;
  background: #c6edf3;
}
.mini-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 990px;
  height: 740px;
  transform-origin: 0 0;
  transform: scale(.2798, .2851);
}
.fig { pointer-events: none; }
.inside-tv-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 18px rgba(10, 30, 34, .45);
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .08), rgba(20, 60, 66, .12) 80%);
  pointer-events: none;
}
#scene-inside.is-active .inside-tv-glass { animation: tv-flicker 6s steps(1) infinite; }
@keyframes tv-flicker {
  0%, 100% { opacity: 1; } 31% { opacity: .75; } 32% { opacity: 1; } 77% { opacity: .82; } 78% { opacity: 1; }
}

/* ---------- dialog (after the reference dialog box) ---------- */
.dialog {
  position: absolute;
  left: 620px;
  top: 905px;
  width: var(--dlg-width, 760px);
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, .28));
}
.dialog.is-intro { scale: .7; transform-origin: 0 100%; }
.dialog.is-ending {
  left: 1180px;
  top: 300px;
  width: calc(var(--dlg-width, 760px) * .9474);
}
/* colors, frame thickness, width and entrance curve come from the control panel (js/looks.js) */
.dialog {
  --dlg-b: var(--dlg-border, 3px);
  --dlg-p: var(--dlg-pink, var(--pink));
  --dlg-c: var(--dlg-cyan, var(--cyan-deep));
  --dlg-c-lt: color-mix(in srgb, var(--dlg-c) 55%, white);
}
.dialog.is-in { animation: dialog-in 420ms var(--dlg-ease, cubic-bezier(.2, .9, .3, 1.2)) both; }
@keyframes dialog-in {
  0% { opacity: 0; transform: translateY(14px) scale(.96); }
  100% { opacity: 1; transform: none; }
}
.dialog-box {
  position: relative;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--dlg-p) 7%, transparent) 1px, transparent 1.4px) 0 0 / 7px 7px,
    #fbfafa;
  padding: 34px 56px 36px;
  outline: var(--dlg-b) solid var(--dlg-p);
  outline-offset: -12px;
  box-shadow:
    0 0 0 var(--dlg-b) #fff,
    0 0 0 calc(var(--dlg-b) * 2) var(--dlg-p),
    0 0 0 calc(var(--dlg-b) * 3) rgba(255, 255, 255, .6),
    0 0 0 calc(var(--dlg-b) * 3.67) color-mix(in srgb, var(--dlg-p) 75%, transparent);
}
.dialog-box::after {
  /* the cyan frame, offset like a misregistered print */
  content: "";
  position: absolute;
  inset: 10px -16px -16px 22px;
  border: var(--dlg-b) solid var(--dlg-c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dlg-c-lt) 45%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--dlg-c-lt) 35%, transparent);
  pointer-events: none;
}
.dialog-text {
  margin: 0;
  font-weight: 300;
  font-size: 50px;
  line-height: 1.22;
  letter-spacing: .5px;
  text-align: center;
  color: var(--dlg-p);
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--dlg-c-lt) 90%, transparent);
}
/* eyes on the box corners, drawn by js/looks.js; centred on their corner */
.dialog-eye { position: absolute; translate: -50% -50%; overflow: visible; z-index: 1; pointer-events: none; }
.dialog-eye[data-corner="tl"] { left: 30px; top: -6px; }
.dialog-eye[data-corner="br"] { left: 100%; top: 100%; }
.dialog-eye[data-corner="tr"] { left: calc(100% - 30px); top: -6px; }
.dialog-eye[data-corner="bl"] { left: 0; top: 100%; }

#ending {
  position: absolute;
  left: 1180px;
  width: 720px;
  top: 640px;
  display: flex;
  justify-content: center;
  z-index: 21;
}
#ending.is-in { animation: dialog-in 500ms ease both; animation-delay: 400ms; }
#restart {
  font: 400 40px/1 "Raleway", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 2px;
  color: var(--pink-deep);
  background: #fbfafa;
  border: 0;
  padding: 22px 64px;
  cursor: var(--cursor-shards);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink), 10px 10px 0 4px rgba(143, 227, 232, .8), 0 0 30px rgba(255, 255, 255, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
#restart:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink), 12px 12px 0 4px rgba(143, 227, 232, .95), 0 0 40px rgba(255, 255, 255, .5); }
#restart:focus-visible { outline: 3px solid #fff; outline-offset: 10px; }

@media (prefers-reduced-motion: reduce) {
  .halo-target::before, #play.is-armed #play-halo { animation: none; opacity: .7; }
  .member { animation: none; }
  .member.is-next img { animation: none; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #fff); }
  #scene-inside.is-active .inside-tv-glass { animation: none; }
  #inside-fx .beam { animation: none; }
  .fig { animation: none; }
}

/* ---------- motion control panel (js/panel.js): floats over the left edge, collapses to a tab ---------- */
:root {
  --tune-bg: rgba(24, 12, 24, .9);
  --tune-raised: rgba(255, 255, 255, .06);
  --tune-line: rgba(240, 140, 179, .28);
  --tune-ink: #f3eef2;
  --tune-dim: #b7a5b5;
  --tune-pink: #f0478c;
  --tune-cyan: #6fe3ea;
  --tune-metal: #8d8b8a;
  --tune-string: #cfd9da;
  --tune-paper: #ecebe7;
}
#tune {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: calc(16px + env(safe-area-inset-top, 0px));
  z-index: 100;
  width: min(312px, calc(100vw - 32px));
  max-height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  background: var(--tune-bg);
  color: var(--tune-ink);
  border: 1px solid var(--tune-line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
  font: 400 13px/1.35 "Raleway", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
.tune-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--tune-line); }
.tune-head h2 { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--tune-pink); }
.tune-toggle { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--tune-line); border-radius: 8px; background: transparent; color: var(--tune-ink); cursor: var(--cursor-shards); }
.tune-toggle svg { width: 16px; height: 16px; transition: transform .25s ease; }
.tune-body { overflow-y: auto; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
#tune.is-collapsed { width: auto; }
#tune.is-collapsed .tune-body { display: none; }
#tune.is-collapsed .tune-head { border-bottom: 0; }
#tune.is-collapsed .tune-toggle svg { transform: rotate(180deg); }
.tune-sec { display: flex; flex-direction: column; gap: 9px; padding: 12px 0 14px; border-bottom: 1px solid var(--tune-line); }
.tune-sec-head { display: flex; align-items: center; justify-content: space-between; }
.tune-sec h3 { margin: 0; font-size: 15px; font-weight: 400; }
.tune-try { font: inherit; font-size: 12px; color: var(--tune-cyan); background: transparent; border: 1px solid rgba(111, 227, 234, .45); border-radius: 999px; padding: 4px 12px; cursor: var(--cursor-shards); }
.tune-try:hover { background: rgba(111, 227, 234, .12); }
.tune-preview { display: block; width: 100%; height: 92px; border-radius: 8px; background: var(--tune-raised); }
.tune-row { display: flex; flex-direction: column; gap: 4px; }
.tune-row label, .tune-label { display: flex; justify-content: space-between; gap: 8px; color: var(--tune-ink); }
.tune-range { color: var(--tune-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.tune-ctl { display: flex; align-items: center; gap: 10px; }
.tune-ctl output { min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; color: var(--tune-cyan); }
.tune-ctl input[type=range] {
  flex: 1; min-width: 0; height: 18px; margin: 0; background: transparent; cursor: var(--cursor-shards);
  -webkit-appearance: none; appearance: none;
}
.tune-ctl input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--tune-pink) var(--p, 50%), rgba(255, 255, 255, .18) var(--p, 50%)); }
.tune-ctl input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.tune-ctl input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--tune-pink); }
.tune-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--tune-pink); }
.tune-ctl input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--tune-pink); }
.tune-ctl input[type=range].is-changed + output::after { content: " •"; color: var(--tune-pink); }
.tune-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tune-chip { font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--tune-line); background: transparent; color: var(--tune-dim); cursor: var(--cursor-shards); }
.tune-chip:hover { color: var(--tune-ink); }
.tune-chip.is-on { background: var(--tune-pink); border-color: var(--tune-pink); color: #fff; }
.tune-actions { display: flex; gap: 8px; padding-top: 12px; }
.tune-btn { flex: 1; font: inherit; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--tune-line); background: var(--tune-raised); color: var(--tune-ink); cursor: var(--cursor-shards); }
.tune-btn:hover { border-color: var(--tune-pink); }
.tune-btn.is-primary { background: var(--tune-pink); border-color: var(--tune-pink); color: #fff; }
.tune-status { margin: 4px 0 0; min-height: 1.35em; font-size: 12px; color: var(--tune-cyan); }
.tune-copytext { width: 100%; height: 150px; box-sizing: border-box; resize: vertical; font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--tune-ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--tune-line); border-radius: 8px; padding: 8px; -webkit-user-select: text; user-select: text; }
#tune button:focus-visible, #tune input:focus-visible { outline: 2px solid var(--tune-cyan); outline-offset: 2px; }
.tune-tabs { display: flex; gap: 4px; padding: 10px 0 2px; }
.tune-tab { flex: 1; font: inherit; font-size: 13px; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--tune-line); background: transparent; color: var(--tune-dim); cursor: var(--cursor-shards); }
.tune-tab:hover { color: var(--tune-ink); }
.tune-tab.is-on { background: var(--tune-raised); border-color: var(--tune-pink); color: var(--tune-ink); }
.tune-pane[hidden] { display: none; }
.tune-sec-btns { display: flex; gap: 6px; }
.tune-row-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.tune-row-inline .tune-ctl { gap: 8px; }
.tune-ctl input[type=color] { width: 40px; height: 26px; padding: 0 2px; border: 1px solid var(--tune-line); border-radius: 6px; background: transparent; cursor: var(--cursor-shards); }
.tune-ctl select { flex: 1; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--tune-line); background: #1d0f1d; color: var(--tune-ink); cursor: var(--cursor-shards); }
.tune-ctl output.is-changed::after, .tune-ctl select.is-changed + output::after { content: " •"; color: var(--tune-pink); }
.tune-ctl select.is-changed { border-color: var(--tune-pink); }
.tune-notes { margin: -2px 0 0; font-size: 11.5px; color: var(--tune-dim); font-variant-numeric: tabular-nums; }
.tune-glow-box { display: grid; place-items: center; overflow: hidden; background: #2a1430; }
.tune-glow-demo { height: 76px; width: auto; }
#tune select:focus-visible { outline: 2px solid var(--tune-cyan); outline-offset: 2px; }

/* the pointer is the pink star everywhere; over anything you can interact with it becomes the
   star-headed guitarist's head (the strings and the paper edge switch it from js) */
html, body, #stage, #tune, #tune * { cursor: var(--cursor-star); }
#tune button, #tune select, #tune input, #tune label[for] { cursor: var(--cursor-shards); }
#tune textarea { cursor: text; }
.member:not(.is-next) { cursor: var(--cursor-star); }