/* ГризлиOn design system — one layer for the whole super-app (Задачи, Игры, Общение, Безопасность, профиль, меню, шторки).
   Base: calm light «Yandex-like» look (light grey background, white cards, big radii, soft shadows, yellow as an accent with
   dark ink, system font — no web fonts on the first screen). Our own note: a warm honey/amber accent next to the yellow,
   bear details (paw prints in empty states, tab icons and loading, a bear face for empty screens) and our rounding scale.
   No third-party branding. Applies only under html.gl-on (the flagged «Задачи» document; classic game only with ?gl=1,
   where no game element uses these classes — the village frame is untouched). */
html.gl-on {
  /* type & rhythm */
  --gl-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gl-font-text: var(--gl-font); --gl-font-display: var(--gl-font);
  --gl-fs-12: 12px; --gl-fs-14: 14px; --gl-fs-16: 16px; --gl-fs-20: 20px; --gl-fs-24: 24px; --gl-fs-32: 32px;
  --gl-space-1: 4px; --gl-space-2: 8px; --gl-space-3: 12px; --gl-space-4: 16px; --gl-space-6: 24px; --gl-space-8: 32px;
  /* ГризлиOn rounding: soft «pebble» cards, pill chips, tall sheets */
  --gl-radius-s: 10px; --gl-radius-m: 14px; --gl-radius-l: 18px; --gl-radius-xl: 22px; --gl-radius-sheet: 28px; --gl-radius-pill: 999px;
  --gl-shadow-1: 0 1px 2px rgba(60, 40, 10, .04), 0 4px 18px rgba(60, 40, 10, .06);
  --gl-shadow-2: 0 14px 44px rgba(40, 25, 5, .18);
  --gl-dur-fast: 120ms; --gl-dur: 200ms; --gl-dur-slow: 320ms;
  --gl-z-base: 0; --gl-z-tabbar: 50; --gl-z-sheet: 100; --gl-z-toast: 200; --gl-z-modal: 300;
  --gl-tap: 44px;
  /* light palette */
  --gl-bg: #F4F4F2; --gl-surface: #FFFFFF; --gl-surface-2: #EFEEEB; --gl-line: #ECEBE7; --gl-line-2: #D9D7D1;
  --gl-text: #221F1C; --gl-text-2: #6F6B66; --gl-text-3: #A3A09A;
  --gl-yellow: #FFD84A; --gl-yellow-ink: #221F1C; --gl-yellow-soft: rgba(255, 210, 60, .24);
  --gl-honey: #F2A93B; --gl-honey-deep: #D9861C; --gl-honey-soft: #FFF1D6; --gl-honey-ink: #5A3A08;
  --gl-accent: var(--gl-yellow); --gl-accent-ink: var(--gl-yellow-ink);
  --gl-brand-grad: linear-gradient(135deg, #FFD84A 0%, #F7B23B 100%);
  --gl-info: #2F76F0; --gl-ok: #1FA45A; --gl-warn: #E8891A; --gl-danger: #E5352B;
  --gl-chip-on: #221F1C; --gl-chip-on-ink: #FFFFFF;
  --gl-bubble-me: #FFF0C2; --gl-bubble-me-meta: #9A7E2E;
  --gl-paw: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23F2A93B'><ellipse cx='32' cy='42' rx='14' ry='12'/><ellipse cx='15' cy='27' rx='6' ry='7.5' transform='rotate(-18 15 27)'/><ellipse cx='25.5' cy='17' rx='6' ry='8'/><ellipse cx='38.5' cy='17' rx='6' ry='8'/><ellipse cx='49' cy='27' rx='6' ry='7.5' transform='rotate(18 49 27)'/></svg>");
  --gl-bear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='60' cy='64' r='50' fill='%23FFF1C9'/><circle cx='31' cy='40' r='13' fill='%23B8742E'/><circle cx='89' cy='40' r='13' fill='%23B8742E'/><circle cx='31' cy='40' r='6.5' fill='%23E9A866'/><circle cx='89' cy='40' r='6.5' fill='%23E9A866'/><circle cx='60' cy='66' r='34' fill='%23C98538'/><ellipse cx='60' cy='78' rx='16' ry='12' fill='%23F6D9A8'/><ellipse cx='60' cy='72' rx='6' ry='4.5' fill='%23402A17'/><path d='M55 81q5 4 10 0' stroke='%23402A17' stroke-width='2.4' fill='none' stroke-linecap='round'/><circle cx='47' cy='59' r='3.6' fill='%23402A17'/><circle cx='73' cy='59' r='3.6' fill='%23402A17'/><circle cx='48.2' cy='57.8' r='1.1' fill='%23fff'/><circle cx='74.2' cy='57.8' r='1.1' fill='%23fff'/></svg>");
}
@media (prefers-color-scheme: dark) {
  html.gl-on:not([data-theme="light"]) {
    --gl-bg: #151412; --gl-surface: #23211E; --gl-surface-2: #2D2B27; --gl-line: #33302C; --gl-line-2: #45423C;
    --gl-text: #F3F1EE; --gl-text-2: #AAA6A0; --gl-text-3: #77736D;
    --gl-yellow-soft: rgba(255, 216, 74, .16); --gl-honey-soft: #3A2E18; --gl-honey-ink: #F7C76E;
    --gl-chip-on: #F3F1EE; --gl-chip-on-ink: #151412; --gl-info: #5B97FF;
    --gl-bubble-me: #4A3D1C; --gl-bubble-me-meta: #CDB070;
    --gl-shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --gl-shadow-2: 0 14px 40px rgba(0, 0, 0, .55);
  }
}
html.gl-on[data-theme="dark"] {
  --gl-bg: #151412; --gl-surface: #23211E; --gl-surface-2: #2D2B27; --gl-line: #33302C; --gl-line-2: #45423C;
  --gl-text: #F3F1EE; --gl-text-2: #AAA6A0; --gl-text-3: #77736D;
  --gl-yellow-soft: rgba(255, 216, 74, .16); --gl-honey-soft: #3A2E18; --gl-honey-ink: #F7C76E;
  --gl-chip-on: #F3F1EE; --gl-chip-on-ink: #151412; --gl-info: #5B97FF;
  --gl-bubble-me: #4A3D1C; --gl-bubble-me-meta: #CDB070;
  --gl-shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --gl-shadow-2: 0 14px 40px rgba(0, 0, 0, .55);
}
@media (prefers-reduced-motion: reduce) {
  html.gl-on { --gl-dur-fast: 0ms; --gl-dur: 0ms; --gl-dur-slow: 0ms; }
}

/* ---------- shared components (gl-*) ---------- */
html.gl-on .gl-card { background: var(--gl-surface); border-radius: var(--gl-radius-xl); box-shadow: var(--gl-shadow-1); }
html.gl-on .gl-btn { min-height: var(--gl-tap); padding: 0 18px; border-radius: var(--gl-radius-m); font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--gl-surface-2); color: var(--gl-text); }
html.gl-on .gl-btn.pri { background: var(--gl-yellow); color: var(--gl-yellow-ink); }
html.gl-on .gl-btn.honey { background: var(--gl-brand-grad); color: var(--gl-yellow-ink); }
html.gl-on .gl-chip { height: 34px; padding: 0 14px; border-radius: var(--gl-radius-pill); background: var(--gl-surface); box-shadow: var(--gl-shadow-1); font-weight: 600; }
html.gl-on .gl-chip.is-on { background: var(--gl-chip-on); color: var(--gl-chip-on-ink); box-shadow: none; }
html.gl-on .gl-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gl-honey); color: #fff; font: 750 12px/20px var(--gl-font); text-align: center; }
/* bear details */
html.gl-on .gl-paw { display: inline-block; width: 1em; height: 1em; background: var(--gl-paw) center / contain no-repeat; vertical-align: -.12em; }
html.gl-on .gl-bear { width: 112px; height: 112px; margin: 0 auto 12px; background: var(--gl-bear) center / contain no-repeat; }
html.gl-on .gl-trail { position: relative; }
html.gl-on .gl-trail::after { content: ''; position: absolute; right: 14px; bottom: 10px; width: 46px; height: 30px; opacity: .16; pointer-events: none;
  background: var(--gl-paw) 0 100% / 16px 16px no-repeat, var(--gl-paw) 15px 30% / 14px 14px no-repeat, var(--gl-paw) 30px 0 / 12px 12px no-repeat; }
/* loading: three paw prints stepping */
html.gl-on .gl-steps { display: flex; gap: 10px; justify-content: center; align-items: center; height: 34px; }
html.gl-on .gl-steps i { width: 18px; height: 18px; background: var(--gl-paw) center / contain no-repeat; opacity: .2; animation: gl-step 1.2s infinite ease-in-out; }
html.gl-on .gl-steps i:nth-child(1) { transform: rotate(-12deg) translateY(4px); }
html.gl-on .gl-steps i:nth-child(2) { animation-delay: .2s; transform: rotate(8deg) translateY(-3px); }
html.gl-on .gl-steps i:nth-child(3) { animation-delay: .4s; transform: rotate(-6deg) translateY(4px); }
@keyframes gl-step { 0%, 100% { opacity: .18; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.gl-on .gl-steps i { animation: none; opacity: .6; } }