:root {
      --display: 'Baloo 2', system-ui, sans-serif;
      --body: 'Fredoka', system-ui, sans-serif;

      /* ── Surfaces — "Ice Blue" theme, lightened & more saturated blue ── */
      --bg-0: #0C2A52;
      /* app base — deep blue (was near-black navy) */
      --bg-1: #123A6C;
      /* screen gradient base */
      --surface: #1C4378;
      /* cards / panels */
      --surface-2: #265390;
      /* elevated cards */
      --surface-3: #3163A4;
      /* hover / pressed */
      --glass: rgba(130, 190, 255, .14);
      --glass-strong: rgba(9, 34, 64, .58);
      --border: rgba(135, 195, 255, .20);
      --border-strong: rgba(135, 195, 255, .36);

      /* ── Text ── */
      --ink: #EEF4FF;
      --ink-muted: #AAC6EC;
      --ink-subtle: #88A6CE;
      --on-accent: #06182E;
      /* dark text on bright accents */

      /* ── Brand / accent ── */
      --violet: #38BDF8;
      /* Light Blue (Sky-400) */
      --violet-d: #0284C7;
      /* Sky-700 */
      --cyan: #38E1F0;
      --cyan-d: #16B9CC;
      --gold: #FFC83D;
      --gold-d: #E8A92B;
      --gold-shadow: #9A6E13;
      --green: #46D67E;
      --green-d: #21B25C;
      --red: #FF6B6B;
      --red-d: #E8475A;
      --blue: #0EA5E9;
      /* Sky-500 */
      --blue-d: #0284C7;
      --purple: #38BDF8;
      --purple-d: #0284C7;
      --pink: #FB5A86;

      /* legacy aliases — repointed to the blue theme */
      --panel: #1C4378;
      --panel-soft: #123A6C;

      /* ── Elevation ── */
      --shadow: 0 18px 48px rgba(0, 12, 30, .50);
      --shadow-sm: 0 8px 22px rgba(0, 12, 30, .40);
      --glow-violet: 0 0 24px rgba(56, 189, 248, .45);
      --glow-cyan: 0 0 22px rgba(56, 225, 240, .40);

      /* ── Motion ── */
      --ease-bounce: cubic-bezier(0.34, 1.1, 0.64, 1);
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-spring: cubic-bezier(0.34, 1.18, 0.64, 1);
      --dur-fast: 140ms;
      --dur: 220ms;

      /* ── Radii ── */
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 24px;
    }

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* ── Hide scrollbars everywhere (screens are sized to fit) ──
       The two long panels below are the exception: Work and Ranks keep a
       visible scrollbar, because their content really does run past the
       bottom and there is nothing else to say so. */
    * {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    *::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    #tab-work,
    #tab-leaderboard {
      scrollbar-width: thin;
      scrollbar-color: rgba(38, 86, 150, .35) transparent;
      -ms-overflow-style: auto;
    }

    #tab-work::-webkit-scrollbar,
    #tab-leaderboard::-webkit-scrollbar {
      width: 9px;
      height: 9px;
      display: block;
    }

    #tab-work::-webkit-scrollbar-thumb,
    #tab-leaderboard::-webkit-scrollbar-thumb {
      background: rgba(38, 86, 150, .35);
      border-radius: 8px;
    }

    #tab-work::-webkit-scrollbar-track,
    #tab-leaderboard::-webkit-scrollbar-track {
      background: transparent;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    body {
      font-family: var(--body);
      color: var(--ink);
      background:
        radial-gradient(120% 80% at 50% -10%, rgba(56, 189, 248, .22) 0%, transparent 55%),
        var(--bg-0);
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }

    button {
      font-family: var(--display);
      cursor: pointer;
      border: none;
      background: none;
    }

    input {
      font-family: var(--body);
    }