/* story.css — the story layer: the dialogue box (story/dialogue.js), the teaching hints (story/hints.js) and the
   farewell picker (story/farewell.js). Pixel UI colours as the quest dialogue (#sq-dialog) and the combat cards. */
.st-dialog{position:fixed;z-index:9700;left:0;right:0;bottom:0;padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(transparent,rgba(10,8,6,.6) 34%);pointer-events:auto;touch-action:manipulation}
.st-dialog[hidden]{display:none}
.st-box{display:flex;gap:10px;align-items:flex-end;max-width:540px;margin:0 auto;padding:10px 12px 12px;min-height:104px;color:#f5efe2;
  font-family:EarthCombatPixel,var(--font-pixel,"Pixelify Sans"),Georgia,serif;background:#201c16;border:2px solid #b8913a;
  box-shadow:inset 0 2px #f0d060,0 4px #101815;cursor:pointer;animation:st-in .22s ease-out both}
.st-portrait{width:72px;height:72px;flex:none;image-rendering:pixelated;background:#2c261d;border:2px solid #4a3d26;align-self:flex-start}
.st-portrait[hidden]{display:none}
.st-text{flex:1;min-width:0}
.st-who{font-size:13px;color:#f0d060;text-transform:uppercase;letter-spacing:.06em;min-height:15px}
.st-line{font-size:17px;line-height:1.32;margin-top:4px;min-height:44px;overflow-wrap:anywhere}
.st-next{float:right;font-size:11px;color:#d9b45a;letter-spacing:.12em;text-transform:uppercase;margin-top:4px;animation:st-blink 1s steps(2) infinite}
.st-next[hidden]{display:none}
.st-choices{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.st-choices:empty{display:none}
.st-choices button,.st-input button{font:inherit;font-size:15px;color:#2b2118;background:#f5efe2;border:2px solid #2b2118;border-radius:4px;
  padding:9px 12px;text-align:left;box-shadow:0 2px 0 #b8913a;cursor:pointer}
.st-choices button:active,.st-input button:active{transform:translateY(2px);box-shadow:none}
.st-input{display:flex;gap:6px;margin-top:8px}
.st-input[hidden]{display:none}
.st-input input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px;border:2px solid #b8913a;border-radius:4px;background:#fffaf0;color:#2b2118}
@keyframes st-in{from{opacity:0;transform:translateY(10px)}}
@keyframes st-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.st-box,.st-next{animation:none}}

/* the teaching hints (story/hints.js): an outline that lets taps through, and one short line */
.st-hint-ring{position:fixed;z-index:9650;pointer-events:none;border:3px solid #f0d060;border-radius:10px;box-shadow:0 0 0 3px #201c16,0 0 18px #f0d06099;animation:st-pulse 1.1s ease-in-out infinite}
.st-hint{position:fixed;z-index:9651;padding:8px 10px;font:15px/1.3 EarthCombatPixel,var(--font-pixel,"Pixelify Sans"),Georgia,serif;color:#f5efe2;background:#201c16;border:2px solid #b8913a;box-shadow:0 3px #101815;text-align:center;cursor:pointer}
.st-hint-ring[hidden],.st-hint[hidden]{display:none}
@keyframes st-pulse{50%{transform:scale(1.06);opacity:.75}}
@media (prefers-reduced-motion:reduce){.st-hint-ring{animation:none}}

/* the opening cinematic (story/cinematic.js) */
.st-cinematic{position:fixed;inset:0;z-index:9500;background:#070614;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.st-cinematic canvas{position:absolute;left:0;top:0}
.st-cinematic .st-stage{position:absolute;left:50%;top:0;transform:translateX(-50%);overflow:hidden}
.st-cinematic.st-ground .st-cine-text{bottom:42%}
.st-cine-text{position:absolute;left:8%;right:8%;bottom:14%;max-width:520px;margin:0 auto;will-change:opacity;text-align:center;color:#fff6e4;font:20px/1.4 EarthCombatPixel,Georgia,serif;letter-spacing:.03em;text-shadow:0 2px 0 #120f1e,0 0 14px rgba(0,0,0,.8);pointer-events:none;opacity:0}
.st-cine-skip{position:absolute;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));color:#fff6e480;font:11px EarthCombatPixel,Georgia,serif;letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.st-cine-skip[hidden]{display:none}

/* the farewell picker (story/farewell.js) */
.st-farewell{position:fixed;inset:0;z-index:9600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px 16px 190px;
  background:radial-gradient(circle at 50% 42%,#2c2448 0,#110e1f 62%,#08070f 100%);color:#f5efe2;font-family:EarthCombatPixel,var(--font-pixel,"Pixelify Sans"),Georgia,serif;animation:st-fade .5s ease-out both}
.st-farewell.out{animation:st-fade .3s ease-in reverse both}
.st-fw-title{font-size:20px;letter-spacing:.04em;text-shadow:0 2px 0 #120f1e}
.st-friends{display:flex;gap:10px;align-items:flex-end}
.st-friend{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 6px;width:96px;background:#201c16;border:2px solid #4a3d26;border-radius:8px;color:#f5efe2;font:inherit;font-size:14px;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.st-friend canvas{width:72px;height:72px;image-rendering:pixelated}
.st-friend.match{transform:translateY(-6px)}
.st-friend.on{border-color:#f0d060;box-shadow:0 0 0 2px #201c16,0 0 18px #f0d06088}
.st-friend[data-element=fire].on{border-color:#ffab70}.st-friend[data-element=water].on{border-color:#86dcf5}.st-friend[data-element=nature].on{border-color:#a9e887}
.st-fw-info{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:62px;text-align:center}
.st-fw-info b{font-size:18px}.st-fw-line{font-size:14px;opacity:.9}.st-fw-info small{font-size:12px;color:#d9b45a;letter-spacing:.06em;text-transform:uppercase}
.st-fw-go{font:inherit;font-size:17px;font-weight:700;padding:12px 22px;border:3px solid #2b2118;border-radius:6px;background:#f3c75f;color:#2b2118;box-shadow:0 3px 0 #2b2118;cursor:pointer}
.st-fw-go:active{transform:translateY(2px);box-shadow:0 1px 0 #2b2118}
@keyframes st-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.st-farewell,.st-friend{animation:none;transition:none}}

/* while the prologue runs, the story-quest card and the first-session card wait; the cover keeps the map from flashing */
body.st-prologue #sq-card,body.st-prologue #journey-card{display:none!important}
body.st-scene-on #hud{visibility:hidden}
.st-cover{position:fixed;inset:0;z-index:9499;background:#070614}

/* "Touch and hold the light" (story/cinematic.js holdToCross): a ring that fills while the gate is held */
.st-hold{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.st-hold i{--k:0;width:84px;height:84px;border-radius:50%;background:conic-gradient(#fff6e4 calc(var(--k) * 360deg),#fff6e433 0);-webkit-mask:radial-gradient(circle,transparent 34px,#000 35px);mask:radial-gradient(circle,transparent 34px,#000 35px);animation:st-pulse 1.4s ease-in-out infinite}
.st-hold.on i{animation:none}
.st-hold span{color:#fff6e4;font:15px EarthCombatPixel,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 0 #120f1e}
@media (prefers-reduced-motion:reduce){.st-hold i{animation:none}}
/* short story scenes (story/cutscene.js): a pixel canvas over the screen; .opaque covers the map and holds it */
.st-scene{position:fixed;inset:0;z-index:9500;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.st-scene.opaque{background:#070614;pointer-events:auto}
.st-scene canvas{position:absolute;left:0;top:0}
/* between the worlds (story/arrival-scene.js): light through closed eyes, breathing on the compositor, so the map's
   first paints underneath cannot make it stutter; it fades as the eyes open */
.st-between{position:fixed;inset:0;z-index:9501;pointer-events:none;transition:opacity .45s linear}
.st-between canvas{position:absolute;left:0;top:0;image-rendering:pixelated;opacity:.05;will-change:opacity;animation:st-breathe 3.4s ease-in-out infinite}
@keyframes st-breathe{50%{opacity:1}}
.st-between.calm canvas{animation:none;opacity:.6}
@media (prefers-reduced-motion:reduce){.st-between canvas{animation:none;opacity:.6}}
/* the opening's sky: two fields under the scene canvas, drifting on the compositor (story/cinematic.js skyFields) */
.st-cinematic .st-sky{position:absolute;left:0;top:0;image-rendering:pixelated;will-change:transform,opacity;transition:opacity .35s linear;animation:st-drift 160s linear infinite}
@keyframes st-drift{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.st-cinematic .st-sky{animation:none}}
/* the film's nebula depths: compositor fields between the sky and the scene canvas (story/cinematic.js) */
.st-cinematic .st-neb{z-index:1}
.st-cinematic canvas:not(.st-sky){z-index:2}
/* a Replay's hold-to-skip ring, bottom right, small */
.st-hold.skip{left:auto;right:18px;top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:none;gap:6px;pointer-events:none}
.st-hold.skip i{width:44px;height:44px;-webkit-mask:radial-gradient(circle,transparent 17px,#000 18px);mask:radial-gradient(circle,transparent 17px,#000 18px)}
.st-hold.skip span{font-size:11px}
/* the film's first moment (story/cinematic.js begin): the ring round the one star, the words and a sound hint under it */
.st-hold.begin{transform:translate(-50%,-42px);gap:14px}
.st-hold.begin span{font-size:17px;text-transform:none;letter-spacing:.06em;text-shadow:0 2px 0 #120f1e,0 0 12px rgba(0,0,0,.9)}
.st-hold small{color:#b9b2d6;font:12px EarthCombatPixel,Georgia,serif;letter-spacing:.06em;text-shadow:0 2px 0 #120f1e;margin-top:-6px}
/* the hold at the gate: the ring stays on the light, the words go down to the narration's place, clear of Spirit
   (a transformed parent would trap a fixed child, so the prompt covers the film and places its parts itself) */
.st-hold.cross{inset:0;left:0;top:0;transform:none;display:block}
.st-hold.cross i{position:absolute;left:50%;top:50%;margin:-42px 0 0 -42px;background:conic-gradient(#fff6e4 calc(var(--k) * 360deg),#120f1e99 0)}   /* a dark track: the faint one vanished on the bright gate */
.st-hold.cross span{position:absolute;left:8%;right:8%;bottom:calc(14% + env(safe-area-inset-bottom,0px));text-align:center;font-size:17px;text-transform:none;letter-spacing:.06em;text-shadow:0 2px 0 #120f1e,0 0 14px rgba(0,0,0,.85)}
/* a voice in the dark between the worlds (story/arrival-scene.js): Spirit speaks while the eyes are still closed */
.st-voice{position:fixed;left:8%;right:8%;bottom:30%;z-index:9502;text-align:center;color:#e6dbff;font:19px/1.4 EarthCombatPixel,Georgia,serif;letter-spacing:.04em;text-shadow:0 2px 0 #120f1e,0 0 14px rgba(0,0,0,.9);pointer-events:none;opacity:0;transition:opacity .6s linear}
.st-voice.on{opacity:1}