/* v61 Poet's Stage: push into the stage, fade to black, a night sky with three
   neon choices. Phone portrait first. Neon lives on the letters only (no glow
   boxes on tap targets). Reduced motion holds still; html.tab-hidden pauses. */
html, body { background: #000; }
body.stage-page { margin: 0; min-height: 100vh; min-height: 100dvh; color: #ece6f5; overflow-x: hidden; }
.stage-intro { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: #000; pointer-events: none; animation: stage-out .7s ease-out 1.55s forwards; }
.stage-intro .stage-zoom { position: absolute; inset: 0; transform-origin: 30% 52%; animation: stage-push 1.25s cubic-bezier(.55,.05,.7,.4) forwards; }
.stage-intro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 8% 50%; }
.stage-intro .intro-sky { position: absolute; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 35% 60%, rgba(10, 36, 90, .22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 70% 35%, rgba(100, 40, 160, .28), transparent 65%),
    linear-gradient(to top, rgb(19, 7, 32), rgb(8, 3, 16));
  -webkit-mask-image: url("../assets/main-floor-window-mask-mf25d-v1.png");
          mask-image: url("../assets/main-floor-window-mask-mf25d-v1.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left top; mask-position: left top;
}
.stage-intro .black { position: absolute; inset: 0; background: #000; opacity: 0; animation: stage-black .55s ease-in .85s forwards; z-index: 2; }
@keyframes stage-push { from { transform: scale(1); } to { transform: scale(2.6); } }
@keyframes stage-black { to { opacity: 1; } }
@keyframes stage-out { to { opacity: 0; visibility: hidden; } }
.stage-intro.done { display: none; }

.night { position: fixed; inset: 0; z-index: 0; background:
  radial-gradient(ellipse 120% 60% at 50% 115%, rgba(60, 40, 120, .45), transparent 70%),
  radial-gradient(ellipse 90% 50% at 20% 0%, rgba(30, 50, 130, .35), transparent 70%),
  linear-gradient(#02030b, #070414 60%, #0d0718); }
.night canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.night .twinkle { animation: stage-twinkle 9s ease-in-out infinite alternate; }
@keyframes stage-twinkle { from { opacity: .35; } to { opacity: 1; } }

.sv { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  padding: calc(env(safe-area-inset-top, 0px) + 2.2rem) 1.4rem calc(env(safe-area-inset-bottom, 0px) + 2.4rem);
  max-width: 560px; margin: 0 auto; }
.sv[hidden] { display: none; }
.sv-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.sky-kind { font: 400 .78rem/1.3 system-ui, -apple-system, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #8f86a6; margin: 0 0 2.6rem; }
.choices { display: flex; flex-direction: column; align-items: center; gap: 2.1rem; }
.nchoice { font: 400 2.15rem/1.15 "Tilt Neon", system-ui, sans-serif; letter-spacing: .02em; background: none; border: 0; padding: .35rem .6rem; min-height: 48px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: none; animation: stage-flicker 17s ease-in-out infinite; }
.nchoice:focus-visible { outline: 1px dashed currentColor; outline-offset: 6px; }
.nchoice:active { transform: scale(.98); }
.n-gold { color: #ffd479; text-shadow: 0 0 1px #fff3cf, 0 0 5px #ffcf5e, 0 0 14px #ffa733, 0 0 28px rgba(255, 140, 20, .55); }
.n-purple { color: #dcb6ff; text-shadow: 0 0 1px #f4e6ff, 0 0 5px #c98cff, 0 0 14px #a24cff, 0 0 28px rgba(140, 50, 255, .55); animation-delay: -6s; animation-duration: 21s; }
.n-red { color: #ff8f8f; text-shadow: 0 0 1px #ffe2e2, 0 0 5px #ff6a6a, 0 0 14px #ff2a3a, 0 0 28px rgba(255, 20, 40, .55); animation-delay: -11s; animation-duration: 19s; }
@keyframes stage-flicker { 0%, 82%, 100% { opacity: 1; } 86% { opacity: .78; } 88% { opacity: .95; } 90% { opacity: .82; } }
.step-back { display: inline-block; margin-top: 3rem; font: 400 1rem/1 system-ui, -apple-system, sans-serif; letter-spacing: .08em; color: #a59bb5;
  background: none; border: 0; padding: .8rem .4rem; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; -webkit-tap-highlight-color: transparent; }
.step-back:focus-visible { outline: 1px dashed #a59bb5; outline-offset: 3px; }

.ntitle { font: 400 2rem/1.15 "Tilt Neon", system-ui, sans-serif; margin: 0 0 .4rem; animation: stage-flicker 19s ease-in-out infinite; }
.sv-line { font: italic .95rem/1.5 Georgia, serif; color: #a59bb5; margin: 0 0 1.6rem; }
.sv .entries { display: grid; gap: 1.1rem; }
.sv .entries[data-show="house"] article.entry[data-guest] { display: none; }
.sv .entries[data-show="guests"] article.entry:not([data-guest]) { display: none; }
.sv .entry { background: rgba(10, 8, 22, .72); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; }
.sv .entry::before { box-shadow: none !important; }
.sv .empty-note { color: #a59bb5; font-style: italic; margin: .5rem 0; }

/* Take The Mic */
.mic-invite { font: 400 1rem/1.55 Georgia, serif; color: #cfc6dc; margin: .6rem 0 0; }
.mic-invite a { color: #ffcf70; }
.talk-form label { display: block; font: .78rem system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #cfc6dc; margin: .9rem 0 .35rem; }
.talk-form input, .talk-form textarea { width: 100%; box-sizing: border-box; padding: .7rem; border-radius: 10px; border: 1px solid rgba(255, 120, 120, .45); background: rgba(0, 0, 0, .55); color: #ece6f5; font: 1rem Georgia, serif; }
.talk-form input:focus, .talk-form textarea:focus { outline: 1px solid rgba(255, 207, 112, .6); outline-offset: 0; }
.talk-form textarea { min-height: 11rem; resize: vertical; line-height: 1.55; }
.talk-form .count { margin: .3rem 0 0; font: .78rem system-ui, sans-serif; color: #a59bb5; text-align: right; }
.talk-form button { margin-top: 1rem; font: .95rem system-ui, sans-serif; color: #ffcf70; background: none; border: 1px solid rgba(255, 207, 112, .45); border-radius: 999px; padding: .65rem 1.2rem; min-height: 44px; cursor: pointer; box-shadow: none; }
.talk-form button[disabled] { opacity: .45; cursor: default; }
.talk-msg { font: .9rem/1.45 system-ui, sans-serif; color: #d7a6ff; margin: .8rem 0 0; }
.talk-msg.bad { color: #ff9aa8; }

html.tab-hidden .nchoice, html.tab-hidden .ntitle, html.tab-hidden .night .twinkle,
html.tab-hidden .stage-intro, html.tab-hidden .stage-intro *, html.tab-hidden .stage-zoom { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .stage-intro { display: none; }
  .nchoice, .ntitle, .night .twinkle { animation: none !important; }
  .night .twinkle { opacity: .7; }
}

/* v62: the night sky also behind the House Poetry / Poetry From Guests lists and the
   poem reader. The sky (.night) drifts very slowly; text sits on a soft dark veil.
   Only the Poet's Stage (body.stage-page) is changed. */
.night canvas { transform: scale(1.06); animation: stage-drift 140s ease-in-out infinite alternate; }
.night .twinkle { animation: stage-twinkle 9s ease-in-out infinite alternate, stage-drift 140s ease-in-out infinite alternate; }
@keyframes stage-drift { from { transform: scale(1.06) translate(-1.2%, -.6%); } to { transform: scale(1.06) translate(1.2%, .6%); } }
.stage-page .sv .entry { background: linear-gradient(rgba(6, 5, 16, .62), rgba(6, 5, 16, .7)); border-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.stage-page .sv .entry h2 { color: #fff; }
.stage-page .sv .entry .meta { color: #b9b0c9; }
/* the reader: no striped panel; the sky shows through, the page behind steps aside */
html.pr-open body.stage-page main { visibility: hidden; }
body.stage-page .pr-shade { background: transparent; }
body.stage-page .pr-sheet {
  background: linear-gradient(rgba(4, 3, 12, .5), rgba(4, 3, 12, .28) 45%, rgba(4, 3, 12, .12)); background-color: transparent;
  border-left: 0; border-right: 0; color: #f1ecf8;
}
body.stage-page .pr-sheet::after { display: none; }
body.stage-page .pr-body .meta { color: #b9b0c9; }
body.stage-page .pr-close { background: none; box-shadow: none; }
html.tab-hidden .night canvas { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .night canvas, .night .twinkle { animation: none !important; transform: scale(1.06); }
}
html.pr-open body.stage-page { position: static; }   /* keep the fixed sky painting behind the reader */

/* ================================================================
   v63: clearly visible, calm sky motion (stage menu, both lists, reader).
   Transform/opacity only. Three twinkle layers pulse out of sync; the field
   pans ~5% over 60s; a rare slow shooting star. Reduced motion holds still;
   html.tab-hidden pauses everything.
   ================================================================ */
.night canvas { animation: none; transform: none; }
.night .sky-pan { position: absolute; inset: -6%; will-change: transform; animation: sky-pan 60s ease-in-out infinite alternate; }
.night .sky-pan canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes sky-pan { from { transform: translate3d(-2.5%, -1.2%, 0); } to { transform: translate3d(2.5%, 1.2%, 0); } }
.night .tw { will-change: opacity; animation: tw-pulse 3.4s ease-in-out infinite alternate; }
.night .tw1 { animation-duration: 2.6s; animation-delay: -.4s; }
.night .tw2 { animation-duration: 4.3s; animation-delay: -2.9s; }
.night .tw3 { animation-duration: 5.9s; animation-delay: -1.7s; }
@keyframes tw-pulse { from { opacity: .15; } to { opacity: 1; } }
.night .shoot { position: absolute; top: 0; left: 0; width: 130px; height: 1.5px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(230,220,255,.85) 80%, #fff);
  will-change: transform, opacity; animation: shoot1 27s linear infinite; animation-delay: 6s; }
.night .shoot.s2 { animation-name: shoot2; animation-duration: 37s; animation-delay: 19s; width: 100px; }
@keyframes shoot1 {
  0% { opacity: 0; transform: translate3d(12vw, 10vh, 0) rotate(24deg); }
  1% { opacity: .9; }
  6% { opacity: 0; transform: translate3d(70vw, 36vh, 0) rotate(24deg); }
  100% { opacity: 0; transform: translate3d(70vw, 36vh, 0) rotate(24deg); }
}
@keyframes shoot2 {
  0% { opacity: 0; transform: translate3d(80vw, 6vh, 0) rotate(152deg); }
  1% { opacity: .85; }
  5% { opacity: 0; transform: translate3d(30vw, 30vh, 0) rotate(152deg); }
  100% { opacity: 0; transform: translate3d(30vw, 30vh, 0) rotate(152deg); }
}
html.tab-hidden .night .sky-pan, html.tab-hidden .night .tw, html.tab-hidden .night .shoot { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .night .sky-pan, .night .tw { animation: none !important; transform: none; }
  .night .tw { opacity: .7; }
  .night .shoot { display: none; }
}

/* ================================================================
   v64: flying forward through space. #warp (canvas, js/stage.js) streams
   stars outward from the center. The old pan is retired so the two don't
   fight; twinkle layers stay, dimmed so the warp leads. Reduced motion:
   one still frame, no animation. Tab hidden: the JS loop stops.
   ================================================================ */
.night .warp { position: absolute; inset: 0; width: 100%; height: 100%; }
.night .sky-pan { animation: none; inset: 0; transform: none; }
.night #stars { opacity: .55; }

/* v64-2: while the JS warp runs, the CSS twinkle layers and shooting stars hold
   still (saves the phone's main thread); the warp carries the motion. */
html.warp-on .night .tw { animation: none !important; opacity: .7; }
html.warp-on .night .shoot { display: none; }

/* v64-2 flying stars (Web Animations on transform/opacity; see js/stage.js) */
.night .warp-fly { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.night .wstar { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.wstar.c-white { background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 70%); }
.wstar.c-gold { background: radial-gradient(circle, #ffd68c 0 30%, rgba(255,214,140,.25) 45%, rgba(255,214,140,0) 70%); }
.wstar.c-purple { background: radial-gradient(circle, #c8aaff 0 30%, rgba(200,170,255,.25) 45%, rgba(200,170,255,0) 70%); }
.wstar.c-blue { background: radial-gradient(circle, #a0c3ff 0 30%, rgba(160,195,255,.25) 45%, rgba(160,195,255,0) 70%); }
@media (prefers-reduced-motion: reduce) { .night .warp-fly { display: none; } }

/* v67: no still stars. The base field and twinkle layers are gone; while the
   warp runs the still #warp canvas is hidden too. Reduced motion keeps the one
   still #warp frame (flying stars can't run). */
.night .sky-pan { display: none; }
html.warp-on .night .warp { display: none; }

/* v74: House Poetry / Poetry From Guests list as a quiet index (Poet's Stage only;
   stage.css loads on rooms/poetry.html only, so other rooms' cards are untouched). */
.stage-page #sv-list { padding-left: 2px; padding-right: 2px; box-sizing: border-box; } /* + main 16px = 18px sides */
.stage-page #sv-list .ntitle { font-size: 26px; margin-bottom: .25rem;
  text-shadow: 0 0 1px #fff4d6, 0 0 4px #ffcf70, 0 0 10px rgba(255, 170, 40, .55); }
.stage-page #sv-list .ntitle.n-purple { text-shadow: 0 0 1px #f4e6ff, 0 0 4px #c98cff, 0 0 10px rgba(162, 76, 255, .55); }
.stage-page #sv-list .sv-line { font-size: .82rem; color: rgba(165, 155, 181, .75); margin: 0 0 1.2rem; }
.stage-page #sv-list .entries { gap: 0; }
.stage-page #sv-list .entry { background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 0; min-height: 44px;
  border-bottom: 1px solid rgba(255, 207, 112, .14); }
.stage-page #sv-list .entry:first-of-type { border-top: 1px solid rgba(255, 207, 112, .14); }
.stage-page #sv-list .entry::before { display: none; }
.stage-page #sv-list .entry h2 { font: 400 18px/1.3 Georgia, "Times New Roman", serif; margin: 0; color: #f1ecf8; }
.stage-page #sv-list .entry .subtitle { font-size: .85rem; margin: .1rem 0 0; }
.stage-page #sv-list .entry .meta { font: italic .74rem/1.4 Georgia, serif; color: rgba(255, 207, 112, .55); margin: .2rem 0 0; }
/* the whole row is the tap target: the View button stretches over it, with no visible label
   (its accessible name stays "View <poem title>") */
.stage-page #sv-list .entry .pr-view { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; color: transparent; font-size: 0;
  transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage-page #sv-list .entry .pr-view:active { background: rgba(255, 207, 112, .04); }
.stage-page #sv-list .entry .pr-view:focus-visible { outline: 1px solid rgba(255, 207, 112, .45); outline-offset: 2px; }
.stage-page #sv-list .step-back { margin-top: 1.4rem; padding-left: 0; padding-right: 0; font-size: .85rem; color: rgba(165, 155, 181, .8); }
/* v74-2: approved fonts for the list view (poetry page only) */
.stage-page #sv-list .entry h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 20px; line-height: 1.25; }
/* v74-4: the open poem on the Poet's Stage only: Cormorant title, no top line */
body.stage-page .pr-body h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 25px; line-height: 1.2; }
body.stage-page .pr-sheet::before { display: none; }