/* ═══════════════════════════════════════════════════════════════
   Scapewatch Wiki — Stylesheet
   Uses the same CSS variables as the game client so themes work.
   Defaults match :root in client/css/style.css (Oldschool).
   ═══════════════════════════════════════════════════════════════ */

:root {
    --game-font: 'Chakra Petch', sans-serif;

    /* ── Theme Colors (defaults = Oldschool) ──────────────── */
    --bg-darkest:       #1a1a1a;
    --bg-dark:          #1c1c0e;
    --bg-panel:         #2b2216;
    --bg-cell:          #3a3226;
    --bg-hover:         #4a4230;
    --border-primary:   #5c4a2a;
    --border-secondary: #7a6a3a;
    --text-bright:      #ffff00;
    --text-gold:        #FFD700;
    --text-accent:      #c8a83e;
    --text-light:       #cccccc;
    --text-muted:       #888888;
    --text-dim:         #aaaaaa;
    --text-dark:        #666666;
    --text-disabled:    #555555;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-darkest);
    color: var(--text-light);
    font-family: var(--game-font);
    font-size: 15px;
    line-height: 1.6;
}

a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--text-gold); text-decoration: underline; }

.wiki-shell { max-width: 1100px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* ── Nav ─────────────────────────────────────────────────── */
.wiki-nav {
    display: flex; align-items: center; gap: 16px; padding: 12px 20px;
    background: var(--bg-panel); border-bottom: 2px solid var(--border-primary);
    position: sticky; top: 0; z-index: 100;
}
.wiki-logo {
    font-family: var(--game-font); font-size: 24px; color: var(--text-bright);
    text-shadow: 1px 1px 0 #000; white-space: nowrap; text-decoration: none;
}
.wiki-logo:hover { color: var(--text-bright); text-decoration: none; }
.wiki-nav-links { display: flex; gap: 12px; flex-shrink: 0; }
.wiki-nav-links a { color: var(--text-accent); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.wiki-nav-links a:hover { color: var(--text-gold); }

.wiki-search-wrap { position: relative; margin-left: auto; }
#wiki-search {
    width: 200px; padding: 6px 10px; background: var(--bg-cell); border: 1px solid var(--border-primary);
    border-radius: 4px; color: var(--text-light); font-family: var(--game-font); font-size: 14px; outline: none;
}
#wiki-search:focus { border-color: var(--text-accent); }
.wiki-search-results {
    display: none; position: absolute; top: 100%; right: 0; width: 300px;
    background: var(--bg-panel); border: 1px solid var(--border-primary); border-radius: 4px;
    max-height: 400px; overflow-y: auto; z-index: 200;
}
.wiki-sr { display: block; padding: 8px 12px; border-bottom: 1px solid var(--bg-cell); color: var(--text-light); }
.wiki-sr:hover { background: var(--bg-cell); text-decoration: none; }
.wiki-sr-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; margin-right: 6px; }

/* ── Theme Dropdown ──────────────────────────────────────── */
#wiki-theme-select {
    padding: 4px 6px; background: var(--bg-cell); border: 1px solid var(--border-primary);
    border-radius: 4px; color: var(--text-light); font-family: var(--game-font); font-size: 13px;
    outline: none; cursor: pointer;
}
#wiki-theme-select:focus { border-color: var(--text-accent); }

/* ── Breadcrumb ──────────────────────────────────────────── */
.wiki-breadcrumb {
    padding: 8px 20px; font-size: 13px; color: var(--text-muted);
    border-bottom: 1px solid var(--bg-cell);
}
.wiki-breadcrumb a { color: var(--text-accent); }

/* ── Main ────────────────────────────────────────────────── */
.wiki-main { flex: 1; padding: 24px 20px; }
.wiki-main h1 { font-family: var(--game-font); font-size: 32px; color: var(--text-bright); text-shadow: 1px 1px 0 #000; margin-bottom: 16px; }
.wiki-main h2 { font-family: var(--game-font); font-size: 24px; color: var(--text-accent); margin: 24px 0 12px; border-bottom: 1px solid var(--border-primary); padding-bottom: 4px; }
.wiki-main h3 { font-family: var(--game-font); font-size: 20px; color: var(--text-accent); margin: 16px 0 8px; }
.wiki-main p { margin-bottom: 12px; }
.wiki-main ul, .wiki-main ol { margin: 0 0 12px 24px; }
.wiki-main li { margin-bottom: 4px; }
.wiki-main code { background: var(--bg-cell); padding: 2px 6px; border-radius: 3px; font-size: 14px; color: var(--text-bright); }
.wiki-intro { font-size: 16px; color: var(--text-muted); margin-bottom: 24px; }
.wiki-desc { font-style: italic; color: var(--text-muted); margin-bottom: 16px; }

/* ── Icons ───────────────────────────────────────────────── */
.wiki-icon { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; margin-right: 4px; filter: drop-shadow(1px 1px 0 #000); }
h1 .wiki-icon { width: 40px; height: 40px; }

/* ── Infobox ─────────────────────────────────────────────── */
.wiki-infobox {
    float: right; width: 280px; margin: 0 0 16px 20px; padding: 12px;
    background: var(--bg-panel); border: 2px solid var(--border-primary); border-radius: 6px;
}
.wiki-infobox-img { text-align: center; margin-bottom: 8px; }
.wiki-infobox-img .wiki-icon { width: 64px; height: 64px; }
.wiki-props { width: 100%; }
.wiki-props th { text-align: left; color: var(--text-accent); padding: 3px 8px 3px 0; font-weight: normal; white-space: nowrap; }
.wiki-props td { padding: 3px 0; }

/* ── Tables ──────────────────────────────────────────────── */
.wiki-table {
    width: 100%; border-collapse: collapse; margin-bottom: 16px;
    font-size: 14px; text-shadow: 1px 1px 0 #000;
}
.wiki-table th {
    text-align: left; padding: 8px 10px; background: var(--bg-panel);
    color: var(--text-accent); border-bottom: 2px solid var(--border-primary); font-weight: normal;
}
.wiki-table td { padding: 6px 10px; border-bottom: 1px solid var(--bg-cell); }
.wiki-table tr:hover td { background: var(--bg-cell); }
.wiki-table .wiki-icon { width: 24px; height: 24px; }

.wiki-stat-table { width: auto; }
.wiki-stat-table th { text-align: center; padding: 6px 12px; }
.wiki-stat-table td { text-align: center; padding: 4px 12px; }
.wiki-stat-table td:first-child { text-align: left; color: var(--text-accent); }

.stat-pos { color: #4caf50; }
.stat-zero { color: var(--text-dark); }
.stat-neg { color: #ff4444; }

.wiki-stat-icon { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle; margin-right: 4px; filter: drop-shadow(1px 1px 0 #000); }
.wiki-equip-meta { margin-bottom: 8px; font-size: 16px; color: var(--text-light); text-shadow: 1px 1px 0 #000; }
/* ── Mob Page Layout ──────────────────────────────────────── */
.wiki-mob-derived {
    display: flex; gap: 24px; flex-wrap: wrap; padding: 12px 16px;
    background: var(--bg-panel); border: 2px solid var(--border-primary); border-radius: 6px;
    margin-bottom: 20px;
}
.wiki-mob-derived-item { display: flex; align-items: center; gap: 6px; }
.wiki-mob-derived-label { color: var(--text-muted); font-size: 13px; }
.wiki-mob-derived-val { color: var(--text-bright); font-size: 16px; font-weight: 600; }

.wiki-mob-columns { display: flex; gap: 24px; margin-bottom: 16px; }
.wiki-mob-col { flex: 1; min-width: 0; }
.wiki-mob-col h2 { font-size: 20px; margin-top: 0; }

.wiki-mob-skill-row {
    display: flex; align-items: center; gap: 6px; padding: 4px 8px;
    border-bottom: 1px solid var(--bg-cell);
}
.wiki-mob-skill-row .wiki-icon { width: 24px; height: 24px; }
.wiki-mob-skill-name { flex: 1; color: var(--text-accent); }
.wiki-mob-skill-val { color: var(--text-bright); font-weight: 600; min-width: 30px; text-align: right; }

.wiki-mob-rewards {
    display: flex; gap: 24px; flex-wrap: wrap; padding: 8px 0;
    font-size: 15px;
}
.wiki-mob-rewards .wiki-icon { width: 20px; height: 20px; }

@media (max-width: 768px) {
    .wiki-mob-columns { flex-direction: column; }
}

/* ── Slay Master Cards ────────────────────────────────────── */
.wiki-slay-master {
    margin-bottom: 20px; background: var(--bg-panel); border: 1px solid var(--border-primary);
    border-radius: 6px; overflow: hidden;
}
.wiki-slay-master-header { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.wiki-slay-portrait { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 #000); }
.wiki-slay-master-name { font-family: var(--game-font); font-size: 22px; font-weight: 600; }
.wiki-slay-master-tier { font-size: 14px; color: var(--text-muted); }
.wiki-slay-master-count { font-size: 13px; color: var(--text-dim); }
.wiki-slay-master .wiki-table { margin-bottom: 0; }
.wiki-slay-master .wiki-table th { background: var(--bg-dark); }

.wiki-table th .wiki-icon { width: 20px; height: 20px; }

.wiki-xp-table { max-width: 500px; }

/* ── Skill Grid ──────────────────────────────────────────── */
.wiki-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 24px; }
.wiki-skill-card {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--bg-panel); border: 1px solid var(--border-primary); border-radius: 4px;
    color: var(--text-light); text-decoration: none; transition: all 0.15s;
}
.wiki-skill-card:hover { border-color: var(--text-accent); background: var(--bg-cell); text-decoration: none; color: var(--text-bright); }
.wiki-skill-card .wiki-icon { width: 28px; height: 28px; flex-shrink: 0; }

/* ── Browse Grid ─────────────────────────────────────────── */
.wiki-browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.wiki-browse-card {
    padding: 16px; background: var(--bg-panel); border: 2px solid var(--border-primary);
    border-radius: 6px; text-decoration: none; transition: all 0.15s;
}
.wiki-browse-card:hover { border-color: var(--text-accent); text-decoration: none; }
.browse-title { font-family: var(--game-font); font-size: 22px; color: var(--text-bright); }
.browse-count { font-size: 13px; color: var(--text-muted); }

/* ── Guide Grid ──────────────────────────────────────────── */
.wiki-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 24px; }
.wiki-guide-link {
    display: block; padding: 10px 14px; background: var(--bg-panel);
    border: 1px solid var(--border-primary); border-radius: 4px;
    color: var(--text-accent); text-decoration: none; transition: all 0.15s;
}
.wiki-guide-link:hover { border-color: var(--text-accent); background: var(--bg-cell); color: var(--text-bright); text-decoration: none; }

/* ── Guide Layout ────────────────────────────────────────── */
.wiki-guide-layout { display: flex; gap: 24px; }
.wiki-guide-sidebar {
    width: 200px; flex-shrink: 0; position: sticky; top: 70px; align-self: flex-start;
    background: var(--bg-panel); border: 1px solid var(--border-primary); border-radius: 6px;
    padding: 12px; max-height: calc(100vh - 90px); overflow-y: auto;
}
.wiki-guide-sidebar h3 { font-family: var(--game-font); font-size: 18px; color: var(--text-accent); margin-bottom: 8px; }
.wiki-guide-sidebar a { display: block; padding: 4px 8px; color: var(--text-muted); font-size: 13px; border-radius: 3px; }
.wiki-guide-sidebar a:hover { background: var(--bg-cell); color: var(--text-light); text-decoration: none; }
.wiki-guide-sidebar a.active { color: var(--text-bright); background: var(--bg-cell); }
.wiki-guide-body { flex: 1; min-width: 0; }

/* ── Category Footer ─────────────────────────────────────── */
.wiki-category-footer {
    margin-top: 32px; padding: 12px 16px;
    background: var(--bg-panel); border: 1px solid var(--border-primary); border-radius: 6px;
}
.wiki-cat-title { font-family: var(--game-font); font-size: 18px; color: var(--text-accent); margin-bottom: 6px; }
.wiki-cat-links { font-size: 13px; line-height: 2; }

/* ── Quest Steps ─────────────────────────────────────────── */
.wiki-steps li { margin-bottom: 12px; }
.wiki-dialogue { margin-top: 4px; padding: 8px 12px; background: var(--bg-cell); border-left: 3px solid var(--text-accent); font-style: italic; color: var(--text-muted); border-radius: 0 4px 4px 0; }

/* ── Footer ──────────────────────────────────────────────── */
.wiki-footer { padding: 16px 20px; text-align: center; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--bg-cell); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .wiki-nav { flex-wrap: wrap; }
    .wiki-nav-links { order: 3; width: 100%; }
    .wiki-search-wrap { order: 2; }
    .wiki-infobox { float: none; width: 100%; margin: 0 0 16px 0; }
    .wiki-guide-layout { flex-direction: column; }
    .wiki-guide-sidebar { width: 100%; position: static; max-height: none; }
}