/* characters.css — базовый слой для каталога и вики персонажей */
:root{
  /* Карточки/текст */
  --char-card-bg: var(--card-bg, #fff);
  --char-card-brd: var(--card-brd, #e5e7eb);
  --char-title: var(--ink, #111827);
  --char-muted: var(--muted, #6b7280);
  --char-link: var(--link, #2563eb);
  --char-link-hover: var(--link-hover, #1d4ed8);

  /* Вики-секции */
  --wiki-h2-color: var(--ink, #111827);
  --wiki-section-brd: var(--char-card-brd);
  --wiki-section-bg: var(--surface, #fff);

  /* Превью / миниатюры */
  --thumb-bg: #f8fafc;
  --thumb-brd: var(--char-card-brd);
  --thumb-hover-bg: #f3f4f6;

  /* Модалка */
  --modal-bg: rgba(17,24,39,0.9);
  --modal-brd: #374151;
}

/* Обёртки */
.chrs-wrap, .wiki-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.breadcrumbs { font-size: 12px; color: var(--char-muted); margin-bottom: 8px; display:flex; gap:6px; align-items:center; }
.page-title { font-size: 22px; margin: 8px 0 16px; color: var(--char-title); }
.muted { color: var(--char-muted); }

/* Сетка фандомов */
.fandoms-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) ); gap: 12px; }
.fandom-card {
  display: block; background: var(--char-card-bg); border: 1px solid var(--char-card-brd);
  border-radius: 14px; padding: 14px; text-decoration: none; color: inherit; transition: background .2s;
}
.fandom-card:hover { background: var(--thumb-hover-bg); }
.fandom-card__title { font-weight: 600; margin-bottom: 6px; }
.fandom-card__meta { font-size: 13px; color: var(--char-muted); }

/* Список персонажей */
.chrs-head { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; }
.chrs-search { display:flex; gap:8px; }
.chrs-search input { padding:8px 10px; border:1px solid var(--char-card-brd); border-radius:10px; }
.chrs-search button { padding:8px 12px; border:1px solid var(--char-card-brd); background:var(--char-card-bg); border-radius:10px; cursor:pointer; }

.characters-grid { display:grid; grid-template-columns: repeat( auto-fill, minmax(180px, 1fr) ); gap: 12px; }
.character-card { display:block; background:var(--char-card-bg); border:1px solid var(--char-card-brd); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; }
.character-card__thumb { aspect-ratio: 1/1; background:var(--thumb-bg); border-bottom:1px solid var(--thumb-brd); display:flex; align-items:center; justify-content:center; }
.character-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-placeholder { font-size:12px; color:var(--char-muted); padding:12px; }
.character-card__title { font-weight:600; padding:10px; }

/* Вики */
.wiki-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 0 0 12px; }
.wiki-title { font-size: 28px; margin: 0; color: var(--char-title); }
.wiki-actions { display:flex; gap:8px; }
.btn { padding:8px 12px; border-radius:10px; border:1px solid var(--char-card-brd); background:var(--char-card-bg); text-decoration:none; color:inherit; }
.btn-outline { background:transparent; }

.wiki-layout { display:grid; grid-template-columns: 300px 1fr; gap: 16px; align-items:start; }
@media (max-width: 900px) { .wiki-layout{ grid-template-columns: 1fr; } }

.wiki-aside { position: sticky; top: calc(var(--header-offset, 0px) + 12px); }
.wiki-art { border:1px solid var(--char-card-brd); background:var(--char-card-bg); border-radius:14px; padding:8px; overflow:hidden; }
.wiki-art img { width:100%; height:auto; display:block; border-radius:10px; }
.wiki-art__placeholder { color:var(--char-muted); font-size:13px; padding:10px; text-align:center; }

.wiki-article { display:grid; gap:14px; }
.wiki-section { background:var(--wiki-section-bg); border:1px solid var(--wiki-section-brd); border-radius:14px; padding:14px; }
.wiki-h2 { font-size: 18px; margin: 0 0 8px; color: var(--wiki-h2-color); }
.wiki-body { font-size: 15px; line-height: 1.7; }

/* Фанфики */
.wiki-fanfics { margin-top: 16px; }
.fanfics-list { display:grid; grid-template-columns: repeat( auto-fill, minmax(260px, 1fr) ); gap:12px; }
.fanfic-card { border:1px solid var(--char-card-brd); background:var(--char-card-bg); border-radius:14px; padding:12px; }
.fanfic-card__link { text-decoration:none; color:inherit; }
.fanfic-card__title { font-weight:600; }

/* Лайтбокс — полноэкранный флекс и жёсткое центрирование */
dialog.img-lightbox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: none !important;               /* скрыт по умолчанию */
  z-index: 1100 !important;

  /* центрирование содержимого */
  align-items: center !important;
  justify-content: center !important;
}

dialog.img-lightbox[open] {
  display: flex !important;               /* при открытии — флекс */
}

dialog.img-lightbox::backdrop {
  background: var(--modal-bg, rgba(17,24,39,.9)) !important;
}

/* сама картинка */
#img-lightbox-target{
  display: block !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: var(--surface, #111827) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.35) !important;
}

/* кнопка закрытия */
.img-lightbox__close{
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  color: var(--text, #fff) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === Fanfic cards (как на главной) === */
.list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.card{
  display:grid; grid-template-columns:120px 1fr; gap:14px; padding:12px;
  border-radius:14px;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--card-brd, var(--border));
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
@media (max-width:560px){ .card{ grid-template-columns:96px 1fr; } }

.cover{
  width:120px; height:160px; object-fit:cover; border-radius:10px;
  background: var(--cover-bg, var(--surface-2));
  border: 1px solid var(--cover-brd, var(--border));
}
@media (max-width:560px){ .cover{ width:96px; height:128px; } }

.title{ margin:0 0 2px; font-size:1.15rem; line-height:1.25; }
.title a{ text-decoration:none; color:inherit; }
.title a:hover{ text-decoration:underline; text-underline-offset:3px; }

.meta{ font-size:.92rem; color: var(--muted); margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px; }
.meta a{ color:inherit; font-weight:700; text-decoration:none; border-bottom:1px solid transparent; }
.meta a:hover{ color: var(--btn-bg); border-bottom-color: var(--btn-bg); }

.badges{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:800; border:1px solid transparent; letter-spacing:.15px; white-space:nowrap; }
.badge .ico{ opacity:.85; }

.badge-rate--0  { background:#E8F8EE; border-color:#16A34A; color:#065F46; }
.badge-rate--6  { background:#F0FDF4; border-color:#A7F3D0; color:#065F46; }
.badge-rate--12 { background:#FEF9C3; border-color:#FACC15; color:#713F12; }
.badge-rate--16 { background:#FFE7D1; border-color:#FB923C; color:#7C2D12; }
.badge-rate--18 { background:#FEE2E2; border-color:#FCA5A5; color:#7F1D1D; }

.badge-cat{ background:#FFF1E0; border-color:#FFB07A; color:#7C2D12; }
.badge-cat--get{ background:#E9FDF3; border-color:#A7F3D0; color:#065F46; }
.badge-cat--article{ background:#F3F4F6; border-color:#E5E7EB; color:#374151; }
.badge-fandom{ background:#F0F9FF; border-color:#93C5FD; color:#1E3A8A; }

.desc{ font-size:.98rem; line-height:1.55; color: var(--text); word-break: break-word; }
.desc p{ margin:.45em 0; }

.pairs, .chars, .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pair{
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:8px; font-size:.78rem; font-weight:700;
  background: var(--pair-bg, #F5E0C6); border:1px solid var(--pair-brd, rgba(160,120,60,.28)); color: var(--pair-tx, #4a2e16);
}
.char{
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:8px; font-size:.78rem; font-weight:700;
  background: var(--char-bg, #EEF2FF); border:1px solid var(--char-brd, #C7D2FE); color: var(--char-tx, #1E3A8A);
}
.tag{
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; font-size:.75rem; font-weight:700;
  background: var(--tag-bg, #FFF7F0); border:1px solid var(--tag-brd, #FECBA1); color: var(--tag-tx, #7C2D12);
}
.tag .ico{ opacity:.8; }

.actions{ margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.like-control{ display:inline-flex; align-items:center; }
.like-btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; min-height:36px; border-radius:10px;
  border:1px solid var(--border); background: var(--surface-2); color: var(--text); cursor:pointer; font-weight:700;
  transition: background-color .15s ease, transform .1s ease;
}
.like-btn:hover{ background: var(--surface); transform: translateY(-1px); }
.like-btn:focus-visible{ outline: 2px solid var(--input-focus, var(--btn-bg)); outline-offset: 2px; }
.like-btn.liked{
  background: var(--like-on-bg, #fee2e2);
  color: var(--like-on-tx, #991b1b);
  border-color: var(--like-on-brd, #fecaca);
}
.like-icon{ font-size:1rem; line-height:1; }
.like-divider{ width:1px; height:16px; background: var(--border); opacity:.9; display:inline-block; }
.like-count{ font-size:.9rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.6em; text-align:right; }

/* === Tiles base (fandoms/characters) === */
.fandom-card,
.character-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--tile-bg, var(--surface));
  border: 1px solid var(--tile-brd, var(--border));
  text-decoration: none;
  color: var(--text);
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent; /* убрать белую вспышку на мобильных */
}
.fandom-card__title,
.character-card__title { font-weight: 800; }

.fandom-card:hover,
.fandom-card:focus-visible,
.character-card:hover,
.character-card:focus-visible {
  background: var(--tile-hover-bg, var(--surface));
  border-color: var(--tile-hover-brd, var(--btn-bg));
  transform: translateY(-2px);
  box-shadow: var(--tile-hover-shadow, 0 8px 24px rgba(0,0,0,.12));
  outline: none;
}

/* превью/плейсхолдер */
.character-card__thumb { width: 100%; }
.thumb-placeholder,
.wiki-art__placeholder {
  display: grid;
  place-items: center;
  min-height: 120px;
  border-radius: 10px;
  background: var(--thumb-placeholder-bg, var(--surface-2));
  border: 1px solid var(--thumb-placeholder-brd, var(--border));
  color: var(--thumb-placeholder-fg, var(--muted));
  user-select: none;
}

/* === Character thumb frame — фикс белой "рамы" === */
.character-card__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 3 / 4;                         /* единый кадр 3:4 */
  background: var(--thumb-surface, var(--thumb-placeholder-bg, var(--surface-2)));
  border: 1px solid var(--thumb-border, var(--thumb-placeholder-brd, var(--border)));
}

/* картинка без белого фона при загрузке */
.character-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent !important;
}

/* плейсхолдер — на всю область, без внутренних "вставок" */
.character-card__thumb .thumb-placeholder {
  position: absolute;
  inset: 0;                           /* заполняем весь фрейм */
  display: grid;
  place-items: center;
  background: var(--thumb-placeholder-bg, #f3f4f6);
  color: var(--thumb-placeholder-fg, var(--muted));
  border: 0;                          /* рамка уже у контейнера */
  font-weight: 700;
  user-select: none;
}

/* на случай глобальных псевдо-элементов/иконок — вырубаем */
.character-card__thumb .thumb-placeholder::before,
.character-card__thumb .thumb-placeholder::after {
  content: none !important;
}

/* тёмные токены для превью + ЧИТАЕМЫЕ заголовки/подписи */
:root[data-theme="dark"], .theme--dark {
  /* уже были: --thumb-surface / --thumb-border / ... */
  --thumb-surface: #0d1016;
  --thumb-border:  #2a2f3a;
  --thumb-placeholder-bg: #0d1016;
  --thumb-placeholder-brd:#2a2f3a;
  --thumb-placeholder-fg: #96a2b3;

  /* НОВОЕ: цвета текста страницы персонажей */
  --char-title: #e5e7eb;       /* заголовки (например .page-title) */
  --wiki-h2-color: #e5e7eb;    /* подписи секций в вики (если используются) */
  --char-muted: #9aa4b2;       /* крошки/вторичный текст */
}

:root[data-theme="neon"], .theme--neon {
  /* уже были: --thumb-surface / --thumb-border / ... */
  --thumb-surface: #0a0f13;
  --thumb-border:  #1a2b3a;
  --thumb-placeholder-bg: #0a0f13;
  --thumb-placeholder-brd:#1a2b3a;
  --thumb-placeholder-fg: #9adbd1;

  /* НОВОЕ: читаемые заголовки */
  --char-title: #e6fbff;
  --wiki-h2-color: #e6fbff;
  --char-muted: #9adbd1;
}

/* ===== Pretty file input ===== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.file-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.file-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--btn-brd, transparent);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.file-btn:hover { transform: translateY(-1px); }
.file-label:focus-within .file-btn { outline: 2px solid var(--focus-ring, #60a5fa); outline-offset: 2px; }

.file-name {
  max-width: 260px;
  color: var(--muted);
  font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Тёмные темы — аккуратный вид */
:root[data-theme="dark"] .file-btn,
.theme--dark .file-btn {
  --btn-bg: #2b3342;
  --btn-fg: #e5e7eb;
  --btn-brd: #3b4559;
}
:root[data-theme="neon"] .file-btn,
.theme--neon .file-btn {
  --btn-bg: #112033;
  --btn-fg: #d9fbff;
  --btn-brd: #1e3a55;
}

/* Светлая — приятные светло-коричневые */
:root[data-theme="light"], .theme--light {
  --thumb-surface:         #f7f3ef;  /* тёплый бежевый фон */
  --thumb-border:          #e6ddd3;  /* мягкая «бумажная» кромка */
  --thumb-placeholder-bg:  #f7f3ef;
  --thumb-placeholder-brd: #e6ddd3;
  --thumb-placeholder-fg:  #6b5b4d;  /* приглушённый коричневый текст */
}

/* Яблочная — приятные зелёные */
:root[data-theme="apple"], .theme--apple {
  --thumb-surface:         #eef7f0;  /* лёгкий зелёный */
  --thumb-border:          #cfe7d6;
  --thumb-placeholder-bg:  #eef7f0;
  --thumb-placeholder-brd: #cfe7d6;
  --thumb-placeholder-fg:  #356b46;  /* хвойный, читаемый */
}

/* Весенняя — приятные розовые */
:root[data-theme="spring"], .theme--spring {
  --thumb-surface:         #fbeff4;  /* нежно-розовый */
  --thumb-border:          #f3d1e1;
  --thumb-placeholder-bg:  #fbeff4;
  --thumb-placeholder-brd: #f3d1e1;
  --thumb-placeholder-fg:  #7b3a54;  /* ягодный для контраста */
}

/* ===== Раздел "Фанфики с участием персонажа" ===== */
.wiki-fanfics{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.wiki-h2{
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);        /* явный цвет текста */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* тонкие линии по бокам — визуально отделяют заголовок от карточек */
.wiki-h2::before,
.wiki-h2::after{
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1 1 auto;
  border-radius: 1px;
}
.wiki-h2::before{ margin-right: 8px; }
.wiki-h2::after { margin-left:  8px; }