/* ИСТОК · design tokens
   Proportions follow the reference mockup: at a 1920-wide game window 1rem = 19.2px, the section list is ~17% of the
   width, the top bar ~5.7rem. Everything is set in rem so the whole menu scales with the window (MCEF renders at window pixels). */
:root {
  --fs: clamp(12px, 1vw, 22px);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* scene + glass */
  --bg-0: #0b1017;
  --bg-1: #16202e;
  --glass: rgba(10, 12, 17, 0.58);
  --glass-strong: rgba(10, 12, 17, 0.86);

  /* layered surfaces (white over glass) */
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --surface-3: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  /* text */
  --text: #f4f6f9;
  --text-2: rgba(232, 236, 242, 0.66);
  --text-3: rgba(232, 236, 242, 0.44);
  --text-4: rgba(232, 236, 242, 0.28);
  --on-light: #0c0f14;

  /* the only colour notes: money, points, status */
  --ruby: #e2474d;
  --ruby-soft: rgba(226, 71, 77, 0.14);
  --mint: #4bd69c;
  --mint-soft: rgba(75, 214, 156, 0.13);
  --gold: #e9b44c;
  --gold-soft: rgba(233, 180, 76, 0.14);
  --sky: #74b8ff;
  --sky-soft: rgba(116, 184, 255, 0.13);
  --amber: #f0a94a;
  --amber-soft: rgba(240, 169, 74, 0.13);
  --lvl-a: #8fa3ff;
  --lvl-b: #bb95ff;

  --focus: rgba(255, 255, 255, 0.6);

  /* radii */
  --r-xl: 1.5rem;
  --r-lg: 1rem;
  --r-md: 0.7rem;
  --r-sm: 0.5rem;

  --shadow-frame: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 40px 120px -30px rgba(0, 0, 0, 0.75);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 80px -20px rgba(0, 0, 0, 0.85);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 260ms;

  --header-h: 5.75rem;
  --side-w: 16.5rem;
  --aside-w: 22rem;
  --frame-gap: 1.5rem;
}

/* settings, stored per player in the browser */
html[data-glass="solid"] {
  --glass: rgba(10, 12, 17, 0.93);
  --glass-strong: rgba(10, 12, 17, 0.97);
}
html[data-scale="small"] { --fs: clamp(11px, 0.86vw, 19px); }
html[data-scale="large"] { --fs: clamp(13px, 1.12vw, 24px); }
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) *,
  html:not([data-motion="on"]) *::before,
  html:not([data-motion="on"]) *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}