/* ===== Guardians Lore — v6 (namespaced) ===== */
#lore-app { --bg: #0f1117; --bg-elev: rgba(255,255,255,.04); --text:#f2f5f9; --text-dim:#c6cfda;
  --brand:#e6d69b; --accent:#7ac7ff; --chip:#1a1f2b; --chip-on:#2d364b; --border:rgba(255,255,255,.12);
  --pill:#212838; --success:#74e39b; --warn:#ffcf6e; --danger:#ff8f8f; --r:14px; --gap:.65rem; }
#lore-app * { box-sizing: border-box; }
#lore-app .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Header */
#lore-app .header { text-align:center; margin: 1.25rem 0 1rem; }
#lore-app .header h2 { margin:0; font-size:clamp(2rem,3vw,2.6rem); color:var(--brand); text-shadow:0 0 .5rem rgba(255,255,200,.15); }
#lore-app .legend { margin:.35rem 0 0; color:var(--text-dim); font-size:.95rem; opacity:.9; }

/* Tabs */
#lore-app .tabs { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-start; align-items:center; margin: 1rem 0 .75rem; }
#lore-app .tab { appearance:none; border:1px solid var(--border); background:var(--bg-elev); color:var(--text); padding:.45rem .7rem; border-radius:999px;
  cursor:pointer; font:inherit; line-height:1; }
#lore-app .tab[aria-selected="true"] { box-shadow:0 0 0 2px rgba(255,255,255,.13) inset; background:#1b2130; }

/* Controls */
#lore-app .controls { border:1px solid var(--border); background:var(--bg-elev); border-radius:var(--r); padding:.55rem; display:flex; gap:.65rem; flex-direction:column; }
#lore-app .searchbar { display:flex; align-items:center; gap:.5rem; }
#lore-app .searchbar input { width:100%; background:#0e1320; border:1px solid var(--border); color:var(--text); padding:.6rem .8rem; border-radius:10px; }
#lore-app .chips { display:flex; gap:.5rem; flex-wrap:wrap; }
#lore-app .group { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
#lore-app .group .label { color:var(--text-dim); margin-right:.25rem; }
#lore-app .chip, #lore-app .moreless, #lore-app .btn { appearance:none; border:1px solid var(--border); background:var(--chip); color:var(--text);
  padding:.35rem .6rem; border-radius:999px; cursor:pointer; font:inherit; line-height:1; }
#lore-app .chip.is-on { background:var(--chip-on); box-shadow:0 0 0 2px rgba(122,199,255,.2) inset; }
#lore-app .moreless { border-style:dashed; }
#lore-app .right { margin-left:auto; display:flex; gap:.45rem; align-items:center; }
#lore-app .count { color:var(--text-dim); }
#lore-app .toggle { display:inline-flex; gap:.35rem; align-items:center; color:var(--text-dim); font-size:.95rem; }

/* Cards */
#lore-app .grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem; margin: 1rem 0 2rem; }
@media (max-width: 900px){ #lore-app .grid { grid-template-columns: repeat(6, 1fr);} }
@media (max-width: 600px){ #lore-app .grid { grid-template-columns: repeat(4, 1fr);} }
#lore-app .card { grid-column: span 4; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border-radius:var(--r); padding: .85rem; box-shadow:0 .5rem 1.25rem rgba(0,0,0,.18); }
#lore-app .card h4 { margin:.1rem 0 .35rem; font-size:1.15rem; letter-spacing:.2px; }
#lore-app .meta { display:flex; flex-wrap:wrap; gap:.35rem; margin:.25rem 0 .35rem; }
#lore-app .pill { background:var(--pill); color:var(--text); padding:.25rem .55rem; border-radius:999px; font-size:.9rem; display:inline-flex; gap:.35rem; align-items:center; }
#lore-app .blurb { color:var(--text-dim); margin:.4rem 0; font-size:.95rem; }
#lore-app .features { display:flex; flex-wrap:wrap; gap:.35rem; margin:.2rem 0 .5rem; }
#lore-app .feat { background:#192030; padding:.2rem .45rem; border-radius:999px; font-size:.85rem; color:var(--text-dim); }
#lore-app .row { display:flex; align-items:center; gap:.5rem; }
#lore-app .action { color:var(--accent); text-decoration:none; font-weight:600; }
#lore-app .spacer { flex:1; }
#lore-app .empty { opacity:.8; color:var(--text-dim); padding:1rem; text-align:center; }

/* Drawer — ensure above site header */
#lore-app .drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .15s ease; z-index: 10000; }
#lore-app .drawer-overlay.open { opacity:1; pointer-events:auto; backdrop-filter: blur(2px); }
#lore-app .drawer { position:fixed; top:0; right:-460px; width:min(460px, 92vw); height:100dvh; background:#0e1320;
  border-left:1px solid var(--border); transition:right .2s ease; box-shadow:-.5rem 0 1.2rem rgba(0,0,0,.4); display:flex; flex-direction:column; z-index: 10001; }
#lore-app .drawer.open { right:0; }
#lore-app .drawer-head { display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--border); }
#lore-app .drawer-head h3 { margin:0; font-size:1.15rem; }
#lore-app .drawer-body { padding: 1rem; overflow:auto; display:grid; gap:.65rem; }
#lore-app .sources { color:var(--text-dim); font-size:.95rem; }