/* Any page with a scene (the stage, engines/1): the living scene full-screen, its title, timed captions, widgets, the
   lines said over whoever says them, the selection's glow, what can be done with a thing picked, the scene's own film,
   what goes wrong. Each page adds its own. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #07080c; color: #e6e8ee; font-family: Georgia, "Times New Roman", serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
a { color: inherit; }

.titles { position: fixed; top: 5vh; left: 0; right: 0; padding: 0 16px; text-align: center; pointer-events: none; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  transition: opacity 3s ease; }
.titles.gone { opacity: 0; }
.titles h1 { margin: 0; font-weight: normal; font-style: italic; font-size: clamp(1.6rem, 4vw, 2.8rem); letter-spacing: 0.04em; }
.titles p { margin: 0.6em 0 0; font-style: italic; opacity: 0.75; font-size: clamp(0.95rem, 1.6vw, 1.15rem); }

/* the selection's glow (select.js) */
#select-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* what may be picked now (actions.js: what a game offers) — breathing */
#offer-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: offered 2.4s ease-in-out infinite; }
@keyframes offered { 50% { opacity: 0.35; } }

/* what can be done with the thing picked (actions.js): beside it */
#actions { position: fixed; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 280px;
  padding: 8px; border-radius: 12px; background: rgba(10, 12, 18, 0.86); font: 15px/1.35 Georgia, 'Times New Roman', serif; color: #eee7da;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45); }
#actions[hidden] { display: none; }
#actions.placed { transition: transform 0.35s ease; }
#actions b { padding: 2px 8px 4px; font-weight: normal; font-style: italic; font-size: 13px; opacity: 0.6; }
#actions button { border: 0; border-radius: 8px; padding: 6px 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#actions button:hover, #actions button:focus-visible { background: rgba(255, 228, 170, 0.14); outline: none; }

/* timed captions (spec.captions) */
#captions { position: fixed; left: 0; right: 0; bottom: 14vh; z-index: 2; pointer-events: none; text-align: center; }
#captions p { margin: 0.4em auto; max-width: 42em; padding: 0 16px; font: italic 400 clamp(17px, 2.1vw, 26px)/1.4 Georgia, 'Times New Roman', serif;
  color: rgba(240, 236, 228, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 2.4s ease; }
#captions p:not(.on) { position: absolute; left: 0; right: 0; }
#captions p.on { opacity: 1; }

/* widgets (spec.widgets) */
#widgets { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#widgets .widget { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: opacity 1.2s ease; }
#widgets .widget.on { opacity: 1; }

/* lines said (speech.js): over the one who says it, glimmering while heard; the narrator's low in
   the middle */
#speech { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
#speech .bubble { position: absolute; left: 0; top: 0; max-width: min(340px, 40vw); display: flex; gap: 6px; align-items: flex-start;
  padding: 8px 12px; border-radius: 14px; background: rgba(12, 14, 22, 0.78); border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(244, 240, 232, 0.95); font: 15px/1.4 Georgia, 'Times New Roman', serif; transition: opacity 1.2s ease, box-shadow 0.3s; }
#speech .bubble.narrator { max-width: min(640px, 80vw); background: rgba(12, 14, 22, 0.55); border-color: transparent; font-style: italic; font-size: 17px; }
#speech .bubble p { margin: 0; }
#speech .bubble button { pointer-events: auto; flex: none; border: 0; background: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 12px; padding: 2px; }
#speech .bubble button:hover { opacity: 1; }
#speech .bubble.speaking { animation: speaking 1.4s ease-in-out infinite; }
#speech .bubble.fading { opacity: 0; }
#speech .bubble.giving { transition: opacity 0.3s ease; } /* a line before the one said now: gone quickly */
#speech .bubble.pending { padding: 4px 12px; letter-spacing: 0.2em; animation: working 1.2s ease-in-out infinite; }
@keyframes speaking { 50% { box-shadow: 0 0 18px rgba(255, 220, 160, 0.45); border-color: rgba(255, 220, 160, 0.6); } }
@keyframes working { 50% { opacity: 0.55; } }

/* what went wrong (a game's trouble): quietly, in a corner */
#trouble { position: fixed; left: 14px; bottom: 12px; z-index: 3; max-width: 60vw; font: italic 13px/1.4 Georgia, serif; color: rgba(255, 170, 150, 0.85);
  pointer-events: none; opacity: 0; transition: opacity 0.6s; }
#trouble.on { opacity: 1; }

/* a scene's own scenario played as a film (showcase.js): low in the middle, quiet */
.showcase { position: fixed; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); width: min(460px, calc(100vw - 32px));
  box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border-radius: 999px;
  background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(6px); color: rgba(236, 232, 224, 0.92); font: 13px/1.3 Georgia, "Times New Roman", serif;
  opacity: 0.7; transition: opacity 0.3s ease; outline: none; }
.showcase:hover, .showcase:focus-visible, .showcase:focus-within { opacity: 1; }
.showcase:focus-visible { box-shadow: 0 0 0 1px rgba(232, 201, 138, 0.6); }
.showcase[hidden] { display: none; }
.showcase .play { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 11px; cursor: pointer; }
.showcase .play:hover { background: rgba(255, 255, 255, 0.1); }
.showcase .track { position: relative; flex: 1; height: 16px; cursor: pointer; touch-action: none; }
.showcase .track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.22); }
.showcase .fill { position: absolute; left: 0; top: 7px; height: 2px; border-radius: 1px; background: #e8c98a; }
.showcase .knob { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #e8c98a; opacity: 0; transition: opacity 0.2s ease; }
.showcase:hover .knob, .showcase:focus-within .knob { opacity: 1; }
.showcase .time { flex: none; min-width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.8; }
.showcase.within { position: absolute; }

/* (an engine 3 scene's film at its first instant: no length yet — no knob) */
.showcase.unsized .knob { display: none; }

/* Over an engine 3 scene. The stage's place is marked while one is shown in it (data-moood-engine="3": ../3/page.js),
   and what is styled is what stands beside the place — the page's layers, or, two scenes on one page, its side's. Nothing
   of the page is frosted there, and nothing is animated for as long as it stands: what a game offers breathes in the scene
   itself; what says a state that passes by anything but opacity or transform (a voice heard) says it standing still.
   Over a scene of engine 1 the page is as above. */
:has(> [data-moood-engine="3"]) :is(.showcase, #volume) { backdrop-filter: none; }
:has(> [data-moood-engine="3"]) #offer-overlay,
:has(> [data-moood-engine="3"]) #speech .bubble.speaking { animation: none; }
:has(> [data-moood-engine="3"]) #speech .bubble.speaking { box-shadow: 0 0 18px rgba(255, 220, 160, 0.45); border-color: rgba(255, 220, 160, 0.6); }