/* ==========================================================================
   Pixelands Wiki — /wiki/*
   A LAYER ON TOP OF site.css, not a replacement for it. Every wiki page loads
   site.css first and this second, so the header, footer, buttons, typography
   and colour tokens are literally the same objects the rest of pixelands.com
   uses. Nothing below redefines a :root token or restyles a site component.

   The June 2026 draft of this file shipped its own reset, its own body
   background, its own navbar and its own dark-teal palette. Loaded next to
   site.css that produced two competing designs on one domain, so all of it is
   gone; what remains is only the parts the main site has no equivalent for.
   ========================================================================== */

/* ---------- wiki sub-header ------------------------------------------------
   Sits directly under the sticky .site-head, which occupies 67px: min-height
   66px plus its 1px bottom border. Stick to that exact figure or the two bars
   overlap by a pixel and the header's border disappears under this one. */
.w-subhead {
  position: sticky; top: 67px; z-index: 49;
  background: rgba(27, 26, 45, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.w-subhead .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 52px;
}
.w-logo {
  font-weight: 800; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
  flex: 0 0 auto; text-decoration: none;
}
.w-logo:hover { text-decoration: none; color: #ffd76e; }

.w-nav-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.w-nav-links a {
  color: var(--dim); font-size: 14.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.w-nav-links a:hover { color: var(--text); }

.w-search { margin-left: auto; display: flex; flex: 0 1 260px; }
.w-search input {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font: inherit; font-size: 14.5px;
}
.w-search input::placeholder { color: var(--dimmer); }
.w-search input:focus { border-color: var(--accent); }

.w-nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: 18px; line-height: 1; padding: 7px 11px; cursor: pointer;
}

/* ---------- page shell ---------- */
.w-page { padding: 34px 0 64px; }
.w-container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.w-crumbs { color: var(--dim); font-size: 14px; margin-bottom: 14px; }
.w-crumbs a { color: var(--dim); }
.w-crumbs a:hover { color: var(--accent); }

.w-pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.w-pagehead h1 { margin: 0; font-size: 34px; }
.w-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.w-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--radius-sm);
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text); font-weight: 600; font-size: 14.5px;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.w-btn:hover { background: var(--bg-4); text-decoration: none; }
.w-btn.primary { background: var(--accent); border-color: var(--accent); color: #1b1a2d; }
.w-btn.primary:hover { background: #ffd76e; }

/* ---------- hub hero ---------- */
.w-hero {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-2), var(--bg));
  padding: 40px 32px; margin-bottom: 28px;
}
.w-hero h1 { font-size: 40px; margin-bottom: 10px; }
.w-hero-sub { color: var(--dim); max-width: var(--readw); font-size: 17px; margin-bottom: 22px; }
.w-hero-search { display: flex; gap: 10px; max-width: 560px; }
.w-hero-search input {
  flex: 1 1 auto;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 16px; font: inherit;
}
.w-hero-search input::placeholder { color: var(--dimmer); }
.w-hero-search input:focus { border-color: var(--accent); }

/* ---------- panels ---------- */
.w-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2);
  padding: 26px 28px; margin-bottom: 22px;
  scroll-margin-top: 130px;           /* two sticky bars */
}
.w-panel > h2 { font-size: 24px; margin-bottom: 12px; }
.w-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.w-panel-head h2 { margin-bottom: 12px; }
.w-panel-intro { color: var(--dim); max-width: var(--readw); }
.w-subhead-label {
  color: var(--dimmer); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 20px 0 10px;
}

.w-linklist {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.w-linklist li { margin: 0; }
.w-linklist a {
  display: block; padding: 9px 12px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 14.5px; font-weight: 600;
  text-decoration: none;
}
.w-linklist a:hover { background: var(--bg-4); border-color: var(--accent); text-decoration: none; }

/* ---------- article layout ---------- */
.w-article {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}
.w-article-body { min-width: 0; }
.w-article-body h2 {
  font-size: 22px; margin: 32px 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  scroll-margin-top: 130px;
}
.w-article-body h3 { font-size: 18px; margin: 22px 0 8px; }
.w-article-body ul, .w-article-body ol { margin: 0 0 1em; padding-left: 22px; }
.w-article-body li { margin-bottom: 6px; }
.w-article-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 1em;
  font-size: 15px;
}
.w-article-body th, .w-article-body td {
  border: 1px solid var(--border); padding: 8px 11px; text-align: left;
}
.w-article-body th { background: var(--bg-3); font-weight: 700; }

.w-lead { font-size: 18px; color: var(--text); }

.w-note {
  border-left: 3px solid var(--accent);
  background: var(--bg-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px; margin: 0 0 1em;
  color: var(--dim);
}
.w-note strong { color: var(--text); }

/* infobox — the right rail on article pages */
.w-infobox {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden;
  position: sticky; top: 140px;
}
.ib-title {
  background: var(--bg-4); padding: 12px 16px;
  font-weight: 800; font-size: 16px; text-align: center;
}
.ib-img {
  display: flex; align-items: center; justify-content: center;
  min-height: 118px; font-size: 46px; color: var(--accent);
  background: var(--bg-3); border-bottom: 1px solid var(--border);
}
.ib-img img { max-height: 96px; width: auto; image-rendering: pixelated; }
.w-infobox table { width: 100%; border-collapse: collapse; font-size: 14px; }
.w-infobox th, .w-infobox td {
  padding: 8px 12px; text-align: left; vertical-align: top;
  border-top: 1px solid var(--border);
}
.w-infobox th { color: var(--dim); font-weight: 600; width: 42%; }

/* category tags at the foot of an article */
.w-cats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.w-cats .lbl { color: var(--dimmer); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.w-cats a {
  padding: 5px 11px; border-radius: 99px;
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--dim); text-decoration: none;
}
.w-cats a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ---------- item browser (/wiki/items.html) ---------- */
.it-status {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-2); color: var(--dim);
  padding: 12px 16px; margin-bottom: 18px; font-size: 14.5px;
}
.it-status strong { color: var(--text); }
.it-status.warn { border-left: 3px solid var(--accent); }

.w-dir h2 { font-size: 22px; margin-bottom: 14px; }
.w-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.w-tile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text); font-weight: 600; font-size: 14.5px;
  text-decoration: none;
}
.w-tile:hover { background: var(--bg-4); border-color: var(--accent); text-decoration: none; }
.w-tile .ico { color: var(--accent); }
.it-count {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: 1px 8px;
  font-size: 12.5px; color: var(--dim); font-weight: 700;
}

.it-tablehead { font-size: 20px; font-weight: 800; margin: 18px 0 12px; }
.it-filter {
  width: 100%; max-width: 380px; margin-bottom: 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 13px; font: inherit; font-size: 14.5px;
}
.it-filter::placeholder { color: var(--dimmer); }
.it-filter:focus { border-color: var(--accent); }

.it-tablewrap { overflow-x: auto; }
.it-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.it-table th, .it-table td {
  border: 1px solid var(--border); padding: 9px 12px;
  text-align: left; vertical-align: top;
}
.it-table thead th { background: var(--bg-3); font-weight: 700; }
.it-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }
.it-desc { color: var(--dim); }
.it-ico {
  display: inline-block; vertical-align: middle;
  width: 32px; height: 32px; margin-right: 9px;
  image-rendering: pixelated; object-fit: contain;
}
.it-ico.ph {
  background: var(--bg-4); border: 1px solid var(--border);
  border-radius: 4px;
}
.it-rarity {
  margin-left: 8px; font-size: 12px; color: var(--dimmer);
  border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px;
}

/* ---------- single item (/wiki/item.html) ---------- */
.id-box {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden;
}
.id-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
.id-card h2 { margin: 0; font-size: 26px; }
.id-ico {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: 0 0 auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 30px; color: var(--accent);
}
.id-ico img { max-width: 52px; max-height: 52px; image-rendering: pixelated; }
.id-flavor { padding: 18px 24px 0; color: var(--dim); font-size: 16px; }
.id-sechead {
  padding: 22px 24px 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dimmer);
}
.id-props { margin: 0; padding: 0 24px 6px 44px; }
.id-props li { margin-bottom: 6px; color: var(--dim); }
.id-props strong { color: var(--text); }
.id-data { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.id-data th, .id-data td {
  padding: 9px 24px; text-align: left;
  border-top: 1px solid var(--border);
}
.id-data th { color: var(--dim); font-weight: 600; width: 34%; }
.v-gold { color: var(--accent); font-weight: 700; }
.muted { color: var(--dimmer); }

/* ---------- search results (/wiki/search.html) ---------- */
.ws-summary { color: var(--dim); margin-bottom: 20px; }
.ws-list { list-style: none; padding: 0; margin: 0; }
.ws-list li {
  border-bottom: 1px solid var(--border);
  padding: 16px 0; margin: 0;
}
.ws-list li:first-child { border-top: 1px solid var(--border); }
.ws-title { font-size: 18px; font-weight: 700; }
.ws-kind {
  margin-left: 9px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--dimmer);
  border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px;
}
.ws-url { color: var(--dimmer); font-size: 13px; margin-top: 2px; }
.ws-snip { color: var(--dim); margin: 6px 0 0; font-size: 15px; }
.ws-snip mark { background: rgba(255, 201, 74, .22); color: var(--text); border-radius: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .w-article { grid-template-columns: minmax(0, 1fr); }
  .w-infobox { position: static; max-width: 420px; }
}

@media (max-width: 720px) {
  .w-subhead .wrap { flex-wrap: wrap; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .w-nav-toggle { display: block; order: 3; margin-left: auto; }
  .w-nav-links {
    display: none; order: 4;
    flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px;
  }
  .w-nav-links.open { display: flex; }
  .w-nav-links a { padding: 7px 0; }
  .w-search { order: 2; margin-left: auto; flex: 1 1 150px; }
  .w-hero { padding: 28px 20px; }
  .w-hero h1 { font-size: 30px; }
  .w-hero-search { flex-direction: column; }
  .w-panel { padding: 20px 18px; }
  .w-pagehead h1 { font-size: 27px; }
}

@media (max-width: 620px) {
  /* site.css drops .site-head to min-height 60px here, so 60 + 1px border. */
  .w-subhead { top: 61px; }
}

/* ---------- utility ----------
   The site ships style-src 'self' with no 'unsafe-inline', so an inline
   style="display:none" would be ignored by the browser. Anything the scripts
   need to show or hide toggles this class instead. */
.is-hidden { display: none; }
.w-loading { padding: 22px 24px; color: var(--dim); margin: 0; }
.it-table .it-col-name { width: 38%; }