/* Вики поверх темы бестиария (css/style.css): карточка меньше и со значком игры вместо 3D-превью, вкладки режимов, выбор режима,
   список показателей в окне. Золота в кнопках нет: золото — только рамка «легендарная» (правило владельца, бестиарий). */

.w-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.w-mode {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 99px; text-decoration: none;
  font: 800 14px/1 var(--head); letter-spacing: 0.02em; color: var(--ink2);
  background: var(--glass); border: 1px solid var(--line);
}
.w-mode:hover { color: var(--ink); border-color: var(--line-lit); }
.w-mode[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent-hi); }
.w-mode img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }

/* выбор режима (/<язык>/wiki/): три большие карточки, сетки и поиска нет */
html[data-mode="hub"] .w-only-mode { display: none; }
html[data-mode="hub"] .w-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0 30px; }
html[data-mode="hub"] .w-mode {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 20px; overflow: hidden; font-size: 20px;
}
html[data-mode="hub"] .w-mode img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
html[data-mode="hub"] .w-mode span { padding: 16px 18px 6px; color: var(--ink); }
html[data-mode="hub"] .w-mode small { display: block; padding: 0 18px 18px; font: 600 13px/1.4 var(--body); letter-spacing: 0; color: var(--ink2); }
html[data-mode="hub"] .w-mode:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -18px #000, 0 0 0 1px var(--accent); }
.w-mode small { display: none; }

.chip small { color: var(--ink3); font-weight: 700; margin-inline-start: 4px; }

/* сетка: карточек сотни — меньше и плотнее, чем у бестиария */
.w-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
@media (max-width: 560px) { .w-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px 8px; } }
.w-card { aspect-ratio: 3 / 4; }
.w-card[hidden] { display: none; }
.w-card .c-head { font-size: 5cqi; }
.w-card .c-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-card .c-name { font-size: 7.6cqi; line-height: 1.15; }
.w-art {
  position: relative; flex: 1 1 auto; min-height: 0; border-radius: 4cqi; display: grid; place-items: center;
  background:
    radial-gradient(70% 60% at 50% 70%, color-mix(in srgb, var(--c) 30%, transparent), transparent 75%),
    rgba(0, 0, 0, 0.18);
}
.w-art img { width: 62%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.w-card:hover .w-art img { transform: scale(1.06); transition: transform 0.2s; }
.r-uncommon { --c: var(--r-common); }

/* окно: показатели вещи списком */
.w-stats { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.w-stats li { padding: 5px 12px; border-radius: 99px; font-weight: 800; font-size: 13px; color: var(--accent-hi);
  background: rgba(124, 240, 208, 0.1); border: 1px solid rgba(124, 240, 208, 0.35); }
.nowebgl.on { display: block; }
.empty { grid-column: 1 / -1; }

/* мифическая — пятая ступень Улья (у других режимов её нет): своя розово-фиолетовая рамка, не золото */
.r-mythic { --c: #ff6fd8; }
.r-mythic .face { background: linear-gradient(150deg, #ffd3f3, #ff6fd8 30%, #8a2f9e 60%, #ffb0ea); }
.r-mythic .holo { --k: 0.85; }

/* «Откуда»: где взять, рецепт значками, во что идёт */
.w-src { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.w-src > h3:first-child { margin: 0; }
.w-where { margin: 0; color: var(--ink); font-weight: 700; }
.w-station { margin: 0; color: var(--ink3); font-size: 13px; }
.w-ings { display: flex; flex-wrap: wrap; gap: 6px; }
.w-ing { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 10px; font: 700 13px var(--body);
  color: var(--ink); background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
button.w-ing { cursor: pointer; }
button.w-ing:hover { border-color: var(--accent); }
.w-ing img { width: 26px; height: 26px; image-rendering: pixelated; }
.w-ing b { color: var(--accent-hi); font-weight: 800; }
span.w-ing { padding-inline-start: 10px; }
.m-info { overflow-y: auto; }

/* строки «Откуда»: ярлык способа слева, слова и значки справа; на узком экране ярлык над строкой */
.w-row { display: grid; grid-template-columns: max-content 1fr; gap: 10px; align-items: start; }
.w-tag { margin-top: 2px; padding: 3px 9px; border-radius: 99px; font: 800 11px/1.3 var(--body); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-hi); background: rgba(124, 240, 208, 0.1); border: 1px solid rgba(124, 240, 208, 0.3); white-space: nowrap; }
.w-row-b { display: grid; gap: 6px; min-width: 0; }
.w-row-b .w-where { font-weight: 600; }
.w-pre { align-self: center; color: var(--ink3); font: 700 13px var(--body); }
.w-ing b + b { margin-inline-start: 4px; }
@media (max-width: 560px) { .w-row { grid-template-columns: 1fr; gap: 4px; } .w-tag { justify-self: start; } }