/* Spin, reveal, Watched, QR ticket and rating page polish (layered over styles.css). */
/* No tilting anywhere in here: posters only rise, scale and light up. */


/* =====================================================================
   REVEAL: letterbox, warm spotlights, curtains part, punchier type
   ===================================================================== */
#reveal .bars i { height: 11vh; }
#reveal .bars i:first-child { box-shadow: inset 0 -1px 0 rgba(233, 180, 76, 0.35); }
#reveal .bars i:last-child { box-shadow: inset 0 1px 0 rgba(233, 180, 76, 0.35); }
#reveal .spot { background: linear-gradient(0deg, rgba(255, 236, 196, 0.26), rgba(255, 236, 196, 0.05) 70%, transparent); mix-blend-mode: screen; }
/* a pool of light behind the poster */
#reveal .reveal-card::before {
  content: ""; position: absolute; z-index: -1; left: 150px; top: 50%; width: 640px; height: 640px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 196, 0.16), rgba(255, 236, 196, 0.04) 45%, transparent 68%);
}
#reveal .reveal-poster {
  border-radius: 3px;
  box-shadow:
    0 0 0 1px #3a2410, 0 0 0 3px #f8dc8c, 0 0 0 6px #a8781f, 0 0 0 8px #f6d27a, 0 0 0 10px #4a2f12,
    0 0 100px 10px rgba(255, 236, 196, 0.25), 0 40px 70px rgba(0, 0, 0, 0.85);
}
/* one glint across the glass once the curtains are open */
#reveal .reveal-poster::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 235, 0.38) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  animation: glint 1.2s ease-in-out 2s both;
}
@keyframes glint { from { background-position: 160% 0; } to { background-position: -60% 0; } }
/* "Now showing" as a red neon sign between brass rules */
#reveal .slam {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  font: 400 16px/1 var(--display); letter-spacing: 0.22em; color: #ff6b74;
  text-shadow: 0 0 6px rgba(255, 70, 82, 0.9), 0 0 18px rgba(226, 58, 70, 0.7), 0 0 42px rgba(200, 16, 46, 0.5);
}
#reveal .slam::before, #reveal .slam::after { content: ""; height: 1px; flex: 0 0 34px; background: linear-gradient(90deg, transparent, var(--gold)); box-shadow: none; }
#reveal .slam::after { flex-grow: 1; max-width: 120px; background: linear-gradient(90deg, var(--gold), transparent); }
#reveal .reveal-info h2 {
  font-size: clamp(40px, 6.4vw, 82px); line-height: 0.98; color: #fff6e2;
  text-shadow: 0 1px 0 #f6d27a, 0 3px 0 #a8781f, 0 5px 0 #4a2f12, 0 12px 26px rgba(0, 0, 0, 0.8), 0 0 60px rgba(255, 236, 196, 0.25);
}
#reveal .reveal-info .meta { color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin-top: 18px; }
/* genre chips as little admission tickets */
#reveal .genre {
  padding: 7px 15px; border-radius: 3px; font: 700 11px/1 var(--mono); letter-spacing: 0.14em;
  background: linear-gradient(180deg, #fffaf0, #efe0bd); color: var(--ink);
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
/* the score on a brass-rimmed plaque */
#reveal .score {
  width: fit-content; gap: 14px; margin-top: 24px; padding: 12px 18px 12px 14px; border-radius: 14px;
  border: 1px solid rgba(246, 210, 122, 0.35); background: linear-gradient(180deg, rgba(34, 20, 15, 0.85), rgba(10, 6, 5, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.08), 0 20px 40px -20px rgba(0, 0, 0, 0.9);
}
#reveal .score:has(> .added) { padding: 0; border: 0; background: none; box-shadow: none; }
#reveal .score .num { font-size: 70px; text-shadow: 0 0 30px rgba(246, 210, 122, 0.45), 0 3px 0 #6b4a12; }
#reveal .added { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
@media (max-width: 720px) {
  #reveal .reveal-card::before { left: 50%; top: 24%; width: 420px; height: 420px; }
  #reveal .slam { justify-content: center; }
  #reveal .slam::after { flex-grow: 0; }
  #reveal .score { margin-inline: auto; }
  #reveal .score .num { font-size: 56px; }
}

/* =====================================================================
   DONE: a convincing paper ticket with gold foil, and live results
   ===================================================================== */
#done .qr-side { filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 50px rgba(246, 210, 122, 0.16)); }
#done .ticket {
  border-radius: 12px;
  background:
    repeating-linear-gradient(115deg, rgba(120, 88, 40, 0.035) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(28deg, rgba(120, 88, 40, 0.03) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse 70% 50% at 25% 15%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(ellipse 60% 60% at 85% 95%, rgba(176, 132, 64, 0.2), transparent 70%),
    linear-gradient(180deg, #fcf5e3, #ecdcb3);
}
/* gold-foil inner border, then a fine red rule */
#done .ticket::before {
  inset: 9px; border: 1.5px solid transparent; border-radius: 7px;
  background: linear-gradient(135deg, #f8dc8c, #9c6c18 28%, #fff1c2 50%, #9c6c18 72%, #f8dc8c) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}
#done .ticket::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(200, 16, 46, 0.22); border-radius: 4px; pointer-events: none; }
#done .ticket-main { position: relative; padding: 26px 26px 22px; }
/* perforation between the ticket and the stub */
#done .ticket-main::after {
  content: ""; position: absolute; top: 16px; bottom: 16px; right: -3px; width: 6px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(6, 4, 5, 0.82) 1.6px, transparent 2.2px) 0 0 / 6px 9px repeat-y;
}
#done .ticket-stub { border-left: 0; }
#done .t-label {
  margin-bottom: 14px; font: 400 17px/1 var(--display); letter-spacing: 0.24em;
  background: linear-gradient(100deg, #6b4508 0%, #a8781f 25%, #e9c46a 42%, #9c6c18 58%, #6b4508 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 -1px 0 rgba(90, 60, 10, 0.35));
  animation: foil 5s ease-in-out infinite;
}
@keyframes foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
#done .qr { padding: 10px; border-radius: 6px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(22, 12, 9, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8); }
#done .ticket-stub span {
  font-size: 23px; color: transparent;
  background: linear-gradient(180deg, #e3323f, #8f0b1e); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}
#done .ticket-stub b { color: #9c1a26; letter-spacing: 0.22em; }
#done .qr-url { color: var(--faint); }

#done .done-info .slam { font: 400 15px/1 var(--display); letter-spacing: 0.26em; color: var(--gold-2); text-shadow: 0 0 18px rgba(246, 210, 122, 0.45); }
#done .done-info h2 { text-shadow: 0 1px 0 #f6d27a, 0 3px 0 #a8781f, 0 5px 0 #4a2f12, 0 12px 26px rgba(0, 0, 0, 0.8); }
#done .live > div {
  border-radius: 14px; border-color: rgba(233, 180, 76, 0.22);
  background: linear-gradient(180deg, rgba(34, 20, 15, 0.9), rgba(10, 6, 5, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.07), 0 18px 34px -20px rgba(0, 0, 0, 0.9);
}
#done .live-avg {
  border-color: rgba(246, 210, 122, 0.6) !important;
  background: radial-gradient(ellipse 80% 90% at 30% 0%, rgba(246, 210, 122, 0.14), transparent 70%), linear-gradient(180deg, rgba(40, 24, 14, 0.95), rgba(12, 8, 6, 0.95)) !important;
  box-shadow: 0 0 0 4px rgba(10, 6, 5, 0.85), 0 0 0 5px rgba(233, 180, 76, 0.22), 0 0 50px -12px rgba(246, 210, 122, 0.45) !important;
}
#done .live-avg b { font-size: 70px; text-shadow: 0 0 26px rgba(246, 210, 122, 0.5), 0 3px 0 #6b4a12; }
#done .live b { text-shadow: 0 0 18px rgba(246, 210, 122, 0.3); }
/* the spread as a segmented level meter */
#done .spread { height: 86px; gap: 6px; margin-top: 22px; padding-bottom: 2px; border-bottom: 1px solid var(--line-2); }
#done .spread i { border-radius: 3px 3px 0 0; background: rgba(246, 210, 122, 0.05); }
#done .spread i::before {
  border-radius: 3px 3px 0 0; background: linear-gradient(0deg, #a50d22, #e23a46 35%, #f6d27a);
  background-size: 100% 86px; background-position: bottom;
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 6px, transparent 6px 8px);
  mask: repeating-linear-gradient(0deg, #000 0 6px, transparent 6px 8px);
  filter: drop-shadow(0 0 6px rgba(246, 210, 122, 0.35));
}
#done .spread i::after { bottom: -20px; }
#done .done-info .actions { margin-top: 34px; }
@media (max-width: 520px) {
  #done .ticket-main { padding: 22px 18px 18px; }
  #done .qr { padding: 7px; }
  #done .t-label { font-size: 14px; letter-spacing: 0.14em; white-space: nowrap; }
  #done .live { flex-wrap: nowrap; gap: 8px; }
  #done .live > div { flex: 1 1 0; min-width: 0 !important; padding: 12px 10px; }
  #done .live-avg { flex-grow: 1.7 !important; }
  #done .live b { font-size: 38px; }
  #done .live-avg b { font-size: 52px; }
  #done .live span { letter-spacing: 0.08em; }
}

/* =====================================================================
   WATCHED: a lobby wall of framed one-sheets, each under a picture lamp
   ===================================================================== */
.page[data-page="watched"] { position: relative; }
.page[data-page="watched"]::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(109, 12, 20, 0.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 244, 214, 0.014) 0 1px, transparent 1px 110px);
}
.watched-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 64px 34px; padding: 24px 10px 0; }
.w-card { position: relative; text-align: center; }
/* the picture lamp */
.w-card::before {
  content: ""; position: absolute; z-index: 3; top: -20px; left: 50%; width: 44%; height: 9px; transform: translateX(-50%);
  border-radius: 2px 2px 8px 8px; background: linear-gradient(180deg, #f8dc8c, #b8862e 55%, #5a3d10);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 8px 18px rgba(255, 236, 196, 0.25);
}
/* its light falling on the top of the poster */
.w-card::after {
  content: ""; position: absolute; z-index: 2; top: -12px; left: -6%; right: -6%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 50% 0%, rgba(255, 240, 205, 0.26), transparent 72%);
  mix-blend-mode: screen; opacity: 0.85; transition: opacity 0.4s;
}
.w-card:hover::after { opacity: 1; }
.w-card .poster-box {
  border-radius: 2px; overflow: hidden;
  box-shadow:
    0 0 0 1px #2a1a0c, 0 0 0 3px #e9b44c, 0 0 0 5px #8a5f14, 0 0 0 7px #f6d27a, 0 0 0 9px #3a2410,
    0 34px 44px -14px rgba(0, 0, 0, 0.95);
  transition: transform 0.5s var(--out), box-shadow 0.5s;
}
.w-card:hover .poster-box { transform: translateY(-4px); box-shadow: 0 0 0 1px #2a1a0c, 0 0 0 3px #f6d27a, 0 0 0 5px #a8781f, 0 0 0 7px #fff1c2, 0 0 0 9px #3a2410, 0 0 60px -10px rgba(255, 236, 196, 0.35), 0 44px 54px -16px rgba(0, 0, 0, 0.95); }
.w-card.fresh .poster-box { box-shadow: 0 0 0 1px #2a1a0c, 0 0 0 3px #fff1c2, 0 0 0 5px #c99437, 0 0 0 7px #fff1c2, 0 0 0 9px #3a2410, 0 0 70px rgba(246, 210, 122, 0.5); }
/* glass over the one-sheet */
.w-card .poster-box::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, 0.1), transparent 32%, transparent 70%, rgba(255, 255, 255, 0.04)); }
/* crowd score on a proper ticket stub */
.w-card .mine {
  z-index: 2; right: 8px; bottom: 10px; display: flex; flex-direction: column; align-items: center; padding: 6px 11px 7px 14px; border-radius: 3px;
  background: linear-gradient(180deg, #fffaf0, #ecdcb3); font-size: 30px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
}
.w-card .mine::before { content: "Crowd"; display: block; margin-bottom: 3px; font: 700 8px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: #9c1a26; }
.w-card .mine small { margin: 2px 0 0; font-size: 9px; letter-spacing: 0.1em; }
.w-card .mine.none { display: block; font-size: 10px; }
.w-card .mine.none::before { display: none; }
.w-card .w-title { margin-top: 22px; font: 400 19px/1.15 var(--deco); color: var(--cream); text-wrap: balance; }
.w-card .w-sub { margin-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--gold); }
.w-card .votes { font: 500 11px/1.4 var(--mono); color: var(--faint); }
.w-card .qr-btn { margin-top: 12px; padding: 0 14px; border-radius: 99px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(10, 6, 5, 0.7); }
@media (max-width: 520px) {
  .watched-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 22px; padding-inline: 8px; }
  .w-card .w-title { font-size: 16px; }
  .w-card .mine { font-size: 24px; right: 6px; bottom: 8px; }
}
/* host-only notes as cream index cards */
.feedback-list li {
  padding: 22px 20px 14px; border-radius: 4px; border: 0; color: var(--ink);
  background:
    linear-gradient(180deg, transparent 0 15px, rgba(200, 16, 46, 0.35) 15px 16px, transparent 16px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(60, 90, 140, 0.12) 27px 28px) 0 8px,
    linear-gradient(180deg, #fffaf0, #efe2c2);
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.9);
}
.feedback-list li::before { top: -16px; color: var(--red); opacity: 1; }
.feedback-list .f-text { color: #2a1a12; }
.feedback-list .f-meta { color: #7a6a58; }

/* =====================================================================
   RATE (phones): spotlit card, big satisfying keys
   ===================================================================== */
body.solo .rate-bg { filter: blur(44px) saturate(1.3) brightness(0.38); }
.rate-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 236, 196, 0.14), transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 115%, rgba(0, 0, 0, 0.7), transparent 70%);
}
.rate-box {
  padding: 28px 22px 24px; border-radius: 24px; border-color: rgba(246, 210, 122, 0.28);
  background: linear-gradient(180deg, rgba(36, 22, 16, 0.9), rgba(12, 8, 6, 0.94));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 5px rgba(10, 6, 5, 0.55), 0 0 0 6px rgba(233, 180, 76, 0.14), 0 40px 100px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 244, 214, 0.1);
}
.rate-poster {
  width: 140px; margin-top: -92px; border-radius: 2px;
  box-shadow: 0 0 0 1px #2a1a0c, 0 0 0 3px #f6d27a, 0 0 0 5px #8a5f14, 0 0 0 7px #e9b44c, 0 0 0 9px #3a2410, 0 0 60px rgba(255, 236, 196, 0.22), 0 28px 50px rgba(0, 0, 0, 0.85);
}
.rate-box h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.rate-box h1 span { text-shadow: 0 0 22px rgba(246, 210, 122, 0.4); }
.rate-box .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.rate-scale { gap: 8px; margin-top: 28px; }
.rate-scale button {
  position: relative; aspect-ratio: 1 / 1.25; min-height: 52px; border-radius: 12px;
  border: 1px solid rgba(233, 180, 76, 0.22); color: #cdbfa6;
  background: linear-gradient(180deg, rgba(44, 28, 21, 0.95), rgba(16, 10, 8, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.08), 0 4px 0 #050303, 0 8px 14px -6px rgba(0, 0, 0, 0.8);
  font-size: 28px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.3s var(--spring), box-shadow 0.25s;
}
.rate-scale button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.08), 0 1px 0 #050303; }
.rate-scale button.lit {
  color: #fff4e0; border-color: rgba(246, 210, 122, 0.55);
  background: radial-gradient(circle at 50% 25%, #ff6b74, #d81f30 45%, #8f0b1e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #3d0610, 0 0 22px -4px rgba(226, 58, 70, 0.75);
}
.rate-scale button.chosen {
  transform: translateY(-5px) scale(1.07);
  box-shadow: 0 0 0 2px #fff1c2, 0 0 0 4px #c99437, 0 6px 0 #3d0610, 0 16px 30px -8px rgba(200, 16, 46, 0.95), 0 0 34px rgba(246, 210, 122, 0.45);
}
@media (max-width: 520px) { .rate-scale { gap: 10px; } .rate-scale button { aspect-ratio: 1 / 1.1; min-height: 56px; font-size: 30px; } }
.rate-word { margin-top: 22px; font-size: 26px; min-height: 26px; text-shadow: 0 0 24px rgba(246, 210, 122, 0.4); }
.rate-box .q { margin-top: 26px; font-size: 21px; text-align: center; }
.rate-box textarea { border-radius: 14px; background: rgba(6, 4, 3, 0.75); font-size: 16px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5); }
.rate-box .anon { justify-content: center; }
.rate-box .btn.primary { height: 60px; border-radius: 14px; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; }
.thanks .big { text-shadow: 0 0 30px rgba(246, 210, 122, 0.45), 0 2px 0 #c99437, 0 4px 0 #6b4a12, 0 10px 24px rgba(0, 0, 0, 0.7); }
.thanks .crowd { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.6)); background: linear-gradient(180deg, #fffaf0, #ecdcb3); padding: 20px 34px; }
.thanks .crowd b { font-size: 70px; }
.thanks .crowd span { color: #9c1a26; }

/* =====================================================================
   Reduced motion: no flicker, no racing bulbs, no glints
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .spin-page .spin-count::before, .spin-page .now-card .eyebrow::before,
  #done .t-label, #reveal .reveal-poster::after { animation: none !important; }
  #reveal .reveal-poster::after { opacity: 0; }
}