/* miniapp/ui.css — общее для экранов приложения (не лендинга): отклик на нажатие, заготовка экрана
   при загрузке, перенос строк в заголовках и единый вид карточек.
   Подключать ПОСЛЕ стилей страницы — правила ниже заменяют часть стилей страниц. */

/* Карточки — как на главном и в «Настройках»: белые с тонкой рамкой, внутри — светло-серые поля и
   кнопки (владелец 06.10: «вдруг где-то старый дизайн» — серые «стеклянные» карточки остались на
   большинстве экранов). Выбранные кнопки (.on, .sel) не трогаем — у них свой тёмный вид. */
:root { --ink: #191919; --card: #fff; --tile: #F4F3F3; --frame: #e4e2dc; --ink-rgb: 25,25,25; --on-ink: #fff; --seg-on: #fff; }

/* Части браузера — тоже в цветах сервиса, а не системные синие: выделение текста (тёплый оранжевый,
   как «+ Доход»), курсор ввода, галочки и переключатели форм */
::selection { background: rgba(251,138,18,.28); color: inherit; }
input, textarea { caret-color: #fb8a12; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--ink, #191919); }
/* Полоса прокрутки страницы — своя, тонкая, цвета чернил (на компьютере; на телефоне браузер рисует свою поверх) */
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--bg, #fff); }
html::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb, 25,25,25), .22); background-clip: padding-box; border: 3px solid transparent; border-radius: 12px; }
html::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--ink-rgb, 25,25,25), .38); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: rgba(var(--ink-rgb, 25,25,25), .3) transparent; } }

/* Тёмная тема — по выбору в «Настройках» или как на телефоне (theme.js ставит <html data-theme>; владелец 06.10). Экраны пишут цвета через краски
   (--ink, --card, --tile, rgba(var(--ink-rgb),…), --on-ink — текст на тёмной кнопке, --soft-bg — дорожки
   и подложки); ui.css подключён последним — эти значения перекрывают светлые из страниц.
   Документы на печать (счёт, акт, договор) остаются белыми — их правила краски не используют.
   Тёплый графит в тон бренду, а не холодный синий: как бумага в темноте, а не экран терминала */
[data-theme=dark] {
  color-scheme: dark;
  --bg: #141311; --card: #1d1c1a; --tile: #2a2825; --frame: #302e2a; --panel: #232220; --line: #34322e;
  --ink: #f1eee8; --ink-rgb: 241,238,232; --on-ink: #151413; --soft-bg: #2a2825; --seg-on: #3b3935;
  --mut: rgba(241,238,232,.64); --graphite: rgba(241,238,232,.72);
  --pos: #5fbf8a; --mint: #5fbf8a; --neg: #ef6b5e; --seal: #ef6b5e; --warn: #e3a24a; --amber: #e3a24a;
}
[data-theme=dark] :is(.block, .leak, .limit) { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 24px -14px rgba(0,0,0,.6); }
.block, .leak, .limit {
  background: var(--card);
  border: 1px solid var(--frame);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px -12px rgba(0,0,0,.14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.block :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
  background: var(--tile);
  border-color: transparent;
}
.block :is(input, select, textarea):focus { background: var(--card); border-color: var(--ink, #191919); }
.block :is(.ghost, .seg button, .pick, .mini, .opt, .sugg button, .file):not(.on):not(.sel):not(.danger) {
  background: var(--tile);
}
/* ссылки в тексте карточек — цветом текста с подчёркиванием, а не системно-синие */
.block a:not([class]) { color: var(--ink, #191919); text-decoration: underline; text-underline-offset: 2px; }

/* Нажатие видно сразу — иначе на телефоне непонятно, сработало ли касание.
   Прозрачность, а не сдвиг: кнопки игры стоят через transform, сдвиг их сбил бы. */
button:not(:disabled):active,
a[href]:active,
[role="button"]:active,
summary:active {
  opacity: .7;
}
@media (hover: hover) {
  button:not(:disabled):hover,
  [role="button"]:hover {
    opacity: .86;
  }
}
button:disabled { cursor: default; }

/* Заголовки без одинокого слова на последней строке, абзацы — без висячих коротких хвостов */
h1, h2, h3, .b-title { text-wrap: balance; }
p { text-wrap: pretty; }

/* Загрузка: вместо слова «ЗАГРУЗКА» — серые заготовки блоков, как на главном.
   Текст остаётся в разметке (font-size: 0) — программа чтения с экрана его прочитает. */
.load {
  font-size: 0 !important;
  color: transparent !important;
  text-align: left !important;
  padding: 8px 0 !important;
  letter-spacing: 0 !important;
}
.load::before,
.load::after {
  content: "";
  display: block;
  height: 120px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: #ECEAE5;
  animation: vk-skel 1.4s ease-in-out infinite;
}
.load::after { height: 260px; }
@keyframes vk-skel { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .load::before, .load::after { animation: none; }
}

/* Текст только для программ чтения с экрана: заголовок главного (сверху игра, видимый заголовок не нужен) */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Плашки-иконки в духе iOS (ui-icons.js): разделы главного, ряд под игрой, значки игры. Цвет — --t, размер — --s */
.ui-tile{display:grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.27);
  background:linear-gradient(180deg,color-mix(in srgb,var(--t) 78%,#fff) 0%,var(--t) 100%);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.12)}
.ui-tile svg{display:block;width:66%;height:66%}