/* The shared look of the game: void, bone and gold leaf on the instrument side.
   White fire is held back for later acts. Tokens from docs/salon/2026-10-30-2100-claude.md. */
:root{color-scheme:dark;--void:#05060a;--bone:#e9e4d8;--gold:#c9a45c;--fire:#fff8ec;--violet:#7a6cff;--muted:rgba(233,228,216,.62);
  --serif:Didot,"Bodoni 72","Bodoni Moda","Iowan Old Style",Georgia,serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--void);color:var(--bone)}
body{font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none}
input,textarea,[contenteditable],.dark,.whisper{user-select:text}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
main{position:relative;z-index:1;height:100vh;height:100dvh;display:grid;place-items:center;padding:0 16px}
::selection{background:rgba(201,164,92,.34);color:var(--fire);text-shadow:0 0 12px rgba(255,248,236,.6)}

/* The count, at the top of pages that are no longer only stars. */
.count{position:fixed;top:24px;left:0;right:0;z-index:2;margin:0;text-align:center;font-family:var(--serif);font-size:13px;letter-spacing:.5em;padding-left:.5em;color:rgba(201,164,92,.62)}

/* Stars on the glass. Their image is drawn by sky.js and lent through --star. */
.constellation{display:flex;align-items:flex-start;justify-content:center;gap:clamp(18px,7vw,110px);margin-top:-8vh}
.constellation figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.star{--size:clamp(96px,13vw,190px);--i:0;display:block;width:var(--size);height:var(--size);border-radius:50%;
  background:var(--star) center/108% no-repeat,radial-gradient(circle,rgba(201,164,92,.2),rgba(201,164,92,.06) 30%,rgba(201,164,92,0) 62%);
  animation:dawn 2.6s ease-out calc(var(--i) * .45s) both,breathe 6s ease-in-out calc(2.6s + var(--i) * .45s) infinite}
a.star{cursor:pointer;outline-offset:-24%}
.star.dim{opacity:.12;filter:grayscale(.7);animation:dawn 3.4s ease-out calc(var(--i) * .45s) both}
.star.gap{visibility:hidden;animation:none}
.star.empty{background:none;animation:dawn 3.4s ease-out both}
.star.empty::before{content:"";display:block;width:22%;height:22%;margin:39%;border:1px solid rgba(233,228,216,.17);border-radius:50%}
.star.flare{animation:flare .9s cubic-bezier(.2,.7,.2,1),breathe 6s ease-in-out .9s infinite}
.numeral{font-family:var(--serif);font-size:15px;letter-spacing:.42em;padding-left:.42em;min-height:1.2em;color:rgba(201,164,92,.72);
  animation:dawn 2.6s ease-out calc(.8s + var(--i,0) * .45s) both}
.numeral.dim{opacity:.3}
@keyframes dawn{from{opacity:0;transform:scale(.6)}}
@keyframes breathe{50%{transform:scale(1.05);filter:brightness(1.14)}}
@keyframes flare{30%{transform:scale(1.9);filter:brightness(2.4) drop-shadow(0 0 18px rgba(201,164,92,.9))}}

/* One line of scripture at the foot of the page. the scene lifecycle shows it after data-after milliseconds,
   or as soon as a star is touched. */
.scripture{position:fixed;left:16px;right:16px;bottom:clamp(26px,7vh,64px);z-index:2;margin:0;text-align:center;text-wrap:balance;
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.6vw,26px);opacity:0;transition:opacity 2.4s ease}
.scripture.shown{opacity:.9}
.scripture .lit{color:var(--gold);text-shadow:0 0 14px rgba(201,164,92,.45);transition:color 4s ease,text-shadow 4s ease}

/* A photographic plate: a pane of dark glass with its catalogue marks. */
.plate{position:relative;width:min(80vw,760px);aspect-ratio:3/2;border:1px solid rgba(233,228,216,.15);
  background:radial-gradient(90% 70% at 38% 22%,rgba(233,228,216,.04),rgba(122,108,255,.012) 55%,rgba(5,6,10,0) 75%),rgba(5,6,10,.55);
  box-shadow:0 0 0 1px rgba(5,6,10,.9),0 40px 120px rgba(0,0,0,.65),inset 0 0 80px rgba(122,108,255,.035);
  animation:dawn 2.4s ease-out both}
.plate .label{position:absolute;margin:0;font-size:9px;line-height:1;letter-spacing:.34em;color:var(--muted)}
.plate .tl{top:14px;left:16px}
.plate .br{bottom:14px;right:16px}
.plate .s{position:absolute;width:var(--d);height:var(--d);transform:translate(-50%,-50%);background:var(--star) center/contain no-repeat;pointer-events:none}

.requirement{position:fixed;left:16px;right:16px;bottom:12px;z-index:2;margin:0;text-align:center;font-size:10px;letter-spacing:.2em;color:var(--muted)}