/*
 * Оформление «Блочный остров» (прототип, ветка ui-skin).
 *
 * Интерфейс — предмет этого мира, а не веб-страница поверх него:
 *  - панели — тёмное «стекло лагуны» с едва заметной блочной сеткой: яркий
 *    остров и пиксельные иконки блоков на нём читаются сильнее, чем на беже;
 *  - кнопки — блоки: плотная заливка, тёмный контур, светлая верхняя и тёмная
 *    нижняя грань, при нажатии «проседают»;
 *  - ячейки — утопленные квадраты, выбранная — белая рамка, как в жанре;
 *  - цвета берутся из мира: трава — подтвердить, солнце — главное и монеты,
 *    кирпич — отмена/удаление, лагуна — всё остальное;
 *  - заголовки — короткие, прописные, с пиксельной тенью; объяснения уходят
 *    из постоянного вида в подсказки.
 * Подключается последним, ничего не меняет в раскладке — только материал.
 */

/* Пиксельный шрифт заголовков и кнопок — Tiny5 (SIL OFL 1.1, lib/fonts/tiny5/OFL.txt): из проверенных
   пиксельных у него правильная кириллица и компактная ширина (Pixelify Sans искажал «Б», «д», «ы»).
   Лежит в игре: внешние запросы на площадке запрещены CSP. Основной текст — системный ради читаемости. */
@font-face {
  font-family: 'Tiny5'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../lib/fonts/tiny5/tiny5-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tiny5'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../lib/fonts/tiny5/tiny5-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;
}

:root {
  --sk-glass: rgba(13, 49, 59, 0.9);
  --sk-glass-solid: #12404b;
  --sk-glass-2: #18505c;
  --sk-slot: #1d5763;
  --sk-slot-hi: #27707e;
  --sk-edge: rgba(0, 0, 0, 0.5);
  --sk-line: rgba(176, 236, 238, 0.22);
  --sk-ink: #f6fbf4;
  --sk-ink-dim: #b4d9d6;
  --sk-sel: #ffffff;
  --sk-grass: #5bb53c;
  --sk-grass-d: #2f7a22;
  --sk-sun: #ffcb3d;
  --sk-sun-d: #b98310;
  --sk-sun-ink: #3d2a04;
  --sk-brick: #d8553b;
  --sk-brick-d: #8e2b1d;
  --sk-grid: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 18px 18px,
             linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 18px 18px;
  --sk-bevel: inset 0 2px 0 rgba(255, 255, 255, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.28);
  --sk-bevel-low: inset 0 2px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  --sk-drop: 0 3px 0 rgba(0, 0, 0, 0.35);
  --sk-display: 'Tiny5', var(--font);
}

/* ------------------------------------------------------------ общие материалы */

/* Панель-стекло: верхний HUD, пояс, окна */
.overlay-screen :is(.hud-chip, .hud-top .btn-icon, .orbit-exit, .build-dock, .catalog-sheet, .island-card, .fly-card, .orbit-tools .btn-icon) {
  background: var(--sk-grid), var(--sk-glass);
  color: var(--sk-ink);
  border: 2px solid var(--sk-edge);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--sk-line), var(--sk-drop);
  text-shadow: none;
}
.overlay-screen .hud-top .btn-icon:disabled { opacity: 0.45; }
.overlay-screen .hud-top .btn-icon { box-shadow: inset 0 0 0 1px var(--sk-line), var(--sk-bevel-low), var(--sk-drop); }
.overlay-screen .hud-top .btn-icon:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--sk-line), var(--sk-drop); }

/* Название острова — табличкой, как вывеска */
.overlay-screen .hud-top .hud-chip-island {
  font-weight: 900; letter-spacing: 0.02em; color: var(--sk-ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
/* Отметка записи — тише: это служебный статус, а не элемент игры */
.overlay-screen .hud-top .save-chip { background: rgba(13, 49, 59, 0.62); color: var(--sk-ink-dim); font-weight: 600; box-shadow: none; }
.overlay-screen .hud-top .save-chip.is-failed { background: var(--sk-brick); color: #fff; border-color: var(--sk-brick-d); }

/* Всплывающие подсказки и вспышка имени блока */
.overlay-screen :is(.hint-bar, .lock-prompt, .hot-name) {
  background: rgba(10, 36, 44, 0.86); color: var(--sk-ink); border: 2px solid var(--sk-edge);
  border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sk-line); font-weight: 700;
}

/* ------------------------------------------------------------ пояс */

.overlay-screen .build-dock { background: var(--sk-grid), var(--sk-glass); padding: 6px; }
.overlay-screen .hot-slot {
  background: var(--sk-slot); border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 4px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.22), inset 0 -2px 0 rgba(255, 255, 255, 0.08);
}
.overlay-screen .hot-slot.is-active {
  background: var(--sk-slot-hi); border: 3px solid var(--sk-sel);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 255, 255, 0.35);
}
.overlay-screen .hot-empty, .overlay-screen .hot-num { color: var(--sk-ink-dim); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); font-weight: 800; }
.overlay-screen .workshop-more-slots { background: var(--sk-slot); border: 2px solid rgba(0, 0, 0, 0.45); color: var(--sk-ink); border-radius: 4px; }

/* Кнопка «Блоки» — солнечный блок: главное действие стройки */
.overlay-screen .dock-catalog {
  background: var(--sk-sun); color: var(--sk-sun-ink); border: 2px solid rgba(0, 0, 0, 0.55); border-radius: 4px;
  box-shadow: var(--sk-bevel); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
}
.overlay-screen .dock-catalog:active { transform: translateY(2px); box-shadow: var(--sk-bevel-low); }
.overlay-screen .dock-catalog .catalog-key { background: rgba(0, 0, 0, 0.16); color: var(--sk-sun-ink); border-color: rgba(0, 0, 0, 0.2); }

/* Сенсорные кнопки справа и джойстик — то же стекло */
.overlay-screen :is(.btn-side, .btn-round) {
  background: var(--sk-grid), rgba(13, 49, 59, 0.72); color: var(--sk-ink);
  border: 2px solid var(--sk-edge); box-shadow: inset 0 0 0 1px var(--sk-line), var(--sk-drop);
}
.overlay-screen .btn-tool.is-active { background: var(--sk-sun); color: var(--sk-sun-ink); border-color: rgba(0, 0, 0, 0.55); box-shadow: var(--sk-bevel); }
.overlay-screen .key-cap { background: rgba(255, 255, 255, 0.92); color: #12404b; }
.overlay-screen .key-row { background: rgba(10, 36, 44, 0.7); color: var(--sk-ink); }

/* ------------------------------------------------------------ каталог блоков */

.overlay-screen .catalog { background: rgba(6, 24, 30, 0.35); }
.overlay-screen .catalog-sheet { background: var(--sk-grid), var(--sk-glass); border: 3px solid var(--sk-edge); border-radius: 8px; color: var(--sk-ink); }
.overlay-screen .sheet-tab { color: var(--sk-ink-dim); border-radius: 4px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.overlay-screen .sheet-tab.is-active { background: transparent; color: var(--sk-ink); border-color: transparent; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 0 -3px 0 var(--sk-sun); }
.overlay-screen .catalog-head .btn-icon { background: var(--sk-glass-2); color: var(--sk-ink); border: 2px solid var(--sk-edge); border-radius: 4px; box-shadow: var(--sk-bevel-low); }
.overlay-screen .catalog-head .btn-close { background: var(--sk-brick); border-color: rgba(0, 0, 0, 0.55); box-shadow: var(--sk-bevel); color: #fff; }
.overlay-screen .catalog-search { background: rgba(0, 0, 0, 0.28); border: 2px solid rgba(0, 0, 0, 0.4); color: var(--sk-ink-dim); border-radius: 4px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25); }
.overlay-screen .catalog-search-input { color: var(--sk-ink); }
.overlay-screen .catalog-search-input::placeholder { color: var(--sk-ink-dim); }
.overlay-screen .btn-search-clear { color: var(--sk-ink); }
.overlay-screen .catalog-result-count { color: var(--sk-ink-dim); }

/* Разделы слева: значок — главное, подпись — мелко */
.overlay-screen .catalog-rail .rail-tab {
  background: var(--sk-slot); color: var(--sk-ink-dim); border: 2px solid rgba(0, 0, 0, 0.4); border-radius: 4px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.18); font-weight: 800;
}
.overlay-screen .catalog-rail .rail-tab.is-active { background: var(--sk-slot-hi); color: var(--sk-ink); border: 3px solid var(--sk-sel); box-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }

.overlay-screen :is(.catalog-grid, .plot-pane) { background: rgba(0, 0, 0, 0.18); border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 6px; scrollbar-color: #5aa3ad transparent; }
.overlay-screen .catalog-rail { scrollbar-color: #5aa3ad transparent; }
.overlay-screen :is(.block-swatch, .floor-btn) {
  background: var(--sk-slot); border: 2px solid rgba(0, 0, 0, 0.42); border-radius: 4px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(255, 255, 255, 0.07);
}
@media (hover: hover) { .overlay-screen :is(.block-swatch, .floor-btn):hover { background: var(--sk-slot-hi); } }
.overlay-screen :is(.block-swatch.is-active, .floor-btn.is-active) { background: var(--sk-slot-hi); border: 3px solid var(--sk-sel); box-shadow: 0 0 12px rgba(255, 255, 255, 0.3); }

.overlay-screen .catalog-footer { border-color: rgba(176, 236, 238, 0.18); }
.overlay-screen .pick-icon { background: var(--sk-slot); border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 4px; }
.overlay-screen :is(.pick-name, .catalog-empty, .option-label, .options-label, .option-title) { color: var(--sk-ink); }
.overlay-screen :is(.pick-slot, .option-note, .plot-note) { color: var(--sk-ink-dim); }
.overlay-screen .catalog-pick.is-empty .pick-name { color: var(--sk-ink-dim); }
.overlay-screen :is(.catalog-collection, .catalog-material, .catalog-variants) {
  background: rgba(0, 0, 0, 0.28); color: var(--sk-ink); border: 2px solid rgba(0, 0, 0, 0.4); border-radius: 4px; font-weight: 700;
}
.overlay-screen :is(.catalog-collection, .catalog-material, .catalog-variants) option { background: var(--sk-glass-solid); color: var(--sk-ink); }
/* «К стройке» — трава: подтвердить и вернуться в мир */
.overlay-screen .btn-catalog-done {
  background: var(--sk-grass); color: #fff; border: 2px solid rgba(0, 0, 0, 0.55); border-radius: 4px;
  box-shadow: var(--sk-bevel); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em;
}
.overlay-screen .catalog-favorite { background: var(--sk-glass-2); color: var(--sk-sun); border: 2px solid rgba(0, 0, 0, 0.5); border-radius: 4px; box-shadow: var(--sk-bevel-low); }
.overlay-screen .catalog-favorite[aria-pressed="true"] { background: var(--sk-sun); color: var(--sk-sun-ink); box-shadow: var(--sk-bevel); }
.overlay-screen :is(.btn-catalog-done, .catalog-favorite):active { transform: translateY(2px); }

/* Параметры участка в том же окне */
.overlay-screen .options-group { background: rgba(0, 0, 0, 0.16); border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 6px; }
.overlay-screen .opt-btn { background: var(--sk-slot); color: var(--sk-ink); border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 4px; box-shadow: var(--sk-bevel-low); }
.overlay-screen .opt-btn.is-active { background: var(--sk-sun); color: var(--sk-sun-ink); box-shadow: var(--sk-bevel); }

/* ------------------------------------------------------------ меню острова */

.overlay-screen .island-card { padding-top: 14px; }
.overlay-screen .island-card .window-title, .overlay-screen .window-title {
  color: var(--sk-ink); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  border-color: rgba(176, 236, 238, 0.2);
}
.overlay-screen .menu-item {
  background: var(--sk-slot); color: var(--sk-ink); border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 4px;
  box-shadow: var(--sk-bevel-low); font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
@media (hover: hover) { .overlay-screen .menu-item:hover { background: var(--sk-slot-hi); } }
.overlay-screen .menu-item:active { transform: translateY(2px); }
.overlay-screen .menu-item svg { color: var(--sk-sun); }
.overlay-screen .menu-resume { background: var(--sk-grass); color: #fff; box-shadow: var(--sk-bevel); }
.overlay-screen .menu-resume svg { color: #fff; }
.overlay-screen .menu-key { background: rgba(0, 0, 0, 0.25); color: var(--sk-ink); border: 0; }

/* ------------------------------------------------------------ подсказка острова */

.life-hud { background: var(--sk-grid), rgba(13, 49, 59, 0.84); border: 2px solid var(--sk-edge); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sk-line), var(--sk-drop); }
.life-hud .btn { background: var(--sk-slot); color: var(--sk-ink); border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 4px; box-shadow: var(--sk-bevel-low); }
.life-hud .life-next { background: var(--sk-sun); color: var(--sk-sun-ink); box-shadow: var(--sk-bevel); }
.life-hud .life-cancel { background: var(--sk-brick); color: #fff; }
.life-hud .life-hub { background: var(--sk-glass-2); }
.life-hud-detail { color: var(--sk-ink-dim); }

/* Предупреждение перерыва — в той же гамме */
.break-countdown span { background: var(--sk-grid), var(--sk-glass-solid); color: var(--sk-ink); border: 3px solid var(--sk-sun); text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.ui-tip { background: rgba(10, 36, 44, 0.94); border: 2px solid var(--sk-edge); border-radius: 4px; }

/* ------------------------------------------------------------ окно «Остров / Мастерская / Каталог / Коллекция» */

.construction-window {
  --hub-paper: #0f3a44; --hub-card: #1a5260; --hub-ink: var(--sk-ink); --hub-muted: var(--sk-ink-dim);
  --hub-line: rgba(0, 0, 0, 0.4); --hub-sea: var(--sk-grass); --hub-deep: var(--sk-grass-d); --hub-sky: #23697a; --hub-gold: var(--sk-sun);
  --work-line: rgba(176, 236, 238, 0.2); --work-ink: var(--sk-ink);
  background: var(--sk-grid), var(--hub-paper); border: 3px solid var(--sk-edge); border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--sk-line), 0 18px 60px rgba(0, 0, 0, 0.45);
}
.construction-window .life-head { background: var(--sk-grid), #0c2f37; border-bottom: 2px solid var(--sk-edge); }
.construction-window .life-head h2 { color: var(--sk-ink); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.construction-window .btn {
  background: var(--hub-card); color: var(--sk-ink); border: 2px solid var(--sk-edge); border-radius: 4px;
  box-shadow: var(--sk-bevel-low); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); font-weight: 800;
}
.construction-window .btn-primary { background: var(--sk-grass); color: #fff; border-color: var(--sk-edge); box-shadow: var(--sk-bevel); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
@media (hover: hover) {
  .construction-window .btn:hover:not(:disabled) { border-color: var(--sk-edge); background: #22677a; }
  .construction-window .btn-primary:hover:not(:disabled) { background: #67c447; border-color: var(--sk-edge); }
}
.construction-window .btn:disabled { opacity: 0.5; }
.construction-window .life-close { background: var(--sk-brick); color: #fff; border: 2px solid var(--sk-edge); box-shadow: var(--sk-bevel); border-radius: 4px; }
.construction-wallet { color: var(--sk-sun-ink); background: var(--sk-sun); border: 2px solid var(--sk-edge); border-radius: 4px; box-shadow: var(--sk-bevel-low); }
.construction-level { background: var(--hub-card); border: 2px solid var(--sk-edge); color: var(--sk-ink); border-radius: 4px; }
.construction-level-fill { background: var(--sk-sun); }
.construction-level::after { background: rgba(0, 0, 0, 0.35); }

/* Разделы слева — как разделы каталога блоков */
.construction-window .life-tabs { background: rgba(0, 0, 0, 0.22); border-right: 2px solid var(--sk-edge); }
.construction-window .life-tab { color: var(--sk-ink-dim); border-radius: 4px; }
.construction-window .life-tab.is-active { background: var(--sk-slot-hi); border: 3px solid var(--sk-sel); color: var(--sk-ink); box-shadow: 0 0 12px rgba(255, 255, 255, 0.22); }
.construction-window .life-tab.is-active::after { display: none; }
.construction-window .life-body { scrollbar-color: #5aa3ad transparent; }
.construction-window .life-status { background: var(--sk-sun); color: var(--sk-sun-ink); border-top: 2px solid var(--sk-edge); }

/* Служебная строка статуса — приглушённо, не на первом плане */
.construction-connection { background: rgba(0, 0, 0, 0.2); border-bottom: 2px solid var(--sk-edge); color: var(--sk-ink-dim); }
.construction-mode { color: var(--sk-ink-dim); }
.construction-connection-summary::before { background: var(--sk-grass); }
.construction-connection.needs-attention { background: var(--sk-sun); color: var(--sk-sun-ink); }
.construction-connection.needs-attention .construction-mode { color: var(--sk-sun-ink); }

/* Карточки, подборки, поля */
.construction-card, .construction-window .life-card { background: var(--hub-card); border: 2px solid var(--sk-edge); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sk-line), var(--sk-drop); color: var(--sk-ink); }
.construction-studio-card:first-child { background: #1d5a68; border-color: var(--sk-edge); }
.construction-card-visual, .construction-studio-preview { background: rgba(0, 0, 0, 0.2); }
.construction-picture, .construction-picture .construction-thumbnail { background: #cfe7ea; border-radius: 4px; }
.construction-thumbnail { border-radius: 4px; }
.construction-card-title { color: var(--sk-ink); }
.construction-meta, .construction-author, .construction-rating, .construction-eyebrow, .construction-preview-label { color: var(--sk-ink-dim); }
.construction-price { background: var(--sk-sun); color: var(--sk-sun-ink); border-radius: 4px; }
.construction-price.is-free { background: var(--sk-grass); color: #fff; }
.construction-badge { background: rgba(0, 0, 0, 0.25); color: var(--sk-ink); border-radius: 4px; }
.construction-window .construction-card-action { background: var(--sk-slot-hi); color: var(--sk-ink); border-color: var(--sk-edge); box-shadow: var(--sk-bevel-low); }
.construction-window .construction-card-action.btn-primary { background: var(--sk-grass); color: #fff; box-shadow: var(--sk-bevel); }
.construction-window .construction-favorite { background: rgba(13, 49, 59, 0.85); color: var(--sk-sun); border-color: var(--sk-edge); }
.construction-window .construction-favorite[aria-pressed=true] { background: var(--sk-sun); color: var(--sk-sun-ink); }
.construction-window .construction-filter-toggle, .construction-active-filters .btn { background: var(--hub-card); }
.construction-window .construction-category { border-radius: 4px; }
.construction-window .construction-category[aria-pressed=true] { background: var(--sk-sun); border-color: var(--sk-edge); color: var(--sk-sun-ink); box-shadow: var(--sk-bevel); }
.construction-window .construction-chip { border-radius: 4px; background: var(--hub-card); }
.construction-window .construction-chip[aria-pressed=true] { color: var(--sk-ink); background: var(--sk-slot-hi); border: 3px solid var(--sk-sel); box-shadow: none; }
.construction-filter-options, .construction-rewards, .construction-island-intro { background: rgba(0, 0, 0, 0.18); border: 2px solid var(--sk-edge); border-radius: 6px; }
.construction-field input, .construction-field select, .construction-field textarea { background: rgba(0, 0, 0, 0.28); color: var(--sk-ink); border: 2px solid var(--sk-edge); border-radius: 4px; }
.construction-field select option { background: var(--sk-glass-solid); }
.construction-search { background: rgba(0, 0, 0, 0.28); border: 2px solid var(--sk-edge); border-radius: 4px; color: var(--sk-ink-dim); }
.construction-search input { color: var(--sk-ink); }
.construction-window .construction-subnav .btn { color: var(--sk-ink-dim); background: transparent; box-shadow: none; text-transform: uppercase; letter-spacing: 0.03em; }
.construction-window .construction-subnav .is-active { background: transparent; color: var(--sk-ink); border-color: transparent; box-shadow: inset 0 -3px 0 var(--sk-sun); }
.construction-empty-art { background: var(--sk-slot); border-radius: 6px; box-shadow: var(--sk-bevel); transform: none; }
.construction-detail-price { color: var(--sk-sun); }
.construction-owned { color: #8fe07a; }
.construction-stars .btn { color: var(--sk-ink-dim); background: var(--hub-card); }
.construction-stars .btn.is-filled { color: var(--sk-sun-ink); background: var(--sk-sun); }
.construction-window .construction-guest { background: var(--sk-sun); border: 3px solid var(--sk-edge); border-radius: 6px; color: var(--sk-sun-ink); box-shadow: var(--sk-bevel); }
.construction-window .construction-guest h3, .construction-window .construction-guest p { color: var(--sk-sun-ink); }
.construction-window :is(h3, .life-confirm-text) { color: var(--sk-ink); }
.construction-window :is(.life-help, .life-empty) { color: var(--sk-ink-dim); }
.construction-window :is(.life-creative-theme, .life-places) { border-color: var(--sk-edge); background: rgba(0, 0, 0, 0.15); border-radius: 6px; }
.construction-window .life-creative-goal { border-color: rgba(176, 236, 238, 0.15); }

/* ------------------------------------------------------------ настройки */

[data-screen="settings"] { --text: var(--sk-ink); --text-dim: var(--sk-ink-dim); --panel-line: var(--sk-edge); background: rgba(6, 24, 30, 0.72); color: var(--sk-ink); }
[data-screen="settings"] .settings-panel { background: var(--sk-grid), var(--sk-glass-solid); border: 3px solid var(--sk-edge); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--sk-line), 0 14px 40px rgba(0, 0, 0, 0.4); }
[data-screen="settings"] .screen-title { color: var(--sk-ink); text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
[data-screen="settings"] :is(.options-label, .task-name, .controls-hint) { color: var(--sk-ink); text-shadow: none; }
[data-screen="settings"] :is(.opt-btn, .key-btn, .btn) { background: var(--sk-slot); color: var(--sk-ink); border: 2px solid var(--sk-edge); border-radius: 4px; box-shadow: var(--sk-bevel-low); font-weight: 800; }
[data-screen="settings"] :is(.opt-btn.is-active, .btn-primary) { background: var(--sk-grass); color: #fff; border-color: var(--sk-edge); box-shadow: var(--sk-bevel); }

/* Всплывающее сообщение окна */
.life-toast { background: var(--sk-grid), var(--sk-glass-solid); color: var(--sk-ink); border: 2px solid var(--sk-edge); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sk-line), var(--sk-drop); font-weight: 700; }

/* ------------------------------------------------------------ пиксельная типографика */

/* Tiny5 рисуется по сетке в 10 px: чётко на 10/20/30, читается от 15 px, мельче
   кириллица ломается. Поэтому пиксельным шрифтом — только заголовки, вкладки и
   кнопки действий (≥ 16 px); подписи, цены, подсказки остаются обычным шрифтом */
.overlay-screen :is(.hud-chip-island, .sheet-tab, .dock-catalog, .btn-catalog-done, .menu-item, .window-title, .opt-btn, .orbit-exit),
.construction-window :is(.life-head h2, .btn, h3),
.life-toast, .break-countdown span,
[data-screen="settings"] :is(.screen-title, .opt-btn, .btn) {
  font-family: var(--sk-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.03em;
}
.overlay-screen :is(.hud-chip-island, .sheet-tab, .dock-catalog, .btn-catalog-done, .menu-item, .opt-btn, .orbit-exit),
.construction-window .btn, [data-screen="settings"] :is(.opt-btn, .btn), .life-toast { font-size: 16px; }
.overlay-screen .window-title, .construction-window .life-head h2, .construction-window h3 { font-size: 20px; letter-spacing: 0.05em; }
[data-screen="settings"] .screen-title, .break-countdown span { font-size: 30px; letter-spacing: 0.06em; }
.overlay-screen .island-card .menu-resume { font-size: 20px; }
/* Карточки в сетке каталога построек: подписи кнопок короче, чтобы влезали */
.construction-window .construction-card .btn { font-size: 16px; }
@media (max-width: 560px) { .construction-window .life-head h2 { font-size: 20px; } }

/* Экран загрузки — тем же шрифтом, что и игра */
.loader-brand, .loader-title { font-family: var(--sk-display); font-weight: 400; font-synthesis: none; letter-spacing: 0.03em; }
/* Полоса — утопленная ячейка лагуны с солнечной заливкой сегментами, как шкала уровня в окне */
.loader-frame { border: 3px solid #12404b; border-radius: 3px; padding: 3px; background: var(--sk-slot); box-shadow: inset 0 0 0 1px var(--sk-line), 0 4px 0 rgba(18, 64, 75, 0.3); }
.loader-bar { height: 14px; padding: 0; background: rgba(0, 0, 0, 0.35); border-radius: 0; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25); }
.loader-bar > i { background: repeating-linear-gradient(90deg, var(--sk-sun) 0 10px, #f0b52a 10px 12px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.loader-title { color: #173f4c; }

/* Окна-сообщения: сбой запуска и покупка полёта — то же стекло, что у меню острова */
.fatal { background: linear-gradient(180deg, #2f6f9e 0%, #0f3a44 100%); }
.fatal-card.window {
  background: var(--sk-grid), var(--sk-glass); color: var(--sk-ink); border: 3px solid var(--sk-edge); border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--sk-line), 0 14px 40px rgba(0, 0, 0, 0.4);
}
.fatal-card .window-title, .fly-title {
  align-self: center; text-align: center; color: var(--sk-ink); text-transform: uppercase; border: 0; padding: 0;
  font-family: var(--sk-display); font-weight: 400; font-synthesis: none; font-size: 20px; letter-spacing: 0.05em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
.fatal-text, .overlay-screen .fly-text { color: var(--sk-ink-dim); }
.overlay-screen .fly-icon { color: var(--sk-sun); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4)); }
:is(.fatal-card, .overlay-screen .fly-card) .btn {
  border: 2px solid rgba(0, 0, 0, 0.55); border-radius: 4px; font-family: var(--sk-display); font-weight: 400; font-synthesis: none;
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
}
:is(.fatal-card, .overlay-screen .fly-card) .btn:active { transform: translateY(2px); }
.fatal-card .btn-primary { background: var(--sk-grass); color: #fff; box-shadow: var(--sk-bevel); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
/* Покупка — солнце: главное действие и деньги; цена внутри кнопки обычным шрифтом, чтобы цифры читались */
.overlay-screen .fly-card .btn-primary { background: var(--sk-sun); color: var(--sk-sun-ink); box-shadow: var(--sk-bevel); text-shadow: none; }
.overlay-screen .fly-card .btn-price { font-family: var(--font); font-weight: 800; text-transform: none; letter-spacing: 0; }
.overlay-screen .fly-card .btn-ghost { background: var(--sk-slot); color: var(--sk-ink); box-shadow: var(--sk-bevel-low); }

/* Отметка записи видна только пока показана (ConstructionPanel.updateAccount): скрытая не занимает места —
   на телефоне под неё уходил целый ряд верхней панели */
.overlay-screen .hud-top .save-chip:not(.show) { display: none !important; }

/* Подборки и материалы — в строке поиска (BuildScreen.filterSlot) */
/* Поиск главнее подборки: в низком ландшафте он сжимался до «Поис» */
.catalog-toolbar .catalog-search { flex: 1 1 180px; min-width: 132px; }
.catalog-filter-slot { flex: 0 1 220px; min-width: 0; display: flex; }
.catalog-filter-slot .catalog-filters { flex: 1; min-width: 0; grid-column: auto; }
.catalog-filter-slot select { min-height: 44px; }
.catalog-result-count[hidden] { display: none !important; }
/* Телефон: поиск и подборка — одной строкой, сетке блоков остаётся на ряд больше */
@media (max-width: 560px) {
  .catalog-toolbar .catalog-search { flex: 1 1 140px; min-width: 112px; }
  .catalog-filter-slot { flex: 0 1 148px; }
  /* Вариант материала обрезался стрелкой списка («Доски, ду…») */
  .overlay-screen .catalog-variants { width: 118px; max-width: 34%; font-size: 13px; }
}
@media (max-height: 300px) and (orientation: landscape) { .catalog-filter-slot { display: none; } }

/* ------------------------------------------------------------ меню острова — плитки */

/* Сетка плиток вместо одиннадцати одинаковых строк: значок над подписью, как
   в игровом меню паузы. «Продолжить» — на всю ширину */
.overlay-screen .island-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; width: min(440px, 100%); }
.overlay-screen .island-card > .window-title, .overlay-screen .island-card > .menu-resume { grid-column: 1 / -1; }
.overlay-screen .island-card .menu-item:not(.menu-resume) {
  flex-direction: column; justify-content: center; align-items: center; text-align: center;
  gap: 6px; padding: 10px 6px; min-height: 76px; font-size: 16px; line-height: 1.15; position: relative;
}
.overlay-screen .island-card .menu-item:not(.menu-resume) svg { width: 28px; height: 28px; }
.overlay-screen .island-card .menu-resume { justify-content: center; min-height: 56px; font-size: 20px; }
.overlay-screen .island-card .menu-tail { position: absolute; top: 6px; right: 6px; }
/* На сенсоре «Вид со стороны» и «Полёт» уже есть кнопками на экране — в меню не дублируем */
.overlay-screen.is-touch .island-card :is(.menu-overview, .menu-fly) { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .overlay-screen .island-card { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(640px, 100%); }
  .overlay-screen .island-card .menu-item:not(.menu-resume) { min-height: 64px; font-size: 15px; }
}

/* ------------------------------------------------------------ телефон: верх в один ряд */

@media (max-width: 560px) {
  /* Название острова на телефоне не нужно постоянно — его место отдаём миру */
  .overlay-screen .hud-top .hud-chip-island { display: none; }
  .overlay-screen .hud-top::after { display: none; }
  .overlay-screen .hud-top .workshop-undo { margin-left: 0; }
  .overlay-screen .hud-top .workshop-overview { margin-left: auto; }
  /* Подсказка острова — компактной строкой; «Мои постройки» дублирует кнопку слева сверху */
  .life-hud:not(.is-placement):not(.is-visiting) { padding: 4px 8px; min-height: 0; }
  .life-hud:not(.is-placement):not(.is-visiting) .life-hub { display: none; }
  .life-hud:not(.is-placement):not(.is-visiting) .life-hud-title { font-size: 12px; }
}

/* ------------------------------------------------------------ окно: служебная строка тише */

.construction-connection:not(.needs-attention):not([open]) .construction-connection-summary { min-height: 30px; padding-top: 3px; padding-bottom: 3px; font-size: 11px; }
.construction-connection:not(.needs-attention):not([open]) { opacity: 0.8; }

@media (max-width: 560px) {
  /* Нижние разделы окна на телефоне: пиксельные подписи шире — чуть мельче, без разрядки */
  .construction-window .life-tab { font-size: 13px; letter-spacing: 0; }
}
@media (max-width: 379px) {
  /* 360 px: заголовок окна уходил в три строки рядом с уровнем, монетами и крестиком */
  .construction-window .life-head h2 { font-size: 16px; letter-spacing: 0.02em; }
  /* Строка статуса — в одну линию, стрелка не переносится под текст */
  .construction-connection-summary { flex-wrap: nowrap; }
  .construction-connection-summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .construction-mode { margin-left: auto; white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* Колонка разделов 90 px: «Мастерская» пиксельным шрифтом в неё не влезала */
  .construction-window .life-tab { font-family: var(--font); font-weight: 800; font-size: 12px; letter-spacing: 0; }
}
/* Подпись карточки проекта («31 блок · Награда…») была почти не видна на стекле */
.construction-window .life-card-meta { color: var(--sk-ink-dim); }