/* ==========================================================================
   /css/widgets/announce-bar.css
   Панель объявлений (чипы под hero) + модалки <dialog>.

   Темизация по паттерну home-feature-banner / home-game-banner:
   базовые токены --ab-* + явные блоки для всех 7 тем:
   light · dark · neon · soviet · spring · apple · cosmic.

   Селекторы тем повторяют принятые в проекте:
   [data-theme="X"] (html или body) + body.X-theme + body.theme-X
   ========================================================================== */

/* --------------------------------------------------------------------------
   Базовые токены (дефолт = графит, если тема не распознана)
   -------------------------------------------------------------------------- */

.announce-bar,
.announce-modal{
  --ab-card:        var(--hp-card, rgba(23, 28, 39, .94));
  --ab-card-hov:    color-mix(in srgb, var(--ab-accent) 9%, var(--ab-card));
  --ab-border:      var(--hp-border, rgba(148, 163, 184, .18));
  --ab-text:        var(--hp-text, #f3f6fb);
  --ab-muted:       var(--hp-muted, rgba(218, 226, 238, .72));

  --ab-accent:      var(--hp-brand, #8fa6c8);
  --ab-accent-2:    var(--hp-accent, #6f7f99);
  --ab-accent-soft: color-mix(in srgb, var(--ab-accent) 14%, transparent);

  --ab-btn-bg:      linear-gradient(135deg, var(--ab-accent), var(--ab-accent-2));
  --ab-btn-fg:      #ffffff;

  --ab-dot:         #ff8f8f;

  --ab-modal-bg:    var(--hp-surface-1, #171c27);
  --ab-backdrop:    rgba(4, 8, 16, .62);

  --ab-chip-shadow:  0 10px 24px rgba(0, 0, 0, .14);
  --ab-modal-shadow: 0 26px 70px rgba(0, 0, 0, .42);
}

/* ==========================================================================
   ТЕМЫ
   ========================================================================== */

/* ===== 1. light · кремовая ===== */
html[data-theme="light"] .announce-bar,
html[data-theme="light"] .announce-modal,
body[data-theme="light"] .announce-bar,
body[data-theme="light"] .announce-modal,
body.light-theme .announce-bar,
body.light-theme .announce-modal,
body.theme-light .announce-bar,
body.theme-light .announce-modal{
  --ab-card:        #fffaf2;
  --ab-border:      rgba(128, 86, 43, .20);
  --ab-text:        #2f241b;
  --ab-muted:       rgba(72, 50, 28, .72);

  --ab-accent:      #b88455;
  --ab-accent-2:    #8b5e34;
  --ab-accent-soft: rgba(184, 132, 85, .14);

  --ab-btn-bg:      linear-gradient(180deg, #8b5e34, #6f4827);
  --ab-btn-fg:      #fff6e8;

  --ab-dot:         #c2410c;

  --ab-modal-bg:    #fff8ed;
  --ab-backdrop:    rgba(63, 42, 22, .42);

  --ab-chip-shadow:  0 10px 24px rgba(74, 50, 28, .10);
  --ab-modal-shadow: 0 26px 64px rgba(74, 50, 28, .26);
}

/* ===== 2. dark · графитовая ===== */
html[data-theme="dark"] .announce-bar,
html[data-theme="dark"] .announce-modal,
body[data-theme="dark"] .announce-bar,
body[data-theme="dark"] .announce-modal,
body.dark-theme .announce-bar,
body.dark-theme .announce-modal,
body.theme-dark .announce-bar,
body.theme-dark .announce-modal{
  --ab-card:        rgba(23, 28, 39, .94);
  --ab-border:      rgba(148, 163, 184, .18);
  --ab-text:        #f3f6fb;
  --ab-muted:       rgba(218, 226, 238, .72);

  --ab-accent:      #8fa6c8;
  --ab-accent-2:    #6f7f99;
  --ab-accent-soft: rgba(143, 166, 200, .14);

  /* по паттерну графитовых баннеров: светлая кнопка, тёмный текст */
  --ab-btn-bg:      linear-gradient(180deg, #eef1f6, #d9dee7);
  --ab-btn-fg:      #23262b;

  --ab-dot:         #ff8f8f;

  --ab-modal-bg:    #171c27;
  --ab-backdrop:    rgba(0, 0, 0, .64);

  --ab-chip-shadow:  0 10px 26px rgba(0, 0, 0, .26);
  --ab-modal-shadow: 0 28px 72px rgba(0, 0, 0, .5);
}

/* ===== 3. neon · киберпанк ===== */
html[data-theme="neon"] .announce-bar,
html[data-theme="neon"] .announce-modal,
body[data-theme="neon"] .announce-bar,
body[data-theme="neon"] .announce-modal,
body.neon-theme .announce-bar,
body.neon-theme .announce-modal,
body.theme-neon .announce-bar,
body.theme-neon .announce-modal{
  --ab-card:        rgba(8, 16, 38, .92);
  --ab-border:      rgba(45, 226, 255, .26);
  --ab-text:        #f3fbff;
  --ab-muted:       rgba(205, 235, 255, .72);

  --ab-accent:      #2de2ff;
  --ab-accent-2:    #ff56d8;
  --ab-accent-soft: rgba(45, 226, 255, .12);

  /* учли прошлый урок неоновой кнопки: тёмный текст на ярком фоне, без свечения текста */
  --ab-btn-bg:      linear-gradient(120deg, #19f0ff, #2de2ff);
  --ab-btn-fg:      #04121a;

  --ab-dot:         #ff2bd6;

  --ab-modal-bg:    #081026;
  --ab-backdrop:    rgba(2, 6, 18, .72);

  --ab-chip-shadow:
    0 10px 26px rgba(0, 0, 0, .34),
    0 0 22px rgba(45, 226, 255, .10);
  --ab-modal-shadow:
    0 28px 76px rgba(0, 0, 0, .55),
    0 0 44px rgba(255, 43, 214, .14),
    inset 0 0 0 1px rgba(45, 226, 255, .16);
}

/* ===== 4. soviet · красная премиальная ===== */
html[data-theme="soviet"] .announce-bar,
html[data-theme="soviet"] .announce-modal,
body[data-theme="soviet"] .announce-bar,
body[data-theme="soviet"] .announce-modal,
body.soviet-theme .announce-bar,
body.soviet-theme .announce-modal,
body.theme-soviet .announce-bar,
body.theme-soviet .announce-modal{
  --ab-card:        rgba(80, 21, 26, .94);
  --ab-border:      rgba(216, 180, 93, .30);
  --ab-text:        #fff1d4;
  --ab-muted:       rgba(255, 229, 188, .74);

  --ab-accent:      #d8b45d;
  --ab-accent-2:    #e34b3f;
  --ab-accent-soft: rgba(216, 180, 93, .14);

  --ab-btn-bg:      linear-gradient(180deg, #f4d889, #d4af37);
  --ab-btn-fg:      #5e0d13;

  --ab-dot:         #f0c66f;

  --ab-modal-bg:    #50151a;
  --ab-backdrop:    rgba(30, 5, 7, .66);

  --ab-chip-shadow:  0 10px 26px rgba(45, 6, 8, .30);
  --ab-modal-shadow: 0 28px 70px rgba(45, 6, 8, .55);
}

/* ===== 5. spring · розовая сакура ===== */
html[data-theme="spring"] .announce-bar,
html[data-theme="spring"] .announce-modal,
body[data-theme="spring"] .announce-bar,
body[data-theme="spring"] .announce-modal,
body.spring-theme .announce-bar,
body.spring-theme .announce-modal,
body.theme-spring .announce-bar,
body.theme-spring .announce-modal{
  --ab-card:        rgba(255, 249, 252, .94);
  --ab-border:      rgba(207, 111, 160, .26);
  --ab-text:        #3b2434;
  --ab-muted:       rgba(91, 55, 78, .72);

  --ab-accent:      #e46ea7;
  --ab-accent-2:    #9b6fd3;
  --ab-accent-soft: rgba(228, 110, 167, .13);

  --ab-btn-bg:      linear-gradient(135deg, #d2548f, #b94a86);
  --ab-btn-fg:      #fff8fc;

  --ab-dot:         #c2417f;

  --ab-modal-bg:    #fff4fa;
  --ab-backdrop:    rgba(91, 55, 78, .42);

  --ab-chip-shadow:  0 10px 24px rgba(136, 69, 104, .12);
  --ab-modal-shadow: 0 26px 64px rgba(136, 69, 104, .28);
}

/* ===== 6. apple · зелёное яблоко ===== */
html[data-theme="apple"] .announce-bar,
html[data-theme="apple"] .announce-modal,
body[data-theme="apple"] .announce-bar,
body[data-theme="apple"] .announce-modal,
body.apple-theme .announce-bar,
body.apple-theme .announce-modal,
body.theme-apple .announce-bar,
body.theme-apple .announce-modal{
  --ab-card:        rgba(251, 255, 247, .94);
  --ab-border:      rgba(100, 155, 60, .26);
  --ab-text:        #26351d;
  --ab-muted:       rgba(50, 69, 39, .72);

  --ab-accent:      #74b84a;
  --ab-accent-2:    #3f8f5b;
  --ab-accent-soft: rgba(116, 184, 74, .13);

  --ab-btn-bg:      linear-gradient(135deg, #3f8f5b, #2f6f4e);
  --ab-btn-fg:      #f4ffe8;

  --ab-dot:         #d9622b;

  --ab-modal-bg:    #f7fbef;
  --ab-backdrop:    rgba(38, 53, 29, .42);

  --ab-chip-shadow:  0 10px 24px rgba(70, 110, 48, .12);
  --ab-modal-shadow: 0 26px 64px rgba(70, 110, 48, .26);
}

/* ===== 7. cosmic · глубокий космос ===== */
html[data-theme="cosmic"] .announce-bar,
html[data-theme="cosmic"] .announce-modal,
body[data-theme="cosmic"] .announce-bar,
body[data-theme="cosmic"] .announce-modal,
body.cosmic-theme .announce-bar,
body.cosmic-theme .announce-modal,
body.theme-cosmic .announce-bar,
body.theme-cosmic .announce-modal{
  --ab-card:        rgba(16, 20, 44, .94);
  --ab-border:      rgba(214, 181, 109, .26);
  --ab-text:        #f8f1df;
  --ab-muted:       rgba(231, 218, 191, .74);

  --ab-accent:      #d6b56d;
  --ab-accent-2:    #8b7cff;
  --ab-accent-soft: rgba(214, 181, 109, .13);

  --ab-btn-bg:      linear-gradient(180deg, #ead087, #d6b56d);
  --ab-btn-fg:      #231445;

  --ab-dot:         #ff8cf5;

  --ab-modal-bg:    #10142c;
  --ab-backdrop:    rgba(4, 6, 20, .68);

  --ab-chip-shadow:
    0 10px 26px rgba(0, 0, 0, .32),
    0 0 22px rgba(214, 181, 109, .08);
  --ab-modal-shadow:
    0 28px 74px rgba(0, 0, 0, .55),
    0 0 40px rgba(139, 124, 255, .12);
}

/* ==========================================================================
   ПАНЕЛЬ
   ========================================================================== */

.announce-bar{
  margin: 14px 0 6px;
}

.announce-bar__rail{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ab-accent) 50%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
}

.announce-bar__rail::-webkit-scrollbar{
  height: 8px;
}

.announce-bar__rail::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--ab-accent) 46%, transparent);
}

/* --------------------------------------------------------------------------
   Кнопка-чип
   -------------------------------------------------------------------------- */

.announce-chip{
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  flex: 0 0 auto;
  min-width: 172px;
  max-width: 248px;

  padding: 10px 14px;

  border: 1px solid var(--ab-border);
  border-radius: 17px;

  background-color: var(--ab-card);
  color: var(--ab-text);

  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;

  box-shadow: var(--ab-chip-shadow);

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

.announce-chip:hover{
  background-color: var(--ab-card-hov);
  border-color: color-mix(in srgb, var(--ab-accent) 56%, var(--ab-border));
  transform: translateY(-1px);
}

.announce-chip:focus-visible{
  outline: 2px solid var(--ab-accent);
  outline-offset: 2px;
}

.announce-chip__icon{
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  border-radius: 12px;
  background-color: var(--ab-accent-soft);
  color: var(--ab-accent);
}

.announce-chip__icon svg{
  width: 19px;
  height: 19px;
}

.announce-chip__body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.announce-chip__label{
  color: var(--ab-text);
  font-size: .92rem;
  line-height: 1.2;
  font-weight: 900;

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

.announce-chip__sub{
  color: var(--ab-muted);
  font-size: .78rem;
  line-height: 1.25;

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

/* мини-прогресс у чипа поддержки */
.announce-chip__meter{
  height: 4px;
  margin: 3px 0 1px;

  border-radius: 2px;
  background-color: color-mix(in srgb, var(--ab-text) 12%, transparent);
  overflow: hidden;
}

.announce-chip__meter-fill{
  display: block;
  height: 100%;
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--ab-accent), var(--ab-accent-2));
}

/* точка «непрочитано» */
.announce-chip__dot{
  position: absolute;
  top: 8px;
  right: 8px;

  width: 9px;
  height: 9px;
  border-radius: 999px;

  background-color: var(--ab-dot);
  box-shadow: 0 0 0 3px var(--ab-card);
}

/* ==========================================================================
   МОДАЛКИ
   ========================================================================== */

.announce-modal{
  width: min(480px, calc(100vw - 32px));
  padding: 0;

  border: 1px solid var(--ab-border);
  border-radius: 22px;

  background-color: var(--ab-modal-bg);
  background-image:
    radial-gradient(480px 200px at 0% 0%,
      color-mix(in srgb, var(--ab-accent) 11%, transparent),
      transparent 68%),
    radial-gradient(380px 180px at 100% 100%,
      color-mix(in srgb, var(--ab-accent-2) 9%, transparent),
      transparent 64%);

  color: var(--ab-text);
  box-shadow: var(--ab-modal-shadow);
}

.announce-modal::backdrop{
  background-color: var(--ab-backdrop);
  backdrop-filter: blur(4px);
}

.announce-modal[open]{
  animation: announce-modal-in .22s ease;
}

@keyframes announce-modal-in{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to{ opacity: 1; transform: none; }
}

.announce-modal__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 18px 20px 0;
}

.announce-modal__title{
  margin: 0;
  color: var(--ab-text);
  font-size: 1.1rem;
  line-height: 1.28;
  font-weight: 950;
  letter-spacing: -.02em;
}

.announce-modal__close{
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  border: 1px solid var(--ab-border);
  border-radius: 11px;

  background-color: color-mix(in srgb, var(--ab-text) 5%, transparent);
  color: var(--ab-muted);
  cursor: pointer;
}

.announce-modal__close:hover{
  color: var(--ab-text);
  border-color: color-mix(in srgb, var(--ab-accent) 48%, var(--ab-border));
}

.announce-modal__close:focus-visible{
  outline: 2px solid var(--ab-accent);
  outline-offset: 2px;
}

.announce-modal__close svg{
  width: 15px;
  height: 15px;
}

.announce-modal__body{
  padding: 12px 20px 4px;
  font-size: .93rem;
  line-height: 1.58;
}

.announce-modal__body p{
  margin: 0 0 10px;
  color: var(--ab-text);
}

.announce-modal__muted{
  color: var(--ab-muted) !important;
  font-size: .87rem;
}

/* прогресс в модалке поддержки */
.announce-modal__meter-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
}

.announce-modal__meter{
  flex: 1;
  height: 9px;

  border-radius: 999px;
  border: 1px solid var(--ab-border);
  background-color: color-mix(in srgb, var(--ab-text) 9%, transparent);
  overflow: hidden;
}

.announce-modal__meter-fill{
  height: 100%;
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--ab-accent), var(--ab-accent-2));
}

.announce-modal__meter-pct{
  flex: 0 0 auto;
  color: var(--ab-accent);
  font-size: .88rem;
  font-weight: 950;
}

/* реквизиты СБП */
.announce-modal__pay{
  margin-bottom: 6px;
  padding: 12px 14px;

  border: 1px dashed var(--ab-border);
  border-radius: 15px;
  background-color: color-mix(in srgb, var(--ab-text) 4%, transparent);
}

.announce-modal__pay-label{
  margin-bottom: 6px;

  color: var(--ab-muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.announce-modal__pay-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.announce-modal__pay-number{
  color: var(--ab-text);
  text-decoration: none;
  font-size: 1.04rem;
  font-weight: 950;
  letter-spacing: .02em;
}

.announce-modal__pay-number:hover{
  color: var(--ab-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.announce-modal__pay-note{
  margin-top: 8px;
  color: var(--ab-muted);
  font-size: .8rem;
  line-height: 1.4;
}

/* чипы анонса игры */
.announce-modal__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.announce-modal__chips span{
  display: inline-flex;
  align-items: center;

  min-height: 28px;
  padding: 4px 11px;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ab-accent) 30%, transparent);
  background-color: var(--ab-accent-soft);

  color: var(--ab-text);
  font-size: .8rem;
  font-weight: 850;
}

/* кнопки модалки */
.announce-modal__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px 20px;
}

.announce-modal__btn,
.announce-modal__btn:visited,
.announce-modal__btn:hover,
.announce-modal__btn:focus-visible{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 42px;
  padding: 9px 16px;

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

  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;

  opacity: 1;
  filter: none;
  text-shadow: none;

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

.announce-modal__btn:hover{
  transform: translateY(-1px);
}

.announce-modal__btn svg{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.announce-modal__btn--primary,
.announce-modal__btn--primary:visited,
.announce-modal__btn--primary:hover,
.announce-modal__btn--primary:focus-visible,
.announce-modal__btn--primary svg{
  background: var(--ab-btn-bg);
  color: var(--ab-btn-fg) !important;
  fill: currentColor;
  stroke: currentColor;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--ab-accent) 22%, rgba(0,0,0,.16));
}

.announce-modal__btn--ghost,
.announce-modal__btn--ghost:visited,
.announce-modal__btn--ghost:hover,
.announce-modal__btn--ghost:focus-visible{
  background-color: color-mix(in srgb, var(--ab-text) 5%, transparent);
  border-color: var(--ab-border);
  color: var(--ab-text) !important;
}

.announce-modal__btn--ghost:hover{
  border-color: color-mix(in srgb, var(--ab-accent) 52%, var(--ab-border));
}

.announce-modal__btn--ghost.is-ok{
  border-color: rgba(74, 188, 127, .56);
  background-color: rgba(74, 188, 127, .14);
}

.announce-modal__btn:focus-visible{
  outline: 2px solid var(--ab-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Мобильная адаптация
   ========================================================================== */

@media (max-width: 640px){
  .announce-chip{
    min-width: 154px;
    padding: 9px 12px;
  }

  .announce-chip__icon{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 11px;
  }

  .announce-chip__icon svg{
    width: 17px;
    height: 17px;
  }

  /* модалка как bottom-sheet */
  .announce-modal{
    width: calc(100vw - 18px);
    margin: auto auto 9px;
    border-radius: 20px 20px 16px 16px;
  }

  .announce-modal__actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .announce-modal__btn{
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 380px){
  .announce-chip{
    min-width: 142px;
  }

  .announce-chip__label{
    font-size: .88rem;
  }

  .announce-modal__head{
    padding: 15px 15px 0;
  }

  .announce-modal__body{
    padding: 11px 15px 4px;
  }

  .announce-modal__actions{
    padding: 11px 15px 16px;
  }

  .announce-modal__pay-row{
    flex-direction: column;
    align-items: stretch;
  }

  .announce-modal__pay-row .announce-modal__btn{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .announce-chip,
  .announce-chip:hover,
  .announce-modal[open],
  .announce-modal__btn,
  .announce-modal__btn:hover{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.announce-progress--0 { width: 0%; }
.announce-progress--5 { width: 5%; }
.announce-progress--10 { width: 10%; }
.announce-progress--15 { width: 15%; }
.announce-progress--20 { width: 20%; }
.announce-progress--25 { width: 25%; }
.announce-progress--30 { width: 30%; }
.announce-progress--35 { width: 35%; }
.announce-progress--40 { width: 40%; }
.announce-progress--45 { width: 45%; }
.announce-progress--50 { width: 50%; }
.announce-progress--55 { width: 55%; }
.announce-progress--60 { width: 60%; }
.announce-progress--65 { width: 65%; }
.announce-progress--70 { width: 70%; }
.announce-progress--75 { width: 75%; }
.announce-progress--80 { width: 80%; }
.announce-progress--85 { width: 85%; }
.announce-progress--90 { width: 90%; }
.announce-progress--95 { width: 95%; }
.announce-progress--100 { width: 100%; }