/* Палитра повторяет «Зажги квартал»: четыре вкладки должны читаться как один
   продукт. У каждой игры при этом свой опознавательный цвет — не декор, а
   подпись: один и тот же --a-bg/--a-ink красит и активную вкладку здесь,
   и «бейдж» с тем же значком в шапке самой игры (masthead в её вёрстке). */
:root{color-scheme:light;--paper:#f4f2e9;--ink:#284b43;--muted:#566353;--line:#cbd2c1;--gold:#ffda83;
  font-family:"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font-size:14px}
.widget{display:flex;flex-direction:column;height:100%;height:100dvh;
  padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
/* Единый переключатель-сегмент вместо отдельных кнопок-таблеток: одна общая
   рамка, вкладки без зазоров и без собственных бортов — активная получает
   заливку цветом игры (владелец выбрал этот вариант в сравнении раскладок).
   Крупнее прежнего и с явной нижней полосой на активной — решение владельца
   24.09.2026: «непонятно, какая вкладка открыта» было главной жалобой на
   все более поздние варианты, крупный явный индикатор снимает её при любом
   визуальном языке сверху (нейтральный слой ниже, дизайны только красят). */
.tabs{flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:4px;
  border:1px solid var(--line);border-radius:16px;background:#fafbf5}
.tabs button{flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 4px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  border:none;border-radius:12px;background:transparent;cursor:pointer;
  white-space:nowrap;overflow:hidden;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 -3px 0 transparent;transition:background .12s,color .12s,box-shadow .12s,transform .12s}
.tabs button .tab-icon{flex:0 0 auto;font-size:23px;line-height:1;display:inline-flex}
.tabs button .tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tabs button:hover:not(.is-active){background:#e6ecda}
.tabs button.is-active{font-weight:800;color:var(--a-ink,#284b43);background:var(--a-bg,#e3e9d5);
  box-shadow:inset 0 -3px 0 var(--a-ring,#788d71);transform:translateY(-1px)}
.tabs button:focus-visible{outline:3px solid #a85635;outline-offset:2px}
/* Именные цвета — та же пара переменных, что задаёт masthead каждой игры. */
.tabs button[data-game="bricks"]{--a-bg:#f3e1d6;--a-ink:#8a4a30;--a-ring:#d9a98c}
.tabs button[data-game="light-the-block"]{--a-bg:#f7e7ae;--a-ink:#7a5a12;--a-ring:#d7bd80}
.tabs button[data-game="filword"]{--a-bg:#dbe8ea;--a-ink:#2c5f6e;--a-ring:#9dc0c6}
.tabs button[data-game="sort"]{--a-bg:#e8dcef;--a-ink:#5b3d7a;--a-ring:#c3a1c8}
/* Серия дней — единственная «метрика» на виду. Живёт справа и не ворует ширину у вкладок. */
.streak{flex:0 0 auto;display:none;align-items:center;gap:4px;padding:6px 9px;border-radius:20px;
  background:#f6e8c4;border:1px solid #d7bd80;color:#775023;font-size:12px;font-weight:700;white-space:nowrap}
.streak.is-on{display:inline-flex}
.stage{position:relative;flex:1;min-height:0;margin-top:6px}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px;background:var(--paper)}
.stage iframe[hidden]{display:none}
.fallback{padding:20px;text-align:center;color:var(--muted)}
/* Четыре вкладки плюс значок серии на 360 px: без этого подпись самой длинной
   вкладки обрезалась многоточием (проверено замером). Пятая игра потребует
   либо ещё более коротких подписей, либо прокрутки строки вкладок. */
@media(max-width:420px){.tabs button{font-size:11px;min-height:50px;padding:6px 2px;gap:2px}.tabs button .tab-icon{font-size:20px}
  .streak{padding:6px 6px;font-size:11px}}
@media(max-width:340px){.tabs button .tab-label{display:none}.tabs button .tab-icon{font-size:24px}}

/* ---------- А/Б-тест дизайна на живых площадках, с 24.09.2026, решение владельца ---------- */
/* Три визуальных языка поверх одной и той же разметки — назначаются один раз на
   посетителя в shell.js (Peremena.bucket) и читаются так же внутри каждой игры
   (bricks.css/filword.css/sort.css), поэтому вкладки и открытая игра всегда
   в одном дизайне. Закат/Аркада/Мел — второй раунд теста, выбранный владельцем
   для раскатки на сайты; неон/бумага/стекло были первым раундом и в тесте
   больше не участвуют. */
:root[data-design="sunset"] body{background:linear-gradient(165deg,#3a1c4d 0%,#7a2e52 52%,#e0703c 100%);color:#fff3e6}
:root[data-design="sunset"] .tabs{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);backdrop-filter:blur(8px)}
:root[data-design="sunset"] .tabs button{color:#f0d9c8}
:root[data-design="sunset"] .tabs button.is-active{box-shadow:inset 0 -3px 0 var(--a-ring,#ffb37a),0 0 18px -4px var(--a-ring,#ffb37a)}
:root[data-design="sunset"] .streak{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#ffd9a6}
:root[data-design="sunset"] .stage iframe{background:#3a1c4d}

:root[data-design="arcade"] body{background:#fff6e0;color:#211a12}
:root[data-design="arcade"] .tabs{background:#fffaf0;border:3px solid #211a12;border-radius:18px;box-shadow:4px 4px 0 #211a12}
:root[data-design="arcade"] .tabs button{color:#6b5a3a;font-weight:800}
:root[data-design="arcade"] .tabs button.is-active{box-shadow:inset 0 0 0 2.5px #211a12;border-radius:12px}
:root[data-design="arcade"] .streak{background:#ffda83;border:2px solid #211a12;color:#211a12;border-radius:14px}
:root[data-design="arcade"] .stage iframe{background:#fff6e0}

:root[data-design="chalk"] body{background:#faf7f0;color:#3a372f}
:root[data-design="chalk"] .tabs{background:#fff;border-color:#e6e0d3}
:root[data-design="chalk"] .tabs button{color:#9b9483}
:root[data-design="chalk"] .tabs button.is-active{box-shadow:inset 0 -3px 0 var(--a-ring,#b6ac95);background:var(--a-bg,#eceada)}
:root[data-design="chalk"] .streak{background:#efe9d8;border-color:#e0d7bc;color:#6b6250}
:root[data-design="chalk"] .stage iframe{background:#faf7f0}