/* Design tokens, page reset, shared controls. --acc is overridden per streamer (streamer.json "accent"). */
:root { --bg:#0c0e18; --fg:#e8ecff; --dim:#8b93b8; --acc:#ff6b9d; --acc2:#7fd0ff; --fact:#ffd166; --panel:rgba(14,17,32,.92); --line:#2a3050; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--fg); font:15px/1.45 "Segoe UI", system-ui, sans-serif; -webkit-user-select:none; user-select:none; }
* { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* the only text that can be selected and copied is a fact card's text */
#fact.copyable #ftext { -webkit-user-select:text; user-select:text; }
canvas { position:fixed; inset:0; display:block; cursor:pointer; touch-action:none; }
[hidden] { display:none !important; }

button { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:9px 16px; font:inherit; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--acc); }
button.primary { background:var(--acc); color:#16091a; border-color:var(--acc); font-weight:700; }
button:disabled { opacity:.4; cursor:not-allowed; }

@keyframes blink { 50% { opacity:.3; } }

/* Flashback look: the scene is a memory (warm tint, darker corners), entered and left through a white flash. */
canvas { transition: filter .6s; }
body.flashback canvas { filter: sepia(.3) saturate(1.1) contrast(1.04); }
#vignette { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .6s; background:radial-gradient(ellipse at center, transparent 52%, rgba(24,12,0,.6) 100%); }
body.flashback #vignette { opacity:1; }
#flash { position:fixed; inset:0; z-index:6; pointer-events:none; background:#fff; opacity:0; }
#flash.on { animation:flash 1.1s ease-out; }
@keyframes flash { 0% { opacity:0; } 22% { opacity:.96; } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { #flash.on { animation:none; } }