/*
* Общая рамка интерактивных игр VIZ.ARTUM: шапка, кнопки, плашки, иконки.
* Подключается в каждой игре ПЕРЕД её собственными стилями:
*
*
*
* Внутри игры свои фон, палитра и картинки, а шапка, кнопки и плашки — отсюда
* и в игре не переопределяются. Правила — в INTERACTIVE-STANDARD.md в корне проекта.
*/
:root{
--viz-bg:#1a2332;
--viz-gold:#d4a574;
--viz-cream:#f4e4c1;
--viz-blue:#7a9ec7;
--viz-text:#e0e8f0;
--viz-sans:'Montserrat',sans-serif;
--viz-serif:'Cormorant Garamond',serif;
--viz-bar-h:64px;
--viz-bar-max:1200px; /* игра с более широкой сеткой может задать свою ширину шапки */
}
[hidden]{display:none!important}
/* Кнопки и поля наследуют шрифт страницы — иначе браузер ставит Arial 13 px. */
button,input,select,textarea{font:inherit;color:inherit}
/* У Montserrat на сайте нет начертания 700 — жирный везде полужирный. */
b,strong{font-weight:600}
/* У Cormorant цифры по умолчанию «старого стиля»: 0 похож на «о».
* Прописные цифры включаются всей странице и наследуются. Сокращённая запись
* font: … у элемента их сбрасывает — в стилях игр пишем font-family / font-size /
* font-weight отдельно (или добавляем после font: строку font-feature-settings:'lnum' 1). */
html{font-feature-settings:'lnum' 1}
/* ===== Шапка =====
*
*
* Ко всем играм
*
…часы, кнопка игры — по желанию…
*
*
* Куда ведёт стрелка и как она подписана, решает /interactive/back.js.
*/
.viz-bar{position:relative;z-index:30;box-sizing:border-box;display:flex;align-items:center;gap:20px;width:100%;max-width:var(--viz-bar-max);height:var(--viz-bar-h);margin:0 auto;padding:0 24px;font-family:var(--viz-sans);background:transparent}
.viz-bar__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 0;color:var(--viz-blue);text-decoration:none;font-size:14px;font-weight:400;letter-spacing:.03em;line-height:1.2;white-space:nowrap;transition:color .3s ease}
.viz-bar__back .viz-ico{transition:transform .3s ease}
.viz-bar__back:hover,.viz-bar__back:focus-visible{color:var(--viz-gold)}
.viz-bar__back:hover .viz-ico{transform:translateX(-4px)}
.viz-bar__extra{display:flex;align-items:center;gap:14px;margin-left:auto;color:var(--viz-blue);font-size:13px;letter-spacing:.03em}
.viz-bar__extra button{min-height:44px;padding:0;border:0;background:none;color:var(--viz-blue);font-size:13px;letter-spacing:.03em;cursor:pointer;transition:color .3s ease}
.viz-bar__extra button:hover,.viz-bar__extra button:focus-visible{color:var(--viz-gold)}
.viz-bar__logo{display:inline-flex;align-items:center;flex:none;min-width:44px;min-height:44px;justify-content:center;margin-left:auto}
.viz-bar__extra+.viz-bar__logo{margin-left:6px}
.viz-bar__extra[hidden]+.viz-bar__logo,.viz-bar__extra:empty+.viz-bar__logo{margin-left:auto}
/* Счётчик рядом с подписью кнопки в шапке: */
.viz-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:10px;background:rgba(212,165,116,.18);color:var(--viz-cream);font-size:12px;font-weight:600;letter-spacing:0;line-height:1}
.viz-bar__logo img{display:block;height:40px;width:auto;opacity:.6;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));transition:opacity .3s ease,transform .3s ease,filter .3s ease}
.viz-bar__logo:hover img,.viz-bar__logo:focus-visible img{opacity:1;transform:scale(1.05);filter:drop-shadow(0 4px 12px rgba(212,165,116,.3))}
@media(max-width:600px){
:root{--viz-bar-h:56px}
.viz-bar{gap:12px;padding:0 16px}
.viz-bar__back{font-size:13px}
.viz-bar__extra{gap:10px;font-size:12px}
.viz-bar__extra button{font-size:12px}
.viz-bar__logo img{height:32px}
}
/* ===== Кнопки =====
* .viz-btn — обычная: прозрачная «пилюля» с золотой обводкой, как на сайте;
* .viz-btn.viz-btn--primary — главная: золотая заливка, одна на экран;
* .viz-btn.viz-btn--quiet — тихая: текстовая ссылка без рамки.
* Работает и на
*