/* Shared Styles for Vault Bandits — v3 */
:root {
  --gold: #f0b94a;
  --purple: #7c3aed;
  --violet: #a48bff;
  --violet2: #7ad0ff;
  --orange: #ff8a00;
  --amber: #ffcc66;
  --bright-gold: #ffd36b;
  --blue1: #0a1a2a;
  --blue2: #140a26; /* darker end */
  --text: #f7f4ff;
  --muted: #cfd8ff;
  --panel: rgba(255,255,255,0.06);
  --panel-strong: rgba(255,255,255,0.12);
  --blur: blur(10px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html.crystal-theme, body { background: radial-gradient(1200px 800px at 20% 10%, rgba(124,58,237,.15), transparent),
                          radial-gradient(1000px 800px at 80% 30%, rgba(10,26,42,.5), transparent),
                          linear-gradient(180deg, var(--blue1), var(--blue2));
  color: var(--text);
  font: 16px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Animated background pulse */
.bg-layer { position: fixed; inset: 0; background: radial-gradient(60% 80% at 70% 10%, rgba(164,139,255,.12), transparent), radial-gradient(40% 60% at 20% 80%, rgba(255,211,107,.10), transparent); filter: saturate(120%); animation: bgPulse 20s ease-in-out infinite alternate; z-index: 0; }
@keyframes bgPulse { 0%{opacity:.65; transform: scale(1);} 100%{opacity:.9; transform: scale(1.03);} }

/* Mist */
.mist-layer { position: fixed; inset: 0; pointer-events: none; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><defs><radialGradient id="g" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.05"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><g><circle cx="200" cy="200" r="200" fill="url(%23g)"/><circle cx="600" cy="300" r="220" fill="url(%23g)"/><circle cx="400" cy="450" r="180" fill="url(%23g)"/></g></svg>') repeat; filter: blur(8px) brightness(120%); opacity:.35; animation: mistDrift 110s linear infinite; z-index: 1; }
@keyframes mistDrift { from{background-position: 0 0;} to{ background-position: -1200px 0;} }

/* Floating lore layer */
.lore-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.lore { position: absolute; left: 100vw; white-space: nowrap; font-weight: 600; opacity: .7; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); will-change: transform; }
.lore.whisper { background: linear-gradient(90deg, var(--violet), var(--violet2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lore.tale { background: linear-gradient(90deg, var(--orange), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lore.code { background: linear-gradient(90deg, var(--bright-gold), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes slideLeft { from { transform: translateX(0); } to { transform: translateX(-140vw); } }

/* Layout */
.site-header { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 3vw, 32px); backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05)); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display:flex; gap:12px; align-items:center; }
.vh-glyph { width: 36px; height: 36px; border-radius: 12px; display:grid; place-items:center; background: radial-gradient(100% 100% at 50% 0%, rgba(255,211,107,.35), rgba(124,58,237,.35)); box-shadow: 0 0 24px rgba(124,58,237,.35), inset 0 0 14px rgba(255,211,107,.25); }
.site-title { font-size: clamp(22px, 2.2vw, 32px); letter-spacing:.5px; text-transform: uppercase; }
.site-title span { background: linear-gradient(90deg, var(--gold), var(--bright-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display:flex; gap:12px; align-items:center; }
.nav-link, .nav-cta { appearance:none; border:0; background:transparent; color:var(--text); text-decoration:none; padding:10px 14px; border-radius:12px; transition: transform .15s ease, box-shadow .2s ease; }
.nav-link:hover, .nav-cta:hover { transform: translateY(-1px); }
.nav-link.active { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }
.nav-cta { background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(255,211,107,.2)); box-shadow: 0 0 24px rgba(124,58,237,.25); cursor:pointer; }

.container { width:min(1200px, 92vw); margin: 28px auto; display: grid; gap: 24px; z-index: 3; position: relative; }

.panel { background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 12px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: var(--blur); padding: clamp(14px, 2vw, 22px); }
.panel-title { margin: 0 0 8px; font-size: clamp(18px, 2vw, 24px); letter-spacing:.3px; background: linear-gradient(90deg, var(--bright-gold), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.status-panel .status-grid { display:grid; gap: 16px; grid-template-columns: 1fr; }
.status-line { display:flex; align-items:center; gap:10px; font-weight:600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #aaa; box-shadow: 0 0 8px rgba(255,255,255,.25); }
.kv { list-style: none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 16px; }
.kv li { display:flex; justify-content: space-between; gap:10px; padding:8px 10px; border-radius:12px; background: rgba(255,255,255,.03); }
.kv li span { color: var(--muted); }

.mods { margin-top: 6px; }
.mods summary { cursor: pointer; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.scroll { max-height: 220px; overflow:auto; margin-top: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.06); }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--purple), var(--bright-gold)); border-radius: 8px; }
.list { list-style:none; margin:0; padding:8px; display:grid; gap:6px; }
.list li { padding:6px 8px; background: rgba(0,0,0,.25); border-radius: 8px; }

.actions { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 14px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 12px 16px; border-radius: 14px; text-decoration:none; font-weight:600; letter-spacing:.2px; cursor:pointer; transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; backdrop-filter: blur(6px); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-primary { color:#1b1330; background: linear-gradient(180deg, var(--bright-gold), var(--gold)); box-shadow: 0 8px 30px rgba(255,211,107,.35), inset 0 1px 0 #fff3; border: 1px solid rgba(0,0,0,.25); }
.btn-outline { color: var(--text); background: linear-gradient(180deg, rgba(124,58,237,.25), rgba(255,211,107,.15)); border: 1px solid rgba(255,255,255,.18); }
.btn.tiny { padding: 8px 10px; font-size: .9rem; }
.btn.full { width:100%; }

.map-panel .map-frame { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 20px 60px rgba(0,0,0,.35); background: rgba(0,0,0,.25); }
.map-panel iframe { width: 100%; height: 100%; border: 0; display:block; }

.grid-2 { display:grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.nice-list { margin: 0; padding-left: 18px; }
.nice-list li { margin: 6px 0; }
.nice-list.tight li { margin: 4px 0; }

/* Slide-in side panels */
.side-panel { position: fixed; top: 0; right: 0; height: 100dvh; width: min(440px, 92vw); padding: 20px; background: linear-gradient(180deg, rgba(20,10,38,.82), rgba(20,10,38,.6)); border-left: 1px solid rgba(255,255,255,.12); box-shadow: -20px 0 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); transform: translateX(100%); transition: transform .35s ease; z-index: 9; backdrop-filter: blur(12px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 12px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.side-panel[aria-hidden="false"] { transform: translateX(0); }
.side-panel h3 { margin: 8px 0; font-size: 22px; background: linear-gradient(90deg, var(--bright-gold), #fff); -webkit-background-clip:text; background-clip:text; color: transparent; }
.side-panel p { margin: 0 0 8px; color: var(--muted); }
.side-panel.bright { background: linear-gradient(180deg, rgba(54,28,96,.86), rgba(30,20,48,.7)); box-shadow: -20px 0 90px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.side-panel .close { position:absolute; top:10px; right:10px; background: transparent; border: 0; font-size: 28px; color: var(--text); cursor: pointer; opacity:.8; }

/* Overlay to close panels */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 8; }
.overlay[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.site-footer { display:flex; justify-content:center; align-items:center; gap:10px; padding: 22px; opacity:.9; }

/* FAQ accordion polish */
.accordion details { background: var(--panel); border: 1px solid rgba(255,255,255,.08); padding: 10px 12px; border-radius: 14px; margin: 10px 0; transition: box-shadow .25s ease; }
.accordion details[open] { box-shadow: 0 8px 30px rgba(124,58,237,.25); }
.accordion summary { cursor:pointer; font-weight: 700; list-style: none; }
.accordion summary::-webkit-details-marker { display:none; }
.accordion .faq-body { margin-top: 8px; color: var(--muted); }

/* Utility */
.hidden { display:none !important; }