/* Сайт «Привал» — каркас и общие блоки. Подключается после brand.css. Чистый CSS, без фреймворков. */

body { background: var(--night); min-height: 100vh; font-size: 16px; line-height: 1.55; }
a { color: inherit; }
.container { width: min(1180px, 100% - 32px); margin: 0 auto; }

/* Фон-атмосфера: свечение костра снизу и ночь сверху */
.atmo { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 108%, #ff5a3c26, transparent 60%),
    radial-gradient(ellipse 45% 35% at 8% -6%, #2f6bff1c, transparent 60%),
    radial-gradient(ellipse 35% 30% at 96% 2%, #9a3fd614, transparent 60%), var(--night); }
.atmo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Шапка и меню ---------- */
.site-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); background: #0f0b0acc; border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { text-decoration: none; display: flex; align-items: center; }
.brand .lockup { --cap: 20px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font: 600 15px var(--f-text); color: var(--ink-2); transition: background .2s, color .2s; }
.nav a:hover { background: #ffffff0d; color: #fff; }
.nav a[aria-current="page"] { background: #ffffff12; color: #fff; box-shadow: inset 0 -2px 0 var(--fire); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; text-decoration: none; font: 700 15px var(--f-text); border: 0; cursor: pointer; }
.btn-fire { background: var(--grad); color: #fff; box-shadow: 0 0 22px #ff2d3c44; }
.btn-ghost { background: #ffffff0d; color: var(--ink); box-shadow: inset 0 0 0 1px #ffffff1c; }
.btn-ghost:hover { background: #ffffff16; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 0; background: #ffffff0d; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger span:nth-child(1) { top: 15px } .burger span:nth-child(2) { top: 21px } .burger span:nth-child(3) { top: 27px }
.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.menu-open .burger span:nth-child(2) { opacity: 0 }
.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
.mobile-menu { display: none; }

@media (max-width: 860px) {
  .nav, .site-header .btn-fire { display: none; }
  .burger { display: block; }
  .mobile-menu { display: block; position: fixed; inset: 72px 0 auto; z-index: 19; background: #120d0bf2; border-bottom: 1px solid var(--line);
    padding: 12px 16px 22px; transform: translateY(-110%); transition: transform .3s; }
  .menu-open .mobile-menu { transform: none; }
  .mobile-menu a { display: flex; justify-content: space-between; padding: 15px 6px; border-bottom: 1px solid var(--line); text-decoration: none; font: 700 19px var(--f-display); }
  .mobile-menu a[aria-current="page"] { color: var(--light); }
  .mobile-menu .btn { margin-top: 18px; width: 100%; justify-content: center; }
}

/* ---------- Заголовок раздела ---------- */
.page-hero { padding: 64px 0 28px; }
.eyebrow { font: 700 13px var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--light); }
.page-hero h1 { font: 800 clamp(34px, 5vw, 56px)/1.05 var(--f-display); margin: 12px 0 12px; letter-spacing: .01em; }
.page-hero p { color: var(--muted); max-width: 640px; margin: 0; font-size: 17px; }
.section { padding: 34px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head h2 { font: 800 clamp(22px, 3vw, 28px) var(--f-display); margin: 0; }
.section-head a { color: var(--light); font-weight: 700; text-decoration: none; }

/* ---------- Фильтры-«чипсы» ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 22px; }
.chip { padding: 8px 16px; border-radius: 999px; border: 0; background: #ffffff0b; color: var(--ink-2); font: 600 14px var(--f-text); cursor: pointer; box-shadow: inset 0 0 0 1px #ffffff14; }
.chip:hover { background: #ffffff14; }
.chip.on { background: #ffffff1a; color: #fff; box-shadow: inset 0 0 0 1px #ffffff2a, inset 0 -2px 0 var(--fire); }
.chip .n { color: var(--muted); margin-left: 6px; font-weight: 500; }

/* ---------- Общая карточка записи: оборудование, игры, клипы, расписание ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.entry { position: relative; display: flex; flex-direction: column; background: var(--coal); border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; text-decoration: none; }
.entry:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #3a2620, 0 16px 40px -18px #ff5a3c66; }
.entry .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.entry .title { font: 800 17px/1.25 var(--f-display); color: #fff; }
.entry .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.entry .more { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--light); font-size: 14px; }
.tag-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--f-text); background: #ffffff10; color: var(--ink-2); }
.tag-pill.fire { background: #ff2d3c22; color: #ff8a92; }
.tag-pill.path { background: #2f6bff26; color: #9fb6ff; }
.tag-pill.mix { background: #9a3fd626; color: #d3a6ff; }
.tag-pill.example { background: transparent; box-shadow: inset 0 0 0 1px #ffffff26; color: var(--muted); font-weight: 600; }

/* Строчный вид (оборудование на телефоне и в плотных списках) */
.entry.row { flex-direction: row; align-items: center; }
.entry.row .ico { margin: 14px 0 14px 16px; }
.ico { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff12; }
.ico svg { width: 28px; height: 28px; }

/* Обложка / превью (16:9 или 3:4) с запасным фоном, если картинки нет */
.cover { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--a, #3a1420), var(--b, #14214a)); }
.cover.tall { aspect-ratio: 3 / 4; }
.cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, #00000080, transparent 60%); }
.cover .initials { font: 800 44px var(--f-display); color: #ffffff2e; letter-spacing: .04em; }
.cover .play { position: absolute; z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: #0f0b0acc; display: grid; place-items: center; box-shadow: 0 0 0 1px #ffffff2a, 0 0 30px #ff2d3c55; }
.cover .play::before { content: ''; margin-left: 4px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.cover .dur { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: #000a; font: 600 12px var(--f-mono); }
.cover .badge { position: absolute; z-index: 1; left: 10px; top: 10px; }

/* Оценка «костры» 1–5 */
.fires { display: inline-flex; gap: 2px; }
.fires i { width: 12px; height: 16px; background: var(--grad); -webkit-mask: var(--flame) center / contain no-repeat; mask: var(--flame) center / contain no-repeat; }
.fires i.off { background: #ffffff22; }
:root { --flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M60 6 C74 34 102 52 102 98 C102 130 83 154 60 154 C37 154 18 130 18 98 C18 72 32 58 39 40 C44 58 50 66 56 70 C51 48 53 26 60 6 Z'/%3E%3C/svg%3E"); }

/* Пустое состояние */
.empty { padding: 40px 20px; text-align: center; color: var(--muted); border-radius: 18px; box-shadow: inset 0 0 0 1.5px #ffffff14; border: 0; background: repeating-linear-gradient(135deg, #ffffff04 0 10px, transparent 10px 20px); }

/* Подсказка для владельца: где данные пока не заполнены */
.todo { color: #ffcf8a; background: #ffb27a14; border-radius: 6px; padding: 0 6px; font-weight: 600; }

/* ---------- Подвал ---------- */
.site-footer { margin-top: 60px; border-top: 1px solid var(--line); padding: 34px 0 44px; color: var(--muted); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.site-footer .tag { --tag: 15px; width: 320px; text-align: left; }
.site-footer .tag span { text-align: left; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.social { display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 12px; background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff12; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.social:hover { background: #ffffff14; color: #fff; }
.social svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .page-hero { padding: 40px 0 16px; }
  .entry.row-sm { flex-direction: row; align-items: center; }
  .entry.row-sm .ico { margin: 14px 0 14px 14px; }
}

/* Подвал: логотип по левому краю; статус в шапке страницы переносится на узком экране */
.site-footer .lockup { align-self: flex-start; }
@media (max-width: 600px) {
  .site-footer .tag { width: 100%; }
  .status { white-space: normal; border-radius: 16px; }
}
.btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) {
  .mobile-menu { background: #120d0b; box-shadow: 0 30px 60px -20px #000; }
  .mobile-menu a.btn { display: inline-flex; justify-content: center; border-bottom: 0; padding: 14px 20px; font: 700 16px var(--f-text); color: #fff; }
}

/* Подвал: логотип и девиз друг под другом */
.footer-brand { display: flex; flex-direction: column; gap: 10px; }

/* Скромная ссылка «вход» в подвале */
.social.login-link { opacity: .6; }
.cover .dur:empty { display: none; }
/* Обложка-картинка (превью клипа с Twitch, обложка игры) */
.cover.has-image { background-size: cover; background-position: center; }

/* Окно с плеером клипа поверх страницы */
.player-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: #000c; }
.player-box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 0 0 2px var(--mix), 0 30px 80px -20px #9a3fd688; }
.player-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #0f0b0acc; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.player-close:hover { background: var(--fire); }