/* article.css — стили для страниц-статей в стиле z1 */

.article-breadcrumbs{
  margin: 0 0 10px;
  font-size: 14px;
}

.meta{
  margin: 0 0 16px;
  font-size: 16px;
  opacity: .9;
}

.article-card{
  background:#fdfdfd;
  border:2px solid #ccc;
  border-radius:20px;
  padding:20px 20px;
  margin:0 0 16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  box-sizing:border-box;
}

html.theme-night .article-card,
body.theme-night .article-card{
  background:#444;
  border-color:#555;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}
/* Заголовки без WellwaitFree */
.riddle-title{
  font-family: 'Lato', sans-serif;
}

/* Блог: в шапке WellwaitFree */
.page-blog .riddle-title{
  font-family: 'WellwaitFree', cursive;
}

.article-h1{
  margin: 0 0 14px;
  font-family: 'Lato', sans-serif;
  font-size: 38px;
  text-align: center;
}

/* ШАПКА статьи (любая статья): тема и блог = как "домой/аватар" из zagadka.css */
.riddle-panel .theme-toggle-btn{
  width: 100px;
  height: 100px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: block;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.riddle-panel .theme-toggle-btn:hover,
.riddle-panel .theme-toggle-btn:focus{
  transform: scale(1.15);
}

/* блог-иконка — как "домой" */
.riddle-panel .riddle-blog-btn img{
  width: 100px;
  height: 100px;
  display: block;
  transition: transform 0.2s ease;
}
.riddle-panel .riddle-blog-btn img:hover{
  transform: scale(1.15);
}

/* перечёркнутая биоплазма — декоративная иконка тишины */
.riddle-panel .riddle-silence-icon{
  width: 100px;
  height: 100px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
  pointer-events: auto;
}

/* БЕЙДЖ уведомлений — копия из bioplazma-timer.css, но только в шапке статьи */
.riddle-panel .avatar-wrap{
  position: relative;
  display: inline-block; /* чтобы кружок “привязался” к размеру аватара */
}

.riddle-panel .avatar-wrap .notif-badge{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%); /* база как в bioplazma-timer.css */
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;

  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;

  box-shadow: 0 0 0 2px #fff;
  display: none;
  pointer-events: auto;
  cursor: pointer;
}

/* как в zagadka.css: бейдж ближе к кругу именно в правой части шапки */
.riddle-panel__right .avatar-wrap .notif-badge{
  transform: translate(25%, -25%);
}

.riddle-panel .avatar-wrap .notif-badge.show{
  display: inline-block;
}

@media (max-width: 375px){
  .riddle-panel .avatar-wrap .notif-badge{
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 12px;
  }
}
@media (max-width: 320px){
  .riddle-panel .avatar-wrap .notif-badge{
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
  }
}

/* ===== мобила — как в zagadka.css ===== */
@media (min-width: 481px) and (max-width: 768px){
  .riddle-panel .theme-toggle-btn{ width:72px; height:72px; }
  .riddle-panel .riddle-blog-btn img{ width:72px; height:72px; }
  .riddle-panel .riddle-silence-icon{ width:72px; height:72px; }
}

@media (min-width: 376px) and (max-width: 480px){
  .riddle-panel .theme-toggle-btn{ width:64px; height:64px; }
  .riddle-panel .riddle-blog-btn img{ width:64px; height:64px; }
  .riddle-panel .riddle-silence-icon{ width:64px; height:64px; }
}

@media (max-width: 375px){
  .riddle-panel .theme-toggle-btn{ width:56px; height:56px; }
  .riddle-panel .riddle-blog-btn img{ width:56px; height:56px; }
  .riddle-panel .riddle-silence-icon{ width:56px; height:56px; }
}

@media (max-width: 360px){
  .riddle-panel .theme-toggle-btn{ width:48px; height:48px; }
  .riddle-panel .riddle-blog-btn img{ width:48px; height:48px; }
  .riddle-panel .riddle-silence-icon{ width:48px; height:48px; }
}

@media (max-width: 320px){
  .riddle-panel .theme-toggle-btn{ width:44px; height:44px; }
  .riddle-panel .riddle-blog-btn img{ width:44px; height:44px; }
  .riddle-panel .riddle-silence-icon{ width:44px; height:44px; }

  /* на 320 отключаем hover-увеличение */
  .riddle-panel .theme-toggle-btn:hover{ transform:none; }
  .riddle-panel .riddle-blog-btn img:hover{ transform:none; }
}

.article-card h2,
.article-card h3{
  font-family: 'Lato', sans-serif;
  margin: 0 0 10px;
}

/* Ссылки в статье выглядят как текст (без синего/подчёркивания) */
.article-card a:not(.btn):not(.article-cta-btn):not(.src-icon){
  color: inherit;
  text-decoration: none;
}
.article-card a:not(.btn):not(.article-cta-btn):not(.src-icon):hover{
  text-decoration: underline;
}

.pp{
  opacity: .75;
  margin: 0 0 12px;
}

.quote{
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 4px solid #0ea5e9;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
}

html.theme-night .quote,
body.theme-night .quote{
  background: rgba(0,0,0,.25);
}

.src-icon{
  display:inline-block;
  margin-left: 2px;
  text-decoration:none;
  font-size:18px;
  opacity:.85;
  vertical-align:baseline;
}
.src-icon:hover{ opacity:1; }

.btn{
  display:inline-block;
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:2px solid #ccc;
  background:#fdfdfd;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  text-decoration:none;
}
html.theme-night .btn,
body.theme-night .btn{
  background:#444;
  border-color:#555;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}

/* Скан-бокс */
.scan-box{
  border:2px solid #ccc;
  border-radius:14px;
  overflow:hidden;
  background:#f3f4f6;
}
html.theme-night .scan-box,
body.theme-night .scan-box{ background:#333; border-color:#555; }
.scan-box img{ display:block; width:100%; height:auto; }
figure{ margin:12px 0; }
figcaption{ opacity:.75; }

.article-map{
  margin:16px 0;
}

.article-map img{
  display:block;
  width:100%;
  max-width:840px;
  height:auto;
  margin:0 auto;
  border-radius:14px;
}

.article-map figcaption{
  margin-top:8px;
  text-align:center;
}

/* превью задачи 600x425 (по центру, но сжимается на мобиле) */
.riddle-preview{
  max-width: 600px;
  margin: 12px auto 0; /* вниз 0: дальше управляет article-cta */
}

/* CTA-кнопка (красная, 1 строка) + подпись "Перейти к задаче" */
.article-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;         /* одинаковый отступ: надпись ↔ кнопка */
  margin-top: 10px;  /* одинаковый отступ: картинка ↔ надпись */
}

.article-cta-label{
  margin: 0;
  text-align: center;
  font-size: 16px;   /* как текст статьи */
  font-weight: 700;  /* жирный */
  opacity: 1;
}

.article-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 600px;
  min-height: 55px;
  padding: 0 18px;
  box-sizing: border-box;

  border-radius: 16px;
  border: 1px solid transparent;

  background: #DC2626;
  color: #fff;
  text-decoration: none;

  font-family: 'WellwaitFree', cursive;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.article-cta-btn:hover{ transform: scale(1.06); }
.article-cta-btn:active{ transform: scale(1.0); }
.article-cta-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,197,94,.35);
}
/* ===== ЛЕВОЕ ВЫЕЗЖАЮЩЕЕ МЕНЮ ===== */

.side-tab{
  position: fixed;
  left: 0;                /* на краю меню/экрана */
  top: 50%;
  transform: translate(0, -50%);
  z-index: 2100;

  width: 36px;
  height: 52px;
  border: 0;
  border-radius: 0 12px 12px 0;

  background: #111;
  color: #fff;
  font-size: 18px;
  line-height: 52px;
  text-align: center;

  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .22s ease;
}

html.theme-night .side-tab,
body.theme-night .side-tab{
  background: #0f172a;
}

.side-backdrop[hidden]{ display:none; }
.side-backdrop{
  position: fixed;
  inset: 0;
  z-index: 2050;
  background: rgba(0,0,0,.35);
}

.side-menu{
  position: fixed;
  top: 0;
  left: -320px;
  z-index: 2090;

  width: 320px;
  height: 100%;
  overflow: auto;

  box-sizing: border-box;

  padding: 16px 14px;
  background:#fdfdfd;
  border-right:2px solid #ccc;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  transition: left .22s ease;
}

html.theme-night .side-menu,
body.theme-night .side-menu{
  background:#444;
  border-color:#555;
}

body.menu-open .side-menu{ left: 0; }

/* Меню открыто — ☰ переезжает вместе с панелью */
body.menu-open .side-tab{
  transform: translate(320px, -50%);
}

.side-nav{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.side-link{
  display: block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 2px solid #ccc;
  background: transparent;
  text-decoration: none;
  color: inherit;
}

.side-link:hover{
  transform: scale(1.02);
}

html.theme-night .side-link,
body.theme-night .side-link{ border-color:#555; }

@media (max-width: 480px){
  .side-menu{ width: 86vw; left: -86vw; }
  body.menu-open .side-tab{ transform: translate(86vw, -50%); }

  .article-h1{ font-size: 26px; margin-bottom: 12px; }
  .article-cta{ justify-content: stretch; }
  .article-cta-btn{ min-height: 48px; font-size: 16px; }

  /* тема в шапке: как в задаче */
  .riddle-panel #themeToggle,
  .riddle-panel .theme-toggle-btn{ width:64px; height:64px; }
}

@media (max-width: 375px){
  .riddle-panel #themeToggle,
  .riddle-panel .theme-toggle-btn{ width:56px; height:56px; }
}

@media (max-width: 360px){
  .article-h1{ font-size: 22px; }
}

@media (max-width: 320px){
  .article-h1{ font-size: 20px; }

  .riddle-panel #themeToggle,
  .riddle-panel .theme-toggle-btn{ width:52px; height:52px; }
}