/* =========================================================
   Live photo wall (/live/) — sized in vh/vw so it fills any TV (and stacks on a phone).
   Colors, fonts and the bat/flap animations come from /styles.css.
   ========================================================= */
body.tv {
  --edge: 3vw;                                   /* margin around the screen */
  --qr-w: clamp(180px, 17vw, 400px);             /* width of the QR card */
  --side: calc(var(--qr-w) + var(--edge) * 2);   /* kept clear on BOTH sides, so the photo is centered and never reaches the QR card */
  height: 100vh; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 55%, rgba(139, 92, 246, .22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(255, 122, 26, .16), transparent 60%),
    var(--bg);
}
body.tv.idle { cursor: none; }

/* dim collage of the night's photos behind everything */
.tv-mosaic {
  position: fixed; inset: -2vh; z-index: -2;
  display: grid; grid-template-columns: repeat(var(--cols, 9), 1fr); grid-auto-rows: calc((100vw + 4vh) / var(--cols, 9));
  opacity: .2; filter: saturate(.6) blur(1px);
}
.tv-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s; }
.tv-mosaic img.swap { opacity: 0; }
/* darkens the collage toward the edges so the spotlight and text stand out */
body.tv::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 55%, rgba(10, 6, 18, .1), rgba(10, 6, 18, .85));
}
.tv .bats { position: fixed; inset: 0 0 50% 0; z-index: -1; }

/* ---------- header ---------- */
.tv-header { position: fixed; top: 3.5vh; left: var(--edge); z-index: 1; }
.tv-eyebrow {
  display: flex; align-items: center; gap: 1.2vw; margin: 0 0 .6vh;
  font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .25em;
  font-size: clamp(11px, 1.6vh, 22px); color: var(--orange-2);
}
.tv-live { display: inline-flex; align-items: center; gap: .6vw; color: var(--green); }
.tv-live .dot { width: 1.1vh; height: 1.1vh; }
.tv-live.trouble { color: var(--orange-2); }
.tv-live.trouble .dot { background: var(--orange-2); box-shadow: 0 0 10px var(--orange-2); }
.tv-title {
  font-family: var(--font-display); font-weight: 400; white-space: nowrap;
  font-size: clamp(28px, 7vh, 96px); line-height: 1; color: var(--orange);
  text-shadow: 0 0 14px rgba(255, 122, 26, .6), 0 0 40px rgba(255, 122, 26, .3), 0 .5vh 0 #4a1f00;
}

/* ---------- spotlight ---------- */
/* the whole screen, minus room for the header above and the QR card's width on each side */
.tv-stage { position: fixed; inset: 0; padding: 15vh var(--side) 5vh; display: grid; place-items: center; }
.polaroid {
  grid-area: 1 / 1;
  position: relative; margin: 0;
  display: flex; flex-direction: column;
  padding: 1.6vh 1.6vh 0;
  background: #f4ebdd; color: #1a0f22;
  box-shadow: 0 3vh 7vh rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
  transform: rotate(var(--tilt, -1.5deg));
}
.polaroid img {
  display: block; width: auto; height: auto;
  max-width: calc(100vw - var(--side) * 2 - 3.2vh); max-height: 64vh; /* leaves room for the frame and caption */
  background: #000;
}
.polaroid figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2vw;
  padding: 1.6vh .4vh 2vh; min-height: 8vh;
  font-family: var(--font-accent); font-size: clamp(14px, 3vh, 40px); line-height: 1.2;
}
.polaroid figcaption small { font-size: .6em; color: #6b5a7a; white-space: nowrap; }
/* "New!" and the fun badges: stamped onto a corner of the polaroid (tv.js picks the text, color and timing) */
.polaroid-badge {
  position: absolute; top: -2.4vh; left: -2.2vh; z-index: 1;
  padding: .8vh 1.8vh .6vh;
  background: var(--orange); color: #1a0a00;
  font-family: var(--font-display); font-size: clamp(16px, 3.8vh, 52px); letter-spacing: .05em; line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 1vh 2.5vh rgba(0, 0, 0, .55);
  transform: rotate(var(--badge-tilt, -8deg));
  animation: badge-stamp .45s cubic-bezier(.3, 1.6, .5, 1) var(--delay, .9s) both;
}
.polaroid-badge.right { left: auto; right: -2.2vh; transform: rotate(calc(var(--badge-tilt, -8deg) * -1)); animation-name: badge-stamp-right; }
.polaroid-badge.green { background: var(--green); color: #0d2603; }
.polaroid-badge.purple { background: var(--purple); color: #fff; }
@keyframes badge-stamp {
  from { opacity: 0; transform: rotate(var(--badge-tilt, -8deg)) scale(2.6); }
  to   { opacity: 1; transform: rotate(var(--badge-tilt, -8deg)) scale(1); }
}
@keyframes badge-stamp-right {
  from { opacity: 0; transform: rotate(calc(var(--badge-tilt, -8deg) * -1)) scale(2.6); }
  to   { opacity: 1; transform: rotate(calc(var(--badge-tilt, -8deg) * -1)) scale(1); }
}
.polaroid.enter { animation: polaroid-in 1s cubic-bezier(.2, .9, .3, 1.15) both; }
.polaroid.new.enter { animation-name: polaroid-drop; animation-duration: 1.1s; }
.polaroid.leave { animation: polaroid-out .7s ease-in both; }
@keyframes polaroid-in {
  from { opacity: 0; transform: rotate(calc(var(--tilt) + 4deg)) scale(.94); }
  to   { opacity: 1; transform: rotate(var(--tilt)); }
}
@keyframes polaroid-drop {
  0%   { opacity: 0; transform: translateY(-40vh) rotate(-14deg) scale(1.15); }
  60%  { opacity: 1; transform: translateY(1.5vh) rotate(calc(var(--tilt) + 1deg)); }
  100% { opacity: 1; transform: rotate(var(--tilt)); }
}
@keyframes polaroid-out {
  to { opacity: 0; transform: translateX(-6vw) rotate(calc(var(--tilt) - 6deg)) scale(.92); }
}

.tv-empty { grid-area: 1 / 1; text-align: center; }
.tv-empty-title {
  margin: 0; font-family: var(--font-display); font-size: clamp(32px, 11vh, 150px); line-height: 1;
  color: var(--green); text-shadow: 0 0 2vh rgba(134, 255, 77, .45), 0 .5vh 0 #1d4a0c;
}
.tv-empty-text { margin: 2vh 0 0; font-family: var(--font-accent); font-size: clamp(14px, 3.4vh, 44px); color: var(--text); }

/* ---------- QR card, bottom right ---------- */
.tv-qr {
  position: fixed; right: var(--edge); bottom: 4vh; width: var(--qr-w);
  padding: 2.2vh; border-radius: 2vh; text-align: center;
  background: linear-gradient(180deg, rgba(255, 122, 26, .2), rgba(255, 122, 26, .06));
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 5vh rgba(255, 122, 26, .2);
}
.tv-qr img {
  width: 100%; aspect-ratio: 1; margin: 0 auto;
  padding: 1.6vh; background: #fff; border-radius: 1.2vh; /* white margin around the code helps phones read it */
}
.tv-qr-title { margin: 1.6vh 0 .4vh; font-family: var(--font-display); font-size: clamp(16px, 3.6vh, 48px); line-height: 1.05; color: var(--orange); }
.tv-qr-when { margin: 0 0 .8vh; font-family: var(--font-accent); font-size: clamp(11px, min(2vh, 1.05vw), 28px); line-height: 1.3; color: var(--green); }
.tv-qr-url { margin: 0; font-family: var(--font-accent); font-size: clamp(10px, min(1.9vh, .95vw), 26px); color: var(--text); letter-spacing: .02em; }

/* ---------- Now playing in the gRAVE, bottom left ---------- */
/* Mirrors the QR card. tv.js sets body[data-grave="on"] from the moment the party starts until a few hours
   after the music stops. Everything in it is sized in --np-unit, 1% of the card's width, so it scales as one. */
body.tv:not([data-grave="on"]) .tv-np { display: none; }
.tv-np {
  --np-unit: calc(var(--qr-w) / 100);
  position: fixed; left: var(--edge); bottom: 4vh; width: var(--qr-w);
  padding: calc(var(--np-unit) * 6) calc(var(--np-unit) * 6.5); border-radius: 2vh;
  background: linear-gradient(180deg, rgba(134, 255, 77, .12), rgba(134, 255, 77, .03)), rgba(10, 6, 18, .6);
  border: 1px solid rgba(134, 255, 77, .45);
  box-shadow: 0 0 5vh rgba(134, 255, 77, .14);
}
/* "gRAVE" keeps its lowercase g, so no uppercase transform here */
.tv-np-eyebrow {
  display: flex; align-items: center; gap: calc(var(--np-unit) * 3); margin: 0;
  font-family: var(--font-accent); font-size: calc(var(--np-unit) * 4.6); letter-spacing: .06em; color: var(--green);
}
.tv-np .np-eq { flex: none; height: 1.1em; gap: .2em; }
.tv-np .np-eq i { width: .2em; }
.tv-np.idle .np-eq i { animation: none; transform: scaleY(.3); opacity: .6; }
.tv-np-title {
  margin: calc(var(--np-unit) * 3) 0 0;
  font-family: var(--font-display); font-size: calc(var(--np-unit) * 10.5); line-height: 1.05;
  color: var(--green); text-shadow: 0 0 1.6vh rgba(134, 255, 77, .45), 0 .3vh 0 #1d4a0c;
  overflow-wrap: anywhere;
}
.tv-np-artist { margin: calc(var(--np-unit) * 1.5) 0 0; font-family: var(--font-accent); font-size: calc(var(--np-unit) * 6); line-height: 1.25; color: var(--text); }
.tv-np-artist:empty { display: none; }

/* ---------- full-screen hint ---------- */
.tv-hint {
  position: fixed; left: 50%; bottom: 2vh; transform: translateX(-50%); margin: 0;
  padding: .6em 1.2em; border-radius: 999px;
  background: rgba(10, 6, 18, .8); border: 1px solid var(--border);
  font-family: var(--font-accent); font-size: 14px; color: var(--muted);
  transition: opacity .4s;
}
body.idle .tv-hint, body.fullscreen .tv-hint { opacity: 0; pointer-events: none; }
.tv-add { display: none; }

/* opened on a phone (or any portrait screen): title on one line, QR card swapped for an Add Photos button */
@media (orientation: portrait) {
  body.tv { --side: 4vw; }
  .tv-title { font-size: min(7.6vw, 6vh); }
  .tv-stage { padding: 14vh var(--side) 14vh; }
  .polaroid img { max-height: 52vh; }
  .tv-qr, .tv-hint { display: none; }
  /* the gRAVE card tucks in under the title, and the photo moves down to make room */
  .tv-np {
    --np-unit: 2.7px;
    position: static; width: auto; max-width: calc(100vw - var(--edge) * 2);
    margin-top: 1.4vh; padding: calc(var(--np-unit) * 4) calc(var(--np-unit) * 5.5); border-radius: 1.4vh;
  }
  /* kept to a few lines: a long title stops at two, the artist at one */
  .tv-np-title {
    font-size: calc(var(--np-unit) * 8);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .tv-np-artist { font-size: calc(var(--np-unit) * 5.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.tv[data-grave="on"] .tv-stage { padding-top: calc(5vh + 180px); } /* the card is a fixed size, the header mostly vh */
  body.tv[data-grave="on"] .polaroid img { max-height: 46vh; }
  /* centered with auto margins, not a transform: pressing a .btn sets its own transform, which used to
     knock the button half its width sideways the moment a finger touched it */
  .tv-add {
    display: block; position: fixed; left: 0; right: 0; bottom: calc(3vh + env(safe-area-inset-bottom));
    width: max-content; margin-inline: auto; white-space: nowrap;
  }
}