<!doctype html>
<html>
<head>
  <title>OnlyScavs – Injector Reference</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    :root {
      --bg: #121212;
      --panel: #1a1a1a;
      --panel2: #1e1e1e;
      --text: #eee;
      --muted: #888;
      --border: #2a2a2a;
      --accent: #9ccfff;
      --good: #6ec96e;
      --bad: #e06060;
      --warn: #e0a040;
      --neutral: #aaa;
      --heal: #5db8a0;
      --stam: #6abfdb;
      --skill: #a58cf0;
      --special: #c8a850;
    }
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      margin: 0;
      padding-top: 52px;
      background-image: url('/assets/onlyscavs.png');
      background-attachment: fixed;
      background-size: cover;
      background-position: center 65%;
    }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(14,14,14,0.88);
      pointer-events: none;
      z-index: 0;
    }
    .page { max-width: 1200px; margin: 0 auto; padding: 24px 16px; position: relative; z-index: 1; }
    .site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 24px; height: 52px;
      background: rgba(14,14,14,0.92);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-brand { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; flex-shrink: 0; }
    .nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
    .nav-links a { color: #666; text-decoration: none; font-size: 0.8rem; padding: 5px 10px; border-radius: 5px; transition: color 0.15s, background 0.15s; }
    .nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
    .nav-links a.active { color: var(--accent); background: rgba(156,207,255,0.08); }

    h1 { font-size: 1.4rem; margin: 0 0 4px; }
    .subtitle { color: var(--muted); font-size: 0.88rem; margin: 0 0 28px; }

    /* ── Section headings ── */
    .section-head {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      padding-bottom: 6px;
      margin: 32px 0 16px;
    }

    /* ════════════════════════════════════
       SITUATION GUIDE
    ════════════════════════════════════ */
    .sit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }
    .sit-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
    }
    .sit-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sit-label span.icon { font-size: 1rem; }
    .sit-item {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.85rem;
    }
    .sit-item:last-child { border-bottom: none; }
    .sit-name {
      font-weight: 600;
      min-width: 90px;
      color: var(--accent);
      white-space: nowrap;
    }
    .sit-desc { color: var(--muted); font-size: 0.8rem; flex: 1; }
    .sit-warn { color: var(--bad); font-size: 0.75rem; white-space: nowrap; }

    /* ════════════════════════════════════
       COMPARISON GRID
    ════════════════════════════════════ */
    .grid-wrap {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    table.comp {
      border-collapse: collapse;
      width: 100%;
      min-width: 900px;
      font-size: 0.82rem;
    }
    table.comp thead th {
      background: var(--panel2);
      padding: 10px 8px;
      text-align: center;
      border-right: 1px solid var(--border);
      border-bottom: 2px solid var(--border);
      font-size: 0.75rem;
      white-space: nowrap;
    }
    table.comp thead th:first-child {
      text-align: left;
      padding-left: 14px;
      min-width: 160px;
      background: #151515;
    }
    table.comp thead .th-icon {
      display: block;
      margin: 0 auto 4px;
      width: 32px;
      height: 32px;
      object-fit: contain;
    }
    table.comp thead .th-name {
      display: block;
      font-weight: 700;
      color: var(--accent);
    }
    table.comp thead .th-short {
      display: block;
      color: var(--muted);
      font-size: 0.7rem;
    }
    table.comp tbody tr { border-bottom: 1px solid var(--border); }
    table.comp tbody tr:last-child { border-bottom: none; }
    table.comp tbody tr:hover { background: rgba(255,255,255,0.03); }
    table.comp tbody td {
      padding: 7px 8px;
      text-align: center;
      border-right: 1px solid var(--border);
      vertical-align: middle;
    }
    table.comp tbody td:first-child {
      text-align: left;
      padding-left: 14px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 600;
      background: #151515;
      white-space: nowrap;
    }
    table.comp tbody tr.row-group td:first-child {
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #555;
      padding-top: 10px;
      padding-bottom: 4px;
      border-bottom: none;
      background: #111;
    }
    table.comp tbody tr.row-group td {
      background: #111;
      border-bottom: none;
    }

    /* value cells */
    .v-good { color: var(--good); font-weight: 600; }
    .v-bad  { color: var(--bad); }
    .v-warn { color: var(--warn); }
    .v-none { color: #383838; }
    .v-heal { color: var(--heal); font-weight: 600; }
    .v-stam { color: var(--stam); font-weight: 600; }
    .v-skill { color: var(--skill); }
    .v-special { color: var(--special); }

    /* check / cross / dash symbols */
    .sym-check { color: var(--good); font-size: 1rem; }
    .sym-x     { color: var(--bad);  font-size: 1rem; }
    .sym-dash  { color: #333; }

    /* duration pill */
    .dur {
      display: inline-block;
      background: #252525;
      border-radius: 3px;
      padding: 1px 5px;
      font-size: 0.72rem;
      color: var(--muted);
    }
    .dur-long { background: #1e2a1e; color: var(--good); }
    .dur-med  { background: #252020; color: var(--warn); }
    .dur-short { background: #2a1818; color: var(--bad); }

    /* wiki link in header */
    table.comp thead th a {
      color: var(--muted);
      font-size: 0.65rem;
      text-decoration: none;
      display: block;
    }
    table.comp thead th a:hover { color: var(--accent); }

    /* ── filter tabs ── */
    .filter-bar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .filter-btn {
      background: var(--panel);
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 4px;
      padding: 4px 12px;
      font-size: 0.78rem;
      cursor: pointer;
    }
    .filter-btn:hover { color: var(--text); border-color: #555; }
    .filter-btn.active { color: var(--accent); border-color: var(--accent); background: #1a2533; }
  </style>
</head>
<body>
<div class="page">

  <nav class="site-nav">
    <a class="nav-brand" href="/">OnlyScavs</a>
    <div class="nav-links">
      <a href="/keys">Keys</a>
      <a href="/collector">Collector</a>
      <a href="/quests">Quests</a>
      <a href="/loadout">Loadout</a>
      <a href="/meds" class="active">Injectors</a>
      <a href="/barters">Barters</a>
    </div>
  </nav>

  <h1>Injector Quick Reference</h1>
  <p class="subtitle">All stim injectors — situation guide + full effect comparison</p>

  <!-- ══════════════════════════════════
       SITUATION GUIDE
  ══════════════════════════════════ -->
  <div class="section-head">Situation Guide — what to grab when</div>
  <div class="sit-grid">

    <div class="sit-card">
      <div class="sit-label" style="color: var(--heal)"><span class="icon">🩸</span> Bleeding / Wound</div>
      {% for inj in situations.bleed %}
      <div class="sit-item">
        <span class="sit-name">{{ inj.short }}</span>
        <span class="sit-desc">{{ inj.desc }}</span>
        {% if inj.warn %}<span class="sit-warn">⚠ {{ inj.warn }}</span>{% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="sit-card">
      <div class="sit-label" style="color: var(--heal)"><span class="icon">❤️</span> HP Regen</div>
      {% for inj in situations.regen %}
      <div class="sit-item">
        <span class="sit-name">{{ inj.short }}</span>
        <span class="sit-desc">{{ inj.desc }}</span>
        {% if inj.warn %}<span class="sit-warn">⚠ {{ inj.warn }}</span>{% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="sit-card">
      <div class="sit-label" style="color: var(--stam)"><span class="icon">⚡</span> Stamina / Speed</div>
      {% for inj in situations.stam %}
      <div class="sit-item">
        <span class="sit-name">{{ inj.short }}</span>
        <span class="sit-desc">{{ inj.desc }}</span>
        {% if inj.warn %}<span class="sit-warn">⚠ {{ inj.warn }}</span>{% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="sit-card">
      <div class="sit-label" style="color: var(--skill)"><span class="icon">💪</span> Skill Boosts</div>
      {% for inj in situations.skill %}
      <div class="sit-item">
        <span class="sit-name">{{ inj.short }}</span>
        <span class="sit-desc">{{ inj.desc }}</span>
        {% if inj.warn %}<span class="sit-warn">⚠ {{ inj.warn }}</span>{% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="sit-card">
      <div class="sit-label" style="color: var(--special)"><span class="icon">🌡️</span> Temperature / Special</div>
      {% for inj in situations.special %}
      <div class="sit-item">
        <span class="sit-name">{{ inj.short }}</span>
        <span class="sit-desc">{{ inj.desc }}</span>
        {% if inj.warn %}<span class="sit-warn">⚠ {{ inj.warn }}</span>{% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="sit-card">
      <div class="sit-label" style="color: var(--bad)"><span class="icon">☠️</span> High Risk / Gamble</div>
      {% for inj in situations.risky %}
      <div class="sit-item">
        <span class="sit-name">{{ inj.short }}</span>
        <span class="sit-desc">{{ inj.desc }}</span>
        {% if inj.warn %}<span class="sit-warn">⚠ {{ inj.warn }}</span>{% endif %}
      </div>
      {% endfor %}
    </div>

  </div>

  <!-- ══════════════════════════════════
       COMPARISON GRID
  ══════════════════════════════════ -->
  <div class="section-head" style="margin-top:40px">Full Comparison Grid</div>

  <div class="filter-bar" id="filterBar">
    <button class="filter-btn active" data-filter="all">All</button>
    <button class="filter-btn" data-filter="heal">Healing</button>
    <button class="filter-btn" data-filter="stam">Stamina</button>
    <button class="filter-btn" data-filter="skill">Skill</button>
    <button class="filter-btn" data-filter="special">Special</button>
  </div>

  <div class="grid-wrap">
    <table class="comp" id="compTable">
      <thead>
        <tr>
          <th>Effect</th>
          {% for inj in injectors %}
          <th data-tags="{{ inj.tags }}">
            {% if inj.icon %}<img class="th-icon" src="{{ inj.icon }}" alt="" onerror="this.style.display='none'">{% endif %}
            <span class="th-name">{{ inj.short }}</span>
            {% if inj.wiki %}<a href="{{ inj.wiki }}" target="_blank">wiki ↗</a>{% endif %}
          </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        <!-- HP REGENERATION -->
        <tr class="row-group">
          <td>Healing</td>
          {% for inj in injectors %}<td></td>{% endfor %}
        </tr>
        <tr>
          <td>HP regen /s</td>
          {% for inj in injectors %}
          <td>
            {% if inj.hp_regen %}
              <span class="v-heal">+{{ inj.hp_regen }}</span>
              <span class="dur {% if inj.hp_regen_dur >= 300 %}dur-long{% elif inj.hp_regen_dur >= 60 %}dur-med{% else %}dur-short{% endif %}">{{ inj.hp_regen_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Stops bleeding</td>
          {% for inj in injectors %}
          <td>
            {% if inj.stops_bleed %}<span class="sym-check">✓</span>{% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Antidote</td>
          {% for inj in injectors %}
          <td>
            {% if inj.antidote %}<span class="sym-check">✓</span>{% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <!-- STAMINA -->
        <tr class="row-group">
          <td>Stamina</td>
          {% for inj in injectors %}<td></td>{% endfor %}
        </tr>
        <tr>
          <td>Max stamina</td>
          {% for inj in injectors %}
          <td>
            {% if inj.max_stam %}
              <span class="{% if inj.max_stam > 0 %}v-stam{% else %}v-bad{% endif %}">
                {{ '+' if inj.max_stam > 0 else '' }}{{ inj.max_stam }}
              </span>
              <span class="dur">{{ inj.max_stam_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Stam recovery /s</td>
          {% for inj in injectors %}
          <td>
            {% if inj.stam_rec %}
              <span class="{% if inj.stam_rec > 0 %}v-stam{% else %}v-bad{% endif %}">
                {{ '+' if inj.stam_rec > 0 else '' }}{{ inj.stam_rec }}
              </span>
              <span class="dur">{{ inj.stam_rec_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Weight limit</td>
          {% for inj in injectors %}
          <td>
            {% if inj.weight %}
              <span class="{% if inj.weight > 0 %}v-good{% else %}v-bad{% endif %}">
                {{ '+' if inj.weight > 0 else '' }}{{ (inj.weight * 100)|int }}%
              </span>
              <span class="dur">{{ inj.weight_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <!-- SKILLS -->
        <tr class="row-group">
          <td>Skill Buffs</td>
          {% for inj in injectors %}<td></td>{% endfor %}
        </tr>
        {% for skill_name in skill_rows %}
        <tr>
          <td>{{ skill_name }}</td>
          {% for inj in injectors %}
          <td>
            {% set val = inj.skills.get(skill_name) %}
            {% if val %}
              <span class="{% if val.value > 0 %}v-skill{% else %}v-bad{% endif %}">
                {{ '+' if val.value > 0 else '' }}{{ val.value }}
              </span>
              <span class="dur">{{ val.duration }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        {% endfor %}

        <!-- SPECIAL -->
        <tr class="row-group">
          <td>Special</td>
          {% for inj in injectors %}<td></td>{% endfor %}
        </tr>
        <tr>
          <td>Body temp Δ</td>
          {% for inj in injectors %}
          <td>
            {% if inj.body_temp %}
              <span class="{% if inj.body_temp > 0 %}v-bad{% else %}v-good{% endif %}">
                {{ '+' if inj.body_temp > 0 else '' }}{{ inj.body_temp }}°
              </span>
              <span class="dur">{{ inj.body_temp_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Energy Δ /s</td>
          {% for inj in injectors %}
          <td>
            {% if inj.energy %}
              <span class="{% if inj.energy > 0 %}v-good{% else %}v-bad{% endif %}">
                {{ '+' if inj.energy > 0 else '' }}{{ inj.energy }}
              </span>
              <span class="dur">{{ inj.energy_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Hydration Δ /s</td>
          {% for inj in injectors %}
          <td>
            {% if inj.hydration %}
              <span class="{% if inj.hydration > 0 %}v-good{% else %}v-bad{% endif %}">
                {{ '+' if inj.hydration > 0 else '' }}{{ inj.hydration }}
              </span>
              <span class="dur">{{ inj.hydration_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <!-- SIDE EFFECTS -->
        <tr class="row-group">
          <td>Side Effects</td>
          {% for inj in injectors %}<td></td>{% endfor %}
        </tr>
        <tr>
          <td>Tremors</td>
          {% for inj in injectors %}
          <td>
            {% if inj.tremor %}
              <span class="v-bad">⚠</span>
              <span class="dur dur-short">{{ inj.tremor_delay }}s delay · {{ inj.tremor_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Tunnel vision</td>
          {% for inj in injectors %}
          <td>
            {% if inj.tunnel %}
              <span class="v-bad">⚠</span>
              <span class="dur dur-short">{{ inj.tunnel_delay }}s delay · {{ inj.tunnel_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
        <tr>
          <td>Pain</td>
          {% for inj in injectors %}
          <td>
            {% if inj.pain %}
              <span class="v-bad">⚠</span>
              <span class="dur dur-short">{{ inj.pain_delay }}s delay · {{ inj.pain_dur }}s</span>
            {% else %}<span class="sym-dash">—</span>{% endif %}
          </td>
          {% endfor %}
        </tr>
      </tbody>
    </table>
  </div><!-- /grid-wrap -->

</div><!-- /page -->

<script>
  // Filter columns by tag
  document.getElementById("filterBar").addEventListener("click", function(e) {
    const btn = e.target.closest(".filter-btn");
    if (!btn) return;
    document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
    btn.classList.add("active");
    const filter = btn.dataset.filter;
    const table = document.getElementById("compTable");
    const headers = table.querySelectorAll("thead th");
    headers.forEach((th, i) => {
      if (i === 0) return; // label col
      const tags = (th.dataset.tags || "").split(",");
      const show = filter === "all" || tags.includes(filter);
      // toggle all cells in column i
      table.querySelectorAll("tr").forEach(tr => {
        const cells = tr.children;
        if (cells[i]) cells[i].style.display = show ? "" : "none";
      });
    });
  });
</script>
</body>
</html>
