/* Тема blocky — блочный «майнкрафтовый» вид: пиксельный шрифт, квадратные
   углы, кнопки-блоки с фасками, земляной фон. Палитра своя целиком: цвета
   Telegram не наследуем, иначе блочный мир расползается.

   Шрифт Press Start 2P (OFL 1.1) вендорен в web/vendor/press-start-2p/ —
   у него есть кириллица, а пиксельная сетка держит стиль сама по себе.
   Он заметно крупнее обычных шрифтов при том же кегле, поэтому ниже
   много уменьшенных font-size. */

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/press-start-2p/press-start-2p-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/press-start-2p/press-start-2p-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+2212, U+2215;
}

[data-theme="blocky"] {
  --font: 'Press Start 2P', 'Courier New', monospace;
  --mono: 'Press Start 2P', ui-monospace, monospace;

  --radius: 0;
  --radius-sm: 0;

  --bg: #2f2013;        /* земля */
  --surface: #767676;   /* камень */
  --raised: #8e8e8e;
  --text: #ffffff;
  --muted: #e2dccd;
  --accent: #3fae2a;    /* трава */
  --accent-soft: #2c4d1e;
  --on-accent: #ffffff;
  --ok: #7ee459;
  --danger: #ff5a4e;

  --shadow-sm: 0 3px 0 rgba(0, 0, 0, .35);
  --shadow-accent: 0 4px 0 rgba(0, 0, 0, .4);
}

/* Земляной фон: пиксельная шахматка из двух слоёв. */
[data-theme="blocky"] body {
  font-size: 13px;
  line-height: 1.6;
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .16) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .16) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .04) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .10) 75%);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* Блоки: тёмный контур и фаска — свет сверху-слева, тень снизу-справа. */
[data-theme="blocky"] .btn,
[data-theme="blocky"] .key,
[data-theme="blocky"] .chip,
[data-theme="blocky"] .icon-btn,
[data-theme="blocky"] .seg-item[aria-selected="true"] {
  border: 3px solid #191210;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .28), inset -3px -3px 0 rgba(0, 0, 0, .32);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}
[data-theme="blocky"] .seg { border: 3px solid #191210; }

/* Нажатие: блок утапливается — фаска инвертируется. */
[data-theme="blocky"] .btn:active,
[data-theme="blocky"] .key:active,
[data-theme="blocky"] .chip:active,
[data-theme="blocky"] .icon-btn:active {
  transform: translateY(2px);
  box-shadow: inset -3px -3px 0 rgba(255, 255, 255, .16), inset 3px 3px 0 rgba(0, 0, 0, .38);
}

/* Главная кнопка — травяной блок: зелёная «шапка», земля снизу. */
[data-theme="blocky"] .btn-primary,
[data-theme="blocky"] .key-submit {
  background: linear-gradient(180deg, #57c53a 0%, #57c53a 26%, #8a5a2b 26%, #74491f 100%);
  color: #fff;
}
[data-theme="blocky"] .key:active { background-color: var(--raised); }
[data-theme="blocky"] .key-submit:active,
[data-theme="blocky"] .btn-primary:active {
  background: linear-gradient(180deg, #4cb132 0%, #4cb132 26%, #7c5026 26%, #68411c 100%);
}

/* Кнопка «67» — золотой блок. */
[data-theme="blocky"] .key-67 {
  background: #f2c136;
  color: #4a3505;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .4);
}
[data-theme="blocky"] .key-67:active { background: #ddad27; }

[data-theme="blocky"] .chip[aria-selected="true"] { border-color: #d8ff9e; }

/* --- размеры под пиксельный шрифт -------------------------------------- */

[data-theme="blocky"] .logo { font-size: 24px; letter-spacing: 0; line-height: 1.4; }
[data-theme="blocky"] .tagline { font-size: 10px; }
[data-theme="blocky"] .home-sample { font-size: clamp(22px, 7.7vw, 35px); }
[data-theme="blocky"] .version { font-size: 9px; }

[data-theme="blocky"] .btn { font-size: 12px; }
[data-theme="blocky"] .btn-big { font-size: 14px; }
[data-theme="blocky"] .btn-sm { font-size: 10px; }
[data-theme="blocky"] .bar h2 { font-size: 14px; }
[data-theme="blocky"] .icon-btn { font-size: 15px; }
[data-theme="blocky"] .label { font-size: 9px; letter-spacing: .08em; }
[data-theme="blocky"] .seg-item { font-size: 10px; padding: 12px 6px; }
[data-theme="blocky"] .seg-sm .seg-item { font-size: 9px; padding: 8px 6px; }
[data-theme="blocky"] .chip b { font-size: 11px; }
[data-theme="blocky"] .chip small { font-size: 9px; }

[data-theme="blocky"] .counter { font-size: 9px; }
[data-theme="blocky"] .clock { font-size: 14px; min-width: 58px; }
[data-theme="blocky"] .progress { height: 8px; }
[data-theme="blocky"] .progress,
[data-theme="blocky"] .progress i { border-radius: 0; }
[data-theme="blocky"] .task { font-size: clamp(29px, 9.9vw, 46px); }
[data-theme="blocky"] .answer { font-size: clamp(24px, 8.8vw, 37px); color: #ffe27a; }
[data-theme="blocky"] .key { font-size: 18px; }
[data-theme="blocky"] .key-del { font-size: 15px; }
[data-theme="blocky"] .key-submit { font-size: 11px; }
[data-theme="blocky"] .key-67 { font-size: 16px; }

[data-theme="blocky"] .kpi b { font-size: 14px; }
[data-theme="blocky"] .kpi small { font-size: 8px; }
[data-theme="blocky"] .review-title { font-size: 14px; }
[data-theme="blocky"] .review-meta { font-size: 10px; }
[data-theme="blocky"] .review .expr { font-size: 14px; }
[data-theme="blocky"] .review .mark { font-size: 14px; }
[data-theme="blocky"] .review .ms { font-size: 12px; }

[data-theme="blocky"] .block h3 { font-size: 11px; }
[data-theme="blocky"] .stats-body .empty,
[data-theme="blocky"] .history .empty { font-size: 10px; }
[data-theme="blocky"] .chart .peak,
[data-theme="blocky"] .chart .axis { font-size: 8px; }
[data-theme="blocky"] .axis-label { font-size: 8px; }
[data-theme="blocky"] .chart-tip { font-size: 9px; }
[data-theme="blocky"] .bar-row { font-size: 10px; }
[data-theme="blocky"] .bar-row .val { font-size: 9px; }
[data-theme="blocky"] .history .when { font-size: 10px; }
[data-theme="blocky"] .history .what { font-size: 9px; }
[data-theme="blocky"] .history .score b { font-size: 12px; }
[data-theme="blocky"] .history .score small { font-size: 9px; }

[data-theme="blocky"] .toggle b { font-size: 11px; }
[data-theme="blocky"] .toggle small { font-size: 9px; }
[data-theme="blocky"] .toast { font-size: 10px; }
[data-theme="blocky"] input[type="checkbox"] { accent-color: var(--accent); }

/* Салют: «67» с жёстким пиксельным контуром. */
[data-theme="blocky"] .spin67 { text-shadow: 4px 4px 0 rgba(0, 0, 0, .55); color: #ffd23f; }