/* Keystring styles. Colors are tokens on :root; the page is a single dark look by design. */
/* Layout: one full-bleed stage (canvas) on a faint music staff; a thin HUD floats at top and bottom edges. */
/* Nunito is the studio font, served by REYN GAMES itself. The string traces its glyphs, so the family name stays "Nunito". */
@font-face{font-family:"Nunito";src:url("/assets/nunito-page.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
:root{
  --ink:#130f26;        /* stage */
  --staff:#7f78c4;      /* staff lines, borders */
  --bone:#f3ece0;       /* the string, primary text */
  --muted:#a29cc8;      /* secondary text */
  --chip:#211b3f;       /* control surfaces */
  --hot:#ff86b0;        /* glow, active state */
  --good:#93e3a6;       /* round target reached */
  --ui:"Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%}
html,body{height:100%;overflow:hidden}
body{background:var(--ink);color:var(--bone);font-family:var(--ui);font-size:14px}
canvas{position:fixed;inset:0;display:block;touch-action:none;cursor:grab;transition:transform .7s cubic-bezier(.6,0,.2,1)}
canvas.grabbing{cursor:grabbing}
canvas.flipped{transform:scaleX(-1)}
canvas.dreamy{animation:dreamHue 9s linear infinite}
@keyframes dreamHue{from{filter:blur(1.3px) saturate(1.4) hue-rotate(0deg)}to{filter:blur(1.3px) saturate(1.4) hue-rotate(360deg)}}
html{transition:filter .3s ease}
html.inverted{filter:invert(1)}
body.web .hud.top,body.web .disc,body.web #homeLink{opacity:0}
body.web .disc,body.web #homeLink{pointer-events:none}
.hud.top,.disc,#homeLink{transition:opacity .35s ease}
.hud{position:fixed;left:0;right:0;padding-inline:16px;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;pointer-events:none}
.top{top:0;padding-top:calc(env(safe-area-inset-top,0px) + 16px);align-items:flex-start}
.bottom{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);align-items:flex-end}
.disc{display:grid;gap:3px;pointer-events:auto;cursor:default;padding:4px 10px 6px 0}
.disc-float{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.dfl{position:absolute;max-width:24ch;font-weight:700;font-size:14px;line-height:1.3;color:var(--bone);opacity:0;transition:opacity .5s ease;text-shadow:0 1px 8px var(--ink);animation:dflDrift 9s ease-in-out infinite alternate}
.dfl b{font-weight:900}
.dfl .n{color:var(--hot);font-weight:900;margin-right:6px;font-variant-numeric:tabular-nums}
.disc-float.on .dfl{opacity:.62}
.disc-float:not(.on) .dfl{transition-delay:0s !important}
@keyframes dflDrift{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
@media (prefers-reduced-motion:reduce){.dfl{animation:none}}
.disc-label{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.disc-num{font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums;transform-origin:left center}
.disc-num.bump{animation:discBump .6s ease}
@keyframes discBump{30%{transform:scale(1.3);color:var(--hot)}}
.nudge{top:17%;font-size:clamp(24px,4.6vw,40px)}
.readout{display:flex;gap:14px;align-items:center;margin-left:auto}
.intro{position:fixed;left:16px;right:16px;top:24%;text-align:center;font-weight:900;font-size:clamp(28px,6vw,52px);letter-spacing:-0.01em;color:var(--bone);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity 1.4s ease,transform 1.4s ease;text-shadow:0 0 24px color-mix(in srgb,var(--hot) 45%,transparent)}
.intro.show{opacity:1;transform:none}
.intro.gone{opacity:0;transform:translateY(-12px)}
@media (prefers-reduced-motion:reduce){.intro,.intro.gone{transform:none}}
.banner{top:30%;font-size:clamp(34px,7vw,64px);transition-duration:.45s}
.pause{position:fixed;inset:0;display:grid;place-items:center;font-weight:900;font-size:clamp(40px,9vw,88px);color:var(--bone);pointer-events:none}
.game{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;pointer-events:none}
.g-round{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.g-score{font-weight:900;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;transition:color .3s}
.g-score.met{color:var(--good)}
.g-bar{width:180px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--staff) 35%,transparent);overflow:hidden}
.g-bar span{display:block;height:100%;background:var(--bone);transform-origin:left center}
.g-bar span.low{background:var(--hot)}
@media (max-width:600px){.game{top:calc(env(safe-area-inset-top,0px) + 92px)}}
.glyph{width:58px;height:58px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--staff) 55%,transparent);border-radius:14px;font-weight:900;font-size:34px;line-height:1;background:color-mix(in srgb,var(--chip) 70%,transparent)}
dl{margin:0;display:grid;grid-template-columns:auto auto;gap:3px 14px}
dl div{display:contents}
dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:800;align-self:center}
dd{margin:0;font-variant-numeric:tabular-nums;font-weight:800}
.right{margin-left:auto;display:flex;gap:14px 22px;align-items:flex-end;flex-wrap:wrap;pointer-events:auto}
.mode{display:grid;gap:7px}
.timeline{--p:0;position:relative;width:200px;height:22px;border-radius:8px}
.timeline .track,.timeline .fill{position:absolute;left:6px;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.timeline .track{right:6px;background:color-mix(in srgb,var(--staff) 45%,transparent)}
.timeline .fill{width:calc((100% - 12px) * var(--p));background:var(--bone);transition:width .25s ease}
.timeline .nodes{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.node{width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid color-mix(in srgb,var(--staff) 75%,transparent);transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.node.past{background:var(--bone);border-color:var(--bone)}
.node.on{transform:scale(1.4);background:var(--hot);border-color:var(--hot);box-shadow:0 0 0 4px color-mix(in srgb,var(--hot) 22%,transparent)}
.timeline input{position:absolute;left:0;top:-8px;width:100%;height:calc(100% + 16px);margin:0;opacity:0;cursor:pointer}
.timeline:focus-within{outline:2px solid var(--hot);outline-offset:5px}
.controls{display:flex;gap:8px}
.controls button{font:800 14px var(--ui);color:var(--bone);background:var(--chip);border:1px solid color-mix(in srgb,var(--staff) 45%,transparent);border-radius:10px;padding:10px 12px}
.controls button{cursor:pointer}
.controls button:hover{border-color:var(--staff)}
.controls :focus-visible{outline:2px solid var(--hot);outline-offset:2px}
@media (max-width:600px){
  .glyph{width:48px;height:48px;font-size:28px}
  .timeline{width:170px}
}

/* REYN GAMES: the studio logo sits top left and leads home; Discoveries collect in the bottom left. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#homeLink{position:fixed;left:calc(env(safe-area-inset-left,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 10px);z-index:5;display:flex;align-items:center;gap:2px;height:42px;padding:0 10px 0 4px;border-radius:12px;color:var(--bone);text-decoration:none;opacity:.68}
#homeLink:hover,#homeLink:focus-visible{opacity:1;background:color-mix(in srgb,var(--chip) 80%,transparent)}
#homeLink:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
#homeLink svg{width:20px;height:20px;flex:none}
#homeLink img{display:block;width:auto;height:32px;filter:invert(1);mix-blend-mode:screen}
.bottom .disc{padding:6px 10px 2px 0}