/*****************************
*          BANNER            *
******************************/

.wiki-banner {
      background:var(--surface);
      border-bottom:1px solid var(--border);
      padding:calc(3.5rem + 56px) 0 2.5rem;
      margin-top:0;
      position:relative;
      overflow:hidden
}

.wiki-banner::before {
      content:'';
      position:absolute;
      inset:0;
      background:rgba(var(--violet-rgb),.08);
      pointer-events:none
}

.wiki-banner .inner {
      position:relative;
      text-align:center
}

.wiki-banner .eyebrow {
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--gold);
      background:rgba(var(--gold-rgb),.1);
      border:1px solid rgba(var(--gold-rgb),.2);
      border-radius:20px;
      padding:.3rem .9rem;
      margin-bottom:1.25rem
}

.wiki-banner h1 {
      font-family:var(--font-mono);
      font-weight:900;
      font-size:clamp(1.9rem,5vw,3.2rem);
      color:#fff;letter-spacing:.02em;
      margin-bottom:.6rem;
      text-shadow:none
}

.wiki-banner h1 em {
      font-style:normal;
      color:var(--gold)
}

.wiki-banner .tagline {
      color:var(--text-muted);
      font-size:.95rem;
      max-width:440px;
      margin:0 auto 2rem
}
/*****************************
*          SEARCH            *
******************************/

.wiki-search {
      max-width:580px;
      margin:0 auto;
      position:relative
}

.wiki-search input {
      width:100%;
      background:var(--surface-2);
      border:1px solid var(--border);
      border-radius:var(--radius);
      color:var(--text);
      font-family:var(--font-body);
      font-size:.95rem;
      padding:.8rem 1rem .8rem 3rem;
      outline:none;
      transition:border-color .2s,box-shadow .2s
}

.wiki-search input:focus {
      border-color:var(--violet);
      box-shadow:0 0 0 3px rgba(var(--violet-rgb),.2)
}

.wiki-search input::placeholder {
      color:var(--text-dim)
}

.wiki-search .si {
      position:absolute;
      left:1.1rem;
      top:50%;
      transform:translateY(-50%);
      color:var(--text-dim);
      pointer-events:none;
      font-size:.9rem
}

.wiki-search .sh {
      position:absolute;
      right:1rem;
      top:50%;
      transform:translateY(-50%);
      font-size:.7rem;
      color:var(--text-dim);
      background:var(--surface-3);
      border:1px solid var(--border);
      border-radius:3px;
      padding:.1rem .4rem;
      pointer-events:none
}

/*****************************
*         STATS BAR          *
******************************/

.wiki-stats-bar {
      background:var(--surface-2);
      border-bottom:1px solid var(--border)
}

.stats-inner {
      display:flex;
      align-items:center;
      padding:.6rem 0;
      overflow-x:auto
}

.stat-item {
      display:flex;
      align-items:center;
      gap:.5rem;
      padding:0 1.25rem;
      border-right:1px solid var(--border);
      font-size:.8rem;
      color:var(--text-muted);
      white-space:nowrap
}

.stat-item:last-child {
      border-right:none;
      margin-left:auto
}

.stat-item .num {
      font-weight:700;
      color:var(--text)
}

.stat-item i {
      color:var(--gold);
      font-size:.75rem
}

.status-dot {
      width:8px;
      height:8px;
      border-radius:50%;
      background:#2ecc71;
      box-shadow:0 0 6px #2ecc71;
      flex-shrink:0
}

/*****************************
*           BODY             *
******************************/

.wiki-body {
      padding:2.5rem 0 4rem
}

.wiki-body > .container {
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: 1300px
}

.wiki-two-col {
      display:grid;
      grid-template-columns:1fr auto;
      gap:1.5rem
}

@media (max-width:900px) {
      .wiki-two-col{
            grid-template-columns:1fr
      }
}

/*****************************
*      SECTION HEADING       *
******************************/

.sec-head {
      font-size:.65rem;
      letter-spacing:.2em;
      margin-bottom:1rem;
      display:flex;
      align-items:center;
      gap:.75rem
}

.sec-head::after {
      content:'';
      flex:1;
      height:1px;
      background:var(--border-gold)
}

/*****************************
*        CATEGORIES          *
******************************/

.cat-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
      gap:1px;
      background:var(--border);
      border:1px solid var(--border);
      border-radius:var(--radius);
      overflow:hidden
}

.cat-card {
      background:var(--surface);
      padding:1.4rem 1.25rem;
      text-decoration:none;
      color:var(--text);
      display:flex;
      flex-direction:column;
      gap:.6rem;
      transition:background .15s
}

.cat-card:hover {
      background:var(--surface-2);
      color:var(--text);
      text-decoration:none
}

.cat-icon {
      width:40px;
      height:40px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.15rem;
      flex-shrink:0
}

.cat-name {
      font-family:var(--font-mono);
      font-size:.85rem;
      font-weight:600;
      letter-spacing:.04em;
      color:#fff
}

.cat-desc {
      font-size:.78rem;
      color:var(--text-muted);
      line-height:1.5
}

.ic-start {
      background:rgba(var(--teal-rgb),.12);
      color:var(--teal)
}

.ic-rules {
      background:rgba(var(--gold-rgb),.12);
      color:var(--gold)
}

.ic-claims {
      background:rgba(var(--violet-rgb),.12);
      color:var(--violet-soft)
}

.ic-craft {
      background:rgba(192,57,43,.12);
      color:#e74c3c
}

.ic-world {
      background:rgba(39,174,96,.12);
      color:#2ecc71
}

.ic-staff {
      background:rgba(241,196,15,.12);
      color:#f1c40f
}
.ic-cmd {
      background:rgba(52,152,219,.12);
      color:#3498db
}

.no-results {
      display:none;
      text-align:center;
      padding:2rem;
      color:var(--text-muted);
      font-size:.9rem;
      grid-column:1/-1
}

.no-results i {
      font-size:1.5rem;
      margin-bottom:.5rem;
      display:block;
      color:var(--text-dim)
}

/* Article count — sits below the category grid */
.wiki-article-count {
      display:flex;
      align-items:center;
      gap:.5rem;
      margin-top:1rem;
      padding:.5rem .85rem;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      font-size:.78rem;
      color:var(--text-muted)
}

.wiki-article-count i {
      color:var(--gold);
      font-size:.7rem
}

.wiki-article-count strong {
      color:var(--text);
      font-weight:700
}

.wiki-article-count-sep {
      color:var(--text-dim)
}

/*****************************
*        SIDE PANEL          *
******************************/

.side-panel-parent {
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:1rem
}

.side-panel {
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:1rem
}

.side-box {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      overflow:hidden
}

.side-box-head {
      background:var(--surface-2);
      border-bottom:1px solid var(--border);
      padding:.6rem 1rem;
      font-size:.7rem;
      letter-spacing:.15em;
      display:flex;
      align-items:center;
      gap:.5rem
}

.side-box-body {
      padding:1rem
}

.patch-list {
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:.1rem
}

.patch-list li a {
      display:flex;
      align-items:flex-start;
      gap:.6rem;
      padding:.45rem .5rem;
      border-radius:4px;
      color:var(--text-muted);
      font-size:.8rem;
      transition:background .12s,color .12s
}

.patch-list li a:hover {
      background:var(--surface-2);
      color:var(--text);
      text-decoration:none
}

.pdot {
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--violet-soft);
      flex-shrink:0;
      margin-top:.45rem
}

.pdate {
      font-size:.68rem;
      color:var(--text-dim);
      font-family:var(--font-mono);
      margin-top:.15rem;
      display:block
}

.quick-links {
      display:flex;
      flex-direction:column;
      gap:.25rem
}

.quick-link {
      display:flex;
      align-items:center;
      gap:.7rem;
      padding:.5rem .6rem;
      border-radius:4px;
      color:var(--text-muted);
      font-size:.83rem;
      transition:background .12s,color .12s
}

.quick-link:hover {
      background:var(--surface-2);
      color:var(--text);
      text-decoration:none
}

.quick-link i {
      width:16px;
      text-align:center;
      color:var(--teal);
      font-size:.8rem
}

.wiki-ip-button {
      background: none;
      transition: background 0.3s ease;
      border: none;
      position: relative;
      cursor: pointer
}

.wiki-ip-button:hover {
      background:var(--surface-2)
}

/* "Copy to clipboard" tooltip */
.wiki-ip-button::after {
      content: 'Click to copy';
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--surface-3);
      color: var(--text);
      font-family: var(--font-body);
      font-size: .68rem;
      padding: .25rem .55rem;
      border-radius: 4px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s ease;
      border: 1px solid var(--border)
}

.wiki-ip-button:hover::after {
      opacity: 1
}

/* Swap text to "Copied!" after click — toggled by JS */
.wiki-ip-button.copied::after {
      content: 'Copied!';
      color: var(--teal)
}


/*****************************
*        ANNOUNCEMENT        *
******************************/

.wiki-ann {
      background:rgba(var(--violet-rgb),.08);
      border:1px solid rgba(var(--violet-rgb),.15);
      border-radius:var(--radius);
      padding:.75rem 1.1rem;
      display:flex;
      align-items:flex-start;
      gap:.8rem;
      margin-bottom:1.5rem;
      font-size:.85rem;
      color:var(--text-muted)
}

.wiki-ann i {
      color:var(--violet-soft);
      flex-shrink:0;
      margin-top:.1rem
}

.wiki-ann strong {
      color:var(--text)
}