/* RATCHeT — EXPERIENCE LAYER (iteration 15)
   The engine is unchanged; this layer stages it. Same tokens, same type, same one-yellow-button law.
   Everything that moves has a reduced-motion answer at the bottom of this file. */

/* ---------- Chapters: onboarding reads as entering the world ---------- */
.chapter { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.chapter b { color: var(--spark); }
.chapter span { color: var(--cream-dim); }
#screen[data-stage="signup"] { background: radial-gradient(ellipse 90% 40% at 50% 105%, rgba(249,6,46,.16), transparent 70%), var(--canvas); }
#screen[data-stage="booth"] { background: radial-gradient(ellipse 80% 45% at 50% -8%, rgba(255,240,210,.16), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 50%, transparent 60%, rgba(0,0,0,.55)), var(--canvas); }
#screen[data-stage="booth"] .viewfinder { box-shadow: 0 0 0 1px rgba(255,240,210,.12), 0 30px 80px rgba(255,220,170,.08); }
#screen[data-stage="intent"] { background: radial-gradient(ellipse 90% 35% at 50% -5%, rgba(247,211,1,.08), transparent 70%), var(--canvas); }

/* ---------- The door ---------- */
.door { position: absolute; inset: 0; z-index: 58; display: grid; place-items: center; overflow: hidden; }
.door__panel { position: absolute; top: 0; bottom: 0; width: 50.5%; background: radial-gradient(rgba(0,0,0,.38) 2px, transparent 3px) 0 0 / 26px 26px, linear-gradient(90deg, #1a0605, #33100a 55%, #160505); box-shadow: inset 0 0 80px rgba(0,0,0,.75); }
.door__panel--l { left: 0; border-right: 2px solid #6b1f10; }
.door__panel--r { right: 0; border-left: 2px solid #6b1f10; }
.door__inner { position: relative; display: grid; justify-items: center; gap: 12px; padding: 24px; text-align: center; width: min(340px, 88%); }
.door__logo { width: 220px; height: auto; filter: drop-shadow(0 10px 36px rgba(249,6,46,.45)); }
.door__list { margin: 0; font-weight: 900; font-style: italic; font-size: 22px; }
.door__rope { width: 240px; height: auto; margin: 4px 0 8px; }
.door__cord { transform-box: fill-box; transform-origin: center; }
.door .btn { width: 100%; }

/* ---------- Title cards between chapters ---------- */
.interlude { position: absolute; inset: 0; z-index: 57; display: grid; place-content: center; text-align: center; gap: 10px; background: radial-gradient(ellipse at 50% 42%, #2d0d08, #060302 72%); pointer-events: none; }
.interlude p { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--spark); }
.interlude h2 { margin: 0; padding: 0 24px; font-weight: 900; font-style: italic; font-size: 40px; line-height: 1.02; -webkit-text-stroke: .03em var(--ink); }

/* ---------- Lineup: tonight's six ---------- */
.slots { display: flex; align-items: center; gap: 4px; flex: none; }
.slots i { width: 8px; height: 20px; border-radius: 3px; background: var(--line); }
.slots i.done { background: rgba(246,235,221,.28); }
.slots i.now { background: var(--spark); box-shadow: 0 0 12px rgba(247,211,1,.7); }
.slots b { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-dim); white-space: nowrap; }
.lineup-note { text-align: center; }

/* ---------- The stage: words, then the face ---------- */
.acard.stage { aspect-ratio: 3/4.3; background: #0a0403; }
.stage img { transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out), filter 1s var(--ease-out); }
.stage--words img { opacity: 0; transform: scale(1.14); filter: brightness(.35) blur(8px); }
.stage--face img { opacity: 1; transform: none; filter: none; }
.stage__light { position: absolute; left: -10%; right: -10%; top: -25%; height: 75%; background: radial-gradient(ellipse at 50% 0%, rgba(255,233,4,.30), transparent 65%); pointer-events: none; transition: opacity 1.2s var(--ease-out); }
.stage--face .stage__light { opacity: .3; }
.stage--words .acard__shade { background: radial-gradient(ellipse at 50% 38%, rgba(40,18,10,.25), rgba(1,0,0,.94) 78%); }
.stage .acard__body { min-height: 0; align-content: center; transition: min-height .8s var(--ease-out); }
.stage--words .acard__body { min-height: 100%; padding: 30px 24px; }
.stage--words .acard__quote { font-size: clamp(26px, 7.6vw, 33px); line-height: 1.14; text-wrap: balance; }
.stage__lower, .stage .acard__why { transition: opacity .5s .45s, transform .6s .45s var(--ease-out); }
.stage--words .stage__lower, .stage--words .acard__why { opacity: 0; transform: translateY(16px); }
.stage__lower { display: grid; gap: 8px; }
.stage .acard__name { justify-self: start; background: var(--dating); padding: 6px 12px 4px; transform: skewX(-8deg); box-shadow: 4px 4px 0 var(--ink); }
.stage .acard__name small { color: var(--cream); opacity: .85; }
.stage__timer { position: absolute; top: 18px; right: 14px; width: 56px; height: 3px; border-radius: 3px; background: rgba(246,235,221,.18); overflow: hidden; transition: opacity .3s; }
.stage__timer i { display: block; height: 100%; background: var(--spark); transform-origin: left; transform: scaleX(0); }
.stage--live .stage__timer i { animation: stagetimer 1.9s linear forwards; }
@keyframes stagetimer { to { transform: scaleX(1); } }
.stage--face .stage__timer { opacity: 0; }
.act-btn--shot { position: relative; }
.act-btn--shot small { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--dating); color: var(--cream); font-style: normal; font-weight: 800; font-size: 11px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--ink); }

/* ---------- Hot Seat: the rhythm changes ---------- */
.hotseat { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 22px 24px; display: grid; gap: 18px; min-height: 440px; align-content: center; background: #0d0403; box-shadow: 0 0 0 2px var(--dating), 0 0 70px rgba(249,6,46,.28); }
.hotseat__lights { position: absolute; inset: -45%; background: conic-gradient(from 0deg, transparent 0 18%, rgba(249,6,46,.38) 24%, transparent 31% 66%, rgba(247,211,1,.22) 72%, transparent 80%); animation: sweep 6s linear infinite; pointer-events: none; }
@keyframes sweep { to { transform: rotate(360deg); } }
.hotseat > :not(.hotseat__lights) { position: relative; }
.hotseat .poll__kicker { display: inline-flex; gap: 8px; align-items: center; background: var(--dating); color: var(--cream); padding: 7px 12px; border-radius: 6px; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; font-style: normal; }
.hotseat .poll__kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--cream); animation: blink 1s steps(2) infinite; }
.hotseat .poll__q { font-size: clamp(28px, 8.2vw, 38px); line-height: 1.04; text-wrap: balance; }
.hotseat .poll__opts { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.hotseat__vs { align-self: center; font-weight: 900; font-style: italic; color: var(--spark); font-size: 14px; text-transform: uppercase; }
.hotseat .poll__opt { min-height: 104px; font-size: 17px; font-weight: 900; font-style: italic; background: rgba(1,0,0,.62); line-height: 1.15; padding: 10px; }

/* ---------- Reply or release ---------- */
.release { display: grid; gap: 14px; padding-top: 6px; }
.release h3 { margin: 0; font-weight: 900; font-style: italic; font-size: 28px; line-height: 1.05; }
.release__row small { font-style: italic; }

/* ---------- Locked in: the product changes with you ---------- */
.locked { text-align: center; display: grid; gap: 12px; padding: 18px 4px 6px; justify-items: center; }
.locked__pair { display: flex; margin-bottom: 8px; }
.locked__pair span { width: 118px; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--spark), 0 20px 50px rgba(247,211,1,.18); display: grid; place-content: center; background: #1C0806; font-weight: 900; font-style: italic; font-size: 24px; color: rgba(246,235,221,.3); }
.locked__pair span:first-child { transform: rotate(-6deg) translateX(12px); }
.locked__pair span:last-child { transform: rotate(6deg) translateX(-12px); }
.locked__pair img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.locked__kicker { margin: 0; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, var(--spark-lo), var(--spark-hi)); color: var(--ink); font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 24px rgba(247,211,1,.35); }
.locked h3 { margin: 0; font-weight: 900; font-style: italic; font-size: 34px; line-height: 1.02; }
.locked .btn { width: 100%; }

/* ---------- The move: pull up / shoot your shot ---------- */
.move { position: absolute; inset: 0; z-index: 54; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 24px; background: rgba(6,3,2,.84); backdrop-filter: blur(3px); pointer-events: none; }
.move__stamp { margin: 0; font-weight: 900; font-style: italic; font-size: 42px; line-height: 1; text-transform: uppercase; color: var(--spark); -webkit-text-stroke: .03em var(--ink); border: 5px solid var(--spark); padding: 8px 16px 6px; border-radius: 10px; transform: rotate(-6deg); text-shadow: 0 0 34px rgba(247,211,1,.5); }
.move--shot .move__stamp { color: var(--dating); border-color: var(--dating); text-shadow: 0 0 34px rgba(249,6,46,.5); }
.move__slip { display: grid; gap: 6px; max-width: 30ch; padding: 14px 16px; background: #f3e9d6; color: var(--ink); font-weight: 800; font-style: italic; font-size: 16px; line-height: 1.3; transform: rotate(1.5deg); box-shadow: 4px 4px 0 var(--ink); }
.move__slip small { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.move__slip b { font-style: normal; border-top: 2px dashed rgba(1,0,0,.25); padding-top: 6px; }

/* ---------- The link: it's about the words ---------- */
.link-ov { overflow-y: auto; background: radial-gradient(ellipse at 50% 32%, #22090a, #060302 72%); }
.link-ov__lights { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(249,6,46,.24) 45%, transparent 56%), linear-gradient(65deg, transparent 36%, rgba(247,211,1,.16) 50%, transparent 63%); pointer-events: none; animation: beams 3.2s ease-in-out infinite alternate; }
@keyframes beams { to { transform: translateX(7%); } }
.link-ov > :not(.link-ov__lights):not(.rec) { position: relative; }
.link-lines { display: grid; gap: 10px; max-width: 32ch; }
.link-lines p { margin: 0; font-weight: 800; font-style: italic; font-size: 16px; line-height: 1.3; }
.link-lines small, .link-ask small { display: block; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 2px; }
.link-lines__you { color: var(--spark); }
.link-ask { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--spark); max-width: 32ch; font-weight: 700; }
.link-ov .linkbtn { justify-self: center; }

/* ---------- Conversation: you can see where it is ---------- */
.track { flex: none; display: flex; margin: 0; padding: 8px 14px 9px; gap: 4px; list-style: none; background: #0b0605; border-bottom: 1px solid var(--line); }
.track li { flex: 1; position: relative; min-width: 0; padding-top: 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(246,235,221,.32); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--line); }
.track li.done { color: var(--cream-dim); }
.track li.done::before { background: rgba(246,235,221,.5); }
.track li.now { color: var(--spark); }
.track li.now::before { background: var(--spark); box-shadow: 0 0 8px rgba(247,211,1,.8); }
.pill.rung[data-rung="1"] { background: var(--cream); color: var(--ink); }
.pill.rung[data-rung="2"] { background: var(--ratchet); color: var(--ink); }
.pill.rung[data-rung="3"] { background: linear-gradient(90deg, var(--spark-lo), var(--spark-hi)); color: var(--ink); box-shadow: 0 0 14px rgba(247,211,1,.45); }
.chat--rung2 .chat-head { box-shadow: inset 0 -1px 0 var(--ratchet); }
.chat--rung3 .chat-head { background: linear-gradient(90deg, #2d2203, #0b0605 72%); box-shadow: inset 0 -1px 0 var(--spark); }
.chat--rung3 .chat-body { background: radial-gradient(ellipse at 50% 0%, rgba(247,211,1,.08), transparent 60%); }
.chat--rung3 .msg--me { background: linear-gradient(135deg, var(--dating), var(--ratchet)); }
.msg--mile { align-self: center; max-width: 92%; margin: 8px 0; padding: 8px 14px 7px; font-weight: 900; font-style: italic; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); background: var(--spark); border-radius: 6px; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); text-align: center; }
.close-lines .check span { font-style: italic; font-weight: 700; }
.otr-saved { color: var(--spark); }
.datecard .linkbtn { justify-self: start; font-size: 13px; }

/* ---------- Plan the move: a ticket that fills in ---------- */
.ticket--plan { margin: 4px 0 18px; }
.ticket--plan small { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.ticket--plan b { font-size: 26px; }

/* ---------- Profile: moments, not fields ---------- */
.block--ask { border: 2px solid var(--spark); background: linear-gradient(135deg, #251b04, #120a08 70%); }
.block--ask .block__a { font-size: 22px; font-style: italic; }
.pv-hero + .scr-title { margin-top: 16px; }
.block__a { font-size: 20px; }

/* ---------- The Reunion: a chapter, not a stats screen ---------- */
.reunion { overflow-y: auto; align-content: start; padding-top: 44px; padding-bottom: 32px; }
.season-cast { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.season-cast figure { margin: 0; display: grid; justify-items: center; gap: 4px; width: 66px; }
.season-cast img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--spark); }
.season-cast figcaption { font-size: 12px; font-weight: 800; line-height: 1.2; }
.season-cast small { display: block; font-size: 10px; font-weight: 600; color: var(--cream-dim); }
.otr { text-align: left; padding: 12px 14px; border-left: 3px solid var(--spark); background: rgba(1,0,0,.6); font-style: italic; font-weight: 700; }
.otr small { display: block; font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--spark); margin-bottom: 4px; }

/* ---------- Reduced motion: every beat still happens, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .hotseat__lights, .link-ov__lights, .stage__timer i, .hotseat .poll__kicker i { animation: none; }
  .stage img, .stage__lower, .stage .acard__why, .stage .acard__body, .stage__light { transition: none; }
  .stage__timer { display: none; }
}

/* Bug fix (found in iteration 15): the website's own `.sheet` rule (styles.css) was leaking into the app's sheets:
   display:grid + place-items (centered, or pushed right on phones) and inset:0 (pinned to the top). App sheets are blocks that rise from the bottom. */
.appmode .sheet { display: block; top: auto; z-index: auto; place-items: normal; }
.ticket--plan::after { left: 0; right: 0; }
/* form columns never grow past the screen because of a long option (the venue list) */
.appmode .field { grid-template-columns: minmax(0, 1fr); }
.appmode .field select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.door__from { margin: -4px 0 4px; color: var(--cream-dim); font-weight: 700; font-size: 14px; }