/*
 * TuWoW Database — visual system
 * Structure: palette, shell, navigation, content, controls, tables, overlays,
 * game icons, and responsive adjustments. Functional layout stays in
 * database-rework.css; this file owns the final presentation layer.
 */

/* 1. Balanced palette ---------------------------------------------------- */
.wowdb {
  --db-black: #050505;
  --db-surface: #090909;
  --db-surface-soft: #0d0d0d;
  --db-surface-raised: #141414;
  --db-gray: #292929;
  --db-gray-strong: #49453f;
  --db-text: #f0ede7;
  --db-text-soft: #c5c0b7;
  --db-muted: #918d86;
  --db-gold: #bd9342;
  --db-gold-bright: #dfb960;
  --db-gold-dim: #6d562d;
  --db-red: #9f1c17;
  --db-red-bright: #cf2b23;
  --db-line: #292929;
  --db-line-soft: #1d1d1d;
  width: 100%;
  max-width: none;
  margin: 104px auto 72px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--db-text-soft);
}

/* 2. Page shell ---------------------------------------------------------- */
.database-page-body {
  background-color: var(--db-black, #050505);
}

.wowdb-masthead,
.wowdb-bar,
.wowdb-home,
.wowdb-browser {
  width: min(1280px, calc(100% - 52px));
}

.wowdb-masthead {
  min-height: 188px;
  padding: 30px clamp(22px, 4vw, 58px);
  border: 0;
  background:
    radial-gradient(circle at 50% 4%, rgba(189, 147, 66, .08), transparent 44%),
    transparent;
}

.wowdb-masthead::after { opacity: .18; }

.wowdb-masthead-brand span {
  color: var(--db-text);
  text-shadow: 0 2px 9px #000;
}

.wowdb-global-search {
  min-height: 50px;
  border: 1px solid var(--db-gray-strong);
  border-radius: 0;
  background: rgba(6, 6, 6, .96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .025);
}

.wowdb-global-search:focus-within {
  border-color: var(--db-gold-dim);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .62), inset 0 -2px var(--db-red);
}

.wowdb-global-search > svg { color: var(--db-gold); }
.wowdb-global-search input { color: var(--db-text); }
.wowdb-global-search input::placeholder { color: #77736d; }
.wowdb-global-search button {
  border-left: 1px solid #d42a23;
  background: linear-gradient(180deg, #b51c17, #7e0c09);
  color: #fff;
}
.wowdb-global-search button:hover { background: linear-gradient(180deg, #ca2921, #90100c); }

/* 3. Database navigation ------------------------------------------------ */
.wowdb-bar {
  min-height: 51px;
  border: 0;
  border-top: 1px solid var(--db-line);
  border-bottom: 1px solid var(--db-line);
  border-top-color: #34312c;
  background: #080808;
}

.wowdb-bar > a,
.wowdb-menu-trigger {
  border-right-color: var(--db-line);
  color: #c9c4bb;
}

.wowdb-bar > a svg,
.wowdb-menu-trigger svg { color: #88837b; }

.wowdb-bar > a:hover,
.wowdb-menu-trigger:hover,
.wowdb-menu-trigger[aria-expanded="true"] {
  background: linear-gradient(180deg, #17140f, #0c0b09);
  color: var(--db-text);
  box-shadow: inset 0 -2px var(--db-red);
}

.wowdb-bar > a:hover svg,
.wowdb-menu-trigger:hover svg { color: var(--db-gold-bright); }

.wowdb-mega {
  padding: 8px;
  gap: 6px;
  border: 1px solid #3b3832;
  border-top: 2px solid var(--db-gold);
  border-radius: 0;
  background: #080706;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .9);
}

.wowdb-mega section {
  padding: 15px;
  border: 1px solid #252525;
  border-radius: 0;
  background: #0c0c0c;
}
.wowdb-mega h2 { color: var(--db-gold-bright); }
.wowdb-mega a { border-radius: 0; color: #aaa59d; }
.wowdb-mega a:hover {
  background: linear-gradient(90deg, rgba(159, 28, 23, .22), transparent);
  color: var(--db-text);
  box-shadow: inset 2px 0 var(--db-red);
}

/* 4. Landing content ---------------------------------------------------- */
.wowdb-home {
  border: 0;
  background: transparent;
}

.wowdb-home > header > span { color: var(--db-gold); }
.wowdb-home h2 { color: var(--db-text); }

.wowdb-popular-grid { gap: 10px; }
.wowdb-popular-grid > a {
  border-color: var(--db-line);
  background: #0b0b0b;
  transform: none;
}
.wowdb-popular-grid > a:hover {
  border-color: var(--db-gray-strong);
  background: linear-gradient(135deg, #17140f, #0c0b0a);
  box-shadow: inset 3px 0 var(--db-red);
  transform: translateY(-1px);
}
.wowdb-popular-grid svg { color: #aaa49a; }
.wowdb-popular-grid > a:hover svg { color: var(--db-gold-bright); }
.wowdb-popular-grid strong { color: var(--db-text); }
.wowdb-popular-grid small { color: var(--db-muted); }

.wowdb-directory {
  border-color: var(--db-line);
  background: #080808;
}
.wowdb-directory section { border-color: var(--db-line); }
.wowdb-directory h3 { color: #d8d3ca; }
.wowdb-directory a { color: #a9a39a; }
.wowdb-directory a:hover { color: var(--db-gold-bright); }

/* 5. Browser and filters ------------------------------------------------ */
.wowdb-browser {
  border: 0;
  background: transparent;
}
.wowdb-breadcrumb { border-color: var(--db-line); background: #080808; }
.wowdb-breadcrumb a { color: #b7b1a8; }
.wowdb-breadcrumb a:hover { color: var(--db-gold-bright); }
.wowdb-browser-head { border-bottom: 1px solid var(--db-line-soft); background: #0a0a0a; }
.wowdb-browser-head > div > span { color: var(--db-gold); }
.wowdb-browser-head h2 { color: var(--db-text); }
.wowdb-browser-head p { color: var(--db-muted); }

.wowdb-filters {
  border-color: var(--db-line);
  background:
    linear-gradient(90deg, rgba(189, 147, 66, .025), transparent 35%),
    #080808;
}
.wowdb-field > span,
.wowdb-range legend { color: #bca36f; }
.wowdb-field input,
.wowdb-range input {
  border-color: #333;
  border-radius: 0;
  background: #0b0b0b;
  color: var(--db-text);
}
.wowdb-field input:hover,
.wowdb-range input:hover { border-color: #4b4842; }
.wowdb-field input:focus,
.wowdb-range input:focus {
  border-color: var(--db-gold-dim);
  box-shadow: inset 0 -2px var(--db-red), 0 0 0 2px rgba(189, 147, 66, .04);
}
.wowdb-check { color: #aaa59d; }
.wowdb-check input { accent-color: var(--db-red); }
.wowdb-filter-actions button[type="submit"] {
  border: 1px solid #c52922;
  background: linear-gradient(180deg, #ae1713, #770a08);
  color: #fff;
}
.wowdb-filter-actions button[type="reset"] {
  border-color: #363636;
  background: #0b0b0b;
  color: #aaa59d;
}

/* 6. Results table ------------------------------------------------------ */
.wowdb-results-toolbar {
  border-color: var(--db-line);
  background: #0a0a0a;
  color: var(--db-muted);
}
.wowdb-results-toolbar strong { color: var(--db-gold-bright); }
.wowdb-table-wrap { border-color: var(--db-line); background: var(--db-black); }
.wowdb-table th {
  height: 47px;
  border-color: #343434;
  background: #171717;
  color: #c6c1b8;
  letter-spacing: .035em;
}
.wowdb-table tbody tr,
.wowdb-table tbody tr:nth-child(even) { background: #0a0a0a; }
.wowdb-table tbody tr:nth-child(even) { background: #070707; }
.wowdb-table tbody tr:hover,
.wowdb-table tbody tr:focus {
  background: linear-gradient(90deg, rgba(159, 28, 23, .12), #12110f 32%, #0d0d0d);
  box-shadow: inset 3px 0 var(--db-red);
}
.wowdb-table td { border-color: #242424; color: #bbb6ad; }
.wowdb-table td:not(:first-child) { color: #9f9a92; }
.wowdb-name-cell small { color: #77736c; }
.wowdb-pagination { border-color: var(--db-line); background: #080808; }
.wowdb-pagination button {
  border-color: #343434;
  background: #0b0b0b;
  color: #aaa59d;
}
.wowdb-pagination button:hover:not(:disabled) {
  border-color: var(--db-gold-dim);
  background: #15120e;
  color: var(--db-text);
  box-shadow: inset 0 -2px var(--db-red);
}

/* 7. Dropdowns ---------------------------------------------------------- */
.wowdb-select-trigger {
  border-color: #333;
  background: linear-gradient(180deg, #0e0e0e, #080808);
  color: #c5c0b7;
}
.wowdb-select-trigger:hover,
.wowdb-select-trigger:focus-visible,
.wowdb-select-shell.is-open .wowdb-select-trigger {
  border-color: var(--db-gold-dim);
  background: linear-gradient(180deg, #17140f, #0b0a08);
  box-shadow: inset 0 -2px var(--db-red);
}
.wowdb-select-menu {
  border-color: #38352f;
  border-top-color: var(--db-gold);
  background: #080706;
}
.wowdb-select-option { border-color: #202020; color: #aca69c; }
.wowdb-select-option:hover,
.wowdb-select-option:focus-visible { background: #15120e; color: var(--db-text); }
.wowdb-select-option.is-selected,
.wowdb-select-option[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(112, 79, 28, .3), rgba(16, 14, 11, .97));
  color: var(--db-gold-bright);
  box-shadow: inset 2px 0 var(--db-red);
}

/* 8. Details, related data, and hover cards ----------------------------- */
.wowdb-detail,
.wowdb-hover-tooltip {
  border: 1px solid #504631;
  border-top: 2px solid var(--db-gold);
  border-radius: 0;
  background: #070707;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .92);
}
.wowdb-detail-close {
  position: sticky;
  top: 12px;
  right: auto;
  z-index: 40;
  width: 38px;
  height: 38px;
  margin: 12px 12px -50px auto;
  display: grid;
  place-items: center;
  border: 1px solid #7d1c18;
  border-radius: 0;
  outline: 0;
  background: rgba(8, 8, 8, .96);
  color: #e0443b;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(255, 255, 255, .025);
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease, transform 130ms ease;
}
.wowdb-detail-close svg { width: 20px; height: 20px; stroke-width: 2.4; }
.wowdb-detail-close:hover,
.wowdb-detail-close:focus-visible {
  border-color: #e13a31;
  background: linear-gradient(180deg, #bd201a, #810c09);
  color: #fff;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .8), 0 0 0 2px rgba(190, 35, 28, .14);
  transform: translateY(-1px);
}
.wowdb-detail-close:active { transform: translateY(0); }
.wowdb-detail header { border-color: var(--db-line); background: #0b0b0b; }
.wowdb-detail header > div > span { color: var(--db-gold); }
.wowdb-detail section,
.wowdb-detail-layout > aside {
  border-color: var(--db-line);
  background: #0a0a0a;
}
.wowdb-detail h3 { color: #d5d0c8; }
.wowdb-detail-layout > aside dt { color: #8f8a82; }
.wowdb-detail-layout > aside dd { color: #d4cfc6; }
.wowdb-related-list a {
  border-color: #272727;
  background: #080808;
}
.wowdb-related-list a:hover {
  border-color: #4d422f;
  background: #14110e;
  box-shadow: inset 2px 0 var(--db-red);
}
.wowdb-hover-tooltip { border-top-width: 1px; }

/* 9. Game icon stack: ? behind, real texture in front ------------------ */
.wowdb-icon-frame {
  --wowdb-icon-inset: 3px;
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  overflow: hidden;
  border: 1px solid #6b5938;
  border-radius: 3px;
  background: #070604;
  box-shadow:
    0 0 0 1px #000,
    inset 0 0 0 1px rgba(224, 185, 96, .16),
    0 2px 5px rgba(0, 0, 0, .8);
}
.wowdb-icon-frame .wowdb-icon-fallback {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(.72) brightness(.78);
}
.wowdb-icon-frame .wowdb-icon-texture {
  z-index: 1;
  inset: var(--wowdb-icon-inset);
  width: calc(100% - (var(--wowdb-icon-inset) * 2));
  height: calc(100% - (var(--wowdb-icon-inset) * 2));
  border: 1px solid rgba(0, 0, 0, .82);
  border-radius: 2px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .28);
}
.wowdb-icon-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(225, 183, 91, .18);
  border-radius: inherit;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .72);
  pointer-events: none;
}
.wowdb-icon-frame-detail {
  --wowdb-icon-inset: 5px;
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

/* Symbolic icons intentionally stay frameless. */
.wowdb-type-icon { color: #aaa49a; }
.wowdb-type-icon.is-npc svg { fill: #d7d1c7; stroke: #332f2a; }
.wowdb-type-icon.is-quest { color: var(--db-gold-bright); }

/* 10. Responsive refinements ------------------------------------------- */
@media (max-width: 900px) {
  .wowdb-masthead,
  .wowdb-bar,
  .wowdb-home,
  .wowdb-browser { width: calc(100% - 24px); }
  .wowdb-popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .wowdb-masthead,
  .wowdb-bar,
  .wowdb-home,
  .wowdb-browser { width: 100%; }
  .wowdb-masthead { min-height: 154px; padding-right: 14px; padding-left: 14px; }
  .wowdb-popular-grid { grid-template-columns: 1fr; }
  .wowdb-home { padding-right: 14px; padding-left: 14px; }
  .wowdb-table th,
  .wowdb-table td { padding-right: 10px; padding-left: 10px; }
}