/* Terminal and arcade layer. Restraint rules: art and effects are accents;
   the terminal is a hidden, real feature (press ` or ~), not corner text. */

/* ---------- Neon signs (used as a few signature pieces, not everywhere) ---------- */
.neon {
  --n: var(--accent);
  color: var(--n);
  text-shadow: 0 0 1px var(--n), 0 0 6px color-mix(in srgb, var(--n) 70%, transparent), 0 0 16px color-mix(in srgb, var(--n) 40%, transparent);
  animation: neon-hum 7s steps(1) infinite;
}
@keyframes neon-hum { 0%, 91%, 94%, 100% { opacity: 1; } 92% { opacity: .55; } 93% { opacity: .9; } }
.neon--warm { --n: var(--warn); }
.neon--rose { --n: var(--event); }
/* on paper a glow halo only smears dark ink: keep the edge crisp */
[data-theme="paper"] .neon { text-shadow: 0 0 1px var(--n); }

/* Neon radar: a dish with sweep arcs that light left, then right, like a sign flashing back and forth */
.nradar { display: inline-flex; align-items: center; gap: 10px; }
.nradar svg { width: 58px; height: 40px; overflow: visible; }
.nradar .dish { fill: none; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent)); }
.nradar .arc { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .12; filter: drop-shadow(0 0 3px var(--accent)); }
.nradar .l1 { animation: arcs 1.6s steps(1) infinite; }
.nradar .l2 { animation: arcs 1.6s steps(1) infinite .1s; }
.nradar .r1 { animation: arcs 1.6s steps(1) infinite .8s; }
.nradar .r2 { animation: arcs 1.6s steps(1) infinite .9s; }
@keyframes arcs { 0%, 45% { opacity: 1; } 46%, 100% { opacity: .12; } }
[data-theme="paper"] .nradar .dish, [data-theme="paper"] .nradar .arc { filter: none; }

/* ---------- Pinned scroll story: why QuarterSmart, inside a terminal window ---------- */
.qscroll { position: relative; }
.qscroll__stage { display: grid; place-items: center; padding: clamp(48px, 7vw, 96px) clamp(10px, 2vw, 28px); }
.qs-win { position: relative; width: min(1240px, 100%); height: min(80svh, 720px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 48px); padding: clamp(22px, 3vw, 44px); border: 2px solid var(--line-2); background: color-mix(in srgb, var(--bg-0) 52%, #020507); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-0) 80%, #000), 0 30px 80px rgba(0, 0, 0, .35); }
.qs-win:focus { outline: none; }
.qs-win::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); opacity: .5; }
.qs-win .win__t, .qs-win .win__r { position: absolute; z-index: 2; padding: 0 8px; font: 400 11px/14px var(--pixel); letter-spacing: .06em; background: var(--bg-0); white-space: nowrap; top: -8px; }
.qs-win .win__t { left: 16px; color: var(--fg-1); }
.qs-win .win__r { right: 16px; color: var(--fg-2); display: inline-flex; gap: 8px; align-items: center; }
.qs-hud b { font-weight: 400; color: var(--accent); }
.qs-lives { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.qs-lives i { width: 9px; height: 9px; background: conic-gradient(from 0deg, #a9d99f 0 25%, #2a9a70 25% 100%); border-radius: 50%; }
.qs-lives i.is-lost { background: var(--line-2); }
.qs-lives em { display: none; font-style: normal; color: var(--warn); animation: pulse 0.8s steps(2) infinite; }
.qs-lives.is-continue i { display: none; }
.qs-lives.is-continue em { display: inline; }
.qs-art { position: absolute; inset: 0; min-height: 0; overflow: hidden; }
.qs-art canvas { display: block; image-rendering: pixelated; }
.qs-line { --p: 0; position: absolute; z-index: 1; height: 3px; background: var(--accent); transform-origin: left center; transform: scaleX(var(--p)); }
.qs-copy { position: relative; z-index: 1; grid-column: 2; display: grid; gap: 18px; opacity: 0; transform: translateY(8px); transition: opacity .48s steps(4, jump-start) .18s, transform .48s steps(4, jump-start) .18s; }
.qscroll.is-on .qs-copy, .qscroll:not(.is-live) .qs-copy { opacity: 1; transform: none; }
.qs-big { margin: 0 0 18px; font: 400 clamp(66px, 6vw, 96px)/.9 var(--pixel); color: var(--fg-0); letter-spacing: -.02em; }
.qs-big.is-pop { animation: qs-pop .56s steps(1) 1; }
@keyframes qs-pop {
  0% { --es: .032em; --e1: #86c3ba; --e2: #d99bb8; --e3: #dfc07f; --e4: #a9d99f; transform: translateY(-.04em); }
  25% { --es: .028em; --e1: #a9d99f; --e2: #86c3ba; --e3: #d99bb8; --e4: #dfc07f; transform: translateY(-.025em); }
  50% { --es: .025em; --e1: #dfc07f; --e2: #a9d99f; --e3: #86c3ba; --e4: #d99bb8; transform: translateY(-.02em); }
  75% { --es: .023em; transform: translateY(-.01em); }
}
.qs-lead { margin: 0; font: 400 clamp(22px, 2vw, 27.5px)/1.3 var(--pixel); color: var(--fg-0); max-width: 22ch; }
.qs-kicker { margin: 0; font: 400 22px/1.2 var(--pixel); color: var(--accent); }
.qs-replay { position: absolute; z-index: 2; right: 16px; bottom: -8px; padding: 0 8px; font: 400 11px/14px var(--pixel); letter-spacing: .06em; color: var(--fg-2); background: var(--bg-0); border: 0; cursor: pointer; }
.qs-replay::before { content: "\25B6\FE0E\00a0"; content: "\25B6\FE0E\00a0" / ""; color: var(--accent); }
.qs-replay::after { content: ""; position: absolute; inset: -15px 0; }
.qs-replay:hover { color: var(--fg-0); }
.qs-replay[hidden] { display: none; }
/* pause / play sits on the bottom border at the left, clear of "replay" on the right */
.qs-win .win__b { right: auto; left: 16px; }
.qs-why { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); margin: 0; font: 400 22px/1 var(--pixel); color: var(--fg-2); white-space: nowrap; opacity: .9; transition: opacity .16s steps(2, jump-start); }
.qs-hint { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); margin: 0; width: 2px; height: 22px; background: var(--fg-2); animation: pulse 1.4s steps(2) infinite; }
.qscroll.is-on .qs-why { opacity: 0; }
.qscroll.is-on .qs-hint { animation: none; opacity: 0; }
@media (max-width: 900px) {
  .qs-win { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: min(78svh, 680px); align-items: end; gap: 8px; padding: 18px 16px 22px; }
  .qs-copy { grid-column: 1; grid-row: 2; }
  .qs-line { display: none; }
  .qs-big { font-size: 64px; margin-bottom: 10px; } .qs-lead { font-size: 19px; } .qs-kicker { font-size: 17px; }
  .qs-copy { gap: 10px; }
  .qs-why { font-size: 17px; bottom: 2%; }
}
/* short landscape screens (phones on their side): side by side again, or the copy would sit on the art */
@media (max-height: 520px) and (orientation: landscape) {
  .qs-win { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: none; height: min(88svh, 440px); align-items: center; gap: 16px; padding: 16px 20px; }
  .qs-copy { grid-column: 2; grid-row: auto; gap: 8px; }
  .qs-big { font-size: 48px; margin-bottom: 4px; } .qs-lead { font-size: 16px; } .qs-kicker { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-why, .qs-hint { display: none; }
  .qs-copy { opacity: 1; transform: none; transition: none; }
  .qs-big.is-pop { animation: none; }
}
/* paper: the window takes the light surface so the copy reads, and the quarter art darkens a step */
[data-theme="paper"] .qs-win { background: var(--bg-1); box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .12); }
[data-theme="paper"] .qs-win::after { opacity: .2; }
[data-theme="paper"] .qscroll { --qs-sage: #5e9a57; --qs-light: #8fc585; }

/* ---------- Echo text: stacked layers stepping down, like an 80s arcade marquee popping out of the screen ---------- */
.echo { --es: .022em; --e1: #d99bb8; --e2: #dfc07f; --e3: #a9d99f; --e4: #86c3ba; --e5: #2a9a70; --e6: #16362a;
  text-shadow: 0 var(--es) 0 var(--e1), 0 calc(var(--es) * 2) 0 var(--e2), 0 calc(var(--es) * 3) 0 var(--e3), 0 calc(var(--es) * 4) 0 var(--e4), 0 calc(var(--es) * 5) 0 var(--e5), 0 calc(var(--es) * 6) 0 var(--e6); }
.echo--sm { --es: .03em; text-shadow: 0 var(--es) 0 var(--e1), 0 calc(var(--es) * 2) 0 var(--e3), 0 calc(var(--es) * 3) 0 var(--e5); }
.echo--chase { animation: echo-chase 2.8s steps(1) infinite; }
@keyframes echo-chase {
  0% { --e1: #d99bb8; --e2: #dfc07f; --e3: #a9d99f; --e4: #86c3ba; }
  25% { --e1: #86c3ba; --e2: #d99bb8; --e3: #dfc07f; --e4: #a9d99f; }
  50% { --e1: #a9d99f; --e2: #86c3ba; --e3: #d99bb8; --e4: #dfc07f; }
  75% { --e1: #dfc07f; --e2: #a9d99f; --e3: #86c3ba; --e4: #d99bb8; }
}
[data-theme="paper"] .echo { --e6: #cfc8b8; }
@media (prefers-reduced-motion: reduce) { .echo--chase { animation: none; } }

/* ---------- Hidden terminal (press ` or ~) ---------- */
.tty { position: fixed; left: 0; right: 0; top: 0; z-index: 250; height: min(62vh, 520px); transform: translateY(-102%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); background: color-mix(in srgb, #0a0d0b 96%, transparent); border-bottom: 2px solid var(--accent); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); font: 400 14px/1.55 'JB Mono', ui-monospace, monospace; color: #cfe3c8; }
.tty.is-open { transform: none; }
.tty__bar { display: flex; justify-content: space-between; padding: 6px 14px; font-size: 12px; color: #6f8a76; border-bottom: 1px solid #1e2a22; }
.tty__out { height: calc(100% - 70px); overflow-y: auto; padding: 12px 16px 0; white-space: pre-wrap; }
.tty__out .p { color: var(--accent); }
.tty__out .dim { color: #6f8a76; }
.tty__out .warn { color: var(--warn); }
.tty__out a { color: #cfe3c8; }
.tty__row { display: flex; gap: 8px; padding: 6px 16px 12px; }
.tty__row .p { color: var(--accent); white-space: nowrap; }
.tty__in { flex: 1; background: transparent; border: 0; outline: 0; color: #eef7ea; font: inherit; caret-color: var(--accent); }
.tty .ansi { --ansi: 7px; margin: 4px 0; }
.tty-cue { font: 400 12px/1 'JB Mono', monospace; color: var(--fg-2); background: none; border: 0; padding: 16px 6px; margin: -16px -6px; cursor: pointer; }
.tty-cue:hover { color: var(--accent); }
.tty-cue::after { content: "_"; animation: pulse 1.1s steps(2) infinite; }
.ansi { --ansi: 8px; margin: 0; font: 400 var(--ansi)/1.2 'JB Mono', ui-monospace, monospace; letter-spacing: 0; white-space: pre; font-variant-ligatures: none; }

/* ---------- Idle screen ----------
   Retired by the final direction (no block-character art or decrypting text on
   pages). term.js still loads it after 75s idle; keep it out of sight. */
.idle { display: none !important; }
.idle { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 14px; background: color-mix(in srgb, var(--bg-0) 96%, #000); opacity: 0; transition: opacity .3s; }
.idle.is-on { opacity: 1; }
.idle::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.idle__art { margin: 0; font: 400 clamp(9px, 1.6vw, 18px)/1.2 'JB Mono', monospace; white-space: pre; }
.idle__word { font: 400 44px/1 var(--pixel); color: var(--fg-0); margin-top: 18px; }
.idle__line { font: 400 22px/1 var(--pixel); color: var(--accent); }
.idle__hint { font: 400 11px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); margin-top: 26px; animation: pulse 1.6s steps(2) infinite; }

@media (prefers-reduced-motion: reduce) {
  .neon, .nradar .arc, .tty-cue::after, .idle__hint, .qs-hint { animation: none; }
  .nradar .arc { opacity: .8; }
}

/* ---------- Night everywhere: a faint pixel sky behind every page (night.js) ---------- */
html { background: var(--bg-0); }
body { background: transparent; }
.nightsky { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; image-rendering: pixelated; opacity: .5; }
.nightsky[hidden] { display: none; }
.band--slate { background: color-mix(in srgb, var(--block, var(--bg-2)) 88%, transparent); }
.band--deep { background: color-mix(in srgb, var(--bg-0) 55%, rgba(0, 0, 0, .55)); }
body:not(.home) .nightsky {
  --clear-a: max(1%, calc(50% - 720px)); --clear-b: max(2.5%, calc(50% - 600px));   /* text starts at 50% - 588px on wide screens */
  -webkit-mask-image: linear-gradient(90deg, #000 0 var(--clear-a), transparent var(--clear-b) calc(100% - var(--clear-b)), #000 calc(100% - var(--clear-a)));
  mask-image: linear-gradient(90deg, #000 0 var(--clear-a), transparent var(--clear-b) calc(100% - var(--clear-b)), #000 calc(100% - var(--clear-a)));
}
@media print { .nightsky { display: none; } }

/* ---------- Scrollbar: a slim arcade rail ---------- */
html { scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--bg-2)) var(--bg-0); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); border-left: 1px solid var(--line); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, var(--bg-2)); border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Accent warmth: a little rose (borrowed from the Rose theme) and a teeny bit of ember orange ---------- */
:root, [data-theme="evergreen"] { --rose: #ebbcba; --ember: #eba66f; }
[data-theme="midnight"], [data-theme="obsidian"], [data-theme="forest"] { --rose: var(--event); --ember: var(--warn); }
[data-theme="rose"] { --rose: #ebbcba; --ember: #f6c177; }
[data-theme="paper"] { --rose: #9b4d63; --ember: #9a5a1e; }
::selection { background: var(--rose); color: #1d1418; }
a:hover { text-decoration-color: var(--rose); }
.qs-kicker { color: var(--rose); }
.qs-replay::before { color: var(--ember); }
.win__t::before { background: var(--rose); }