/* шрифты */
  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.woff2') format('woff2'),
         url('../fonts/Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff2') format('woff2'),
         url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'WellwaitFree';
    src: url('../fonts/WellwaitFree-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  /* базовая типографика + темы */
  html, body{
    margin: 0;
    padding: 0;
  }
  body{
    font-family: 'Lato', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
  }
  /* поддерживаем оба варианта: класс может стоять и на body, и на html */
  body.theme-day, html.theme-day { background-color: #cce7ff; color: #000; }
  body.theme-night, html.theme-night { background-color: #888; color: #fff; }
  /* Ночная тема — как в комментариях */
  html.theme-night .riddle-image-wrapper,
  body.theme-night .riddle-image-wrapper{
    background:#444; border-color:#555; box-shadow:0 4px 12px rgba(0,0,0,.45);
  }
  html.theme-night .riddle-text,
  body.theme-night .riddle-text{
    background:#444; border-color:#555; box-shadow:0 4px 12px rgba(0,0,0,.45);
    border-top:none;
  }

/* внешний контейнер шапки с фоном и тенью на всю ширину */
.riddle-panel-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #cce7ff;
  transition: background-color 0.4s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
html.theme-night .riddle-panel-wrapper { background-color: #888; }

  /* внутренняя панель 900px по центру */
  .riddle-panel{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left . right"
      "center center center";
    align-items: center;
    column-gap: 16px;
    row-gap: 8px;

    padding: 8px 12px 10px;
    max-width: 900px;
    margin: 0 auto;
  }

  .riddle-panel__left{
    grid-area: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .riddle-panel__right{
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px; /* запас, чтобы hover 1.15 не лип */
  }

  .riddle-panel__center{
    grid-area: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-top: 4px; /* воздух между рядами */
  }

  .bioplasma{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
  }
  .bioplasma-icon{ width: 80px; height: 80px; object-fit: contain; }
  .bioplasma-count{
    font-weight: 700;
    font-family: 'WellwaitFree', cursive;
    font-size: 30px;
    line-height: 1;
  }

  /* небольшой внутренний запас под увеличение при hover (только для "домой") */
  .riddle-home-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }

  .riddle-home-btn img{
    width: 80px;
    height: 80px;
    display: block;
    transition: transform 0.2s ease;
  }
  .riddle-home-btn img:hover{ transform: scale(1.15); }

  /* аватар в шапке — поведение как у иконки "домой" */
  .riddle-panel__right .avatar{
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.2s ease;
    border: 3px solid black;
  }
  .riddle-panel__right .avatar-wrap:hover .avatar{
    transform: scale(1.15);
  }
    /* бейдж на аватаре: чуть ближе к кругу, не "улетает" наружу */
  .riddle-panel__right .avatar-wrap .notif-badge{
    transform: translate(25%, -25%);
  }

  /* контейнер контента */
  main {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 20px;
    background: #fff;                 /* день */
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  /* Ночная тема — тёмная колонна (стандарт) */
  html.theme-night main,
  body.theme-night main {
    background: #111;                 /* не слепит, контраст норм */
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }

.page-breadcrumbs{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.2;
  font-family: 'Lato', sans-serif;
  color: inherit;
}

  .logo-dark-box{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 18px 2px;
    background: #000;
    border-radius: 22px;
    line-height: 0;
  }

  /* заголовок */
.riddle-title {
    font-family: 'WellwaitFree', cursive;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 0 12px;
    line-height: 1.12;
    color:#FFEB3B;
    -webkit-text-stroke: 1px #000;
  }

/* contrast fix: жёлтый остаётся жёлтым, просто темнее (только DAY) */
html.theme-day .riddle-title,
body.theme-day .riddle-title{
  color:#FFEB3B;
}
  html.theme-night .riddle-image,
  body.theme-night .riddle-image {
    filter: grayscale(.6) brightness(.9) contrast(1.1);
    transition: filter .3s;
  }

  /* комментарии */
  .comments { margin-top: 60px; }

  .rating-stars{display:flex;gap:8px;}
  .rating-stars .star{
    width:50px;
    height:50px;
    background-size:contain;
    background-repeat:no-repeat;
    background-image:url('../images/bioplazma-0.webp'); /* пустая */
    filter:drop-shadow(0 0 4px gold) drop-shadow(0 0 2px orange);
    cursor:pointer;transition:transform .08s ease;
  }

  /* Дышат все звёзды, пустые и заполненные */
  .rating-stars .star {
    animation: poop-breathe 1.2s ease-in-out infinite alternate;
  }

  /* Заполненные — ярче и с сильнее свечением */
  .rating-stars .star.full {
    background-image: url('../images/bioplazma.webp');
    filter: drop-shadow(0 0 6px gold) drop-shadow(0 0 3px orange);
  }

  /* Наведение — усилить свечение и увеличить */
  .rating-stars .star:hover{
    transform:scale(1.15);
    animation: poop-breathe-strong .6s ease-in-out infinite alternate;
  }

  /* Короткий «поп» при клике */
  .rating-stars .star.pop{ animation: poop-pop .22s ease-out 1; }

  /* Ночная тема — чуть мощнее свечение */
  html.theme-night .rating-stars .star,
  body.theme-night .rating-stars .star{
    filter:drop-shadow(0 0 6px gold) drop-shadow(0 0 3px orange);
  }

  /* Анимации */
  @keyframes poop-breathe{
    0%   { transform:scale(1);   filter:drop-shadow(0 0 6px gold) drop-shadow(0 0 3px orange); }
    100% { transform:scale(1.08);filter:drop-shadow(0 0 14px gold) drop-shadow(0 0 8px orange); }
  }
  @keyframes poop-breathe-strong{
    0%   { transform:scale(1.05);filter:drop-shadow(0 0 10px gold) drop-shadow(0 0 6px orange); }
    100% { transform:scale(1.18);filter:drop-shadow(0 0 18px gold) drop-shadow(0 0 10px orange); }
  }
  @keyframes poop-pop{
    0%   { transform:scale(1); }
    60%  { transform:scale(1.28); }
    100% { transform:scale(1.06); }
  }

  /* Уважение к reduced motion */
  @media (prefers-reduced-motion: reduce){
    .rating-stars .star{ transition:none; animation:none !important; }
  }

  .rating-hint{
    opacity:1;
    font-size:18px;
    font-family: 'WellwaitFree', cursive;
  }

  /* Палец-указатель справа от звёзд */
  .rating-pointer{
    width:80px; height:80px;
    margin-left:10px;
    align-self:center;
    pointer-events:none;           /* не мешает клику по звёздам */
    transform-origin: 80% 50%;     /* точка качания ближе к пальцу */
    animation: finger-wobble 1.2s ease-in-out infinite alternate;
    z-index:1;
    filter:
      drop-shadow(-1px -1px 0 black)
      drop-shadow(1px -1px 0 black)
      drop-shadow(-1px 1px 0 black)
      drop-shadow(1px 1px 0 black);
  }

  /* Качание пальца */
  @keyframes finger-wobble{
    0%   { transform: rotate(-6deg); }
    100% { transform: rotate(8deg); }
  }

  /* Уважение к reduce motion */
  @media (prefers-reduced-motion: reduce){
    .rating-pointer{ animation: none; }
  }

  /* читаемый интервал между абзацами */
  .riddle-text p,
  .riddle-text-full p { margin: 0 0 1em; }
  /* Единый ритм между карточкой загадки и карточкой оценки */
  .riddle-text   { margin: 0 0 16px; }   /* вниз 16px */
  .riddle-rating, .riddle-box { margin: 16px 0 0; } 

  /* === Canonical riddle cards === */
  .riddle-image-wrapper{
    background:#fdfdfd;
    border:2px solid #ccc;
    border-radius:20px 20px 0 0;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    overflow:hidden;
    margin:0;
    width:100%;
    box-sizing:border-box;
  }
  .riddle-image{
    display:block;
    width:100%;
    height:auto;
    box-sizing:border-box;
    border:none;           /* рамка только у wrapper */
    border-radius:0;
  }

  .riddle-text{
    background:#fdfdfd;
    border:2px solid #ccc;
    border-top:none;
    border-radius:0 0 20px 20px;
    padding: 20px 20px 16px;
    margin:0 0 16px;       /* ритм вниз = 16px */
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    box-sizing:border-box;
  }
  .riddle-text p:last-child { margin-bottom: 0; }

  /* как .riddle-text, но с закрытым верхом (для отдельного текстового блока) */
  .riddle-text-full{
    background:#fdfdfd;
    border:2px solid #ccc;
    border-radius:20px;
    padding: 20px 20px 16px;
    margin:0 0 16px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    box-sizing:border-box;
  }

  .riddle-text-full h2,
  .riddle-text-full h3 { margin: 0 0 1em; }

  .riddle-text-full p:last-child { margin-bottom: 0; }

  .riddle-inline-figure{
    margin: 0 0 1em;
    text-align: center;
  }

  .riddle-inline-image{
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
  }

  .riddle-inline-caption{
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    opacity: 0.9;
  }

  html.theme-night .riddle-inline-caption,
  body.theme-night .riddle-inline-caption{
    opacity: 0.95;
  }

  .riddle-rating, .riddle-box{
    background:#fdfdfd;
    border:2px solid #ccc;
    border-radius:20px;
    padding:20px 20px;
    margin:16px 0 0;       /* ритм вверх = 16px */
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    width:100%;
    box-sizing:border-box;
  }

  /* Night theme */
  html.theme-night .riddle-image-wrapper,
  body.theme-night .riddle-image-wrapper,
  html.theme-night .riddle-text,
  body.theme-night .riddle-text,
  html.theme-night .riddle-text-full,
  body.theme-night .riddle-text-full,
  html.theme-night .riddle-rating, html.theme-night .riddle-box,
  body.theme-night .riddle-rating, body.theme-night .riddle-box{
    background:#444;
    border-color:#555;
    box-shadow:0 4px 12px rgba(0,0,0,.45);
  }

  .riddle-rating, .riddle-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:nowrap; /* держим в одну строку на 900px */
  }

  .rating-hint{
    white-space:nowrap; /* не переносить текст подсказки */
  }

  body.ready .riddle-extra { display: none; }

  /* кнопка (i) в правом НИЖНЕМ углу карточки текста */
  .riddle-text { position: relative; padding-right: 20px; }
  .i-btn{
    position: absolute; right: 12px; bottom: 12px;
    width: 50px; height: 50px;
    padding: 0; border: 0; background: none; cursor: pointer;
    transition: transform .15s ease;
  }
  .i-btn:hover{ transform: scale(1.15); }
  .i-btn img{ display:block; width:100%; height:100%; }

  /* фокус клавиатурой */
  .i-btn:focus-visible{
    outline: 3px solid limegreen;
    outline-offset: 3px;
    border-radius: 12px;
  }

  #answer-btn[data-state="show"] .rnav-icon { display: none; }

  /* ===================== ЕДИНЫЕ КНОПКИ ЗАГАДКИ ===================== */
/* рус: один стиль для .riddle-nav .rnav-btn, .answer-btn и .share-btn */
/* рус: размеры/отступы/шрифты унифицированы; ховеры и фокусы одинаковые */

:root{
  --btn-h: 55px;          /* фиксированная высота кнопки — меняй тут */
  --btn-w: 200px;         /* фиксированная ширина кнопки — меняй тут */
  --btn-icon: 50px;        /* размер иконки внутри кнопки — можно хоть 5px */
  --btn-radius: 16px;     /* скругление углов */
  --btn-font: 18px;       /* кегль шрифта на кнопке */
  --btn-gap: 10px;        /* зазор между иконкой и текстом */
  --btn-pad-x: 18px;      /* горизонтальные внутренние отступы */
  --btn-scale: 1.10;      /* масштаб при hover */
  --btn-focus-ring: 3px;  /* толщина подсветки фокуса */
}

/* БАЗА для всех кнопок: навигация, показать ответ, поделиться */
.riddle-nav .rnav-btn,
.answer-btn,
.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;        /* рус: всегда центрируем контент */
  gap: var(--btn-gap);

  width: var(--btn-w);           /* рус: фиксированная ширина кнопки */
  height: var(--btn-h);          /* рус: фиксированная высота кнопки */
  padding: 0 var(--btn-pad-x);   /* рус: вертикаль задаёт высота, по бокам — паддинги */

  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: 'WellwaitFree', cursive;
  font-size: var(--btn-font);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transform: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Размеры иконок внутри кнопок — независимы от высоты кнопки */
.riddle-nav .nav-finger,
.answer-btn .rnav-icon,
.share-btn img{
  height: var(--btn-icon);  /* рус: задаётся отдельно — не зависит от --btn-h */
  width: auto;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}
/* рус: убираем лишний верхний margin у серых контейнеров внутри .riddle-actions */
.riddle-actions > .riddle-rating, .riddle-actions > .riddle-box {
  margin: 0;
}

/* === ТОЛЬКО «Показать ответ» — отдельные размеры и иконка === */
/* рус: эти переменные и правила не влияют на навигацию и «поделиться» */
:root{
  --answer-btn-w: 240px;    /* ширина только этой кнопки */
  --answer-btn-h: 60px;     /* высота только этой кнопки */
  --answer-btn-icon: 45px;  /* размер иконки 💩 только тут */
}

/* геометрия и выравнивание */
.answer-cta .answer-btn{
  width: var(--answer-btn-w);
  height: var(--answer-btn-h);
  box-sizing: border-box;                 /* рус: высота учитывает бордер */
  padding: 0 var(--btn-pad-x);            /* рус: вертикаль фиксирована */
  line-height: 1;                         /* рус: одинаковая метрика текста */
  justify-content: center;                /* рус: центр содержимого */
  border: 2px solid #d1d5db; 
  border-left: 0;
}

/* иконка внутри — отдельно от общей */
.answer-cta .answer-btn .rnav-icon{
  height: var(--answer-btn-icon);
  width: auto;
  object-fit: contain;
}

.answer-cta {
  display: flex;
  justify-content: space-between; /* первая кнопка влево, вторая вправо */
  width: 100%;
}

.answer-cta .left-btn {
  margin-right: auto;
  border-left-color: #fff;
  border-left-width: 2px;  /* рус: толщина левой линии */
border-left-style: solid;
}
.answer-cta .right-btn { margin-left: auto; }

/* микро-центрирование контента на глаз (если кажется «сверху толще») */
.answer-cta .answer-btn .rnav-icon,
.answer-cta .answer-btn .rnav-label{
  position: relative;
  top: 0; /* при желании можно поставить 1px вниз: top: 1px; */
}




/* рус: ховер — одинаковое «увеличение» для всех */
.riddle-nav .rnav-btn:hover,
.answer-btn:hover,
.share-btn:hover{
  transform: scale(var(--btn-scale));
}

/* рус: активное нажатие — возвращаем к 1 */
.riddle-nav .rnav-btn:active,
.answer-btn:active,
.share-btn:active{
  transform: scale(1.0);
}

/* рус: фокус клавиатурой — единая зелёная подсветка */
.riddle-nav .rnav-btn:focus-visible,
.answer-btn:focus-visible,
.share-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 var(--btn-focus-ring) rgba(21,128,61,.35);
}



/* рус: «пальцы» навигации — зеркалим правую, добавляем аккуратный контур */
.riddle-nav .nav-finger{
  filter:
    drop-shadow(1px 0 0 rgba(0,0,0,.85))
    drop-shadow(-1px 0 0 rgba(0,0,0,.85))
    drop-shadow(0 1px 0 rgba(0,0,0,.85))
    drop-shadow(0 -1px 0 rgba(0,0,0,.85));
}
.riddle-nav .nav-finger-left{  margin-right: var(--btn-gap); transform: none; }
.riddle-nav .nav-finger-right{ margin-left:  var(--btn-gap); transform: scaleX(-1); }

/* ===== ЦВЕТА/СОСТОЯНИЯ (сохраняем твои фирменные) ===== */

/* Навигация — КРАСНЫЕ (как дизлайк/удалить в comments.css) */
.riddle-nav .rnav-btn{
  background:#DC2626; color:#fff; border-color:transparent;
}

/* Кнопка «Показать ответ» — ОРАНЖЕВАЯ; состояние "показать" — ЗЕЛЁНАЯ */
.answer-btn{
  background:#C2410C; color:#fff; border-color:transparent;
}
.answer-btn[data-state="show"]{
background:#15803D; color:#fff; border-color:transparent;
}

/* Репосты — фирменные цвета, но с общей геометрией */
.share-btn{ color:#fff; border-color:transparent; }
.share-btn.tg{ background:#1C79AC; }  /* Telegram (темнее оттенок) */
.share-btn.wa{ background:#107E71; }  /* WhatsApp (темнее оттенок) */
.share-btn.vk{ background:#4C75A3; }  /* VK */

/* ===== ВЫРАВНИВАНИЕ БЛОКОВ (одинаковые отступы, центр) ===== */
/* рус: когда соберём всё в один контейнер, эти отступы не «дублятся» */
.riddle-actions{                 /* рус: общий контейнер (появится позже, когда перенесём HTML) */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;                     /* рус: единый вертикальный ритм между группами */
  margin: 16px 0;
}
.riddle-actions .riddle-nav{
  display:flex; justify-content:center; align-items:center; gap:18px; margin:0;
}
.riddle-actions .answer-cta{
  display:flex; justify-content:center; margin:0;
}
.answer-right{
    display:flex; 
    align-items:center; 
    gap:0;                               /* рус: убираем зазор, элементы стыкуются вплотную */
  }
  /* рус: отступ между кнопками "Поделиться" */
.riddle-actions .share-buttons{
  display:flex; justify-content:center; gap:16px; margin:0;
}

  .riddle-input{
  /* геометрия под кнопки */
  height: var(--answer-btn-h);          /* те же переменные, что для кнопок */
  width: 245px;                         /* ширина инпута — как у кнопки */
  box-sizing: border-box;               /* рус: высота включает бордер — не выше кнопки */
  border-radius: var(--btn-radius);
  border-top-right-radius: 0;           /* рус: нет скругления на стыке с правой кнопкой */
  border-bottom-right-radius: 0;        /* рус: нет скругления на стыке с правой кнопкой */
  font-family: 'WellwaitFree', cursive; /* шрифт как на кнопках */
  font-size: var(--btn-font);
  padding: 0 14px;
  line-height: 1;
  /* цвета/границы */
  background: #fff;
  color: #111;
  border: 2px solid #d1d5db;           /* серая рамка по умолчанию */
  border-right: 0;                      /* рус: на стыке бордера НЕТ */
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

  /* рус: у правой кнопки убираем левое скругление и авто-отступ, чтобы она прилипала к инпуту */
  .answer-right .right-btn{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0 !important;           /* перебиваем правило .answer-cta .right-btn { margin-left:auto } */
    flex-shrink: 0;                       /* рус: не сжимать кнопку при длинном вводе */
  }
/* hover — слегка приподнимаем, как у кнопки */
.riddle-input:hover{ transform: scale(var(--btn-scale)); }
/* active — возвращаем как у кнопки */
.riddle-input:active{ transform: scale(1.0); }
/* focus — зелёная подсветка, как у кнопок при фокусе */
.riddle-input:focus{
  border-color: #15803D;
  box-shadow: 0 0 0 var(--btn-focus-ring) rgba(21,128,61,.35);
}

/* Когда остаётся одна зелёная кнопка — центрируем её строго по центру */
.answer-cta.centered{
  justify-content: center !important;   /* перебиваем space-between */
}
/* рус: при центрировании убираем авто-отступы у левой кнопки, иначе её тянет влево */
.answer-cta.centered .left-btn{
  margin-right: 0 !important;
  margin-left: 0 !important;
}






  .riddle-text .riddle-question { margin-right: 60px; }
  @media (max-width: 768px){
    .riddle-text .riddle-question { margin-right: 46px; }
  }

  @media (max-width: 768px){
    .i-btn{ width: 40px; height: 40px; right: 10px; bottom: 10px; }
    .riddle-text p:last-child{ margin-right: 46px; }
  }

  /* на мобилке чуть крупнее шрифт */
  @media (max-width: 768px) {
    .riddle-text { font-size: 19px; }
  }

  /* ===== Адаптация 481–768 px (планшеты/крупные телефоны) ===== */
@media (min-width: 481px) and (max-width: 768px){

  /* ——— ШАПКА — 2 ряда (как база), иконки увеличены равномерно ——— */
  .riddle-panel{ padding:10px 16px 12px; column-gap:16px; row-gap:10px; }
  .bioplasma{ gap:8px; font-size:20px; }
  .bioplasma-icon{ width:72px; height:72px; }
  .bioplasma-count{ font-size:28px; line-height:1; }
  .riddle-panel__right{ gap:12px; }
  .riddle-home-btn{ padding:5px; }
  .riddle-panel__right .avatar{ width:72px; height:72px; }
  .riddle-home-btn img{ width:72px; height:72px; }

  .riddle-title{ font-size:42px; margin:0; padding:0 12px; text-align:center; line-height:1.12; }
  /* ——— ОЦЕНКА — центр и перенос хинта вниз ——— */
  .riddle-rating{
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap; justify-content:center;
  }
  .rating-stars{ gap:10px; justify-content:center; flex-wrap:wrap; }
  .rating-stars .star{
    width:50px; height:50px;
    padding:0; box-sizing:content-box;
  }
  .rating-pointer{ width:76px; height:76px; margin-left:10px; }
  .rating-hint{
    display:block; order:2; flex-basis:100%;
    text-align:center; font-size:16px; opacity:1; margin-top:6px;
  }

  /* ——— CTA: левая кнопка строкой, справа инпут+«Ответить» в одну линию ——— */
  .answer-cta{ flex-direction:column; align-items:stretch; gap:14px; }
  .answer-cta .left-btn{ width:100%; min-height:52px; }

  .answer-right{ width:100%; display:flex; flex-direction:row; align-items:stretch; gap:0; }
  .riddle-input{
    flex:1 1 auto; min-width:0;
    height: var(--answer-btn-h);
    font-size:16px; padding:0 14px;
    border:2px solid #d1d5db; border-right:0;
    border-radius: var(--btn-radius);
    border-top-right-radius:0; border-bottom-right-radius:0;
  }
  .answer-right .right-btn{
    flex:0 0 38%; min-width:160px;
    height: var(--answer-btn-h);
    margin-left:0 !important;
    border-left:2px solid #d1d5db;
    border-top-left-radius:0; border-bottom-left-radius:0;
  }

  /* ——— Навигация — по две кнопки в ряд ——— */
  .riddle-actions .riddle-nav{ gap:14px; flex-wrap:wrap; }
  .riddle-actions .riddle-nav .rnav-btn{
    width:calc(50% - 7px);
    min-height:52px;
  }

  /* ——— Комментарии — читаемо, не громоздко ——— */
  .cmt-form{ padding:16px; border-radius:14px; }
  .cmt-textarea,
  .cmt-editor-textarea{ font-size:16px; padding:14px; }
  .cmt-editor-actions{ gap:12px; flex-wrap:wrap; }
  .cmt-editor-send, .cmt-btn{ min-height:52px; }

  /* ——— Репосты — по две кнопки в ряд ——— */
  .share-buttons{ gap:14px; flex-wrap:wrap; }
  .share-buttons .share-btn{ width:calc(50% - 7px); min-height:52px; }
  .share-buttons .share-btn img{ width:30px; height:30px; }

  /* ——— Видимый фокус — единый ——— */
  .rnav-btn:focus-visible,
  .answer-cta .left-btn:focus-visible,
  .answer-right .right-btn:focus-visible,
  .riddle-home-btn:focus-visible,
  .riddle-panel .avatar-wrap:focus-visible,
  .cmt-btn:focus-visible,
  .cmt-editor-send:focus-visible{ outline:2px solid #111; outline-offset:2px; }

  /* ——— Боковые поля — чуть больше ——— */
  main, .page, .content, .riddle-actions{ padding-left:20px; padding-right:20px; }

  /* ——— BIO-cloud — центр и не вылезает ——— */
  .bio-cloud{ max-width:calc(100vw - 40px); left:50vw !important; transform:translate(-50%,0); }

}

  /* ===== Мобильная адаптация 376–480 px ===== */
@media (min-width: 376px) and (max-width: 480px){

  /* ——— ШАПКА — 2 ряда (как база), иконки увеличены равномерно ——— */
  .riddle-panel{ padding:8px 12px 10px; column-gap:14px; row-gap:8px; }
  .bioplasma{ gap:6px; font-size:18px; }
  .bioplasma-icon{ width:64px; height:64px; }
  .bioplasma-count{ font-size:26px; line-height:1; }
  .riddle-panel__right{ gap:10px; }
  .riddle-home-btn{ padding:4px; }
  .riddle-panel__right .avatar{ width:64px; height:64px; }
  .riddle-home-btn img{ width:64px; height:64px; }

  .riddle-title{ font-size:36px; margin:0; padding:0 12px; text-align:center; line-height:1.12; }

  /* ——— ОЦЕНКА — центр и перенос хинта вниз ——— */
  .riddle-rating{
    display:flex; align-items:center; gap:8px;
    flex-wrap:wrap; justify-content:center;
  }
  .rating-stars{ gap:8px; justify-content:center; flex-wrap:wrap; }
  .rating-stars .star{
    width:44px; height:44px;
    padding:2px; box-sizing:content-box; /* 44 + 2*2 = 48 хит-бокс */
  }
  .rating-pointer{ width:64px; height:64px; margin-left:8px; }
  .rating-hint{
    display:block; order:2; flex-basis:100%;
    text-align:center; font-size:16px; opacity:1; margin-top:4px;
  }

  /* ——— CTA: левая кнопка строкой, справа инпут+«Ответить» в одну линию ——— */
  .answer-cta{ flex-direction:column; align-items:stretch; gap:12px; }
  .answer-cta .left-btn{ width:100%; min-height:48px; }

  .answer-right{ width:100%; display:flex; flex-direction:row; align-items:stretch; gap:0; }
  .riddle-input{
    flex:1 1 auto; min-width:0;
    height: var(--answer-btn-h);
    font-size:16px; padding:0 12px;
    border:2px solid #d1d5db; border-right:0;
    border-radius: var(--btn-radius);
    border-top-right-radius:0; border-bottom-right-radius:0;
  }
  .answer-right .right-btn{
    flex:0 0 42%; min-width:140px;
    height: var(--answer-btn-h);
    margin-left:0 !important;
    border-left:2px solid #d1d5db;
    border-top-left-radius:0; border-bottom-left-radius:0;
  }

  /* ——— Навигация — надёжно в столбик ——— */
  .riddle-actions .riddle-nav{ gap:12px; flex-wrap:wrap; }
  .riddle-actions .riddle-nav .rnav-btn{ width:100%; min-height:48px; }

  /* ——— Комментарии — компактнее ——— */
  .cmt-form{ padding:14px; border-radius:12px; }
  .cmt-textarea,
  .cmt-editor-textarea{ font-size:16px; padding:12px; }
  .cmt-editor-actions{ gap:10px; flex-wrap:wrap; }
  .cmt-editor-send, .cmt-btn{ min-height:48px; }

  /* ——— Репосты — по две кнопки в ряд ——— */
  .share-buttons{ gap:12px; flex-wrap:wrap; }
  .share-buttons .share-btn{ width:calc(50% - 6px); min-height:48px; }
  .share-buttons .share-btn img{ width:28px; height:28px; }

  /* ——— Видимый фокус — единый ——— */
  .rnav-btn:focus-visible,
  .answer-cta .left-btn:focus-visible,
  .answer-right .right-btn:focus-visible,
  .riddle-home-btn:focus-visible,
  .riddle-panel .avatar-wrap:focus-visible,
  .cmt-btn:focus-visible,
  .cmt-editor-send:focus-visible{ outline:2px solid #111; outline-offset:2px; }

  /* ——— Безопасные поля у краёв ——— */
  main, .page, .content, .riddle-actions{ padding-left:16px; padding-right:16px; }

  /* ——— BIO-cloud — не вылезает ——— */
  .bio-cloud{ max-width:calc(100vw - 32px); left:50vw !important; transform:translate(-50%,0); }

}


  /* 375 адаптация*/



  @media (max-width: 375px){
  .riddle-panel{ padding:8px 10px 10px; column-gap:12px; row-gap:8px; }
  .bioplasma{ gap:6px; font-size:17px; }
  .bioplasma-icon{ width:56px; height:56px; }
  .bioplasma-count{ font-size:24px; line-height:1; }
  .riddle-panel__right{ gap:10px; }
  .riddle-home-btn{ min-width:48px; min-height:48px; padding:4px; }
  .riddle-panel__right .avatar{ width:56px; height:56px; }
  .riddle-home-btn img{ width:56px; height:56px; }

  .riddle-title{ font-size:28px; margin:0; padding:0 10px; text-align:center; line-height:1.12; }

  .rating-stars{ gap:6px; }
  .rating-stars .star{ width:36px; height:36px; }
  .rating-pointer{ width:56px; height:56px; margin-left:6px; }
  .rating-hint{ font-size:14px; }

  .answer-cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .answer-cta .left-btn{ width:100%; min-height:48px; }

  .answer-right{ width:100%; display:flex; flex-direction:column; gap:10px; }
  .riddle-input{
    width:100%;
    height:48px;
    min-height:var(--answer-btn-h);
    font-size:16px;
    padding:0 12px;
    border-right:2px solid #d1d5db;
    border-radius:var(--btn-radius);
  }
  .answer-right .right-btn{
    width:100%;
    min-height:48px;
    margin-left:0 !important;
    border-top-left-radius:var(--btn-radius);
    border-bottom-left-radius:var(--btn-radius);
    border-left:2px solid #d1d5db;
  }

  .riddle-actions .riddle-nav{ gap:12px; flex-wrap:wrap; }
  .riddle-actions .riddle-nav .rnav-btn{ width:100%; min-height:48px; }

  .cmt-form{ padding:12px; border-radius:12px; margin:0 0 16px 0; }
  .cmt-textarea,
  .cmt-editor-textarea{ font-size:15px; padding:12px; min-height:100px; }
  .cmt-editor-actions{ gap:8px; flex-wrap:wrap; justify-content:stretch; }
  .cmt-editor-send{ width:100%; min-height:48px; font-size:16px; }
  .cmt-btn{ min-height:48px; font-size:15px; padding:0 12px; }

  .riddle-rating{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .riddle-rating .rating-stars{ gap:6px; }
  .riddle-rating .rating-stars .star{ width:36px; height:36px; padding:6px; box-sizing:content-box; }
  .riddle-rating .rating-hint{ order:2; flex-basis:100%; text-align:center; font-size:14px; opacity:1; margin-top:4px; }
  .riddle-rating .rating-pointer{ width:56px; height:56px; margin-left:6px; }

  .share-buttons{ gap:8px; flex-wrap:wrap; }
  .share-buttons .share-btn{ width:100%; min-height:48px; }
  .share-buttons .share-btn img{ width:24px; height:24px; }

  .rnav-btn:focus-visible,
  .answer-cta .left-btn:focus-visible,
  .answer-right .right-btn:focus-visible,
  .riddle-home-btn:focus-visible,
  .riddle-panel .avatar-wrap:focus-visible,
  .cmt-btn:focus-visible,
  .cmt-editor-send:focus-visible{ outline:2px solid #111; outline-offset:2px; }

  main, .page, .content, .riddle-actions{ padding-left:16px; padding-right:16px; }

}

@media (max-width: 360px){
  .riddle-panel{ padding:8px 8px 10px; column-gap:10px; row-gap:8px; }
  .riddle-panel__right{ gap:8px; }
  .riddle-home-btn{ min-width:44px; min-height:44px; padding:3px; }
  .riddle-panel__right .avatar{ width:48px; height:48px; }
  .riddle-home-btn img{ width:48px; height:48px; }
}

/* ===== АВАРИЙНАЯ АДАПТАЦИЯ 320px — шапка крупнее, но без hover ===== */
@media (max-width: 320px){
  .riddle-panel{ padding:8px 6px 10px; column-gap:8px; row-gap:8px; }

  .bioplasma{ gap:6px; font-size:15px; }
  .bioplasma-icon{ width:52px; height:52px; }
  .bioplasma-count{ font-size:22px; line-height:1; }

  .riddle-panel__right{ gap:8px; }

  /* фиксируем хитбоксы под уменьшенные иконки */
  .riddle-home-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    padding:2px;
  }

  .riddle-panel__right .avatar{ width:44px; height:44px; }
  .riddle-home-btn img{ width:44px; height:44px; }

  /* чтобы “домой” точно не выпирала даже при залипшем hover */
  .riddle-home-btn img:hover{ transform:none; }
  .riddle-panel__right .avatar-wrap:hover .avatar{ transform:none; }

  .riddle-title{ font-size:26px; margin:0; padding:0 8px; text-align:center; line-height:1.12; }
}

/* === BIO-CLOUD: адаптация под очень узкие экраны (≤375px) ===
   рус: принудительно центрируем облачко по экрану и ограничиваем ширину,
   чтобы не вылезало за края. left ставим через !important, чтобы перебить inline-стиль. */
@media (max-width: 375px){
  .bio-cloud{
    left: 50vw !important;                 /* рус: центр экрана по X */
    max-width: calc(100vw - 32px);         /* рус: не ближе 16px к краям */
    min-width: 96px;                       /* рус: не слишком узко */
    padding: 10px 12px;                    /* рус: компактнее, чем на десктопе */
    font-size: 16px;                       /* рус: читабельно на мобиле */
    border-radius: 24px;                   /* рус: поменьше радиус */
  }
  .bio-cloud-icon{
    width: 28px; height: 28px;             /* рус: иконка компактнее */
  }
}

/* === FOOTER (как на главной) === */
.site-footer{
  background:#000;
  color:#e5e5e5;
  padding: 26px 24px 16px;
  border-top: 2px solid #111;
}

.site-footer a{
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover{
  text-decoration: underline;
}

.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 20px;
  max-width: 1920px;
  margin: 0 auto;
}

.footer-left{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap: 16px;
}

.footer-mini-logo img{
  width: 128px;
  height: 128px;
  object-fit: contain;
  display:block;
}

.footer-social{
  display:flex;
  align-items:center;
  gap: 12px;
}

.footer-social img{
  width: 38px;
  height: 38px;
  display:block;
}

.footer-stats{
  font-family: 'WellwaitFree', cursive;
  font-size: 26px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-top: 10px;
}

.footer-bottom{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #222;
  text-align: center;
  font-family: 'WellwaitFree', cursive;
  font-size: 18px;
  opacity: 0.85;
}

@media (max-width: 768px){
  .footer-inner{
    flex-direction: column;
    align-items:flex-start;
  }
  .footer-left{
    flex-wrap: wrap;
  }
  .footer-mini-logo img{
    width: 110px;
    height: 110px;
  }
  .footer-stats{
    white-space: normal;
    font-size: 22px;
    padding-top: 0;
  }
  .footer-bottom{
    font-size: 16px;
  }
}

/* ============================================================
   🐞 Модалка “Сообщить о проблеме”
   - разметка в /partials/footer.html
   - логика в /partials/footer-report.js
   - бонус/звезда остаются ПОД модалкой (z-index ниже)
============================================================ */
.hidden{display:none !important;}

.footer-report-btn{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

.footer-report{
  position: fixed;
  inset: 0;
  z-index: 9999; /* модалка выше бонусов/анимаций */
}

.footer-report .notif-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* ДЕНЬ (по умолчанию) */
.footer-report__dialog{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px));
  max-height: 82vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 16px 16px 14px;
}

.footer-report__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #000;
}

.footer-report__title{
  margin: 6px 0 10px;
  font-size: 22px;
}

.footer-report__err{
  min-height: 18px;
  margin: 0 0 8px;
  font-weight: 700;
  color: #b00020;
}

.footer-report__row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.footer-report__hint{
  font-size: 14px;
  opacity: .8;
  margin-top: -2px;
}

.footer-report__row input,
.footer-report__row select,
.footer-report__row textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  color: #000;
  font-size: 16px;
  box-sizing: border-box;
}

.footer-report__row textarea{
  resize: vertical;
}

.footer-report__actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.footer-report__btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.2);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: #000;
}

.footer-report__btn--primary{
  font-weight: 700;
}

/* НОЧЬ */
html.theme-night .footer-report__dialog,
body.theme-night .footer-report__dialog{
  background: #111;
  color: #fff;
  border-color: rgba(255,255,255,.18);
}

html.theme-night .footer-report__close,
body.theme-night .footer-report__close{
  border-color: rgba(255,255,255,.22);
  color: #fff;
}

html.theme-night .footer-report__err,
body.theme-night .footer-report__err{
  color: #ff6b6b;
}

html.theme-night .footer-report__row input,
html.theme-night .footer-report__row select,
html.theme-night .footer-report__row textarea,
body.theme-night .footer-report__row input,
body.theme-night .footer-report__row select,
body.theme-night .footer-report__row textarea{
  border-color: rgba(255,255,255,.18);
  background: #222;
  color: #fff;
}

html.theme-night .footer-report__btn,
body.theme-night .footer-report__btn{
  border-color: rgba(255,255,255,.2);
  color: #fff;
}

.footer-report__btn--primary{
  font-weight: 700;
}

@media (max-width: 480px){
  .footer-report__dialog{
    padding: 14px 12px 12px;
  }
  .footer-report__title{
    font-size: 20px;
  }
}