/* ═══════════════════════════════════════════════
   S.T.A.L.K.E.R. 2 Wiki — Article Content Styles
   Стилі для контенту статті (безшовний перехід)
   ═══════════════════════════════════════════════ */

.article-content {
  line-height: 1.8;
  font-size: 16rem;
  color: var(--colorMain);
  white-space: pre-line;
}

.article-content h2 { font-size: 24rem; margin: 0 0 -0.5em; color: var(--colorMain); scroll-margin-top: 80rem; }
.article-content h3 { font-size: 20rem; margin: 30rem 0 -0.5em; color: var(--colorGalk); scroll-margin-top: 80rem; }
.article-content h4 { font-size: 18rem; margin: 25rem 0 -0.5em; color: #e0af4c; scroll-margin-top: 80rem; }
.article-content p { margin-bottom: 16rem; }

.article-content ul,
.article-content ol { margin: 16rem 0; padding-left: 24rem; }
.article-content li { margin-bottom: 8rem; }

.article-content a { color: #e0af4c; text-decoration: none; }
.article-content a:hover { text-decoration: underline; }

.article-content img {
  max-width: 50%;
  height: auto;
  border-radius: 12rem;
  margin: 8rem 20rem 12rem 0;
  float: left;
  cursor: pointer;
  transition: opacity 0.2s;
}
.article-content img:hover {
  opacity: 0.85;
}
/* Іконки аудіоплеєра — скидаємо стилі зображень */
.article-audio-player img {
  max-width: none;
  border-radius: 0;
  margin: 0;
  float: none;
  cursor: default;
  transition: none;
  pointer-events: none;
}
.article-audio-player img:hover {
  opacity: 1;
}
.article-content img.article-img-right {
  float: right;
  margin: 8rem 0 12rem 20rem;
}
.article-content img.article-img-full {
  float: none;
  max-width: 100%;
  margin: 20rem 0;
}
.article-content .article-img-clear {
  clear: both;
}
.article-content a.image-lightbox {
  display: block;
  float: left;
  max-width: 50%;
  margin: 8rem 20rem 12rem 0;
  position: relative;
  z-index: 1;
}
.article-content a.image-lightbox img {
  float: none;
  max-width: 100%;
  margin: 0;
}

.article-content blockquote {
  border-left: 4rem solid var(--accentlite);
  padding-left: 20rem;
  margin: 20rem 0;
  color: var(--colorFwoolf-black);
  font-style: italic;
}

.article-content code {
  background: rgba(255,255,255,0.1);
  padding: 2rem 6rem;
  border-radius: 4rem;
  font-family: monospace;
}

.article-content pre {
  background: rgba(0,0,0,0.3);
  padding: 16rem;
  border-radius: 8rem;
  overflow-x: auto;
  margin: 20rem 0;
}

.article-content table { width: 100%; border-collapse: collapse; margin: 20rem 0; }
.article-content th,
.article-content td { padding: 12rem; border: 1rem solid rgba(255,255,255,0.1); text-align: left; }
.article-content th { background: rgba(255,255,255,0.05); color: #e0af4c; }

/* Inline спойлер — текст замальований, показується при кліку */
.article-content .spoiler {
  background: #333;
  color: transparent;
  padding: 2rem 6rem;
  border-radius: 4rem;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.article-content .spoiler.revealed {
  background: rgba(224,175,76,0.2);
  color: #e5e5e5;
  cursor: default;
}

/* Audio Player */
.article-audio-player {
  display: flex;
  align-items: center;
  gap: 12rem;
  background: var(--bgColorMainAside);
  border: 1px solid var(--colorFwoolf-border);
  border-radius: 10rem;
  padding: 12rem 16rem;
  margin: 3rem 0;
  max-width: 480rem;
}
.article-audio-player__play {
  width: 36rem;
  height: 36rem;
  min-width: 36rem;
  min-height: 36rem;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bgColorMainBlack);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: background 0.2s;
}
.article-audio-player__play:hover {
  background: var(--accentlite);
}
.article-audio-player__play-icon {
  width: 14rem;
  height: 14rem;
  max-width: 14rem;
  max-height: 14rem;
  margin: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) saturate(100%);
}
.article-audio-player__info {
  flex: 1;
  min-width: 0;
}
.article-audio-player__title {
  font-size: 13rem;
  font-weight: 500;
  color: var(--colorMain);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6rem;
}
.article-audio-player__track {
  position: relative;
  height: 4rem;
  background: var(--colorFwoolf-border);
  border-radius: 2rem;
  cursor: pointer;
}
.article-audio-player__progress {
  height: 100%;
  background: var(--accent);
  border-radius: 2rem;
  width: 0;
  transition: width 0.1s linear;
}
.article-audio-player__time {
  font-size: 11rem;
  color: var(--colorFwoolf-black);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 36rem;
  text-align: right;
}
.article-audio-player__volume {
  display: flex;
  align-items: center;
  gap: 6rem;
  flex-shrink: 0;
}
.article-audio-player__volume-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colorFwoolf-black);
  padding: 2rem;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.article-audio-player__volume-btn:hover {
  color: var(--accent);
}
.article-audio-player__vol-icon {
  width: 16rem;
  height: 16rem;
  max-width: 16rem;
  max-height: 16rem;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.article-audio-player__volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60rem;
  height: 4rem;
  background: var(--colorFwoolf-border);
  border-radius: 2rem;
  outline: none;
  cursor: pointer;
}
.article-audio-player__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12rem;
  height: 12rem;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.article-audio-player__volume-slider::-moz-range-thumb {
  width: 12rem;
  height: 12rem;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Article Cover Scene Effects */
.article-cover-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.article-cover-scene__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(224,175,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,175,76,0.04) 1px, transparent 1px);
  background-size: 60rem 60rem;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 10%, transparent 70%);
}
.article-cover-scene__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,175,76,0.15), transparent);
  animation: articleScanMove 10s linear infinite;
}
@keyframes articleScanMove {
  0% { top: -1px; }
  100% { top: 100%; }
}

/* Mod info card */
.mod-info {
  padding: 12rem;
}
.mod-meta {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-bottom: 14rem;
  padding-bottom: 14rem;
  border-bottom: 1px solid var(--colorFwoolf-border);
}
.mod-meta-item {
  display: flex;
  align-items: center;
  gap: 6rem;
  font-size: var(--fontSize-medium);
  color: var(--colorFwoolf);
}
.mod-meta-item strong {
  color: var(--colorMain);
  font-weight: 500;
}
.mod-meta-today {
  color: var(--accent);
  font-size: var(--fontSize-small);
}
.mod-meta-icon {
  width: 14rem;
  height: 14rem;
  opacity: 0.5;
}
.mod-downloads {
  display: flex;
  align-items: center;
  gap: 10rem;
}
.mod-download-btn {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 10rem 14rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--colorFwoolf-border);
  border-radius: 10rem;
  color: var(--colorMain);
  text-decoration: none;
  font-size: var(--fontSize-medium);
  font-weight: 500;
  transition: all 0.2s;
}
.mod-download-btn:hover {
  background: rgba(224,175,76,0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.mod-download-btn--local {
  background: rgba(224,175,76,0.06);
  border-color: rgba(224,175,76,0.2);
}
.mod-download-btn--local:hover {
  background: rgba(224,175,76,0.12);
}
.mod-download-icon {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.mod-download-btn:hover .mod-download-icon {
  opacity: 1;
}
.mod-download-external {
  display: flex;
  gap: 8rem;
}
.mod-download-ext-btn {
  width: 40rem;
  height: 40rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--colorFwoolf-border);
  border-radius: 10rem;
  transition: all 0.2s;
}
.mod-download-ext-btn:hover {
  background: rgba(224,175,76,0.08);
  border-color: var(--accent);
}
.mod-download-ext-icon {
  width: 22rem;
  height: 22rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.mod-download-ext-btn:hover .mod-download-ext-icon {
  opacity: 1;
}

/* Mod vote rating */
.mod-rating-bar {
  width: 100%;
  height: 6rem;
  background: rgba(239,68,68,0.3);
  border-radius: 3rem;
  overflow: hidden;
  margin: 16rem 0 8rem;
}
.mod-rating-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 3rem;
  transition: width 0.6s ease;
}
.mod-rating-percent {
  font-family: 'Oswald', sans-serif;
  font-size: 32rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1px;
  text-align: center;
}
.mod-rating-label {
  font-size: var(--fontSize-medium);
  color: var(--colorFwoolf);
  text-align: center;
  margin-bottom: 16rem;
}
.mod-vote-row {
  display: flex;
  justify-content: center;
  gap: 32rem;
  margin-bottom: 12rem;
}
.mod-vote-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}
.mod-vote-btn {
  width: 48rem;
  height: 48rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--colorFwoolf-border);
  border-radius: 14rem;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.mod-vote-btn:disabled {
  cursor: default;
}
.mod-vote-btn:not(:disabled).mod-vote-like:hover {
  background: rgba(34,197,94,0.15);
  border-color: #22c55e;
}
.mod-vote-btn:not(:disabled).mod-vote-dislike:hover {
  background: rgba(239,68,68,0.15);
  border-color: #ef4444;
}
.mod-vote-btn.voted.mod-vote-like {
  background: rgba(34,197,94,0.15);
  border-color: #22c55e;
}
.mod-vote-btn.voted.mod-vote-dislike {
  background: rgba(239,68,68,0.15);
  border-color: #ef4444;
}
.mod-vote-icon {
  width: 22rem;
  height: 22rem;
  opacity: 0.4;
  transition: opacity 0.2s;
  pointer-events: none;
}
.mod-vote-btn:not(:disabled):hover .mod-vote-icon,
.mod-vote-btn.voted .mod-vote-icon {
  opacity: 1;
}
.mod-vote-count {
  font-size: 14rem;
  font-weight: 500;
  color: var(--colorFwoolf);
}
.mod-vote-count--like { color: #22c55e; }
.mod-vote-count--dislike { color: #ef4444; }

/* Banlist table */
.banlist-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20rem;
}
.banlist-table th {
  padding: 10rem 12rem;
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  font-size: 14rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  border-bottom: 2px solid rgba(224, 175, 76, 0.3);
  white-space: nowrap;
}
.banlist-table td {
  padding: 10rem 12rem;
}
.banlist-table tr + tr {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.banlist-muted {
  color: rgba(217, 214, 201, 0.6);
}
.banlist-term {
  color: rgba(217, 214, 201, 0.4);
  font-size: 13rem;
  white-space: nowrap;
}
.banlist-expired {
  color: #22c55e;
}
.banlist-empty {
  color: rgba(217, 214, 201, 0.5);
  margin-top: 20rem;
}