/* ============ Страница персонажа — тема «пергамент», как в Банке ============
   Накладывается ПОВЕРХ info.css и style.css: разметка, картинки предметов и
   значки остаются прежними, меняются палитра, шрифт и оформление рамки.
   Переменные повторяют frontend/assets/css/bank.css и chatx.css, чтобы банк,
   чат и информация о персонаже выглядели частями одной игры. */

:root {
  --ix-page:      #dedede;   /* фон страницы */
  --ix-card:      #efe9dd;   /* пергамент панели */
  --ix-card-edge: #f5f0e6;
  --ix-line:      #c1b295;   /* тан-рамка */
  --ix-line-soft: #dccdb5;
  --ix-text:      #332a1f;   /* тёплый чёрный */
  --ix-muted:     #61513c;
  --ix-soft:      #82735c;
  --ix-head:      #7a4b1f;   /* коричневый заголовок */
  --ix-brown:     #3a2b1e;
  --ix-brown-d:   #2a1f16;
  --ix-font:      Verdana, Arial, Helvetica, Tahoma, sans-serif;
}

body.infx {
  background: var(--ix-page);
  color: var(--ix-text);
  font-family: var(--ix-font);
  font-size: 11pt;
  line-height: 1.5;
  padding: 10px 12px 18px 12px;
}
/* Базовый кегль страницы — 11pt. Перечисление повторяет правило style.css
   (body, td, ol, ul, li, p), иначе ячейки таблиц остались бы на своих 10pt:
   вся страница персонажа свёрстана таблицами. */
body.infx td,
body.infx ol,
body.infx ul,
body.infx li,
body.infx p { font-size: 11pt; }
body.infx table,
body.infx td,
body.infx div,
body.infx span,
body.infx small,
body.infx b { font-family: inherit; }

/* ── Рамка страницы ───────────────────────────────────────────────
   В info.css углы и линии нарисованы картинками (tl0.jpg и соседние).
   Убираем их и рисуем одну пергаментную панель: у банка рамка тоже
   сплошная, с мягкой тенью, без «уголков» из девяностых. */
body.infx table.align0 { height: auto; }
body.infx table.align0 td.topleftcorner,
body.infx table.align0 td.topcenterline,
body.infx table.align0 td.toprightcorner,
body.infx table.align0 td.middleleftline,
body.infx table.align0 td.middlerightline,
body.infx table.align0 td.bottomleftcorner,
body.infx table.align0 td.bottomrightcorner {
  background-image: none;
  background-color: transparent;
  width: 0;
  height: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
body.infx table.align0 td.topleftcorner img,
body.infx table.align0 td.topcenterline img,
body.infx table.align0 td.toprightcorner img,
body.infx table.align0 td.middleleftline img,
body.infx table.align0 td.middlerightline img,
body.infx table.align0 td.bottomleftcorner img,
body.infx table.align0 td.bottomrightcorner img { display: none; }

body.infx table.align0 td.middlecenterarea {
  background: linear-gradient(180deg, var(--ix-card-edge), var(--ix-card));
  border: 1px solid var(--ix-line);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(60, 40, 20, .10), 0 1px 0 rgba(255, 255, 255, .7) inset;
  /* Содержимое раздела не липнет к рамке: тот же отступ слева, что и у закладок. */
  padding: 0 8px 12px 14px;
}

/* Подвал с копирайтом — вне панели, приглушённый.
   В общий сброс рамочных ячеек его включать нельзя: там line-height: 0,
   и две строки копирайта наезжали друг на друга. */
body.infx table.align0 td.bottomcenterline {
  background-image: none;
  background-color: transparent;
  height: auto;
  padding-top: 10px;
  line-height: 1.5;
}
body.infx table.align0 td.bottomcenterline div,
body.infx table.align0 td.bottomcenterline div a {
  color: var(--ix-soft);
  font-size: 12px;
  font-weight: normal;
  white-space: normal;
}

/* ── Вкладки ──────────────────────────────────────────────────────
   Раньше полоса была тёмной картинкой (menu_fon1.png) с белым текстом.
   Делаем закладки на пергаменте: активная светлая и «поднята», остальные
   темнее и подсвечиваются при наведении. */
body.infx .infx-tabbar {
  background-image: none !important;
  background: none;
  height: auto;
  /* Отступ слева даёт уже сама панель (middlecenterarea), здесь он не нужен —
     иначе закладки уехали бы вдвое дальше содержимого. */
  padding: 0;
}
body.infx #tab { height: auto; width: auto !important; }
/* Прячем только разделительные полоски-картинки; значки вкладок оставляем. */
body.infx #tab td.infx-tab-gap img { display: none; }
body.infx .infx-tab-ico {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;      /* отступ задаёт gap у ссылки, а не margin у картинки */
  object-fit: contain;
}
body.infx #tab td { width: auto !important; }

body.infx .infx-tab,
body.infx .infx-tab--active {
  padding: 5px 16px;
  /* Кегль закладок фиксируем отдельно: базовые 11pt растянули бы ряд. */
  border: 1px solid var(--ix-line);
  border-bottom: 0;
  border-radius: 0 0 3px 3px;   /* верх прямой, низ слегка скруглён */
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
body.infx .infx-tab--active {
  background: linear-gradient(180deg, var(--ix-card-edge), var(--ix-card));
  color: var(--ix-head);
  box-shadow: 0 -2px 6px rgba(60, 40, 20, .08) inset;
}
body.infx .infx-tab {
  background: linear-gradient(180deg, #ded2ba, #d3c5a9);
  border-color: var(--ix-line-soft);
}
body.infx .infx-tab a.menu:link,
body.infx .infx-tab a.menu:visited,
body.infx .infx-tab a.menu:active {
  color: var(--ix-brown);
  font-family: var(--ix-font);
  font-size: 14px;
  /* Значок и подпись — одной строкой по центру: vertical-align считает от
     базовой линии шрифта, и картинка вставала чуть выше текста. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
body.infx .infx-tab:hover { background: linear-gradient(180deg, #e6dbc6, #dccdb5); }
body.infx .infx-tab a.menu:hover { color: var(--ix-head); text-decoration: none; }
/* Просвет между закладками. Ширину задаём служебным ячейкам-разделителям из
   разметки; селектор с #tab обязателен — правило выше (body.infx #tab td)
   сильнее из-за идентификатора и иначе сбросило бы ширину в auto. */
body.infx #tab td.infx-tab-gap { width: 0 !important; padding: 0; font-size: 0; }

/* ── Содержимое ───────────────────────────────────────────────────
   Цвета характеристик и подсказки приходят из PHP инлайном (getColor),
   их не трогаем — иначе потеряется смысл «прибавка от вещей». */
body.infx h3 {
  color: var(--ix-head);
  font-family: var(--ix-font);
  font-size: 17px;
  font-weight: 700;
  margin: 12px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ix-line-soft);
}
body.infx hr {
  border: 0;
  border-top: 1px solid var(--ix-line-soft);
  height: 0;
  margin: 8px 0;
}
body.infx small { color: var(--ix-muted); font-size: 10.5pt; }
body.infx code {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
  color: var(--ix-brown);
  background: rgba(245, 240, 230, .8);
  border: 1px solid var(--ix-line-soft);
  border-radius: 6px;
  padding: 1px 5px;
}
/* style.css задаёт .nick Verdana 10pt — из-за этого число побед и название
   клана выпадали из общего шрифта страницы. Возвращаем общий шрифт и общий
   кегль; цвет и жирность оставляем как у ссылок темы. */
body.infx a,
body.infx a.nick,
body.infx .nick {
  color: var(--ix-brown);
  font-family: var(--ix-font);
  font-size: inherit;   /* тем же кеглем, что соседний текст */
  font-weight: 700;
  text-decoration: none;
}
body.infx a:hover, body.infx a.nick:hover { color: var(--ix-head); text-decoration: underline; }
body.infx a.nick { color: var(--ix-brown-d); }

/* Ячейки экипировки: подложка светлее фона, чтобы предметы читались */
body.infx table.posit td { background-color: transparent !important; }
body.infx table.posit img { vertical-align: top; }

/* Поиск по нику под блоком последнего визита. Оформление банковское:
   пергаментное поле в тан-рамке и коричневая кнопка. */
/* Поле и кнопка в одну строку. Колонка слева узкая (227px), поэтому кегль
   и поля подобраны так, чтобы пара умещалась и не переносилась. */
body.infx .infx-search {
  margin: 10px 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}
body.infx .infx-search input[type=text] {
  width: 132px;
  padding: 4px 7px;
  font-family: var(--ix-font);
  font-size: 10pt;
  color: var(--ix-text);
  background: var(--ix-card-edge);
  border: 1px solid var(--ix-line);
  border-radius: 6px;
}
body.infx .infx-search input[type=text]:focus {
  outline: none;
  border-color: var(--ix-head);
}
body.infx .infx-search input[type=submit] {
  padding: 4px 8px;
  font-family: var(--ix-font);
  font-size: 10pt;
  white-space: nowrap;
  font-weight: 700;
  color: #f4e9d8;
  background: linear-gradient(180deg, var(--ix-brown), var(--ix-brown-d));
  border: 1px solid #1f160f;
  border-radius: 6px;
  cursor: pointer;
}
body.infx .infx-search input[type=submit]:hover { background: linear-gradient(180deg, #4a3826, var(--ix-brown)); }

/* ── Закрытый раздел администрации ────────────────────────────────
   Свёрнут по умолчанию: содержимое чувствительное, на экране мешает. */
body.infx .infx-admin {
  margin: 14px 0 6px 0;
  border: 1px solid var(--ix-line);
  border-radius: 8px;
  background: rgba(245, 240, 230, .6);
}
body.infx .infx-admin > summary {
  cursor: pointer;
  padding: 6px 10px;
  color: var(--ix-head);
  font-weight: 700;
  list-style: none;
}
body.infx .infx-admin > summary::-webkit-details-marker { display: none; }
body.infx .infx-admin > summary::before { content: '▸ '; }
body.infx .infx-admin[open] > summary::before { content: '▾ '; }
body.infx .infx-admin-body { padding: 4px 12px 12px 12px; }
body.infx .infx-admin-warn { color: #a11; font-weight: 700; margin-bottom: 8px; }
body.infx .infx-admin-msg {
  margin-bottom: 8px;
  padding: 4px 8px;
  border: 1px solid var(--ix-line-soft);
  border-radius: 6px;
  background: var(--ix-card-edge);
}
/* Вкладки раздела: тот же приём, что у закладок страницы, только мельче. */
body.infx .infx-atabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 0 0;
}
body.infx .infx-atab {
  padding: 4px 12px;
  border: 1px solid var(--ix-line-soft);
  border-bottom: 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #ded2ba, #d3c5a9);
  font-family: var(--ix-font);
  font-size: 11pt;
  font-weight: 700;
  color: var(--ix-brown);
  cursor: pointer;
  user-select: none;
}
body.infx .infx-atab:hover { background: linear-gradient(180deg, #e6dbc6, #dccdb5); }
body.infx .infx-atab.is-active {
  background: linear-gradient(180deg, var(--ix-card-edge), var(--ix-card));
  border-color: var(--ix-line);
  color: var(--ix-head);
}
body.infx .infx-apanel { display: none; }
body.infx .infx-apanel.is-active { display: block; }

/* Карточка внутри вкладки */
body.infx .infx-card {
  border: 1px solid var(--ix-line);
  border-radius: 8px;
  background: var(--ix-card-edge);
  padding: 10px 12px;
  overflow-x: auto;
}
/* Строка «подпись — значение» */
body.infx .infx-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(193, 178, 149, .35);
}
body.infx .infx-row:last-child { border-bottom: 0; }
body.infx .infx-row > span { color: var(--ix-muted); }
body.infx .infx-row > b { text-align: right; }
body.infx .infx-empty { color: var(--ix-muted); }
body.infx .infx-note { color: var(--ix-soft); font-size: 10pt; margin-top: 6px; }
body.infx .infx-admin-table {
  border-collapse: collapse;
  margin: 4px 0;
  max-width: 100%;
}
body.infx .infx-admin-table th,
body.infx .infx-admin-table td {
  border: 1px solid var(--ix-line-soft);
  padding: 2px 8px;
  font-size: 11pt;
  text-align: left;
}
body.infx .infx-admin-table th { background: rgba(220, 205, 181, .5); }
/* Строка браузера длинная — не даём ей растягивать таблицу. */
body.infx .infx-admin-ua { max-width: 420px; word-break: break-all; font-size: 10pt; }
body.infx .infx-admin-del {
  font-family: var(--ix-font);
  font-size: 10pt;
  padding: 1px 8px;
  border: 1px solid var(--ix-line);
  border-radius: 5px;
  background: var(--ix-card-edge);
  color: #a11;
  cursor: pointer;
}
body.infx .infx-admin-del:hover { background: #f3e3e3; }

/* Отметка «обезличен»: предупреждение, поэтому красным и жирным —
   тем же тоном, что ошибки в Банке. */
body.infx .infx-noinfo { color: #a11; font-weight: 700; text-align: center; }

/* Ряд значков состояния под куклой персонажа */
/* Ряды значков стоят в правой колонке над подробностями, поэтому равняем
   их по левому краю — как и весь текст рядом. */
body.infx .infx-states {
  margin: 2px 0 4px 0;
  text-align: left;
  line-height: 1;
}
body.infx .infx-merits { margin-top: 6px; margin-bottom: 6px; }
/* Знаки заслуг рисуем в натуральную величину (35x24): при насильных 20x20
   они выглядели мелкими марками, а рисунок в них подробный. */
body.infx .infx-merits .infx-state {
  width: auto;
  height: auto;
  margin: 0 5px 4px 0;
}
body.infx .infx-state {
  width: 20px;
  height: 20px;
  margin: 0 3px 3px 0;
  vertical-align: middle;
  object-fit: contain;
  cursor: help;
}

/* Значок города перед его названием */
body.infx .infx-city-ico { vertical-align: middle; margin-right: 7px; }

/* Правый угол: зодиак, склонность, новостная лента — столбиком.
   Значки склонности и новостей крохотные (12x15 и 16x16), поэтому увеличиваем
   их с image-rendering: pixelated, иначе апскейл мылит рисунок. */
body.infx div.alignlogo { opacity: .92; }
/* Угловой столбик: спускаем ниже ряда закладок (в info.css у .alignlogo
   top: 0) и даём значкам воздух между собой. */
body.infx .infx-corner {
  text-align: center;
  top: 52px;
  width: 104px;
  /* Отступ от правого края: в info.css у .alignlogo стоит right: 15px,
     и столбик почти упирался в рамку панели. */
  right: 34px;
}
body.infx .infx-corner-item { margin-bottom: 14px; line-height: 1; }
/* Эмблема клана и флаг новостей крупные (около 100px), сажаем на одну ширину. */
body.infx .infx-corner-big { width: 96px; height: auto; }
/* Значок склонности крохотный (12x15), увеличиваем без размытия. */
body.infx .infx-corner-small img {
  width: auto;
  height: 26px;
  image-rendering: pixelated;
  vertical-align: middle;
}
/* Зодиак стоит справа в колонке характеристик — как в эталоне. */
/* Зодиак: в эталоне он прижат к правому краю колонки характеристик, а сама
   колонка там 350px. У нас страница во всю ширину, поэтому вместо float
   кладём знак в блок такой же ширины — иначе он улетал к краю страницы и
   налезал на угловые значки. */
body.infx .infx-zodiac-box { width: 350px; text-align: right; }
body.infx .infx-zodiac { width: 72px; height: auto; }