:root{
  --bg:#2b0a0a; --bg-deep:#1b0707;
  --gold:#d1a95b; --gold-2:#f3d58b; --gold-3:#7a5a26;
  --text:#e9dcc2; --muted:#bca887;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

/* Липкий футер */
body{
  margin:0; color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
main{ flex:1; }

a{color:inherit; text-decoration:none}

/* === Brand link (название сервера) с мягкой подсветкой === */
.brand .brand-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1;
  text-decoration: none;
  transition: opacity .25s ease;
}

/* подсветка за текстом */
.brand .brand-title::before {
  content: "";
  position: absolute;
  top: 30%;      /* подсветка охватывает ~40% высоты текста */
  bottom: 30%;
  left: 10%;
  right: 10%;    /* ~80% ширины */
  border-radius: 10px;
  background: rgba(120, 0, 0, 0.9); /* насыщеннее и заметнее */
  opacity: 0;
  filter: blur(42px); /* мягкие, размытые края */
  transition: opacity .35s ease;
  z-index: -1;
}

.brand .brand-title:hover::before {
  opacity: 1;
}

.brand .brand-title:focus-visible::before {
  opacity: 1;
  background: rgba(150,0,0,0.95);
}


/* ЕДИНЫЙ ФОН */
.page-bg{
  position:fixed; inset:-120vh 0 -120vh 0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(243,213,139,.12), transparent 65%),
    radial-gradient(1000px 600px at 20% -10%, rgba(120,20,20,.25), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(105deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.02) 2px 4px),
    linear-gradient(180deg, #3a0c0c, #1b0707 100%);
  background-attachment:fixed;
}

/* GOLD */
.gold{
  font-family:"Cinzel", serif;
  background:linear-gradient(180deg, var(--gold-2), var(--gold), var(--gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.25), 0 6px 12px rgba(0,0,0,.55);
  letter-spacing:.06em;
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(6px);
  background:linear-gradient(180deg, rgba(16,5,5,.9), rgba(16,5,5,.55));
  border-bottom:1px solid rgba(209,169,91,.25);
}
.nav-wrap{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:10px 20px}
.brand-title{font-family:"Cinzel",serif; font-weight:900; font-size:20px}
.nav a.link{opacity:.9; padding:10px 14px; border-radius:999px; transition:.2s; font-weight:600}
.nav a.link:hover{background:rgba(209,169,91,.1); opacity:1}
.nav a.link.active{background:rgba(209,169,91,.18); opacity:1; border:1px solid rgba(209,169,91,.25)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:800; letter-spacing:.04em; border:1px solid rgba(209,169,91,.25); transition:.2s; cursor:pointer}
.btn.ghost{background:rgba(209,169,91,.08)}
.btn.ghost:hover{background:rgba(209,169,91,.14)}
.btn.primary{background: radial-gradient(120% 160% at 20% 10%, var(--gold-2), var(--gold)); color:#251602; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px rgba(209,169,91,.25)}
.btn.primary:hover{transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 40px rgba(209,169,91,.35)}


/* HERO */
.hero{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; max-width:1200px; margin:0 auto; padding:60px 20px 40px; z-index:1}
.hero-left{display:flex; flex-direction:column; justify-content:center}
.pre{color:#bca887; text-transform:uppercase; letter-spacing:.2em; font-size:12px; margin-bottom:10px}
.title{font-size:56px; line-height:1.02; margin:0 0 18px}
.subtitle{color:#eeddc0; opacity:.9; font-size:18px; line-height:1.5; max-width:52ch}
.logo-wrap{display:flex; align-items:center; justify-content:center; padding:22px}
.logo{width:70%; max-width:440px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.75));}

/* CONTENT */
.container{max-width:1200px; margin:0 auto; padding:40px 20px; position:relative; z-index:1}
.section-title{font-size:32px; margin:0 0 10px}
.section-sub{color:#bca887; margin-bottom:26px}
.features,.news{display:grid; gap:18px}
.features{grid-template-columns:repeat(3,1fr)}
.news{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg, rgba(30,10,10,.85), rgba(15,5,5,.9)); border:1px solid rgba(209,169,91,.18); border-radius:16px; padding:18px; transition:.2s; box-shadow: 0 10px 30px rgba(0,0,0,.35)}
.card:hover{transform: translateY(-3px); border-color: rgba(243,213,139,.35)}
.card h3{margin:0 0 8px; font-family:"Cinzel"}
.tag{display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-family:"Cinzel", serif; font-weight:700; color:#2b1703; background:linear-gradient(180deg, var(--gold-2), var(--gold)); padding:6px 10px; border-radius:999px}
.lead{font-size:18px; color:#eeddc0; opacity:.9; line-height:1.6}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }

/* FOOTER */
footer{margin-top:40px; padding:30px 0; background:linear-gradient(180deg, #120505, #0b0303); border-top:1px solid rgba(209,169,91,.2)}
.foot{max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.copy{color:#a48855}

/* ADAPTIVE */
@media (max-width:980px){ .hero{grid-template-columns:1fr; padding-top:40px} .logo{max-width:360px} .features,.news{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .title{font-size:40px} .features,.news{grid-template-columns:1fr} }

/* ✨ ПЫЛЬ */
.sparkle{position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.32}
.sparkle span{position:absolute; border-radius:999px; filter:blur(.4px); width:2px; height:2px; animation: floatUp linear infinite, flicker ease-in-out infinite; will-change: transform, opacity}
@keyframes floatUp{0%{transform:translate(var(--xStart),110vh) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--xEnd),-90vh) rotate(360deg);opacity:0}}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.55}}

/* ========= EVENTS PAGE EXTRAS ========= */

/* Вкладки (PvE / PvP) */
.tabs {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(30,10,10,.7), rgba(15,5,5,.85));
  border:1px solid rgba(209,169,91,.2);
  padding:10px; border-radius:14px;
}
.btn-tab{
  appearance:none; border:none; cursor:pointer;
  padding:10px 16px; border-radius:12px; font-weight:800; letter-spacing:.04em;
  color:var(--text); background:rgba(209,169,91,.08);
  border:1px solid rgba(209,169,91,.18); transition:.2s
}
.btn-tab:hover{ background:rgba(209,169,91,.14) }
.btn-tab.active{
  background: radial-gradient(120% 160% at 20% 10%, var(--gold-2), var(--gold));
  color:#251602; border-color: rgba(209,169,91,.35); box-shadow: 0 8px 24px rgba(209,169,91,.25) inset
}

/* Контент вкладок */
.tab-pane{ display:none; animation: fade .25s ease }
.tab-pane.active{ display:block }
@keyframes fade{ from{opacity:.6; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }

/* Сетка 3×2 для карточек */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; min-height:460px }
@media (max-width:980px){ .cards{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr } }

/* Карточка события с фоном */
.event-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(30,10,10,.85), rgba(15,5,5,.9));
  border:1px solid rgba(209,169,91,.18);
  border-radius:16px; padding:18px; transition:.2s;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:pointer; isolation:isolate;
}
.event-card:hover{ transform: translateY(-3px); border-color: rgba(243,213,139,.35) }
.event-card .bg{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  filter:saturate(.8) brightness(.6) contrast(.95);
  opacity:.22;
}
.event-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.55), rgba(0,0,0,.1) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* Шапка карточки */
.event-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; padding:6px 10px; border-radius:999px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:800;
  border:1px solid rgba(209,169,91,.25); background:rgba(209,169,91,.1)
}
.dot{ width:8px; height:8px; border-radius:50% }
.status.live     { background: rgba(48,206,120,.15); border-color: rgba(48,206,120,.35) }
.status.live .dot{ background: #30ce78; box-shadow:0 0 12px rgba(48,206,120,.7) }
.status.upcoming     { background: rgba(243,213,139,.15); border-color: rgba(243,213,139,.35) }
.status.upcoming .dot{ background: var(--gold-2) }
.status.ended     { background: rgba(140,140,140,.12); border-color: rgba(140,140,140,.28); color:#c9c3b4 }
.status.ended .dot{ background: #9a958a }

.event-meta{ color:#cdbb98; font-size:13px }
.event-card h3{ margin:6px 0 6px; font-family:"Cinzel" }
.event-card p{ margin:0; color:#e9dcc2; opacity:.9 }

/* Краткая мета в карточке */
.event-meta-row{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  margin-top:10px; font-size:13px; color:#cdbb98
}
.em-badge{display:inline-flex; align-items:center; gap:8px; opacity:.95}
.em-badge svg{width:16px; height:16px; flex:0 0 16px; opacity:.9}

/* Пагинация */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:22px; flex-wrap:wrap }
.page-btn{
  background:rgba(209,169,91,.08); border:1px solid rgba(209,169,91,.18);
  color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; transition:.2s; font-weight:700; min-width:36px; text-align:center
}
.page-btn:hover{ background:rgba(209,169,91,.14) }
.page-btn.active{
  background: radial-gradient(120% 160% at 20% 10%, var(--gold-2), var(--gold));
  color:#251602; border-color: rgba(209,169,91,.35)
}
.page-btn[disabled]{ opacity:.5; cursor:not-allowed }

/* ========= EVENT DETAILS PAGE ========= */

/* шапка события */
.event-hero{
  max-width:1200px; margin:0 auto; padding:36px 20px 18px;
}
.back-link{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:12px; font-weight:700;
  border:1px solid rgba(209,169,91,.18); background:rgba(209,169,91,.08);
}
.back-link:hover{ background:rgba(209,169,91,.14) }
.event-title{ font-size:44px; margin:10px 0 8px }
.stat-badges{ display:flex; gap:10px 14px; flex-wrap:wrap; color:#cdbb98 }
.stat-badges .em-badge svg{ width:18px; height:18px }

/* общий статус-бейдж можно переиспользовать .status */

/* раскладка: инфо/награды и таблица */
.event-layout{
  max-width:1200px; margin:0 auto; padding:10px 20px 40px;
  display:grid; grid-template-columns: 1fr 1.35fr; gap:20px;
}
@media (max-width:980px){ .event-layout{ grid-template-columns:1fr } }

/* инфо-бокс */
.info-box{
  background:linear-gradient(180deg, rgba(30,10,10,.8), rgba(15,5,5,.92));
  border:1px solid rgba(209,169,91,.18);
  border-radius:16px; padding:16px;
}
.info-box h3{ margin:4px 0 8px }
.meta-list{ margin:0; padding-left:18px; color:#e9dcc2 }
.reward-box{
  margin-top:12px;
  background:linear-gradient(180deg, rgba(30,10,10,.7), rgba(15,5,5,.85));
  border:1px solid rgba(209,169,91,.18);
  border-radius:12px; padding:12px;
}
.reward-title{ font-weight:800; letter-spacing:.04em; color:#e9dcc2; margin:6px 0 }
.tiers-list, .top3-list{ margin:0; padding-left:18px; color:#e9dcc2 }
.tiers-list li, .top3-list li{ margin:4px 0 }

/* таблица большая */
.leader{
  width:100%; border-collapse: collapse; margin-top:8px;
  background:linear-gradient(180deg, rgba(30,10,10,.7), rgba(15,5,5,.85));
  border:1px solid rgba(209,169,91,.18); border-radius:14px; overflow:hidden
}
.leader th, .leader td{ border-bottom:1px solid rgba(209,169,91,.12); padding:11px 12px; text-align:left; font-size:15px }
.leader th{ font-weight:800; color:#e9dcc2; position:sticky; top:0; background:rgba(30,10,10,.9); backdrop-filter:saturate(1.2) blur(2px) }
.leader tr:last-child td{ border-bottom:none }
.nick-cell{ display:flex; align-items:center; gap:10px }
.class-icon{ width:24px; height:24px; object-fit:contain; border-radius:4px; border:1px solid rgba(209,169,91,.25); background:rgba(0,0,0,.2) }

/* тултип */
.tip{ position:relative }
.tip[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:-8px; transform:translate(-50%,-100%);
  white-space:nowrap; pointer-events:none; opacity:0; transition:.15s;
  background:rgba(20,10,10,.95); color:#e9dcc2; border:1px solid rgba(209,169,91,.25);
  padding:5px 8px; border-radius:8px; font-size:12px; z-index:5;
  box-shadow:0 8px 18px rgba(0,0,0,.45)
}
.tip:hover[data-tip]::after{ opacity:1 }

/* блок с таблицей */
.table-box{
  background:linear-gradient(180deg, rgba(30,10,10,.82), rgba(15,5,5,.95));
  border:1px solid rgba(209,169,91,.18);
  border-radius:16px; padding:16px;
}
.table-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.table-head .status{ padding:6px 12px }
.table-note{ color:#cdbb98; font-size:14px }
/* ===== Глобальные скроллбары (Firefox) ===== */
html{
  /* thumb, track */
  scrollbar-color: #8b6a2b #140606;
  scrollbar-width: thin; /* auto | thin | none */
}

/* ===== WebKit (Chrome/Edge/Opera/Safari) ===== */
::-webkit-scrollbar{
  width: 12px;           /* Толщина вертикального */
  height: 12px;          /* Толщина горизонтального */
}
::-webkit-scrollbar-corner{
  background:#140606;
}

/* Рельса */
::-webkit-scrollbar-track{
  background: linear-gradient(180deg, #160707, #220a0a 60%, #140606);
  border-left: 1px solid rgba(209,169,91,.12);
}

/* Ползунок */
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #f3d58b, #d1a95b 60%, #7a5a26);
  border: 1px solid rgba(243,213,139,.30);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.35);
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #ffe7a9, #e0bd6b 60%, #6d511f);
}

/* Неактивное состояние (например, когда область не в фокусе) */
::-webkit-scrollbar-thumb:window-inactive{
  background: linear-gradient(180deg, #c9ab67, #9b7838 60%, #604818);
}

/* ===== Точечная настройка для таблицы лидеров ===== */
/* (применится к внутреннему контейнеру со скроллом в event) */
.table-box > div{
  scrollbar-color: #8b6a2b #140606;
  scrollbar-width: thin;
}
.table-box > div::-webkit-scrollbar{
  width: 10px;
}
.table-box > div::-webkit-scrollbar-track{
  background: linear-gradient(180deg,#140606,#1a0808);
  border-left: 1px solid rgba(209,169,91,.12);
}
.table-box > div::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #ead08a, #caa055 60%, #6f5424);
  border: 1px solid rgba(243,213,139,.25);
  border-radius: 10px;
}
/* ===== Dropdown в шапке ===== */
.menu{ display:flex; align-items:center; gap:12px; }

.nav-item{ position:relative; }
.has-dropdown .dropdown-toggle{
  appearance:none; border:none; background:transparent; cursor:pointer;
  font-family: inherit;         /* наследуем шрифт */
  font-size: inherit;           /* наследуем размер */
  font-weight:600;              /* как у .nav a.link */
  color: var(--text);
  padding:10px 14px;
  border-radius:999px;
  transition:.2s;
  display:inline-flex; align-items:center;
}
.has-dropdown .dropdown-toggle:hover{
  background:rgba(209,169,91,.10);
  opacity:1;
}
.has-dropdown .dropdown-toggle:focus-visible{
  outline:2px solid rgba(243,213,139,.45);
  outline-offset:2px;
}

/* Панель меню */
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  background: linear-gradient(180deg, rgba(30,10,10,.95), rgba(15,5,5,.98));
  border:1px solid rgba(209,169,91,.25);
  border-radius:14px; padding:8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:20;
}

/* Показываем меню: hover, фокус, или класс .open (для мобильных) */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown{
  opacity:1; visibility:visible; transform: translateY(0);
}

/* Пункты дропдауна */
.dd-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:var(--text);
  background:transparent; transition:.15s;
  font-weight:600;
}
.dd-item:hover{
  background: rgba(209,169,91,.10);
}

/* Узкие экраны */
@media (max-width:640px){
  .dropdown{ left:auto; right:15; min-width:200px; }
}

/* NEWS CARDS */
.news-card .status .dot{
  background:#f3d58b;
  box-shadow:0 0 10px rgba(243,213,139,.7);
}
.news-meta-row{
  margin-top:12px;
}

/* Пустые состояния / ошибки для списков */
.empty{
  padding:18px 16px;
  border-radius:14px;
  border:1px dashed rgba(209,169,91,.35);
  background:rgba(0,0,0,.45);
  color:#cdbb98;
  text-align:center;
}
.empty.error{
  border-style:solid;
  border-color:rgba(191,72,72,.6);
  background:rgba(80,16,16,.75);
}
@media (max-width: 768px){
  .nav-wrap{
    max-width:100%;
    padding:8px 12px;
    gap:10px;
    flex-wrap:wrap;
  }

  .brand-title{
    font-size:18px;
  }

  .nav-wrap > .brand{
    flex:1 0 100%;
  }

  .nav-wrap > div[style*="flex:1"]{
    display:none;
  }

  .menu{
    flex:1 0 100%;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .nav a.link,
  .has-dropdown .dropdown-toggle{
    padding:6px 10px;
    font-size:13px;
  }

  .btn.ghost{
    padding:6px 10px;
    font-size:13px;
  }
}

@media (max-width: 480px){
  .brand-title{
    font-size:16px;
  }

  .menu{
    gap:4px;
  }

  .nav a.link,
  .has-dropdown .dropdown-toggle,
  .btn.ghost{
    padding:5px 8px;
    font-size:12px;
  }
}
.changelog {
  --gap: 12px;
  --gap-lg: 16px;
  --border: rgba(209,169,91,.18);
  --bg: linear-gradient(180deg, rgba(30,10,10,.84), rgba(15,5,5,.94));
}

.changelog .section-title {
  font-size: 42px;
  margin-bottom: 6px;
}

.changelog .section-sub {
  opacity: .9;
  margin-bottom: 18px;
}

.cl-box {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  margin: 14px 0;
  overflow: hidden;
}

.cl-box > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: .04em;
}

.cl-box > summary::-webkit-details-marker {
  display: none;
}

.cl-box[open] {
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.cl-box__inner {
  padding: 0 14px 14px;
}

.skilllist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: var(--gap-lg);
}

@media (max-width: 420px) {
  .skilllist {
    grid-template-columns: 1fr;
  }
}

.skill {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(209,169,91,.14);
  background: rgba(0,0,0,.28);
  border-radius: 14px;
  padding: 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.skill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: rgba(0,0,0,.32);
}

.skill__top {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
}

.skill__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(209,169,91,.25);
  background: #000;
}

.skill__namewrap {
  display: flex;
  flex-direction: column;
}

.skill__name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
}

.skill__subtitle {
  font-size: 12px;
  line-height: 1.2;
  opacity: .9;
  color: #e9dcc2;
  margin-top: 2px;
}

.skill__changes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(209,169,91,.22);
  background: rgba(0,0,0,.22);
  color: #e9dcc2;
  width: fit-content;
  max-width: 100%;
}

.chg--buff {
  border-color: rgba(0, 80, 0, .7);
  background: linear-gradient(180deg, rgba(0, 35, 0, .75), rgba(0, 20, 0, .92));
  color: #e9dcc2;
}


.chg--nerf {
  border-color: rgba(255,96,96,.85);
  background: linear-gradient(180deg, rgba(110,12,12,.62), rgba(65,6,6,.76));
  color: #ffd0ca;
  text-shadow: 0 0 1px rgba(0,0,0,.5);
}

.chg--note {
  border-style: dashed;
  border-color: rgba(209,169,91,.45);
  opacity: .95;
}

.ci {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(209,169,91,.25);
  background: rgba(0,0,0,.25);
  object-fit: cover;
}

.muted {
  opacity: .85;
}

/*QUESTS*/
.quests-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quest-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(209, 169, 91, 0.14);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 14px;
  padding: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.quest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.32);
}

.quest-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quest-card__title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  color: var(--text);
}

.quest-card__changes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 420px) {
  .quest-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}