/* ============================================================
   «Свой лёд» v0.5 — стиль «умный тренажёр».
   Светлый морозный лёд, один облик для 9–12 и 13–15, тёмной темы нет.
   Каждая игра живёт в своём цветовом мире: Матч дня — синий лёд, Вызов — оранжевый,
   Скан поля — зелёный, Каток — бирюзовый, Мой хоккей — сливовый / тёмно-синий / золотой.
   Белый текст на цветных плитках — контраст не ниже 4,5 : 1 (цвета подобраны тёмными).
   Все токены — здесь, в :root. Шрифты: Oswald (заголовки), Inter (текст).
   ============================================================ */

:root {
  /* фон и текст */
  --bg-top: #e6f1fb;
  --bg-bot: #f7fbff;
  --ink: #0f1b2d;            /* основной текст, ≈ 15 : 1 на фоне */
  --ink-2: #44546a;          /* вторичный текст, ≈ 6 : 1 */
  --line: #c3d0de;           /* рамки и разделители */
  --card: rgba(255, 255, 255, .88);
  --card-solid: #fff;
  --soft: #e3edf8;           /* заливка вторичных элементов */

  /* акценты */
  --red: #c8102e;
  --red-deep: #8f0b21;
  --blue: #1f5fd6;
  --green: #0f7a47;
  --green-deep: #0a5a35;

  /* цветовые миры: [светлый конец, тёмный конец] градиента плитки */
  --w-ice-a: #2563d8;   --w-ice-b: #0e3c9c;
  --w-fire-a: #c2500a;  --w-fire-b: #8f2f0a;
  --w-scan-a: #0f7a47;  --w-scan-b: #0a5a35;
  --w-teal-a: #0b7a85;  --w-teal-b: #075a66;
  --w-plum-a: #6d45d0;  --w-plum-b: #43289a;
  --w-navy-a: #2a4a82;  --w-navy-b: #12264b;
  --w-gold-a: #92590a;  --w-gold-b: #6b3f06;

  /* формы */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;
  --r-xl: 28px;
  --sh-card: 0 8px 22px rgba(30, 60, 100, .12), inset 0 0 0 1px rgba(255, 255, 255, .9);
  --sh-tile: 0 12px 24px rgba(15, 35, 80, .28);
  --sh-press: 0 4px 10px rgba(15, 35, 80, .24);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
}

/* вырезы iPhone: переменные, чтобы их можно было задать в тесте (html.sa-test) */
:root { --sab: env(safe-area-inset-bottom, 0px); --sat: env(safe-area-inset-top, 0px); }
html.sa-test { --sab: 34px; --sat: 59px; }
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body { min-height: 100dvh; }
html { scroll-padding-top: calc(var(--head-h, 64px) + 8px); scroll-padding-bottom: calc(var(--nav-h, 84px) + 12px); }
html { background: var(--bg-top); }
body {
  font-family: var(--font); font-size: 16px; color: var(--ink);
  /* мягкий градиент и едва заметные «царапины» льда */
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(62deg, rgba(110, 150, 195, .05) 0 1px, transparent 1px 37px),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%) fixed;
  background-color: var(--bg-top);
  display: block; max-width: 480px; margin: 0 auto; overflow-x: clip;
  padding-bottom: calc(var(--nav-h, 84px) + 8px);
  -webkit-tap-highlight-color: transparent;
}
button { font-family: var(--font); }
.hidden { display: none !important; }
.screen { display: block; }
.screen.hidden { display: none !important; }
.scroll-area { display: block; padding: 6px 16px 24px; }

/* ===================== Типографика ===================== */
.page-title { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
h2, h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.puck-ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; object-fit: contain; }
.sec-h { font-size: 22px; margin: 22px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.sec-h small { font-family: var(--font); font-size: 15px; color: var(--ink-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.g-meta, .hint { font-size: 16px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.hint { margin-bottom: 10px; }
.g-lesson { background: var(--soft); border-radius: var(--r-s); padding: 12px; font-size: 16px; line-height: 1.5; text-align: left; margin: 8px 0; }

/* ===================== Шапка и нижнее меню ===================== */
header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 11px; padding: 10px 16px 6px; padding-top: calc(10px + var(--sat)); background: #e8f2fb; box-shadow: 0 1px 0 rgba(120, 150, 190, .18); }
.badge { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sh-card); display: grid; place-items: center; flex-shrink: 0; }
.badge img { width: 100%; height: 100%; object-fit: cover; }
h1#coach-name { font-family: var(--display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
#status { font-size: 13px; color: var(--ink-2); }
.header-stats { margin-left: auto; display: flex; gap: 7px; }
.hchip { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--card-solid); box-shadow: var(--sh-card); font-family: var(--display); font-weight: 600; font-size: 17px; white-space: nowrap; }

#demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 4px; font-size: 14px; color: var(--ink-2); flex-shrink: 0; }
#demo-bar span { font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; }
#demo-parents { font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 10px 0 10px 12px; min-height: 44px; }

#nav { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 30; display: flex; gap: 4px; padding: 6px 12px calc(6px + var(--sab)); background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -6px 22px rgba(30, 60, 100, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-btn { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; border-radius: var(--r-l); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, transform .08s; }
.nav-btn:active { transform: scale(.96); }
.nav-btn span { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.nav-btn { padding: 0 2px; }
.nav-btn.active { background: #dce9fb; color: #1b47ad; }
.nav-btn[hidden] { display: none; }

/* ===================== Кнопки ===================== */
.btn { display: block; width: 100%; min-height: 52px; margin-top: 12px; padding: 14px 18px; border: 0; border-radius: var(--r-m); font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.btn:active:not(:disabled) { transform: translateY(2px) scale(.99); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: linear-gradient(180deg, #d8183a 0, var(--red) calc(100% - 3px), var(--red-deep) calc(100% - 3px)); color: #fff; box-shadow: 0 6px 14px rgba(200, 16, 46, .32); }
.btn-green { background: linear-gradient(180deg, #14925a 0, var(--green) calc(100% - 3px), var(--green-deep) calc(100% - 3px)); color: #fff; box-shadow: 0 6px 14px rgba(15, 122, 71, .3); }
.btn-ghost { background: var(--card-solid); color: var(--ink); box-shadow: var(--sh-card); }
.chip { flex-shrink: 0; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--card-solid); color: var(--ink); font-size: 16px; font-weight: 700; box-shadow: var(--sh-card); cursor: pointer; transition: transform .08s; }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--ink); color: #fff; }
.chip:disabled { opacity: .5; }
.chip small { font-weight: 500; opacity: .8; }
.reset-link, .back-link { display: block; margin: 14px auto 6px; min-height: 44px; background: none; border: 0; color: var(--ink-2); font-size: 15px; text-decoration: underline; cursor: pointer; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 10px; text-decoration: none; font-weight: 700; color: var(--blue); font-size: 17px; }

/* ===================== Плитки миров ===================== */
.w-ice { --a: var(--w-ice-a); --b: var(--w-ice-b); }
.w-fire { --a: var(--w-fire-a); --b: var(--w-fire-b); }
.w-scan { --a: var(--w-scan-a); --b: var(--w-scan-b); }
.w-teal { --a: var(--w-teal-a); --b: var(--w-teal-b); }
.w-plum { --a: var(--w-plum-a); --b: var(--w-plum-b); }
.w-navy { --a: var(--w-navy-a); --b: var(--w-navy-b); }
.w-gold { --a: var(--w-gold-a); --b: var(--w-gold-b); }

.tile, .world-head {
  color: #fff;
  background:
    radial-gradient(120% 90% at 88% 105%, rgba(255, 255, 255, .22), transparent 62%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 15px),
    linear-gradient(155deg, var(--a), var(--b));
}
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 200px; padding: 16px 16px 60px; border: 0; border-radius: var(--r-xl); text-align: left; overflow: hidden; cursor: pointer; box-shadow: var(--sh-tile); transition: transform .08s, box-shadow .08s; }
.tile:active:not(:disabled) { transform: translateY(3px) scale(.985); box-shadow: var(--sh-press); }
.tile--big { grid-column: 1 / -1; min-height: 196px; padding-bottom: 16px; margin: 12px 0; width: 100%; }
.tile-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; max-width: 58%; }
.tile--big .tile-text { max-width: 52%; }
.tile-title { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
.tile--big .tile-title { font-size: 34px; }
.tile-sub { font-size: 15px; line-height: 1.3; font-weight: 600; opacity: .96; }
.tile-img { position: absolute; right: 5%; bottom: 64px; width: 42%; max-height: 46%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 20, .35)); pointer-events: none; }
.tile--big .tile-img { width: 46%; max-height: 82%; right: 6%; bottom: 10%; }
.tile-go { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .3); color: #fff; }
.tile-badge { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--green-deep); font-size: 14px; font-weight: 800; }
.tile-badge.is-new { color: var(--red); }
.tile.is-locked { filter: saturate(.3); opacity: .72; cursor: default; box-shadow: none; }
.tile.is-locked .tile-go { background: rgba(255, 255, 255, .18); }

.world-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px; border-radius: var(--r-xl); box-shadow: var(--sh-tile); overflow: hidden; margin-bottom: 4px; }
.wh-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.wh-text h2 { font-size: 32px; line-height: 1.05; font-weight: 700; }
.wh-sub { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .95; }
.wh-img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 20, .35)); flex-shrink: 0; }
.world-head.compact { padding: 10px 14px; border-radius: var(--r-l); }
.world-head.compact .wh-text h2 { font-size: 24px; }
.world-head.compact .wh-sub { font-size: 14px; }
.world-head.compact .wh-img { width: 56px; height: 56px; }
.badge-quiet { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; }

/* ===================== «Сегодня» ===================== */
.today-top { position: relative; z-index: 0; height: 104px; padding-top: 14px; margin-bottom: -4px; }
/* рысь выглядывает из-за карточки: низ позы закрыт кольцом-картой */
.today-lynx { position: absolute; right: 6px; top: -8px; width: 156px; height: 112px; object-fit: cover; object-position: 50% 0; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(15, 35, 80, .22)); }
.ring-card { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 18px 16px 16px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ring { width: 92px; height: 92px; flex-shrink: 0; }
.ring-bg { fill: none; stroke: #cfe0f2; stroke-width: 12; }
.ring-fg { fill: none; stroke: var(--blue); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring-n { font-family: var(--display); font-size: 30px; font-weight: 700; fill: var(--ink); }
.ring-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ring-text b { font-family: var(--display); font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.ring-text span { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.ring-text p { font-size: 16px; line-height: 1.35; margin-top: 4px; max-width: 220px; }
.level-card, .done-card { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-card); }
.lv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lv-top b { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.lv-top span { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.done-card { display: grid; gap: 6px; margin-top: 12px; }
.done-card b { font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.done-card span, .t-soft { font-size: 16px; line-height: 1.4; color: var(--ink); }
.done-card .t-soft, .tomorrow .t-soft { color: var(--ink-2); }
.xp-bar, .album-bar, .q-progress { height: 12px; border-radius: 999px; background: #d3e2f2; overflow: hidden; }
.xp-fill, .album-fill, .q-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4a86ee, var(--blue)); transition: width .5s ease; }
.next-up { margin-top: 10px; }
.next-up .row { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; color: var(--ink-2); margin-bottom: 6px; }
.next-up .row b { color: var(--ink); white-space: nowrap; font-family: var(--display); font-size: 17px; }
.streak-line { font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.streak-line b { color: var(--ink); }
.pause-row { text-align: center; font-size: 15px; color: var(--ink-2); margin: 10px 0 0; }
.xp-label { font-size: 15px; color: var(--ink-2); margin-top: 6px; }

/* ===================== Раунд «Матча»: синий лёд ===================== */
.round-top { display: flex; align-items: center; gap: 12px; padding: 6px 0 4px; }
.q-progress { flex: 1; }
.q-counter { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--blue); }
.q-text { font-size: 22px; font-weight: 700; line-height: 1.35; margin: 14px 0 14px; }
.q-options { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 12px 14px; border: 0; border-radius: var(--r-m); background: var(--card-solid); color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.35; text-align: left; box-shadow: var(--sh-card); cursor: pointer; transition: transform .08s, background .15s, box-shadow .08s; }
.opt .key { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #dce9fb; color: #1b47ad; font-family: var(--display); font-size: 16px; font-weight: 600; }
.opt:active:not(:disabled) { transform: translateY(2px) scale(.99); }
.opt.right { background: #dcf3e6; box-shadow: inset 0 0 0 2px var(--green); }
.opt.right .key { background: var(--green); color: #fff; }
.opt.wrong { background: #fde3e7; box-shadow: inset 0 0 0 2px var(--red); }
.opt.wrong .key { background: var(--red); color: #fff; }
.opt.dim { opacity: .5; }
.rink-wrap { padding: 10px 10px 6px; border-radius: var(--r-l); background: var(--card-solid); box-shadow: var(--sh-card); }
.rink { width: 100%; max-height: 250px; display: block; }
.legend { display: flex; gap: 14px; justify-content: center; font-size: 14px; color: var(--ink-2); margin-top: 6px; font-weight: 600; }
.l-opp { color: var(--red); } .l-mate { color: #2f6fb0; } .l-goalie { color: #a86a00; }
.zone-cap { text-align: center; font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.zone-cap.z-att { color: #2f6fb0; } .zone-cap.z-def { color: var(--red); }

#sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 40; padding: 16px 16px calc(16px + var(--sab)); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -10px 30px rgba(15, 35, 80, .2); transform: translateY(110%); transition: transform .3s cubic-bezier(.2, 1, .3, 1); }
#sheet.show { transform: translateY(0); }
#sheet.ok { background: #e4f6ec; }
#sheet.no { background: #fdeaed; }
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.sheet-wolf { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; animation: popin .35s cubic-bezier(.3, 1.5, .5, 1); }
.sheet-title { font-family: var(--display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sheet-text, #sheet .sheet-text { font-size: 17px; line-height: 1.45; }
#sheet .btn { margin-top: 12px; }

.round-end { text-align: center; padding-top: 8px; display: grid; gap: 4px; justify-items: center; }
.end-wolf { width: 150px; height: 150px; object-fit: contain; animation: popin .45s cubic-bezier(.3, 1.5, .5, 1); }
.score-big { font-family: var(--display); font-size: 68px; font-weight: 700; line-height: 1; color: var(--blue); }
.first-win { font-family: var(--display); font-size: 28px; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.xp-gain { font-family: var(--display); font-size: 24px; letter-spacing: .03em; color: var(--red); }
.award, .bridge, .rec-row, .abadge { background: var(--card-solid); box-shadow: var(--sh-card); }
.award { width: 100%; padding: 12px 14px; margin: 6px 0; border-radius: var(--r-m); font-size: 16px; line-height: 1.4; animation: popin .4s cubic-bezier(.3, 1.5, .5, 1); }
.award.levelup { background: #fff3d6; }
.bridge { width: 100%; padding: 12px 14px; border-radius: var(--r-m); font-size: 16px; line-height: 1.4; margin: 6px 0; }
.cheer { font-size: 16px; color: var(--ink-2); line-height: 1.4; }
.round-end .btn { max-width: 420px; }
.reward-img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(15, 35, 80, .3)); }

/* ===================== «Вызов»: оранжевый мир ===================== */
.task-card { display: grid; gap: 12px; padding: 4px 0 12px; }
.task-card h2 { font-size: 28px; line-height: 1.1; }
.task-goal { font-size: 18px; line-height: 1.4; }
.task-needs, .task-check { font-size: 16px; line-height: 1.45; color: var(--ink); }
.task-safety { padding: 12px 14px; border-radius: var(--r-m); background: #fff3e0; font-size: 16px; line-height: 1.45; }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 16px; color: var(--ink-2); font-weight: 600; }
.len-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.task-sticky { position: static; bottom: 0; display: grid; gap: 4px; padding: 14px 0 4px; background: linear-gradient(180deg, rgba(247, 251, 255, 0), #f2f8fd 30%); }
.task-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.task-links .reset-link { margin: 0; }
.play-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
#task-timer, #sch-time { font-size: 24px; color: var(--ink); }
.play-dots { display: flex; gap: 6px; }
.play-dots i { flex: 1; height: 8px; border-radius: 4px; background: #d3e2f2; }
.play-dots i.done { background: var(--w-fire-a); }
.play-dots i.cur { background: var(--ink); }
.step-head { font-size: 27px; font-weight: 700; line-height: 1.25; margin: 14px 0 6px; }
.step-more, .step-final details, .task-card details { padding: 12px 14px; border-radius: var(--r-m); background: var(--card-solid); box-shadow: var(--sh-card); font-size: 16px; }
.step-more summary, .step-final summary, .task-card summary { cursor: pointer; font-weight: 700; min-height: 24px; }
.step-more p, .step-final p, .task-card details p { margin-top: 8px; line-height: 1.5; color: var(--ink-2); font-size: 16px; }
.step-final { display: grid; gap: 8px; margin-top: 6px; }
.step-cue { min-height: 24px; font-size: 16px; color: var(--w-fire-a); font-weight: 700; }
.play-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 8px; }
.play-btns .btn { margin-top: 0; }
.task-num { width: 100%; padding: 14px; border: 0; border-radius: var(--r-m); background: var(--card-solid); box-shadow: var(--sh-card); font: inherit; font-size: 30px; text-align: center; color: var(--ink); }
.feel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feel { padding: 16px 6px; border: 0; border-radius: var(--r-l); background: var(--card-solid); box-shadow: var(--sh-card); font-size: 40px; color: var(--ink); cursor: pointer; transition: transform .08s; }
.feel:active { transform: scale(.96); }
.feel span { display: block; font-size: 16px; margin-top: 4px; font-weight: 600; }
.task-result { text-align: center; justify-items: center; }
.task-ok { color: var(--green); font-weight: 700; }
.task-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-family: var(--display); }
.tomorrow { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 14px 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-card); text-align: left; }
.tomorrow b { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: .03em; display: block; }
.tomorrow span { display: block; font-size: 16px; line-height: 1.4; margin-top: 4px; }
.t-ico { font-size: 26px; }

/* ===================== Сундук ===================== */
.chest { display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0; padding: 14px 16px; border: 0; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-card); font: inherit; color: var(--ink); text-align: left; }
.chest b { display: block; font-family: var(--display); font-size: 24px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.chest span { display: block; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.chest .chest-goal { display: flex; align-items: center; flex-wrap: wrap; margin: 4px 0; color: var(--ink); }
.chest-svg { width: 72px; height: 72px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(15, 35, 80, .3)); }
.chest.locked .chest-svg { opacity: .55; filter: grayscale(.6); }
.chest.ready { min-height: 150px; cursor: pointer; color: #fff; box-shadow: var(--sh-tile); background: radial-gradient(120% 90% at 88% 105%, rgba(255, 255, 255, .25), transparent 62%), linear-gradient(155deg, var(--w-gold-a), var(--w-gold-b)); transition: transform .08s; }
.chest.ready:active { transform: translateY(3px) scale(.985); }
.chest.ready b, .chest.ready span, .chest.ready .chest-goal { color: #fff; }
.chest.ready .chest-svg { width: 96px; height: 96px; animation: chest-shake 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
.chest-cta { font-weight: 800; text-decoration: underline; }
.parts { display: inline-flex; gap: 4px; margin: 0 8px 0 4px; }
.parts i { width: 18px; height: 11px; border-radius: 3px; background: #d3e2f2; }
.parts i.on { background: var(--red); }
.chest.ready .parts i { background: rgba(255, 255, 255, .35); } .chest.ready .parts i.on { background: #fff; }
.chest-card .chest-svg { width: 130px; height: 130px; display: block; margin: 0 auto 6px; }
.chest-card .chest-svg.open { animation: chest-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.reveal-part .parts i { width: 44px; height: 22px; }
.reveal-part { margin: 8px 0 10px; text-align: center; }
.reveal-xp { font-family: var(--display); font-size: 60px; font-weight: 700; color: var(--red); line-height: 1; margin: 6px 0; }
@keyframes chest-shake { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 82% { transform: rotate(6deg); } 88% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
@keyframes chest-pop { 0% { transform: scale(.7) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }

/* ===================== Мой хоккей, карточки, награды ===================== */
.rec-list { display: grid; gap: 8px; margin-bottom: 8px; }
.rec-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-m); font-size: 16px; }
.rec-row b { font-family: var(--display); font-size: 22px; color: var(--red); }
.cat-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 16px; color: var(--ink-2); margin-bottom: 8px; }
.cat-stats b { color: var(--ink); }
.switch-row { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 17px; min-height: 48px; }
.switch-row input { width: 24px; height: 24px; accent-color: var(--red); }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.abadge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 12px 6px; border-radius: var(--r-m); text-align: center; }
.abadge.got { box-shadow: inset 0 0 0 2px var(--red); }
.abadge.locked { opacity: .4; }
.b-icon { font-size: 26px; }
.b-name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gcard, .gcard.epic, .gcard.legend, .gcard.star, .gcard.locked {
  --rar: #8b97a6;
  background: url('img/card.webp') center / 100% 100% no-repeat;
  aspect-ratio: 3 / 4; padding: 22% 18% 20% 16%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  border: 0; border-radius: 0; box-shadow: none; cursor: pointer; transition: transform .1s;
  filter: drop-shadow(0 4px 6px rgba(20, 28, 38, .18));
}
.gcard:active { transform: scale(.97); }
.gcard.epic { --rar: #2f6fb0; } .gcard.legend { --rar: var(--red); }
.gcard .mono { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--rar); margin-bottom: 2px; }
.g-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.g-rar { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.gcard.locked { opacity: .5; cursor: default; filter: grayscale(.7) drop-shadow(0 2px 3px rgba(20, 28, 38, .12)); }
.gcard.locked .mono { color: #7d8896; }
.modal-card .gcard { width: 130px; margin: 0 auto 8px; padding: 22% 16% 20% 14%; pointer-events: none; }
.modal-card .gcard .mono { font-size: 40px; }
.legend-head { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 10px; }
.legend-tag { padding: 5px 12px; border-radius: 999px; background: #fff3d6; color: #6b3f06; font-size: 14px; font-weight: 800; }
.legend-count { font-size: 15px; color: var(--ink-2); font-weight: 700; }
.legend-card { padding: 18px; border-radius: var(--r-xl); background: var(--card-solid); box-shadow: var(--sh-card); }
.legend-title { font-size: 26px; line-height: 1.15; margin-bottom: 12px; }
.legend-text { font-size: 17px; line-height: 1.6; white-space: pre-wrap; }
.legend-unlock { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-m); background: #fff3d6; font-size: 16px; }
.legend-list { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border: 0; border-radius: var(--r-m); background: var(--card-solid); box-shadow: var(--sh-card); color: var(--ink); text-align: left; cursor: pointer; }
.li-title { font-size: 16px; font-weight: 700; } .li-tag { font-size: 14px; color: var(--ink-2); flex-shrink: 0; }
.hero { text-align: center; padding: 6px 0 4px; }
.hero-wolf { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(15, 35, 80, .25)); }
.bubble { display: inline-block; max-width: 300px; padding: 12px 16px; border-radius: var(--r-m); background: var(--card-solid); box-shadow: var(--sh-card); font-size: 16px; line-height: 1.4; }

/* ===================== Окна, вход, итоги теста ===================== */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; background: rgba(15, 27, 45, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadein .2s; }
.modal.hidden { display: none; }
.modal-card { width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; padding: 22px 20px; border-radius: var(--r-xl); background: var(--card-solid); box-shadow: 0 20px 50px rgba(15, 35, 80, .35); text-align: center; }
.modal-card h3 { font-size: 26px; margin-top: 6px; }
.modal-card ul { text-align: left; margin: 14px 0; padding-left: 20px; font-size: 16px; line-height: 1.55; }
.modal-card li { margin-bottom: 6px; }
.parent-sheet .modal-card { text-align: left; }
.parent-sheet h3 { text-align: center; }
.age-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.age-tile { padding: 22px 8px; border: 0; border-radius: var(--r-l); background: var(--soft); color: var(--ink); cursor: pointer; transition: transform .08s; }
.age-tile:active { transform: scale(.97); }
.age-tile b { display: block; font-family: var(--display); font-size: 34px; } .age-tile span { font-size: 16px; color: var(--ink-2); }
.lead-card { text-align: left; }
.lead-card label { display: block; margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.lead-card input, .lead-card select, .lead-card textarea { display: block; width: 100%; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-s); font: inherit; font-size: 16px; color: var(--ink); background: #fff; }

.pin-screen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 24px calc(24px + var(--sab)); background: linear-gradient(180deg, var(--bg-top), var(--bg-bot)); }
.pin-wolf { width: 132px; height: 132px; object-fit: contain; animation: float 4s ease-in-out infinite; }
.pin-title { font-family: var(--display); font-size: 26px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.pin-hint { font-size: 15px; color: var(--ink-2); }
.pin-dots { display: flex; gap: 14px; margin: 14px 0 4px; }
.pin-dots span { width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid var(--ink-2); transition: transform .15s, background .15s; }
.pin-dots span.on { background: var(--blue); border-color: var(--blue); transform: scale(1.18); }
.pin-err { height: 20px; font-size: 15px; font-weight: 700; color: var(--red); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; margin-top: 10px; }
.pin-key { height: 66px; border: 0; border-radius: var(--r-l); background: var(--card-solid); box-shadow: var(--sh-card); color: var(--ink); font-family: var(--display); font-size: 28px; font-weight: 600; cursor: pointer; transition: transform .08s; }
.pin-key:active { transform: scale(.94); }
.pin-key.pin-ok { color: var(--green); } .pin-del { color: var(--ink-2); font-size: 22px; }
.pin-screen.shake { animation: shake .38s; }

.offer-screen { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px 40px; overflow-y: auto; text-align: center; background: linear-gradient(180deg, var(--bg-top), var(--bg-bot)); }
.offer-screen > * { max-width: 420px; width: 100%; }
.offer-screen h2 { font-size: 36px; font-weight: 700; }
.offer-img { width: 150px !important; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(15, 35, 80, .3)); }
.offer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.offer-stats > div { padding: 16px 6px; border-radius: var(--r-l); background: var(--card-solid); box-shadow: var(--sh-card); }
.offer-stats b { display: block; font-family: var(--display); font-size: 38px; line-height: 1; color: var(--red); }
.offer-stats span { font-size: 14px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }
.offer-recs { text-align: left; }
.offer-recs h3 { margin: 4px 0 8px; font-size: 22px; }

.push-offer { position: fixed; left: 12px; right: 12px; bottom: 90px; max-width: 456px; margin: 0 auto; z-index: 45; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px; border-radius: var(--r-xl); background: var(--card-solid); box-shadow: 0 16px 40px rgba(15, 35, 80, .3); transform: translateY(20px); opacity: 0; transition: transform .28s cubic-bezier(.2, 1, .3, 1), opacity .28s; }
.push-offer.show { transform: translateY(0); opacity: 1; }
.po-text { font-size: 16px; line-height: 1.45; }
.po-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.po-btns .btn { margin-top: 0; flex: 1 1 28%; padding: 12px; font-size: 17px; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.cfi { position: absolute; width: 9px; height: 15px; top: -20px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .2; } }
@keyframes popin { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes float { 50% { transform: translateY(-9px); } }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

/* ===================== «Скан поля»: зелёный мир ===================== */
.sch-cap { min-height: 28px; text-align: center; font-size: 20px; font-weight: 700; }
.sch-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: 100%; max-width: 360px; margin: 6px auto; }
.sch-cell { aspect-ratio: 1; min-height: 56px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-s); background: var(--card-solid); box-shadow: var(--sh-card); font-family: var(--font); font-weight: 800; font-size: 26px; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.sch-cell.found { background: #d6e8dd; color: rgba(15, 27, 45, .4); box-shadow: none; }
.sch-cell.hint, .sch-jersey.hint { animation: sch-pulse 1.4s ease-in-out infinite; }
@keyframes sch-pulse { 50% { box-shadow: 0 0 0 4px rgba(15, 122, 71, .35); } }
.sch-cell.shake, .sch-jersey.shake { animation: sch-shake .15s; }
@keyframes sch-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sch-blank { background: transparent; box-shadow: none; border: 1px dashed var(--line); }
.sch-puck { background: transparent; box-shadow: none; }
.sch-puck span { display: grid; place-items: center; min-width: 50px; height: 50px; padding: 0 6px; margin: 0 auto; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 26px; }
.sch-puck span.c-r { background: var(--red); } .sch-puck span.c-b { background: #2f6fb0; }
.sch-puck span.ci { border-radius: 50%; } .sch-puck span.sq { border-radius: 8px; }
.sch-cell.c-r { color: var(--red); } .sch-cell.c-b { color: #2f6fb0; }
.sch-cell.ci { border-radius: 50%; } .sch-cell.sq { border-radius: 6px; }
.sch-cell.c-r.found, .sch-cell.c-b.found { color: rgba(15, 27, 45, .4); }
.sch-rink { position: relative; width: 100%; max-width: 320px; aspect-ratio: 320 / 300; margin: 6px auto; border-radius: 34px; background: linear-gradient(180deg, #fff, #e3f0fa); box-shadow: var(--sh-card); }
.sch-jersey { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; display: grid; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #2f6fb0; color: #fff; font-weight: 800; font-size: 20px; box-shadow: 0 3px 6px rgba(20, 28, 38, .25); cursor: pointer; touch-action: manipulation; }
.sch-jersey.found { background: #cfdbe7; color: rgba(15, 27, 45, .4); box-shadow: none; }
.sch-count { font-family: var(--display); font-size: 96px; text-align: center; color: var(--green); }
.sch-breath { width: 90px; height: 90px; margin: 10px auto; border-radius: 50%; background: rgba(15, 122, 71, .25); animation: sch-breathe 3s ease-in-out; }
@keyframes sch-breathe { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.1); } }
.sch-bars { display: flex; gap: 16px; align-items: flex-end; justify-content: center; margin: 8px 0; }
.sch-bar { display: grid; justify-items: center; gap: 4px; font-size: 16px; }
.sch-bar i { display: block; width: 36px; border-radius: 6px 6px 0 0; background: var(--green); }
.sch-graph { display: flex; gap: 4px; align-items: flex-end; height: 64px; justify-content: center; }
.sch-graph i { display: block; width: 14px; border-radius: 2px 2px 0 0; background: var(--ink); }
.sch-lines p { font-size: 16px; margin: 4px 0; }
.sch-measure { margin: 6px 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--card-solid); box-shadow: var(--sh-card); }
.sch-measure b { font-size: 17px; }

/* ===================== 13–15: тот же облик, без маскота ===================== */
body.teen .today-lynx, body.teen .hero-wolf, body.teen .sheet-wolf, body.teen .end-wolf, body.teen .mini-wolf,
body.teen .pin-wolf, body.teen header .badge { display: none; }
body.teen .today-top { height: auto; margin-bottom: 0; padding: 12px 0 12px; }
body.teen .chest.ready .chest-svg { animation: none; }
body.teen .reward-img { width: 80px; height: 80px; }

@media (prefers-reduced-motion: reduce) {
  .chest.ready .chest-svg, .sheet-wolf, .end-wolf, .award, .pin-wolf { animation: none; }
  .sch-cell.hint, .sch-jersey.hint { animation: none; outline: 3px solid var(--green); }
  .sch-cell.shake, .sch-jersey.shake { animation: none; outline: 2px solid var(--red); }
  .sch-breath { animation: none; }
  .tile, .opt, .btn { transition: none; }
}

/* на низких экранах кнопка «Начать» липнет к низу; на обычных идёт в потоке и ничего не перекрывает */
@media (max-height: 740px) { .task-sticky { position: sticky; } }

/* ===================== v0.6: «Разминка» и мини-игры ===================== */
:root { --w-ask-a: #7b3fb8; --w-ask-b: #4e2380; --w-pass-a: #0e6b8f; --w-pass-b: #09475f; --w-lime-a: #4d7c0f; --w-lime-b: #365a0b; }
.w-ask { --a: var(--w-ask-a); --b: var(--w-ask-b); }
.w-pass { --a: var(--w-pass-a); --b: var(--w-pass-b); }
.w-lime { --a: var(--w-lime-a); --b: var(--w-lime-b); }

.drill-list { display: grid; gap: 10px; }
.drill-card { display: grid; gap: 2px; padding: 14px 16px; border: 0; border-radius: var(--r-l); background: var(--card-solid); box-shadow: var(--sh-card); text-align: left; cursor: pointer; transition: transform .08s; }
.drill-card:active { transform: scale(.985); }
.drill-card b { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.drill-card span { font-size: 16px; color: var(--ink); }
.drill-card small { font-size: 14px; color: var(--ink-2); }
.drill-card.is-locked { opacity: .5; cursor: default; }
.sig-list, .sig-steps, .pass-rules { padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.4; }

/* «Пас за секунду» */
.pass-svg { display: block; width: 100%; max-width: 420px; margin: 0 auto; touch-action: manipulation; user-select: none; }
.ps-ice { fill: #f4fbff; stroke: #9dbdd6; stroke-width: 2; }
.ps-blue { stroke: #4a90d9; stroke-width: 3.5; }
.ps-red { stroke: #e5484d; stroke-width: 1.8; }
.ps-crease { fill: #bfe0f5; stroke: #4a90d9; stroke-width: 1.5; }
.ps-circle { fill: none; stroke: #e5484d; stroke-width: 1.1; opacity: .45; }
.ps-goal { fill: rgba(229, 72, 77, .14); stroke: #e5484d; stroke-width: 2.2; }
.ps-goal-dim { opacity: .4; }
.ps-goalie { fill: #8793a3; stroke: #fff; stroke-width: 1; }
.ps-opp { fill: #d93a4a; stroke: #fff; stroke-width: 1; }
.ps-mate { fill: #2f6fb0; stroke: #fff; stroke-width: 1.2; }
.ps-me { fill: #ffb43a; stroke: #fff; stroke-width: 1.4; }
.ps-me-t { font-size: 9.5px; font-weight: 700; fill: #10263c; }
.p-hit { fill: transparent; cursor: pointer; }
.fb-ok { stroke: var(--green); stroke-width: 3; }
.fb-no { stroke: var(--red); stroke-width: 2.4; stroke-dasharray: 5 4; }
.fb-x line { stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; }
.fb-tri { fill: rgba(15, 122, 71, .25); stroke: var(--green); stroke-width: 2; }
.pass-stage.appear { animation: ps-in .12s ease-out both; }
@keyframes ps-in { from { opacity: 0; } }
.pass-timer { height: 10px; border-radius: 999px; background: #d3e2f2; overflow: hidden; }
.pass-timer i { display: block; width: 100%; height: 100%; background: var(--w-pass-a); }
.pass-msg { min-height: 52px; font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center; }
.pass-msg.ok { color: var(--green); } .pass-msg.no { color: var(--red); }
.pass-hold { min-height: 56px; margin-top: 0; }
.pass-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.pd { width: 18px; height: 18px; border-radius: 50%; background: var(--green); }
.pd.no { background: var(--red); border-radius: 4px; transform: rotate(45deg); }
.pd.to { background: transparent; box-shadow: inset 0 0 0 3px #8793a3; }

/* «Дриблинг по сигналу» */
.sig-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 68vh; text-align: center; }
.sig-top { display: flex; justify-content: space-between; align-self: stretch; font-family: var(--display); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sig-glyph { width: min(64vw, 40vh); height: min(64vw, 40vh); }
.sig-text { display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: min(46vw, 30vh); line-height: 1; color: var(--ink); }
.sig-word { font-family: var(--display); font-size: 34px; letter-spacing: .06em; text-transform: uppercase; }
.sig-action, .sig-cap { font-size: 18px; line-height: 1.35; max-width: 340px; }
.sig-hint { font-size: 15px; color: var(--ink-2); min-height: 20px; }
.sig-fade { display: grid; justify-items: center; gap: 6px; animation: sig-in .15s ease-out both; }
@keyframes sig-in { from { opacity: 0; } }
.sig-teach .btn { max-width: 320px; }

/* «Следи за шайбами» */
.mot-field { position: relative; width: 100%; max-width: 380px; aspect-ratio: var(--ar); margin: 6px auto; border-radius: 26px; background: linear-gradient(180deg, #fff, #dcebf7); box-shadow: var(--sh-card); overflow: hidden; touch-action: manipulation; }
.mot-puck { position: absolute; width: var(--d); aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5a70, #0b111a 70%); box-shadow: 0 3px 6px rgba(15, 35, 80, .35); cursor: pointer; touch-action: manipulation; }
.mot-puck:disabled { cursor: default; }
.mot-puck.is-target { box-shadow: 0 0 0 4px var(--red), 0 3px 6px rgba(15, 35, 80, .35); }
.mot-puck.sel { box-shadow: 0 0 0 4px var(--blue), 0 3px 6px rgba(15, 35, 80, .35); }
.mot-puck.hit { box-shadow: 0 0 0 4px var(--green); }
.mot-puck.wrong { box-shadow: 0 0 0 4px var(--red); }
.mot-puck.miss { outline: 3px dashed var(--green); outline-offset: 3px; }

/* v0.6.1: длинные названия малых плиток — мельче, подпись не обрезается */
.tile--long .tile-title { font-size: 20px; line-height: 1.08; }
.tile--long .tile-text { max-width: 62%; }
.tile-sub { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 380px) { .tile-title { font-size: 24px; } .tile--long .tile-title { font-size: 18px; } .tile-text { max-width: 60%; } }
.tile--long .tile-text { max-width: 58%; }
.tile--long .tile-img { width: 36%; right: 4%; }

/* ===================== v0.8: «Спроси» ===================== */
#screen-ask { position: relative; }
.ask-empty { text-align: center; padding: 10px 0 4px; }
.ask-lynx { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(15, 35, 80, .25)); }
.ask-sugg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; text-align: left; }
.ask-sug { display: grid; gap: 2px; min-height: 72px; padding: 12px 14px; border: 0; border-radius: var(--r-l); background: var(--card-solid); box-shadow: var(--sh-card); color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.25; cursor: pointer; text-align: left; transition: transform .08s; }
.ask-sug:active { transform: scale(.985); }
.ask-sug small { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--w-ask-a); }
.ask-list { display: grid; gap: 10px; margin-top: 12px; }
.ask-me { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: var(--r-m); background: var(--w-ask-a); color: #fff; font-size: 17px; line-height: 1.35; }
.ask-bot { justify-self: start; max-width: 96%; padding: 14px 16px; border-radius: var(--r-l); background: var(--card-solid); box-shadow: var(--sh-card); font-size: 17px; line-height: 1.45; }
.ask-bot p { margin: 0; }
.ask-title { font-family: var(--display); font-size: 21px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.ask-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #efe6fa; color: var(--w-ask-b); font-family: var(--font); font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.ask-actions .btn { margin-top: 10px; }
.ask-sub { margin: 12px 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-chips .chip { text-align: left; flex-shrink: 1; max-width: 100%; border-radius: 18px; line-height: 1.25; }
.ask-safe { background: #f6f0fc; }
.ask-phones { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin: 10px 0 6px; }
.ask-phones .btn { margin-top: 0; text-align: center; text-decoration: none; }
.ask-typing { color: var(--ink-2); }
.ask-form { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: #f6faff; border-top: 1px solid var(--line); position: sticky; bottom: calc(var(--nav-h, 84px) - 8px); z-index: 15; }
.ask-form[hidden] { display: none; }
.ask-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 17px; color: var(--ink); }
.ask-send, .ask-mic { flex-shrink: 0; width: 48px; height: 48px; border: 0; border-radius: 50%; font-size: 20px; cursor: pointer; }
.ask-send { background: var(--w-ask-a); color: #fff; }
.ask-mic { background: var(--soft); }
.ask-mic.rec { background: var(--red); animation: chest-pop .6s ease-in-out infinite alternate; }
.kb-article { margin: 10px 0; font-size: 17px; line-height: 1.55; }
.kb-article h2, .kb-article h3, .kb-article h4 { margin: 18px 0 6px; line-height: 1.2; }
.kb-article h2 { font-size: 24px; } .kb-article h3 { font-size: 20px; } .kb-article h4 { font-size: 18px; }
.kb-article p, .kb-article ul, .kb-article ol { margin: 8px 0; }
.kb-article ul, .kb-article ol { padding-left: 22px; display: grid; gap: 4px; }
.kb-article hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.kb-article blockquote { margin: 10px 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--soft); }
.kb-table { overflow-x: auto; margin: 10px 0; }
.kb-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.kb-table th, .kb-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.kb-table th { background: var(--soft); font-family: var(--display); letter-spacing: .03em; }
@media (max-width: 380px) { .ask-sugg { grid-template-columns: 1fr; } }

/* Нижнее меню: «Спроси» — центральная приподнятая кнопка */
#nav { z-index: 30; }
.nav-ask { position: relative; flex: 1.15; overflow: visible; }
.nav-ask .nav-ask-ico { position: absolute; top: -22px; left: 50%; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--w-ask-a), var(--w-ask-b)); box-shadow: 0 8px 20px rgba(78, 35, 128, .38), 0 0 0 4px rgba(255, 255, 255, .95); transition: box-shadow .15s, transform .1s; }
.nav-ask .nav-ask-lbl { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--w-ask-b); }
.nav-btn.nav-ask.active { background: none; color: var(--w-ask-b); }
.nav-btn.nav-ask.active .nav-ask-ico { box-shadow: 0 8px 20px rgba(78, 35, 128, .38), 0 0 0 4px #fff, 0 0 0 7px rgba(123, 63, 184, .55); }
.nav-btn.nav-ask.active .nav-ask-lbl { color: #4e2380; }
.nav-ask:active .nav-ask-ico { transform: scale(.94); }
.nav-btn.nav-ask .ask-hint { white-space: normal; position: absolute; left: 50%; bottom: calc(100% + 30px); width: 210px; margin-left: -105px; padding: 10px 14px; border-radius: 16px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.25; text-align: center; box-shadow: 0 8px 24px rgba(30, 60, 100, .28), 0 0 0 2px rgba(123, 63, 184, .35); cursor: pointer; }
.ask-hint::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: #fff; transform: rotate(45deg); }
.ask-hint[hidden] { display: none; }

/* «Сегодня»: строка вопроса */
.ask-bar { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.ask-bar-field { flex: 1; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--card-solid); color: var(--ink-2); font: inherit; font-size: 17px; text-align: left; box-shadow: var(--sh-card), 0 0 0 2px rgba(123, 63, 184, .25); cursor: text; }
.ask-bar-field svg { flex-shrink: 0; color: var(--w-ask-a); }
.ask-bar-go { flex-shrink: 0; width: 52px; height: 52px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--w-ask-a), var(--w-ask-b)); box-shadow: 0 6px 14px rgba(78, 35, 128, .3); cursor: pointer; }
.ask-bar-chips { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 -16px 12px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.ask-bar-chips .chip { min-height: 40px; padding: 6px 14px; font-size: 15px; flex-shrink: 0; white-space: nowrap; }

/* Нечётная последняя плитка растягивается на всю ширину: без дыры в сетке */
.tile-grid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 150px; padding-bottom: 58px; }
.tile-grid > .tile:last-child:nth-child(odd) .tile-text { max-width: 54%; }
.tile-grid > .tile:last-child:nth-child(odd) .tile-img { width: 30%; max-height: 74%; right: 22%; bottom: 14%; }
/* Плитка «Разминка»: широкая, в своём ряду; справа 4 игры с подписями */
.tile--warm { grid-column: 1 / -1; width: 100%; margin: 12px 0; min-height: 150px; padding: 16px 16px 54px; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 8px; cursor: default; }
.tile--warm .tile-text { flex: 1 1 auto; min-width: 0; max-width: none; }
.tile--warm .tile-title { font-size: 24px; }
.tile-hit { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.warm-row { position: relative; z-index: 3; flex: 0 0 auto; display: flex; gap: 4px; }
.warm-mini { flex: 0 0 auto; width: 48px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #fff; cursor: pointer; }
.warm-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 20, 10, .25); overflow: hidden; margin-bottom: 3px; }
.warm-ico img { width: 32px; height: 32px; object-fit: contain; }
.warm-name { font-size: 11.5px; line-height: 13px; font-weight: 700; }
.warm-mark { min-height: 13px; font-size: 10.5px; line-height: 13px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; opacity: .92; }
.warm-mark svg { width: 12px; height: 12px; }
.warm-mini.is-closed .warm-ico { opacity: .55; }
.tile--warm .tile-badge { white-space: nowrap; max-width: none; font-size: 13px; }
@media (max-width: 380px) {
  .tile--warm { flex-direction: column; padding-bottom: 66px; }
  .warm-row { align-self: stretch; justify-content: space-between; }
}

/* «Сегодня»: плитка «Спроси» вместо тонкой строки */
.tile--ask { width: 100%; min-height: 0; margin: 8px 0 12px; padding: 14px 16px 14px; gap: 10px; cursor: default; }
.tile--ask .tile-text { max-width: 60%; gap: 2px; }
.tile--ask .tile-title { font-size: 28px; }
.tile--ask .tile-sub { font-size: 14px; }
.ask-tile-lynx { position: absolute; right: 8px; top: 2px; height: 92px; width: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(30, 0, 60, .35)); }
.tile--ask .ask-tile-img { right: 8%; top: 8px; bottom: auto; width: 26%; max-height: 74px; }
.ask-pseudo { position: relative; z-index: 2; align-self: stretch; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 17px; font-weight: 600; pointer-events: none; }
.ask-pseudo svg { flex-shrink: 0; color: var(--w-ask-a); }
.ask-tile-chips { position: relative; z-index: 3; align-self: stretch; display: flex; gap: 8px; }
.ask-tile-chip { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* компактное кольцо дел: главное действие дня остаётся на первом экране */
.ring-card { padding: 10px 14px; gap: 12px; }
.ring { width: 62px; height: 62px; }
.ring-text b { font-size: 22px; }
.ring-text p { font-size: 15px; margin-top: 2px; }

/* Ознакомительный тур */
#tour { position: fixed; inset: 0; z-index: 200; }
.tour-spot { position: absolute; box-shadow: 0 0 0 9999px rgba(8, 16, 36, .68); border-radius: 22px; pointer-events: none; transition: left .25s, top .25s, width .25s, height .25s; outline: 3px solid rgba(255, 255, 255, .9); outline-offset: -1px; }
.tour-bubble { position: absolute; background: #fff; color: var(--ink); border-radius: 22px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(0, 10, 30, .45); display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.tour-row { display: flex; align-items: center; gap: 12px; }
.tour-face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #eaf2fb; flex-shrink: 0; }
.tour-text { font-size: 18px; line-height: 1.3; font-weight: 700; }
.tour-foot { display: flex; align-items: center; gap: 10px; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: #cfd9e6; }
.tour-dots i.on { background: var(--w-ask-a); width: 20px; border-radius: 6px; }
.tour-skip { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; }
.tour-next { width: auto; min-width: 110px; margin: 0; padding: 0 20px; }
.tour-ins .btn { width: 100%; margin-top: 8px; }

/* Инструкция «на экран телефона» */
.ins-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.ins-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #eef4fb; }
.ins-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--w-ask-a); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
.ins-ico { flex-shrink: 0; width: 48px; display: grid; place-items: center; color: #2f6fe0; }
.ins-txt { font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.install-modal .modal-card .btn { width: 100%; margin-top: 8px; }
#tour .tour-foot { min-width: 0; }
#tour .tour-next { flex: 0 0 auto; width: auto; min-width: 104px; max-width: none; margin: 0; padding: 0 18px; min-height: 48px; font-size: 18px; }
#tour .tour-skip { flex: 0 0 auto; }
.ins-ico { width: auto; min-width: 48px; }
.ins-txt { flex: 1 1 auto; min-width: 0; }

/* ---- v0.9.3: узкие экраны и тур ---- */
#tour .tour-dots { flex: 1 1 auto; min-width: 0; gap: 4px; margin-right: 0; }
#tour .tour-dots i { width: 7px; height: 7px; flex: 0 0 auto; }
#tour .tour-dots i.on { width: 16px; }
#tour .tour-skip { padding: 0 4px; font-size: 14px; }
#tour .tour-next { min-width: 92px; padding: 0 14px; }
#tour { touch-action: none; overscroll-behavior: contain; }
@media (max-width: 400px) {
  .page-title { font-size: 38px; }
  .today-lynx { width: 124px; height: 94px; }
  .tile--ask .tile-text { max-width: 66%; }
  .tile--ask .tile-sub { font-size: 13px; }
  .ask-tile-lynx { height: 76px; }
  .ask-tile-chip { font-size: 13px; padding: 0 6px; }
}
/* ---- v0.9.3: матрица устройств ---- */
.ask-tile-chip { min-height: 44px; }
.switch-row { min-height: 48px; display: flex; align-items: center; gap: 10px; }
.len-pick .chip { white-space: normal; max-width: 100%; text-align: left; line-height: 1.2; flex-shrink: 1; }
.len-pick .chip small { display: block; font-weight: 600; font-size: 13px; opacity: .8; }
@media (max-width: 380px) {
  .tile-grid .tile-text { max-width: 56%; }
  .tile-grid .tile-img { width: 34%; right: 3%; }
  .tile-title { font-size: 22px; }
}
.tile:not(.tile--big):not(.tile--ask) .tile-text { max-width: 55%; }
.tile:not(.tile--big):not(.tile--ask) .tile-img { width: 37%; right: 4%; }
.tile-grid > .tile:last-child:nth-child(odd) .tile-text { max-width: 50%; }
.tile-grid > .tile:last-child:nth-child(odd) .tile-img { width: 26%; right: 19%; }
.tile--big .tile-text { max-width: 50%; }
.tile--big .tile-img { width: 42%; right: 4%; }
.tile:not(.tile--big):not(.tile--ask):not(.tile--warm) .tile-title { font-size: clamp(19px, 5.6vw, 26px); overflow-wrap: anywhere; }
.tile--long:not(.tile--big) .tile-title { font-size: clamp(16px, 4.6vw, 20px); }

#tour .tour-foot { gap: 12px; }
#tour .tour-dots { margin-right: 4px; }
@media (max-width: 400px) {
  #tour .tour-foot { flex-wrap: wrap; justify-content: space-between; }
  #tour .tour-dots { flex: 1 0 100%; justify-content: center; margin: 0 0 2px; }
}