/* Три схемы. Тёмная — фирменная: тёмно-синий фон, золото под «Злато» и
   мантию медведя. Светлая — та же «тетрадь» днём. «tg» — цвета клиента Telegram,
   для тех, кому так привычнее. */
:root[data-theme="dark"], :root:not([data-theme]) {
  --bg: #0F1424; --card: #1A2138; --card-2: #232B47; --fg: #F2F4FA; --muted: #8B93AD;
  --gold: #E8B84A; --gold-fg: #1A1400; --orange: #EF8122; --blue: #4C7DFF;
  --green: #3DBE78; --red: #EF6B68; --radius: 18px; --shadow: 0 6px 20px rgba(0,0,0,.28);
  --btn: var(--gold); --btn-fg: var(--gold-fg);
  /* Liquid Glass (вариант «Тетрадь», выбран 19.09.2026): полупрозрачные карточки с размытием,
     светлая кромка сверху, блик в углу. Фон-«тетрадь» — в index.html (.bg). */
  --glass: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  --glass-edge: rgba(255,255,255,.35); --glass-ring: rgba(255,255,255,.14); --glass-shine: rgba(255,255,255,.28);
  --blur: 20px; --formula: #8fb4ff;
  color-scheme: dark;
}
:root[data-theme="tg"] {
  --bg: var(--tg-theme-bg-color, #fff); --card: var(--tg-theme-secondary-bg-color, #f3f3f7);
  --card-2: rgba(127,127,127,.12); --fg: var(--tg-theme-text-color, #111);
  --muted: var(--tg-theme-hint-color, #777); --gold: #C9971E; --gold-fg: #fff;
  --orange: #EF8122; --blue: var(--tg-theme-button-color, #2E62EC); --green: #2EA85C; --red: #EC5B58;
  --radius: 18px; --shadow: none; --btn: var(--blue); --btn-fg: var(--tg-theme-button-text-color, #fff);
  --glass: var(--card); --glass-edge: transparent; --glass-ring: transparent; --glass-shine: transparent; --blur: 0px;
}
:root[data-theme="tg"] .bg { display: none; }
/* Светлая: тёплая бумага, синяя клетка и «ручка», стекло — белое. Не зависит от цветов
   клиента, в отличие от «tg»: в тёмном Telegram она остаётся светлой. */
:root[data-theme="light"] {
  --bg: #F7F4EC; --card: #FFFFFF; --card-2: #ECE9F1; --fg: #141A2E; --muted: #5E6680;
  --gold: #D9A12B; --gold-fg: #1A1400; --orange: #E0701A; --blue: #2E62EC;
  --green: #2E9E58; --red: #E04B48; --radius: 18px; --shadow: 0 6px 18px rgba(20,26,46,.08);
  --btn: var(--gold); --btn-fg: var(--gold-fg);
  --glass: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  --glass-edge: rgba(255,255,255,.95); --glass-ring: rgba(20,26,46,.08); --glass-shine: rgba(255,255,255,.7);
  --blur: 20px; --formula: #3A5BB8;
  color-scheme: light;
}
:root[data-theme="light"] .bg { background-image: linear-gradient(rgba(46,98,236,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(46,98,236,.09) 1px, transparent 1px); }
/* Шрифты логотипа и формул фона — свои (OFL, лицензии рядом в fonts/), не с Google:
   первая отрисовка не ждёт чужой хост, и IP ученика не уходит за рубеж (аудит 03.10.2026). */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/static/fonts/unbounded-900-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/static/fonts/unbounded-900-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/caveat-500-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/caveat-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); font: 16px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; background: transparent; /* фон рисует html и .bg */ color: var(--fg); }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; }
h2 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
button { font: inherit; font-weight: 600; padding: 13px 16px; border: 0; border-radius: 14px; background: var(--btn); color: var(--btn-fg); width: 100%; cursor: pointer; transition: transform .08s, filter .15s; }
button:active { transform: scale(.98); filter: brightness(.95); }
button:disabled { opacity: .6; }
button.secondary { color: var(--fg); }
button.back { background: none; color: var(--blue); width: auto; padding: 8px 0; font-weight: 600; }
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--red); color: #1A1400; padding: 12px 14px; border-radius: 14px; z-index: 9; box-shadow: var(--shadow); }
/* Стеклянные поверхности: карточки, плитки, чипы, кнопки-номера. */
.card, .tile, .ach, .chip, .numbers button, .nav button, button.secondary, input.answer {
  background: var(--glass); position: relative; isolation: isolate;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%); backdrop-filter: blur(var(--blur)) saturate(170%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-ring);
}
.card::before, .tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 18% -10%, var(--glass-shine), transparent 55%); }
@supports not (backdrop-filter: blur(1px)) { .card, .tile, .ach, .chip, .numbers button, .nav button, button.secondary, input.answer { background: var(--card); } }
.card { border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.card.link { cursor: pointer; }
.row { display: flex; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }

/* Шапка главной: логотип, приветствие, медведь. */
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; }
.logo { font: 900 30px/1 "Unbounded", -apple-system, system-ui, sans-serif; letter-spacing: -.02em; }
.logo span { background: linear-gradient(180deg, #F3C64A, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hello { color: var(--muted); margin-top: 6px; }
.bear { height: 104px; width: auto; object-fit: contain; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Плитки разделов. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { border-radius: var(--radius); padding: 18px 14px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; gap: 8px; position: relative; transition: transform .08s; }
.tile:active { transform: scale(.97); }
.tile .ico { font-size: 28px; line-height: 1; }
.tile .sub { font-weight: 500; font-size: 13px; color: var(--muted); }
.tile .badge { position: absolute; top: 12px; right: 12px; }
.badge { display: inline-block; min-width: 22px; padding: 2px 8px; border-radius: 11px; background: var(--orange); color: #1A1400; font-size: 13px; font-weight: 700; text-align: center; }

.streak { font-size: 30px; font-weight: 800; line-height: 1; }
.bar { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); border-radius: 4px; transition: width .4s; }
.heatmap { display: grid; grid-template-rows: repeat(7, 10px); grid-auto-flow: column; gap: 3px; }
.heatmap i { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--card-2); }
.heatmap i.l1 { background: #7a4a1c; } .heatmap i.l2 { background: #c26a1d; } .heatmap i.l3 { background: var(--orange); }
:root[data-theme="tg"] .heatmap i.l1, :root[data-theme="light"] .heatmap i.l1 { background: #f9d9b8; }
:root[data-theme="tg"] .heatmap i.l2, :root[data-theme="light"] .heatmap i.l2 { background: #f5b370; }

.numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.numbers button { color: var(--fg); padding: 14px 0; }
.numbers button.weak { border: 2px solid var(--orange); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { width: auto; min-width: 44px; min-height: 44px; padding: 8px 12px; color: var(--fg); border: 2px solid var(--orange); }
.chip.done { border-color: transparent; opacity: .6; }
.chip.on { border-color: var(--gold); }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--orange); }
.nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.nav button { width: 44px; min-height: 44px; padding: 8px 0; color: var(--fg); border: 2px solid transparent; }
.nav button.done { background: rgba(76,125,255,.25); }
.nav button.cur { border-color: var(--orange); }

.task { white-space: pre-wrap; font-size: 17px; line-height: 1.5; }
/* Рисунок к заданию — белый лист на любой теме; нажатие открывает его во весь экран. */
/* Натуральный размер (клетка ~30 px), ужимается, только если шире экрана: растянутая
   на всю ширину маленькая сетка даёт клетки по 80 px и точки-кляксы. */
.figure { display: block; max-width: 100%; height: auto; margin: 12px auto 0; background: #fff; border-radius: 8px; cursor: zoom-in; }
/* Ширину увеличенному рисунку ставит app.js; margin: auto центрирует, пока он
   помещается, и не обрезает край, когда он шире экрана и листается. */
.zoom { position: fixed; inset: 0; z-index: 20; display: flex; overflow: auto; padding: 12px; background: rgba(0, 0, 0, .85); cursor: zoom-out; }
.zoom img { flex: none; margin: auto; max-width: none; height: auto; background: #fff; border-radius: 8px; }
.after-figure { margin-top: 12px; }
/* Таблица к заданию: переносы вместо мелкого шрифта; прокрутка — только если не влезла совсем. */
.table-wrap { overflow-x: auto; margin-top: 12px; }
/* 13 px и поля по 3 px: на экране 390 px в карточку должны влезть пять столбцов
   (tests/test_math_figures.py считает этот бюджет ширины). */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.3; white-space: normal; }
table.data th, table.data td { border: 1px solid rgba(128, 128, 128, .5); padding: 5px 3px; text-align: center; vertical-align: middle; }
table.data th { font-weight: 600; }
input.answer { width: 100%; font: inherit; font-size: 17px; padding: 14px; border-radius: 14px; border: 1px solid var(--card-2); color: var(--fg); outline: none; }
input.answer:focus { border-color: var(--gold); }
/* Отчёт родителю (кураторам): правится прямо здесь, потом «Скопировать». */
textarea.report { width: 100%; min-height: 260px; font: inherit; font-size: 15px; line-height: 1.4; padding: 12px; border-radius: 14px; border: 1px solid var(--card-2); color: var(--fg); background: var(--card); resize: vertical; }
.ok { color: var(--green); } .bad { color: var(--red); }
/* Ссылка в строке текста («сменить», источник «Прикидки»): поле нажатия 44 px, строка не сдвигается. */
a.tap { display: inline-block; padding: 15px 8px; margin: -15px -8px; }

/* Реакции маскота на ответ. */
.result { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.react { height: 120px; width: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.react.pop { animation: pop .6s cubic-bezier(.2,1.6,.4,1); }
.react.nod { animation: nod .8s ease-in-out; }
@keyframes pop { 0% { transform: scale(.6) translateY(20px); opacity: 0; } 60% { transform: scale(1.08) translateY(-8px); opacity: 1; } 100% { transform: scale(1) translateY(0); } }
@keyframes nod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(5deg); } }
/* Включено «Уменьшить движение» — анимации сразу в конечном кадре; задержки (подсказка
   «Долго грузится?» через 8 с) работают как раньше. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Рейтинг и достижения. */
.place { width: 34px; text-align: center; font-weight: 800; font-size: 18px; }
.card.you { border: 2px solid var(--gold); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ach { border-radius: var(--radius); padding: 14px; }
.ach .ico { font-size: 30px; }
.ach b { display: block; margin-top: 6px; }
.ach.on { border: 2px solid var(--gold); }
.ach.off { opacity: .45; }
.empty { text-align: center; padding: 24px 8px; }
.empty img { height: 150px; }
/* Внутри Telegram «назад» — родная кнопка в шапке, своя не нужна. */
.in-tg button.back { display: none; }
/* Чипы-переключатели (настройки): рамка только у выбранного. */
.chips.pick .chip { border-color: transparent; }
.chips.pick .chip.on { border-color: var(--gold); font-weight: 700; }

/* Карта номеров */
.map { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cell { width: 44px; height: 44px; padding: 0; border-radius: 10px; background: var(--card-2); color: var(--fg); font-weight: 700; border: 1px solid transparent; }
.cell.ok { background: var(--green); color: #1A1400; } .cell.mid { background: var(--gold); color: #1A1400; } .cell.bad { background: var(--red); color: #1A1400; }
.cell.legend { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; }
.chip.on { background: var(--orange); color: #1A1400; }

/* Фон-«тетрадь»: клетка, поле, формулы «гелевой ручкой», мягкие пятна под стеклом. */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(143,180,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(143,180,255,.12) 1px, transparent 1px);
  background-size: 22px 22px; }
.bg .margin { position: absolute; top: 0; bottom: 0; left: 36px; width: 2px; background: rgba(239,107,104,.45); }
.bg .blob { position: absolute; border-radius: 50%; filter: blur(58px); }
.bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg text { font: 500 22px "Caveat", cursive; fill: var(--formula); opacity: .45; }
.bg text.big { font-size: 30px; }

/* Прикидка дня: единица рядом с полем, множитель «×1,3» крупно. */
.unit { color: var(--muted); white-space: nowrap; }
.k { font-size: 1.3em; font-weight: 700; color: var(--gold); white-space: nowrap; }
a.src { color: var(--blue); }

.hexagon { width: 100%; max-width: 380px; display: block; margin: 0 auto; }
.hx-grid { fill: none; stroke: var(--card-2); stroke-width: 1; }
.hx-shape { fill: var(--gold); fill-opacity: .35; stroke: var(--gold); stroke-width: 2; }
.hx-label { fill: var(--fg); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.chips.reasons { margin-top: 8px; gap: 6px; }
.chips.reasons .chip { font-size: 12px; padding: 4px 8px; border-radius: 10px; }
/* Сюжет ОГЭ №1–5: плитка на всю строку сетки номеров, сюжет под вопросом, итог по вопросам. */
.numbers .block-tile { grid-column: 1 / -1; color: var(--fg); padding: 14px 8px; }
.plot { margin-top: 12px; }
.plot-title { font-weight: 600; margin-bottom: 6px; }
.nav button.ok { background: rgba(46, 160, 67, .35); color: var(--fg); }
.nav button.bad { background: rgba(218, 54, 51, .35); color: var(--fg); }

/* Игра «Бюро» (пилот Т6.4): реплики с портретом-заглушкой, доска улик. */
.say { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.say .who { font-weight: 700; }
.ava { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #1A1400; background: var(--gold); object-fit: contain; }
img.ava { background: var(--card-2); }
.ava-expert { background: var(--red); }
.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0; }
.clue { min-height: 76px; padding: 8px 2px; color: var(--fg); background: var(--card-2); border: 2px dashed var(--muted); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; font-size: 11px; line-height: 1.2; font-weight: 500; }
.clue b { font-size: 18px; }
.clue.got { border: 2px solid var(--gold); background: rgba(232, 184, 74, .15); cursor: default; }
.board.mini { display: inline-grid; grid-template-columns: repeat(5, 14px); gap: 3px; margin: 0; vertical-align: middle; }
.board.mini i { display: block; height: 14px; border-radius: 3px; background: var(--card-2); border: 1px dashed var(--muted); }
.board.mini i.got { background: var(--gold); border-color: var(--gold); }
.ladder { display: flex; gap: 8px; }
.ladder button { padding: 10px 4px; font-size: 14px; }
.ladder button small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; opacity: .8; }
.coins { white-space: nowrap; }
/* Рамка «Бюро»: кабинет, лычки, лавка, портфель и анимации. Всё на CSS; при «Уменьшить
   движение» общее правило выше сводит анимации к конечному кадру. */
.appear { animation: appear .35s ease-out both; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }
.breathe { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.stripes { display: inline-flex; gap: 3px; vertical-align: middle; }
.stripes i { width: 8px; height: 14px; border-radius: 2px; background: var(--card-2); border: 1px solid var(--muted); }
.stripes i.got { background: var(--gold); border-color: var(--gold); }
.stripes i.flash { animation: flash .9s ease-out 2; }
@keyframes flash { 50% { transform: scaleY(1.5); box-shadow: 0 0 10px var(--gold); } }
.clue.land { animation: land .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes land { from { transform: translateY(-40px) scale(.6); opacity: 0; } }
.frost { position: fixed; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(transparent 40%, rgba(120, 180, 255, .45)); animation: fade .6s ease-out forwards; }
@keyframes fade { to { opacity: 0; } }
.stamp { display: inline-block; margin: 8px 0; padding: 6px 14px; border: 3px solid var(--red); border-radius: 8px; color: var(--red); font-weight: 800; letter-spacing: 2px; transform: rotate(-8deg); animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { transform: rotate(-8deg) scale(2.4); opacity: 0; } }
.thing { position: relative; display: inline-block; font-size: 30px; margin-right: 16px; }
.thing small { position: absolute; right: -10px; bottom: 0; font-size: 12px; font-weight: 700; }
.drop { animation: drop .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes drop { from { transform: translateY(-60px); opacity: 0; } }
.fly { position: fixed; z-index: 9; pointer-events: none; font-size: 22px; animation: fly .7s ease-in forwards; }
@keyframes fly { to { transform: translateY(-60px) scale(.5); opacity: 0; } }
.confetti { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.shelf > div { line-height: 44px; }
.buy { text-align: right; }
.buy button { width: auto; padding: 8px 14px; }
.buy small { display: block; margin-top: 2px; }
table.folio { width: 100%; border-collapse: collapse; font-size: 14px; }
table.folio th, table.folio td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--card-2); }