/* Garmond · Akryyli — собранная библиотека. Не править руками: исходники tokens.css и lib/*.css, сборка lib/build_lib.py */

/* ===== tokens.css ===== */
/* ==========================================================================
   Garmond — design tokens · направление Akryyli «светлое стекло» (G-30, выбрал владелец по dir-2)
   Источник истины — site/spec/theme.yaml. Три слоя:
     1) primitive  --p-*   сырые значения, в компонентах НЕ использовать
     2) semantic   --color-*, --space-*, --fs-*, --radius-*, --shadow-*, --ease-*, --dur-*
     3) component  --ball-*, --ticket-*, --plate-*, --prize-*, --tiers-*, --btn-*, --badge-*, --head-*, --band-* …
   Брейкпоинты (mobile-first, min-width): 768 / 1024 / 1100 (шапка) / 1440; база — 375.
   Шрифты — свои woff2 (latin-подмножество: ä ö å € проверены), без Google CDN. Из Garmond v0 ничего (G-24).
   Контраст (AA) пар текста — в комментариях; на стекле проверяется по пикселям (lib/shoot_home.py).
   ========================================================================== */

@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 100%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  /* ======================= 1. PRIMITIVE ======================= */
  /* Light — свет сквозь акрил барабана */
  --p-white: #ffffff;
  --p-rose-50: #fff0f6;
  --p-lilac-50: #f3f0ff;
  --p-lilac-100: #f6efff;
  --p-mint-50: #e9fbf6;
  /* Plum — чернила */
  --p-plum-900: #1f1433;
  --p-plum-700: #3a2b55;
  --p-plum-600: #5c4f78;
  --p-plum-300: #cfc8e4;
  /* Juice — действие и акцент */
  --p-violet-600: #8e24aa;
  --p-magenta-600: #c2185b;
  --p-magenta-700: #a3124f;
  --p-magenta-800: #8e1450;
  /* Tangerine — Eurojackpot */
  --p-tang-100: #ffe6d8;
  --p-tang-200: #ffc8a6;
  --p-tang-300: #ff8a5c;
  --p-tang-500: #f2542d;
  --p-tang-700: #b23a0e;
  --p-tang-900: #2b0d05;
  /* Teal — Viking Lotto */
  --p-teal-100: #ddf8f2;
  --p-teal-200: #a4f3e4;
  --p-teal-300: #3fd6ba;
  --p-teal-500: #00a88a;
  --p-teal-700: #00695c;
  --p-teal-900: #00261f;
  /* Signal */
  --p-green-700: #0e7a4f;
  --p-green-100: #e3f7ef;

  --p-space-unit: 0.25rem;
  --p-radius-xs: 6px; --p-radius-sm: 10px; --p-radius-md: 16px; --p-radius-lg: 22px; --p-radius-xl: 30px; --p-radius-pill: 999px;

  /* ======================= 2. SEMANTIC ======================= */
  --page-bg: linear-gradient(160deg, var(--p-rose-50) 0%, var(--p-lilac-50) 46%, var(--p-mint-50) 100%);
  --color-bg:            var(--p-lilac-50);
  --color-bg-alt:        rgb(255 255 255 / 0.45);
  --color-surface:       var(--p-white);
  --color-surface-2:     #faf8ff;
  --color-surface-glass: rgb(255 255 255 / 0.62);
  --glass-blur: blur(16px) saturate(140%);
  --glass-ring: rgb(255 255 255 / 0.95);
  --color-line:          rgb(31 20 51 / 0.1);
  --color-line-strong:   rgb(31 20 51 / 0.2);
  --color-text:          var(--p-plum-900);   /* 15.8:1 */
  --color-text-muted:    var(--p-plum-600);   /* 6.6–6.9:1 на роза/сирень/мята */
  --color-text-faint:    var(--p-plum-600);
  --color-accent:        var(--p-magenta-700);  /* суммы в таблице: 7.6:1 на белом */
  --text-accent:         var(--p-magenta-700);
  --grad-accent: linear-gradient(120deg, var(--p-violet-600) 0%, var(--p-magenta-600) 100%);   /* текст-градиент: 5.3–6.3:1 на светлом */
  --color-on-accent:     var(--p-white);
  --color-ej:            var(--p-tang-500);
  --color-vl:            var(--p-teal-500);
  --color-live:          var(--p-green-700);
  --color-danger:        var(--p-magenta-600);
  --color-focus:         var(--p-violet-600);   /* 6.4:1 */
  --focus-ring: 0 0 0 2px var(--p-white), 0 0 0 4px var(--p-violet-600);
  --grad-ej: linear-gradient(90deg, #ffb07a, var(--p-tang-500));
  --grad-vl: linear-gradient(90deg, #5fe3cb, var(--p-teal-500));
  --color-ej-glow: rgb(242 84 45 / 0.16);
  --color-vl-glow: rgb(0 168 138 / 0.16);
  --edge-highlight: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.95), transparent);
  --shadow-float: 0 24px 50px -28px rgb(90 40 140 / 0.35);
  --shadow-ticket: drop-shadow(0 18px 26px rgb(90 40 140 / 0.16)) drop-shadow(0 2px 4px rgb(90 40 140 / 0.1));

  /* Spacing (4px base) */
  --space-1: calc(var(--p-space-unit) * 1);  --space-2: calc(var(--p-space-unit) * 2);  --space-3: calc(var(--p-space-unit) * 3);
  --space-4: calc(var(--p-space-unit) * 4);  --space-5: calc(var(--p-space-unit) * 5);  --space-6: calc(var(--p-space-unit) * 6);
  --space-8: calc(var(--p-space-unit) * 8);  --space-10: calc(var(--p-space-unit) * 10); --space-12: calc(var(--p-space-unit) * 12);
  --space-16: calc(var(--p-space-unit) * 16); --space-24: calc(var(--p-space-unit) * 24);
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --radius-xs: var(--p-radius-xs); --radius-sm: var(--p-radius-sm); --radius-md: var(--p-radius-md);
  --radius-lg: var(--p-radius-lg); --radius-xl: var(--p-radius-xl); --radius-pill: var(--p-radius-pill);

  /* Typography */
  --font-display: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --font-text: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --lh-tight: 1.08; --lh-snug: 1.25; --lh-text: 1.55;
  --tracking-display: -0.025em; --tracking-label: 0.04em;

  /* Motion (кривые — скилл animate; ease-in на UI нет) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-fall: cubic-bezier(0.55, 0, 0.85, 0.35);   /* только физика падения шара */
  --dur-press: 140ms; --dur-hover: 220ms; --dur-ui: 260ms; --dur-move: 480ms; --dur-drop: 640ms; --stagger-ball: 70ms;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --header-h: 72px;
  --z-base: 1; --z-header: 100; --z-overlay: 200;

  /* ======================= 3. COMPONENT ======================= */
  /* Ball */
  --ball-size-sm: 2rem;
  --ball-size-md: clamp(2.25rem, 1.9rem + 1vw, 3rem);
  --ball-size-lg: clamp(3.25rem, 2.8rem + 1.4vw, 4rem);
  --ball-gap: clamp(0.375rem, 0.25rem + 0.4vw, 0.625rem);
  --ball-hover-scale: 1.14;
  --ball-main-hi: var(--p-white);       --ball-main-lo: var(--p-plum-300); --ball-main-ink: var(--p-plum-900);
  --ball-star-hi: #ffd2b8;              --ball-star-lo: #f26b3a;           --ball-star-ink: var(--p-tang-900);
  --ball-viking-hi: #b4f6ea;            --ball-viking-lo: #12a88c;         --ball-viking-ink: var(--p-teal-900);
  --ball-viking-ring: rgb(255 255 255 / 0.8);
  --ball-shadow: rgb(90 40 140 / 0.35);

  /* Ticket (матовое стекло) */
  --ticket-bg: linear-gradient(165deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.78));
  --ticket-blur: blur(16px) saturate(140%);
  --ticket-radius: var(--radius-lg);
  --ticket-stub-w: 52px;
  --ticket-hole-r: 3.5px; --ticket-hole-gap: 14px; --ticket-scallop-r: 5px; --ticket-scallop-gap: 16px;
  --ticket-pad: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --ticket-hatch: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(142 36 170 / 0.06) 7px 8px);
  --ticket-stub-shade: linear-gradient(180deg, rgb(245 242 255 / 0.9), rgb(237 232 252 / 0.9));
  --ticket-stub-ink-ej: var(--p-tang-700);   /* 6.0:1 */
  --ticket-stub-ink-vl: var(--p-teal-700);   /* 6.6:1 */
  --plate-ej-bg: linear-gradient(150deg, var(--p-tang-200) 0%, var(--p-tang-300) 45%, var(--p-tang-500) 100%);
  --plate-ej-ink: var(--p-tang-900);         /* ≥ 5.2:1 */
  --plate-ej-glow: rgb(242 84 45 / 0.4);
  --plate-vl-bg: linear-gradient(150deg, var(--p-teal-200) 0%, var(--p-teal-300) 45%, var(--p-teal-500) 100%);
  --plate-vl-ink: var(--p-teal-900);         /* ≥ 5.4:1 */
  --plate-vl-glow: rgb(0 168 138 / 0.38);
  --prize-bg: linear-gradient(120deg, var(--p-rose-50), var(--p-lilac-100));
  --prize-ring: rgb(194 24 91 / 0.2);
  --prize-shadow: none;
  --prize-sum-glow: 0 0 0 transparent;
  --prize-label: var(--p-magenta-800);       /* 8.0:1 */
  --tiers-bg: rgb(250 248 255 / 0.85);
  --tiers-head-bg: var(--p-lilac-100);
  --tiers-head-fg: var(--p-plum-700);        /* 11.3:1 */
  --tiers-zebra: rgb(255 255 255 / 0.7);
  --tiers-row-line: rgb(31 20 51 / 0.06);
  --tier-top-bg: var(--p-rose-50);
  --tier-chip-main-bg: var(--p-plum-900); --tier-chip-main-fg: var(--p-white);
  --tier-chip-ej-bg: var(--p-tang-300);   --tier-chip-ej-fg: var(--p-tang-900);   /* 7.8:1 */
  --tier-chip-vl-bg: var(--p-teal-700);   --tier-chip-vl-fg: var(--p-white);      /* 6.6:1 */

  /* Buttons & badges */
  --btn-h: 48px;
  --btn-pad-x: 1.375rem;
  --btn-primary-bg: var(--grad-accent);       /* белый текст 5.9–7.0:1 */
  --btn-primary-fg: var(--p-white);
  --shadow-glow-brass: 0 12px 28px -12px rgb(194 24 91 / 0.6);
  --btn-primary-hover-glow: 0 16px 34px -12px rgb(194 24 91 / 0.75);
  --btn-ghost-bg: rgb(255 255 255 / 0.7);
  --btn-ghost-hover-bg: var(--p-white);
  --btn-ghost-hover-border: rgb(142 36 170 / 0.45);
  --badge-age-fg: var(--p-white); --badge-age-bg: #2a1840; --badge-age-border: #2a1840;
  --badge-live-fg: var(--p-green-700); --badge-live-bg: var(--p-green-100); --badge-live-border: rgb(14 122 79 / 0.3);
  --logo-mark: 44px;
  --logo-glow: 0 8px 18px rgb(194 24 91 / 0.3);

  /* Header */
  --agebar-bg: #2a1840; --agebar-fg: #efe8fb; --agebar-badge-bg: var(--p-tang-300); --agebar-badge-fg: var(--p-tang-900);
  --head-bg: transparent; --head-bg-solid: var(--p-lilac-50); --head-fg: var(--p-plum-900);
  --nav-glass: rgb(255 255 255 / 0.62);
  --nav-active-bg: var(--grad-accent); --nav-active-fg: var(--p-white); --nav-hover-bg: rgb(255 255 255 / 0.85);
  --live-fg: var(--p-green-700); --live-bg: rgb(255 255 255 / 0.75); --live-ring: rgb(14 122 79 / 0.3);
  --lang-active-bg: var(--p-plum-900); --lang-active-fg: var(--p-white);
  --menu-btn-bg: rgb(255 255 255 / 0.7);

  /* Hero & sections */
  --eyebrow-bg: rgb(255 255 255 / 0.7); --eyebrow-fg: var(--p-plum-900); --eyebrow-ring: rgb(255 255 255 / 0.95);
  --fact-bg: rgb(255 255 255 / 0.6);
  --next-tag-bg: var(--grad-accent); --next-tag-fg: var(--p-white);
  --drum-ring: rgb(255 255 255 / 0.85);
  --band-accent-bg: var(--grad-accent); --band-accent-fg: var(--p-white); --band-accent-muted: #f6e9ff;   /* 6.0 / 4.9:1 */
  --field-bg: var(--p-white); --field-border: rgb(31 20 51 / 0.25);

  --hero-perspective: 1500px;
}

@media (min-width: 768px) {
  :root { --header-h: 80px; --ticket-stub-w: 72px; --logo-mark: 52px; }
}

/* ===== lib/base.css ===== */
/* Garmond · база (Akryyli): сброс, светлый фон-свет, типографика, кнопки, бейджи, логотип-lockup, стеклянная панель. Только токены слоёв 2–3. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--page-bg, var(--color-bg));
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons (CI-05: блик и на :focus-visible, :active, reduced-motion) ---------- */
.btn {
  --_h: var(--btn-h);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--_h);
  padding: 0 var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-sm) / 1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-hover) ease, background-color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: var(--shadow-glow-brass), inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 0 rgb(0 0 0 / 0.14);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate 700ms var(--ease-out);
}
.btn--ghost {
  background: var(--btn-ghost-bg);
  color: var(--color-text);
  border-color: var(--color-line-strong);
}
.btn--sm { --_h: 44px; padding: 0 var(--space-4); font-size: var(--fs-xs); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn--primary:focus-visible { box-shadow: var(--focus-ring), var(--shadow-glow-brass); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { box-shadow: var(--btn-primary-hover-glow), inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 0 rgb(0 0 0 / 0.14); }
  .btn--primary:hover::before { translate: 120% 0; }
  .btn--ghost:hover { border-color: var(--btn-ghost-hover-border); background: var(--btn-ghost-hover-bg); }
}
.btn--primary:focus-visible::before { translate: 120% 0; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 26px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font: 600 var(--fs-2xs) / 1 var(--font-text);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* 18+ — заметная, но не «праздничная» (не золото CTA, CI-22) */
.badge--age { color: var(--badge-age-fg); border-color: var(--badge-age-border); background: var(--badge-age-bg); font-family: var(--font-display); font-weight: 800; }
.badge--live { color: var(--badge-live-fg); border-color: var(--badge-live-border); background: var(--badge-live-bg); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-live);
  box-shadow: 0 0 0 3px rgb(61 220 151 / 0.2), 0 0 10px rgb(61 220 151 / 0.7);
  animation: live-pulse 1.6s ease-in-out 3; /* 3 цикла, не бесконечно (CI-16) */
}
@keyframes live-pulse { 50% { opacity: 0.5; scale: 0.82; } }

/* Акцентный текст: градиент фиолет→маджента (оба края ≥ 5.3:1 на светлом фоне); фолбэк — сплошной цвет */
.text-brass { color: var(--text-accent); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-brass { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text-accent); }
}

/* ---------- Logo lockup (общий для hero и вкладки «Логотип») ---------- */
.lockup { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.lockup__mark { width: var(--logo-mark); height: var(--logo-mark); flex: none; filter: drop-shadow(var(--logo-glow)); transition: scale var(--dur-hover) var(--ease-out); }
.lockup__text { display: grid; gap: 2px; }
.lockup__word { color: var(--color-text); font: 800 clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem) / 1 var(--font-display); letter-spacing: -0.03em; }
.lockup__tag { font: 400 var(--fs-2xs) / 1.2 var(--font-text); color: var(--color-text-muted); letter-spacing: 0.01em; }
.lockup__tag--caps { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--fs-2xs); }
@media (hover: hover) and (pointer: fine) { .lockup:hover .lockup__mark { scale: 1.04; } }
.lockup:focus-visible { outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn--primary::before, .lockup__mark { transition: none; }
  .btn:active { transform: none; }
  .live-dot { animation: none; }
}

/* ---------- стеклянная панель (CI-10: стекло — у шапки и панелей; на тексте контраст держит подложка) ---------- */
.panel {
  position: relative;
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  padding: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--color-surface-glass);
  -webkit-backdrop-filter: var(--glass-blur, none);
  backdrop-filter: var(--glass-blur, none);
  box-shadow: inset 0 0 0 1px var(--glass-ring, var(--color-line)), var(--shadow-float);
}
.panel::before { content: ""; position: absolute; inset: 0 10% auto; height: 1px; background: var(--edge-highlight); }

/* ===== lib/header.css ===== */
/* ==========================================================================
   Garmond · плашка 18+ и шапка (Akryyli): прозрачная шапка, навигация — стеклянная пилюля по центру, активный пункт — градиент.
   Разметка — library.html / home.html. Обязательные элементы G-17: 18+, LIVE, FI/EN, Kirjaudu, Rekisteröidy.
   <div class="agebar" role="note"><div class="agebar__in"><span class="agebar__badge">18+</span><p>…</p><a href="…">Vastuullinen pelaaminen</a></div></div>
   <header class="site-head"><div class="site-head__in">
     <a class="lockup" …>…</a>
     <a class="live-chip" href="/status" aria-label="LIVE, tulosten tila"><span class="live-dot" aria-hidden="true"></span>LIVE</a>
     <button class="menu-btn" type="button" aria-expanded="false" aria-controls="site-menu"><span class="menu-btn__bars" aria-hidden="true"></span><span class="vh">Valikko</span></button>
     <div class="site-head__menu" id="site-menu">
       <nav class="site-nav" aria-label="Päävalikko"><ul><li><a href="…" aria-current="page">Tulokset</a></li>
         <li><a href="…"><span class="dot dot--ej" aria-hidden="true"></span>Eurojackpot</a></li> …</ul></nav>
       <div class="site-head__tools"><div class="lang" role="group" aria-label="Kieli"><a aria-current="true" lang="fi">FI</a><a lang="en">EN</a></div>
         <a class="btn btn--ghost btn--sm">Kirjaudu</a><a class="btn btn--primary btn--sm">Rekisteröidy</a></div>
     </div>
   </div></header>
   До 1100 px меню прячется за кнопкой (garmond.js: aria-expanded + data-open, Esc закрывает).
   ========================================================================== */

.agebar { position: relative; z-index: 60; font-size: var(--fs-xs); background: var(--agebar-bg); color: var(--agebar-fg); }
.agebar__in { max-width: var(--container); margin: 0 auto; padding: 7px var(--gutter); display: flex; align-items: center; gap: var(--space-3); }
.agebar__badge {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font: 800 var(--fs-2xs) / 1 var(--font-display);
  background: var(--agebar-badge-bg);
  color: var(--agebar-badge-fg);
}
.agebar p { flex: 1; min-width: 0; }
.agebar a { color: inherit; font-weight: 600; white-space: nowrap; }
.agebar a:focus-visible { outline-color: var(--agebar-badge-bg); }
@media (max-width: 767.98px) { .agebar a { display: none; } }

.site-head { position: relative; z-index: 50; background: var(--head-bg); color: var(--head-fg); }
.site-head__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "logo live btn";
  align-items: center;
  gap: var(--space-3);
}
.site-head .lockup { grid-area: logo; min-width: 0; }
.site-head .live-chip { grid-area: live; }
.menu-btn { grid-area: btn; }
.site-head__menu { display: none; }
.site-head[data-open] .site-head__menu {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--nav-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px var(--glass-ring), var(--shadow-float);
}

.site-nav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  font: 600 var(--fs-sm) / 1 var(--font-text);
  white-space: nowrap;
}
.site-nav a:not([aria-current]):hover { background: var(--nav-hover-bg); }
.site-nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-fg); }
.site-nav a[aria-current="page"] .dot { box-shadow: 0 0 0 2px var(--nav-active-fg); }
.site-nav .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--ej { background: var(--color-ej); }
.dot--vl { background: var(--color-vl); box-shadow: inset 0 0 0 2px var(--color-vl), inset 0 0 0 3.5px var(--head-bg-solid); }
.site-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font: 700 var(--fs-2xs) / 1 var(--font-display);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--live-fg);
  background: var(--live-bg);
  box-shadow: inset 0 0 0 1px var(--live-ring);
}
.live-chip .live-dot { width: 7px; height: 7px; }
.lang { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.lang a { display: grid; place-items: center; min-width: 38px; min-height: 38px; border-radius: var(--radius-pill); font: 700 var(--fs-2xs) / 1 var(--font-text); color: inherit; text-decoration: none; }
.lang a[aria-current="true"] { background: var(--lang-active-bg); color: var(--lang-active-fg); }

.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--menu-btn-bg); color: inherit; cursor: pointer; }
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: rotate var(--dur-ui) var(--ease-out), translate var(--dur-ui) var(--ease-out); }
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { translate: 0 -6px; }
.menu-btn__bars::after { translate: 0 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { translate: 0 0; rotate: 45deg; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { translate: 0 0; rotate: -45deg; }

@media (min-width: 1100px) {
  .site-head__in { grid-template-areas: "logo live tools" "nav nav nav"; row-gap: var(--space-3); }
  .menu-btn { display: none; }
  .site-head__menu, .site-head[data-open] .site-head__menu { display: contents; }
  .site-nav { grid-area: nav; }
  /* стеклянная пилюля по центру */
  .site-nav { justify-self: center; }
  .site-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 5px;
    border-radius: var(--radius-pill);
    background: var(--nav-glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 0 0 1px var(--glass-ring), 0 14px 34px -18px rgb(90 40 140 / 0.4);
  }
  .site-nav a { border-radius: var(--radius-pill); }
  .site-head__tools { grid-area: tools; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { transition: none; }
}

/* ===== lib/balls.css ===== */
/* ==========================================================================
   Garmond · шары (выбран вариант Helmi — глянцевый перламутр, G-27)
   Разметка (обязательная):
   <div class="draw draw--ej" data-drop>
     <div class="draw__group">
       <span class="draw__cap" aria-hidden="true">Päänumerot</span>
       <ol class="balls" aria-label="Päänumerot"><li class="slot"><span class="ball">5</span></li>…</ol>
     </div>
     <div class="draw__group draw__group--extra">
       <span class="draw__cap" aria-hidden="true">Tähdet</span>        (VL: Viking)
       <ol class="balls" aria-label="Tähtinumerot"><li class="slot"><span class="ball ball--star">8</span></li>…</ol>
     </div>                                                               (VL: ball--viking, aria-label="Vikingnumero")
   </div>
   Размеры: .balls--sm (архив 32) | по умолчанию M (36→48) | .balls--lg (52→64).
   Ghost (тираж впереди): <span class="ball ball--ghost" aria-hidden="true">?</span>, у <ol> aria-label «…, ei vielä arvottu».
   Выпадение: атрибут data-drop на .draw (или предке); garmond.js добавляет .drop, когда блок виден.
   Без JS шары просто стоят. Выпадение — translate/opacity на li.slot; hover — scale на .ball (разные свойства).
   ========================================================================== */

:root {
  --mark-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1.35 3.65L10 5 6.35 6.35 5 10 3.65 6.35 0 5l3.65-1.35z'/%3E%3C/svg%3E");
}

.draw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); }
.draw__group { display: grid; gap: var(--space-2); }
.draw__cap { font: 400 var(--fs-2xs) / 1 var(--font-text); color: var(--color-text-muted); letter-spacing: 0.02em; }
.draw__group--extra .draw__cap::before {
  content: "";
  display: inline-block;
  width: 0.7em; height: 0.7em;
  margin-inline-end: 0.35em;
  vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: var(--mark-star) center / contain no-repeat;
  mask: var(--mark-star) center / contain no-repeat;
}
.draw--vl .draw__group--extra .draw__cap::before { -webkit-mask: none; mask: none; background: none; border: 1.5px solid currentColor; border-radius: 50%; }
.draw__group--extra .balls { padding: 3px; margin: -3px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-line-strong); }

.balls { display: flex; flex-wrap: wrap; gap: var(--ball-gap); margin: 0; padding: 0; list-style: none; }

.slot { position: relative; display: block; }
.slot:hover { z-index: 2; }
.slot:nth-child(1) { --i: 0; } .slot:nth-child(2) { --i: 1; } .slot:nth-child(3) { --i: 2; }
.slot:nth-child(4) { --i: 3; } .slot:nth-child(5) { --i: 4; } .slot:nth-child(6) { --i: 5; }
.slot:nth-child(7) { --i: 6; }
.draw--ej .draw__group--extra .slot { --o: 5; }
.draw--vl .draw__group--extra .slot { --o: 6; }

.ball {
  --size: var(--ball-size-md);
  --hi: var(--ball-main-hi);
  --lo: var(--ball-main-lo);
  --ink: var(--ball-main-ink);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: var(--ink);
  font: 800 calc(var(--size) * 0.39) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  user-select: none;
  background:
    radial-gradient(circle at 33% 27%, rgb(255 255 255 / 0.95) 0 7%, rgb(255 255 255 / 0.32) 19%, transparent 36%),
    radial-gradient(circle at 50% 42%, var(--hi) 0%, var(--lo) 94%);
  box-shadow:
    inset 0 calc(var(--size) * -0.09) calc(var(--size) * 0.2) rgb(0 0 0 / 0.28),
    inset 0 2px 3px rgb(255 255 255 / 0.55),
    0 calc(var(--size) * 0.16) calc(var(--size) * 0.3) calc(var(--size) * -0.1) var(--ball-shadow);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.45);
  transition: scale var(--dur-hover) var(--ease-out);
}
.balls--sm .ball { --size: var(--ball-size-sm); }
.balls--lg .ball { --size: var(--ball-size-lg); }
.ball--star   { --hi: var(--ball-star-hi);   --lo: var(--ball-star-lo);   --ink: var(--ball-star-ink); }
.ball--viking { --hi: var(--ball-viking-hi); --lo: var(--ball-viking-lo); --ink: var(--ball-viking-ink); }

/* доп. номера — не только цветом (P-RM-A05): звезда-насечка / кольцо + своя подписанная группа */
.ball--star { padding-top: calc(var(--size) * 0.12); }
.ball--star::after {
  content: "";
  position: absolute;
  top: 7%; left: 50%;
  width: 22%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: var(--ink);
  opacity: 0.62;
  -webkit-mask: var(--mark-star) center / contain no-repeat;
  mask: var(--mark-star) center / contain no-repeat;
}
.ball--viking::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: max(1.5px, calc(var(--size) * 0.045)) solid var(--ball-viking-ring);
  pointer-events: none;
}

.ball--ghost {
  background: none;
  box-shadow: none;
  text-shadow: none;
  border: 1.5px dashed var(--color-line-strong);
  color: var(--color-text-muted);
  font-size: calc(var(--size) * 0.3);
}
.ball--ghost.ball--star::after { background: var(--color-text-muted); opacity: 1; }

/* шар под курсором плавно растёт (G-17); на тач-устройствах — нет */
@media (hover: hover) and (pointer: fine) {
  .ball:not(.ball--ghost):hover { scale: var(--ball-hover-scale); }
}
.ball.is-hot { scale: var(--ball-hover-scale); }

/* ---------- выпадение: падение сверху с одним отскоком (отличие от Raymond) ---------- */
@keyframes ball-fall {
  0%   { translate: 0 -190%; opacity: 0; animation-timing-function: var(--ease-fall); }
  14%  { opacity: 1; }
  62%  { translate: 0 0; animation-timing-function: var(--ease-out); }
  80%  { translate: 0 -13%; animation-timing-function: var(--ease-fall); }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes ball-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* JS включён и блок ещё не показан — шары ждут за кадром, без вспышки */
  .js [data-drop]:not(.drop) .slot { opacity: 0; }
  .drop .slot {
    animation: ball-fall var(--dur-drop) both;
    animation-delay: calc((var(--i, 0) + var(--o, 0)) * var(--stagger-ball) + 80ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drop .slot { animation: ball-fade 200ms ease both; }
  .ball { transition: none; }
}

/* ===== lib/ticket.css ===== */
/* ==========================================================================
   Garmond · билет тиража (выбран вариант Hammasreuna, G-27)
   Корешок слева: зубчатая кромка + ряд пробитых отверстий по линии отрыва + два выреза (mask).
   Разметка:
   <article class="ticket ticket--ej" aria-labelledby="ID">          (VL: ticket--vl)
     <div class="ticket__shape">
       <div class="ticket__stub" aria-hidden="true">
         <span class="ticket__stub-name">Eurojackpot</span>
         <span class="ticket__stub-id">EJ 20.10.2026</span>          (дата тиража — не выдуманный серийник)
         <span class="ticket__barcode"></span>
       </div>
       <div class="ticket__body">
         <header class="ticket__head">
           <span class="plate" aria-hidden="true">EJ</span>
           <h3 class="ticket__title" id="ID">Eurojackpot</h3>
           <p class="ticket__date"><time datetime="2026-10-20">ti 20.10.2026</time></p>
           <p class="ticket__prize">
             <span class="ticket__prize-label">Päävoitto 5 + 2</span>
             <span class="ticket__prize-sum text-brass">19,29 milj. €</span>        (нет победителя: class="ticket__prize-sum ticket__prize-sum--none")
             <span class="ticket__prize-note">1 voittaja · 19 286 658,00 €</span>   (необязательно)
           </p>
         </header>
         <div class="draw draw--ej" data-drop>…шары (balls.css)…</div>
         <details class="tiers">…таблица разрядов…</details>                        (необязательно)
         <footer class="ticket__foot"><p>Seuraava arvonta <strong><time …>pe 23.10.2026</time></strong></p>
           <a class="btn btn--ghost btn--sm" href="…">Kaikki tulokset</a></footer>
       </div>
     </div>
   </article>
   Компактный (hero, без разрядов): добавить .ticket--compact — приз уходит вправо от названия.
   Тень — filter на обёртке .ticket: следует силуэту маски (P-RM-A10). Без backdrop-filter.
   ========================================================================== */

.ticket {
  --accent-grad: var(--grad-ej);
  --accent-glow: var(--color-ej-glow);
  --stub-ink: var(--ticket-stub-ink-ej);
  --plate-bg: var(--plate-ej-bg);
  --plate-ink: var(--plate-ej-ink);
  --plate-glow: var(--plate-ej-glow);
  filter: var(--shadow-ticket);
  min-width: 0;
  color: var(--color-text);   /* билет не наследует цвет цветного блока вокруг */
}
.ticket--vl {
  --accent-grad: var(--grad-vl);
  --accent-glow: var(--color-vl-glow);
  --stub-ink: var(--ticket-stub-ink-vl);
  --plate-bg: var(--plate-vl-bg);
  --plate-ink: var(--plate-vl-ink);
  --plate-glow: var(--plate-vl-glow);
}

.ticket__shape {
  --sw: var(--ticket-stub-w);
  --hr: var(--ticket-hole-r);
  --sr: var(--ticket-scallop-r);
  --nr: 11px;
  position: relative;
  display: grid;
  grid-template-columns: var(--sw) minmax(0, 1fr);
  background: var(--ticket-bg);
  -webkit-backdrop-filter: var(--ticket-blur, none);
  backdrop-filter: var(--ticket-blur, none);
  border-radius: 8px var(--ticket-radius) var(--ticket-radius) 8px;
  overflow: hidden;
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 var(--sr), #000 calc(var(--sr) + 0.75px)) 0 0 / 100% var(--ticket-scallop-gap) round,
    radial-gradient(circle at var(--sw) 50%, #0000 var(--hr), #000 calc(var(--hr) + 0.75px)) 0 0 / 100% var(--ticket-hole-gap) round,
    radial-gradient(circle at var(--sw) 0, #0000 var(--nr), #000 calc(var(--nr) + 0.75px)) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at var(--sw) 100%, #0000 var(--nr), #000 calc(var(--nr) + 0.75px)) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 50%, #0000 var(--sr), #000 calc(var(--sr) + 0.75px)) 0 0 / 100% var(--ticket-scallop-gap) round,
    radial-gradient(circle at var(--sw) 50%, #0000 var(--hr), #000 calc(var(--hr) + 0.75px)) 0 0 / 100% var(--ticket-hole-gap) round,
    radial-gradient(circle at var(--sw) 0, #0000 var(--nr), #000 calc(var(--nr) + 0.75px)) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at var(--sw) 100%, #0000 var(--nr), #000 calc(var(--nr) + 0.75px)) 0 0 / 100% 100% no-repeat;
  mask-composite: intersect;
}
/* фольга лотереи по всей верхней кромке (включая корешок) + отсвет в углу */
.ticket__shape::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 2px;
  background: var(--accent-grad);
  box-shadow: 0 0 22px 2px var(--accent-glow);
}

.ticket__body { position: relative; isolation: isolate; min-width: 0; padding: var(--ticket-pad); display: grid; gap: var(--space-5); align-content: start; }
.ticket__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 70% at 100% 0%, var(--accent-glow), transparent 55%);
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- корешок ---------- */
.ticket__stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--nr) + var(--space-5)) 0 var(--space-5);
  color: var(--stub-ink);
  background: var(--ticket-hatch), var(--ticket-stub-shade);
}
.ticket__stub-name,
.ticket__stub-id { writing-mode: vertical-rl; rotate: 180deg; }
.ticket__stub-name {
  font: 800 var(--fs-2xs) / 1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--plate-glow);
}
.ticket__stub-id {
  font: 400 var(--fs-2xs) / 1 var(--font-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
/* «штрихкод» — один repeating-linear-gradient из 4 стопов (CI-04) */
.ticket__barcode {
  flex: none;
  width: 18px;
  height: 34px;
  background: repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 6px);
  opacity: 0.7;
}

/* ---------- шапка ---------- */
.ticket__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px var(--space-3); }
.ticket__head .plate { grid-row: 1 / 3; }
.ticket__title { align-self: end; font-size: var(--fs-lg); }
.ticket__date { align-self: start; grid-column: 2; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* плашка лотереи — свой монограмм-знак, не логотип лотереи (G-21); глянец и свечение — уровень Raymond */
.plate {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 56px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(170deg, rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0.08) 46%, transparent 47%), var(--plate-bg);
  color: var(--plate-ink);
  font: 800 var(--fs-md) / 1 var(--font-display);
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    inset 0 -2px 0 rgb(0 0 0 / 0.18),
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 10px 26px -8px var(--plate-glow);
}
.plate::after {
  content: "";
  position: absolute;
  top: 5px; right: 6px;
  width: 9px; height: 9px;
  background: currentColor;
  opacity: 0.8;
  -webkit-mask: var(--mark-star) center / contain no-repeat;
  mask: var(--mark-star) center / contain no-repeat;
}
.ticket--vl .plate::after { -webkit-mask: none; mask: none; background: none; border: 1.5px solid currentColor; border-radius: 50%; width: 8px; height: 8px; }

/* ---------- приз ---------- */
.ticket__prize {
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--prize-bg);
  box-shadow: inset 0 0 0 1px var(--prize-ring), var(--prize-shadow);
}
.ticket__prize-label { font: 600 var(--fs-xs) / 1.2 var(--font-text); color: var(--prize-label); letter-spacing: 0.02em; }
.ticket__prize-sum { font: 800 var(--fs-xl) / 1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; filter: drop-shadow(var(--prize-sum-glow)); }
.ticket__prize-sum--none { font-size: var(--fs-md); color: var(--color-text); filter: none; }
.ticket__prize-note { flex-basis: 100%; font-size: var(--fs-2xs); color: var(--color-text-muted); }
/* одноразовый блик по полю приза (transform), вместо бесконечного перелива Raymond (CI-08) */
.ticket__prize::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 240 207 / 0.22) 50%, transparent 65%);
  translate: -110% 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* блик запускается вместе с выпадением шаров этого билета */
  .ticket:has(.drop) .ticket__prize::after { animation: prize-glint 1100ms var(--ease-out) 900ms both; }
}
@keyframes prize-glint { to { translate: 110% 0; } }

/* компактный вид (hero): приз справа от названия */
.ticket--compact .ticket__body { gap: var(--space-4); }
.ticket--compact .ticket__head { grid-template-columns: auto minmax(0, 1fr) auto; }
.ticket--compact .ticket__prize { grid-column: 3; grid-row: 1 / 3; margin-top: 0; display: grid; padding: var(--space-2) var(--space-3); text-align: end; }
.ticket--compact .ticket__prize-sum { font-size: var(--fs-lg); }
.ticket--compact .ticket__foot { padding-top: var(--space-3); }
@media (max-width: 559.98px) {
  .ticket--compact .ticket__head { grid-template-columns: auto minmax(0, 1fr); }
  .ticket--compact .ticket__prize { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-3); text-align: start; }
}

/* ---------- подвал ---------- */
.ticket__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.ticket__foot strong { color: var(--color-text); font-weight: 600; }

/* ---------- разряды: <details><summary>…</summary><div class="tiers__wrap"><table class="tiers__table">… ---------- */
.tiers { border-radius: var(--radius-md); background: var(--tiers-bg); box-shadow: inset 0 0 0 1px var(--color-line); }
.tiers__sum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
}
.tiers__sum::-webkit-details-marker { display: none; }
.tiers__count { color: var(--color-text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.tiers__chev {
  margin-inline-start: auto;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate var(--dur-ui) var(--ease-out), translate var(--dur-ui) var(--ease-out);
}
.tiers[open] .tiers__chev { rotate: 225deg; translate: 0 2px; }
.tiers__sum:focus-visible { outline-offset: -2px; }
.tiers__wrap { padding: 0 var(--space-2) var(--space-2); overflow-x: auto; }
.tiers__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tiers__table th, .tiers__table td { padding: 7px var(--space-2); text-align: end; white-space: nowrap; }
.tiers__table th:first-child { text-align: start; }
.tiers__table thead th { font-size: var(--fs-2xs); font-weight: 600; color: var(--tiers-head-fg); background: var(--tiers-head-bg); border-bottom: 0; }
.tiers__table thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.tiers__table thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tiers__table tbody tr:nth-child(even) { background: var(--tiers-zebra); }
/* «фишки» совпадений: основные — чернила, звёзды EJ — апельсин, Viking — петроль (не только цвет: позиция после «+») */
.chip { display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 0.3em; border-radius: var(--radius-pill); font: 800 var(--fs-2xs) / 1 var(--font-display); background: var(--tier-chip-main-bg); color: var(--tier-chip-main-fg); }
.chip--ej { background: var(--tier-chip-ej-bg); color: var(--tier-chip-ej-fg); }
.chip--vl { background: var(--tier-chip-vl-bg); color: var(--tier-chip-vl-fg); }
.tiers__table .plus { margin: 0 0.25em; color: var(--color-text-muted); font-weight: 400; }
.tiers__table tbody th { font-weight: 600; }
.tiers__table tbody tr + tr > * { border-top: 1px solid var(--tiers-row-line); }
.tiers__table td:last-child { color: var(--color-accent); font-weight: 600; }
.tiers__table tbody .is-top { background: var(--tier-top-bg); }
.tiers__table .is-top > th { box-shadow: inset 3px 0 0 var(--color-accent); }
.tiers__table .is-none td { color: var(--color-text-muted); font-weight: 400; }
.tiers__src { padding: var(--space-2) var(--space-2) 0; font-size: var(--fs-2xs); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .tiers__chev { transition: none; }
}

/* ===== lib/hero.css ===== */
/* ==========================================================================
   Garmond · hero «Viuhka» (Akryyli): всё по центру; три билета (EJ, VL, следующий тираж) веером
   → при наведении/фокусе раскладываются в ровный ряд; шар под курсором растёт.
   Фон: кольца прозрачного барабана под веером (без цветных пятен).
   Разметка:
   <section class="hero3" aria-labelledby="…"><div class="hero3__in">
     <div class="hero3__copy">
       <p class="eyebrow"><span class="live-dot" aria-hidden="true"></span>…</p>
       <h1 class="hero3__title">…<span class="text-brass">…</span>…</h1>
       <p class="hero3__lead">…</p>
       <div class="hero3__cta"><a class="btn btn--primary">…</a><a class="btn btn--ghost">…</a></div>
       <dl class="facts"><div class="fact"><dt>…</dt><dd>…</dd></div>…</dl>          (факты — из данных)
     </div>
     <div class="hero3__stage">
       <article class="ticket ticket--ej ticket--hero tix tix--1">…</article>
       <article class="ticket ticket--vl ticket--hero tix tix--2">…</article>
       <article class="ticket ticket--ej ticket--hero ticket--next tix tix--3">…</article>   (пустые шары, дата, джекпот)
     </div>
   </div></section>
   ========================================================================== */

.hero3 { position: relative; padding: var(--space-12) var(--gutter) var(--space-16); overflow-x: clip; }
.hero3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 100%, transparent 0 46px, var(--drum-ring) 46px 48px, transparent 48px 96px),
    radial-gradient(55% 45% at 50% 100%, rgb(255 255 255 / 0.7), transparent 70%);
  -webkit-mask-image: radial-gradient(70% 75% at 50% 100%, #000 25%, transparent 75%);
  mask-image: radial-gradient(70% 75% at 50% 100%, #000 25%, transparent 75%);
}
.hero3__in { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; display: grid; gap: var(--space-10); }
.hero3__copy { display: grid; gap: var(--space-5); align-content: start; justify-items: center; text-align: center; min-width: 0; }
.eyebrow {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-pill);
  font: 600 var(--fs-xs) / 1.2 var(--font-text);
  background: var(--eyebrow-bg);
  color: var(--eyebrow-fg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px var(--eyebrow-ring);
}
.eyebrow .live-dot { width: 8px; height: 8px; }
.hero3__title { font-size: var(--fs-display); max-width: 19ch; }
.hero3__lead { font-size: var(--fs-md); color: var(--color-text-muted); max-width: 48ch; margin-inline: auto; }
.hero3__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; }
.fact { display: grid; gap: 2px; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--fact-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-ring); }
.fact dt { font-size: var(--fs-2xs); color: var(--color-text-muted); }
.fact dd { margin: 0; font: 800 var(--fs-md) / 1.2 var(--font-display); font-variant-numeric: tabular-nums; }

.hero3__stage { position: relative; display: grid; gap: var(--space-4); min-width: 0; }
.tix { transition: transform var(--dur-move) var(--ease-out); }

/* компактный билет hero: шары 34 px, приз строкой под названием */
.ticket--hero .ball { --size: 2.125rem; }
.ticket--hero .ticket__body { gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.ticket--hero .ticket__title { font-size: var(--fs-md); }
.ticket--hero .ticket__prize { padding: var(--space-2) var(--space-3); }
.ticket--hero .ticket__prize-sum { font-size: var(--fs-lg); }
.ticket--hero .ticket__foot { padding-top: var(--space-3); }
/* билет следующего тиража */
.ticket__tag { grid-column: 2; justify-self: start; margin-top: 2px; padding: 3px 8px; border-radius: var(--radius-pill); font: 700 var(--fs-2xs) / 1 var(--font-text); background: var(--next-tag-bg); color: var(--next-tag-fg); }
.ticket--next .ticket__prize-sum { font-size: var(--fs-md); }

@media (min-width: 1024px) {
  .hero3__stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
}
/* веер — только на устройствах с мышью; без hover сразу ровный ряд (данные не спрятаны) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tix--1 { transform: translate(10%, 34px) rotate(-7deg); transform-origin: 100% 100%; z-index: 1; }
  .tix--2 { transform: translate(0, -10px); z-index: 3; }
  .tix--3 { transform: translate(-10%, 34px) rotate(7deg); transform-origin: 0 100%; z-index: 2; }
  .hero3__stage:hover .tix { transform: none; }
}
.hero3__stage.is-aligned .tix, .hero3__stage:focus-within .tix { transform: none; }
@media (prefers-reduced-motion: reduce) { .tix { transition: none; } }

/* ===== lib/sections.css ===== */
/* ==========================================================================
   Garmond · секции страницы и полосы (Akryyli).
   .page-section             обычная секция на свету; .section-alt — светлая стеклянная подложка
   .band.band--glass         стеклянная полоса (быстрые факты)
   .band.band--accent        градиентная полоса фиолет→маджента (рассылка, G-17)
   Текст на полосах — по токенам --band-accent-fg / -muted (AA проверен по пикселям).
   Разметка фактов: <section class="band band--glass"><div class="band__in"><h2 class="band__title">…</h2>
     <dl class="stats"><div class="stat"><dt>…</dt><dd>…</dd><p class="stat__note">…</p></div>…</dl></div></section>
   Разметка рассылки: <section class="band band--accent"><div class="band__in band__in--split"><div><h2 class="band__title">…</h2><p class="band__lead">…</p></div>
     <form class="subscribe"><label class="field"><span class="field__label">Sähköposti</span><input class="field__input" type="email" autocomplete="email" required></label>
     <button class="btn btn--light" type="submit">Tilaa</button><p class="subscribe__note">…</p></form></div></section>
   ========================================================================== */

.page-section { max-width: var(--container); margin: 0 auto; padding: var(--space-section) var(--gutter); display: grid; gap: var(--space-6); }
.page-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.page-section__title { font-size: var(--fs-2xl); }
.page-section__link { font-weight: 600; color: var(--text-accent); }
.section-alt { background: var(--color-bg-alt); }
.results-grid { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.band { position: relative; overflow: hidden; }
.band__in { position: relative; max-width: var(--container); margin: 0 auto; padding: var(--space-12) var(--gutter); display: grid; gap: var(--space-6); }
.band__title { font-size: var(--fs-xl); max-width: 22ch; }
.band__lead { max-width: 52ch; }
@media (min-width: 1024px) { .band__in--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-16); } }

/* стеклянная полоса */
.band--glass .band__in {
  margin-block: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px var(--glass-ring), var(--shadow-float);
  padding: var(--space-10) clamp(1rem, 0.6rem + 2vw, 2.5rem);
  width: min(100% - 2 * var(--gutter), var(--container));
}
.band--glass .band__in::before { content: ""; position: absolute; inset: 0 12% auto; height: 1px; background: var(--edge-highlight); }

/* градиентная полоса */
.band--accent { background: var(--band-accent-bg); color: var(--band-accent-fg); }
.band--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 50%, transparent 0 40px, rgb(255 255 255 / 0.14) 40px 42px, transparent 42px 84px);
  -webkit-mask-image: radial-gradient(50% 120% at 100% 50%, #000, transparent 80%);
  mask-image: radial-gradient(50% 120% at 100% 50%, #000, transparent 80%);
}
.band--accent .band__lead, .band--accent .subscribe__note, .band--accent .field__label { color: var(--band-accent-muted); }
.band--accent :focus-visible { outline-color: var(--band-accent-fg); }

/* быстрые факты */
.stats { display: grid; gap: var(--space-4); margin: 0; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px var(--glass-ring); }
.stat dt { font-size: var(--fs-xs); color: var(--color-text-muted); }
.stat dd { margin: 0; font: 800 var(--fs-xl) / 1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.stat__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
.stat--ej dd { color: var(--ticket-stub-ink-ej); }
.stat--vl dd { color: var(--ticket-stub-ink-vl); }

/* рассылка */
.subscribe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); }
.subscribe__note { grid-column: 1 / -1; font-size: var(--fs-xs); }
.field { display: grid; gap: var(--space-1); min-width: 0; }
.field__label { font: 600 var(--fs-xs) / 1.2 var(--font-text); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  color: var(--color-text);
  font: 400 var(--fs-base) / 1 var(--font-text);   /* 16 px — iOS не зумит */
}
.field__input:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px rgb(142 36 170 / 0.3); }
.band--accent .field__input:focus-visible { border-color: var(--color-text); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.7); }
.btn--light { background: var(--color-surface); color: var(--color-text); box-shadow: 0 10px 24px -12px rgb(31 20 51 / 0.5); }
.btn--light:focus-visible { box-shadow: 0 0 0 2px var(--color-danger), 0 0 0 4px var(--color-surface); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: var(--color-surface-2); } }
@media (max-width: 479.98px) { .subscribe { grid-template-columns: 1fr; } .subscribe .btn { width: 100%; } }