/* ========== The Veil — Beat Gen Horror Aesthetic ========== */
:root{
  --bg:#0a0a0a;
  --fg:#e9e9e9;
  --muted:#b8b8b8;
  --accent:#d2aa6d;
  --bad:#b33a3a;
  --good:#3ab36a;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.25rem 1rem;
  border-bottom:1px solid #1a1a1a;
  background: radial-gradient(1200px 400px at 20% -10%, rgba(255,255,255,0.04), transparent);
}
.sigil{width:64px;height:64px;display:grid;place-items:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.sigil svg{width:100%;height:100%}
.sigil .ring{fill:none;stroke:var(--fg);stroke-width:3;opacity:.35}
.sigil .glyph{fill:var(--fg);opacity:.75}
.sigil .dot{fill:var(--accent)}
.title-wrap .site-title{margin:0;font-size:1.8rem;letter-spacing:.06em;text-transform:uppercase}
.site-subtitle{margin:.15rem 0 0 0;color:var(--muted);font-size:.95rem}

/* Layout */
main{max-width:1200px;margin:0 auto;padding:1.25rem}
.index-card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));border:1px solid #1b1b1b;border-radius:18px;padding:1.25rem;margin:1rem 0 1.5rem;overflow:hidden}
.index-aura{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;background: radial-gradient(350px 350px at 60% 40%, rgba(210,170,109,.45), transparent), radial-gradient(320px 320px at 35% 60%, rgba(58,179,106,.35), transparent);transition: filter .6s ease, opacity .6s ease;filter: saturate(1) blur(18px)}
.index-number{font-size:5.2rem;line-height:1;font-weight:800;letter-spacing:.02em;text-shadow:0 5px 30px rgba(0,0,0,.55)}
.index-state{margin-top:.35rem;color:var(--muted);font-size:1.05rem}
.index-meta{margin-top:.35rem;color:var(--muted);font-size:.9rem;opacity:.9}
.index-bar{width:100%;height:10px;background:#121212;border-radius:999px;margin:1rem 0;overflow:hidden;border:1px solid #1e1e1e}
.index-bar .fill{height:100%;width:0%;background:linear-gradient(90deg, var(--good), var(--accent), var(--bad));transition:width .8s ease}
.legend{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem}

/* Cards & Buttons */
.tile{display:flex;flex-direction:column;justify-content:space-between;background:#0f0f0f;border:1px solid #1b1b1b;border-radius:16px;padding:1rem}
.tile h3{margin:.25rem 0 .45rem}
.tile p{margin:0 0 .8rem 0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;background:#121212;border:1px solid #242424;color:#e9e9e9;padding:.5rem .7rem;border-radius:10px;font-size:.95rem}
.btn.primary{background:linear-gradient(90deg, var(--good), var(--accent));color:#051005;font-weight:800}

/* Footer */
.site-footer{max-width:1200px;margin:1rem auto 2.5rem;padding:0 1.25rem;color:var(--muted)}
.site-footer blockquote{margin:0;padding:1rem;border-left:3px solid #262626;background:#0f0f0f;border-radius:10px}
.site-footer cite{display:block;margin-top:.4rem;color:#8e8e8e;font-style:normal}
.footer-nav{display:flex;gap:1rem;margin-top:.75rem}
.footer-nav a{color:#9a9a9a;text-decoration:none;border-bottom:1px dashed #333;cursor:not-allowed}

/* Map page helpers */
.map-wrap{position:relative;height:calc(100vh - 130px);margin:1rem auto;max-width:1200px}
#map{position:absolute;inset:0;border:1px solid #1b1b1b;border-radius:14px;overflow:hidden}
.hud{position:absolute;left:12px;top:12px;display:flex;gap:.6rem;align-items:center;background:#0f0f0fe6;backdrop-filter:blur(4px);border:1px solid #1d1d1d;border-radius:10px;padding:.45rem .6rem;font-size:.95rem}
.hud .dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:#3ab36a;margin-right:.35rem}
.legend{position:absolute;right:12px;bottom:12px;background:#0f0f0fbd;border:1px solid #222;border-radius:10px;padding:.55rem .7rem;font-size:.85rem}
.legend .bar{width:180px;height:10px;background:linear-gradient(90deg,var(--good),var(--accent),var(--bad));border-radius:999px;border:1px solid #222;margin:.35rem 0}

/* Responsive */
@media (max-width:560px){
  .index-number{font-size:4rem}
}