/* Базовая тема AGOGE — извлечена из прототипа (AGOGE offline.html, второй <style>).
   :root — светлая, html[data-theme="dark"] — тёмная. Шрифты (Onest / JetBrains Mono)
   грузятся из Google Fonts в index.html (в offline были инлайн-woff2). */
:root {
  --desk: #E4E2DD;
  --paper: #F1EFEA;
  --card: #FFFFFF;
  --ink: #16150F;
  --ink-2: #57534A;
  --ink-3: #9D988C;
  --hair: rgba(20,19,15,0.085);
  --shadow: 0 1px 2px rgba(20,19,15,0.04), 0 8px 20px rgba(20,19,15,0.055);
  --sans: 'Onest', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --accent: #FB3B1E;
  /* inverse (non-flipping) semantic surfaces — dark in both themes */
  --elev: #16150F;
  --hero: #16150F;
  --hero-2: #100F0C;
  --on-inv: #FFFFFF;
  --scrim: color-mix(in srgb, #16150F 34%, transparent);
  --scrim-strong: color-mix(in srgb, #16150F 40%, transparent);
}
html[data-theme="dark"] {
  --desk: #050504;
  --paper: #14130F;
  --card: #1E1C17;
  --ink: #F1EFEA;
  --ink-2: #B0A99C;
  --ink-3: #6E685C;
  --hair: rgba(255,255,255,0.10);
  --shadow: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.55);
  --elev: #2A2720;
  --hero: #0C0B08;
  --hero-2: #060503;
  --scrim: rgba(0,0,0,0.55);
  --scrim-strong: rgba(0,0,0,0.66);
}
/* theme cross-fade — scoped, only while switching manually (class added for 260ms) */
html.theme-anim, html.theme-anim body, html.theme-anim .theme-tr {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--desk);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  overflow: hidden;
}
#root { width: 100vw; height: 100dvh; }
button { font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }
main::-webkit-scrollbar { width: 0; }
div::-webkit-scrollbar { width: 0; }
@keyframes pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes actRing { 0% { transform: scale(1); opacity: 0.5; } 70%,100% { transform: scale(2.1); opacity: 0; } }
.act-ring { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .act-ring { animation: actRing 1.9s ease-out infinite; } }
@keyframes histRight { from { transform: translateX(34px); opacity: 0.3; } to { transform: translateX(0); opacity: 1; } }
@keyframes histLeft { from { transform: translateX(-34px); opacity: 0.3; } to { transform: translateX(0); opacity: 1; } }
@keyframes flameLick {
  0%, 27%, 100% { transform: scaleY(1) scaleX(1) translateY(0) rotate(0deg); }
  5%  { transform: scaleY(1.16) scaleX(0.93) translateY(-1.5px) rotate(-2.5deg); }
  11% { transform: scaleY(0.97) scaleX(1.06) translateY(0) rotate(2deg); }
  17% { transform: scaleY(1.12) scaleX(0.96) translateY(-1px) rotate(-1.5deg); }
  23% { transform: scaleY(1.02) scaleX(1) translateY(0) rotate(0.5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .streak-flame { animation: flameLick 3s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes tierBurst { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.tier-burst { transform: scale(0.4); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .tier-burst { animation: tierBurst 1s ease-out .05s both; } }