html, body { height:100%; margin:0; background:#0b0f14; }
    #map { position:fixed; inset:0; min-height:200px; }

    .sky{ pointer-events:none; position:fixed; left:0; right:0; top:0; height:22vh; z-index:2000;
      background:linear-gradient(180deg, rgba(78,124,255,.35) 0%, rgba(78,124,255,.15) 50%, rgba(0,0,0,0) 100%);
      filter:saturate(120%); }
    .vignette{ pointer-events:none; position:fixed; inset:0; z-index:2100;
      background:radial-gradient(80% 60% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.25) 100%); }

    /* YOU marker + radar (geen accuracy-ring) */
    .you-wrap{ position:relative; width:72px; height:72px; pointer-events:none; will-change:transform; contain:layout paint size; }
    .you-ico{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(0);
      width:18px; height:18px; border-radius:50%; background:#31D27C;
      box-shadow:0 0 0 3px rgba(49,210,124,.28),0 0 18px rgba(49,210,124,.55),0 0 36px rgba(49,210,124,.35);
      border:2px solid #0b0f14;
    }
    .sweep{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:66px; height:66px; border-radius:50%;
      background:conic-gradient(from 0deg, rgba(60,255,160,0) 0deg, rgba(60,255,160,.55) 16deg, rgba(60,255,160,0) 20deg);
      animation:sweepSpin 2.4s linear infinite; mix-blend-mode:screen; will-change:transform;
    }
    @keyframes sweepSpin{ from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
    .ring{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:2px solid rgba(60,255,160,.26); }
    .ring.r1{ width:66px; height:66px; }
    .ring.r2{ width:46px; height:46px; border-color:rgba(60,255,160,.20); }
    .ring.r3{ width:26px; height:26px; border-color:rgba(60,255,160,.16); }

    #dbg{ position:fixed; right:10px; bottom:10px; z-index:2300;
      background:#0f172a; color:#e5edff; border:1px solid rgba(255,255,255,.12);
      padding:6px 8px; border-radius:10px; font:12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; max-width:60vw; }
    #dbg.error{ background:#2a1114; border-color:#ff8b8b; color:#ffd7d7; }

    /* Fullscreen GPS gate + klein status-toastje */
    #gate{
      position:fixed; inset:0; z-index:3000; background:#0b0f14;
      display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px;
      color:#e5edff; font:600 16px system-ui,sans-serif;
    }
    #gate .msg{ opacity:.8 }
    .spin{ width:42px; height:42px; border-radius:50%;
      border:3px solid rgba(255,255,255,.14); border-top-color:#3cff9f; animation:spin 1s linear infinite; }
    @keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
    #gpsToast{
      position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
      background:rgba(15,23,42,.92); color:#e6f1ff; border:1px solid rgba(255,255,255,.12);
      padding:8px 12px; border-radius:12px; font:600 13px system-ui,sans-serif; z-index:2400;
      box-shadow:0 10px 22px rgba(0,0,0,.35); display:none;
    }
    /* ---- Fog overlay bottom (whiter, clearer, a bit higher) ---- */
    .fog {
      pointer-events: none;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      height: 32vh;                /* iets hoger dan eerst */
      z-index: 2080;               /* onder .vignette (2100) */
      overflow: hidden;
    }

    .fog .layer {
      position: absolute;
      left: -22%; right: -22%; top: -6%; bottom: -2%;
      /* wit i.p.v. blauw; hogere opacities → duidelijker */
      background:
        radial-gradient(62% 95% at 15% 100%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 62%),
        radial-gradient(60% 90% at 50% 100%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 64%),
        radial-gradient(62% 95% at 85% 100%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 62%);
      filter: blur(8px) saturate(90%);
      opacity: 0.85;
      will-change: transform, opacity;
      animation:
        fogDrift1 28s ease-in-out infinite alternate,
        fogBreathe 12s ease-in-out infinite;
    }

    /* tweede laag: langzamer, wat zachter voor diepte */
    .fog .layer.l2 {
      filter: blur(12px) saturate(85%);
      opacity: 0.65;
      animation:
        fogDrift2 40s ease-in-out infinite alternate,
        fogBreathe 16s ease-in-out infinite;
    }

    /* derde laag: traagste, subtiel */
    .fog .layer.l3 {
      filter: blur(16px) saturate(80%);
      opacity: 0.50;
      animation:
        fogDrift3 60s ease-in-out infinite alternate,
        fogBreathe 20s ease-in-out infinite;
    }

    /* sterkere verticale fade zodat bovenrand clean blijft */
    .fog::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(to top,
        rgba(11, 15, 20, 0.90) 0%,
        rgba(11, 15, 20, 0.40) 42%,
        rgba(11, 15, 20, 0.00) 82%
      );
      pointer-events: none;
    }

    /* animaties: net wat meer ‘sway’ zodat je beweging ziet */
    @keyframes fogDrift1 { from { transform: translateX(-7%);} to { transform: translateX(7%);} }
    @keyframes fogDrift2 { from { transform: translateX( 9%);} to { transform: translateX(-9%);} }
    @keyframes fogDrift3 { from { transform: translateX(-11%);} to { transform: translateX(11%);} }

    @keyframes fogBreathe {
      0%, 100% { opacity: 0.90; }
      50%      { opacity: 0.72; }
    }
    #rain{
      position: fixed; inset: 0; pointer-events: none;
      z-index: 2095; /* boven .fog(2080), onder .vignette(2100) */
    }
    #rain > canvas{ width:100%; height:100%; display:block; }


    /* HUD inventory button */
  .hud-btn{
    position:fixed; right:12px; top:12px; z-index:2200;
    padding:8px 12px; border-radius:12px; font:600 13px system-ui,sans-serif;
  }
  .hud-btn:hover{ filter:brightness(1.08); }



  /* Release banner */
  .release-banner{
    position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:2400;
    background:rgba(15,23,42,.96); color:#e6f1ff; border:1px solid rgba(255,255,255,.12);
    padding:10px 12px; border-radius:12px; box-shadow:0 10px 22px rgba(0,0,0,.35);
    display:flex; align-items:center; gap:10px; font:600 13px system-ui,sans-serif;
  }
  .rb-title{ font-weight:700; }
  .rb-sub{ opacity:.8; }
  .rb-cancel{ margin-left:8px; background:transparent; border:1px solid rgba(255,255,255,.24);
    color:#e6f1ff; border-radius:10px; padding:6px 10px; font:600 12px system-ui,sans-serif; cursor:pointer; }

  /* Reward popup */
  .reward-pop{ position:fixed; inset:0; z-index:2500; display:grid; place-items:center; background:rgba(0,0,0,.45); }
  .reward-card{
    width:min(420px,86vw); background:linear-gradient(180deg,#0f172a,#0b0f14);
    color:#e6f1ff; border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:18px;
    box-shadow:0 20px 40px rgba(0,0,0,.55);
  }
  .rc-title{ font:800 16px system-ui,sans-serif; margin-bottom:6px; }
  .rc-msg{ font:600 13px system-ui,sans-serif; opacity:.9; margin-bottom:12px; }
  .rc-ok{ background:#31d27c; color:#0b0f14; border:0; border-radius:12px; padding:10px 14px; font:800 13px system-ui,sans-serif; cursor:pointer; }

  /* Soul marker (DOM) */
  .soul-pin{ position:relative; width:22px; height:22px; border-radius:50%; box-sizing:border-box; border:2px solid #0b0f14; cursor:pointer; }
  .soul-pin:after{ content:''; position:absolute; inset:-8px; border-radius:50%;
    box-shadow:0 0 14px currentColor, 0 0 30px currentColor; opacity:.65; }
  .soul-lv1{ background:#9AE6B4; color:#9AE6B4; }
  .soul-lv2{ background:#81E6D9; color:#81E6D9; }
  .soul-lv3{ background:#63B3ED; color:#63B3ED; }
  .soul-lv4{ background:#7F9CF5; color:#7F9CF5; }
  .soul-lv5{ background:#B794F4; color:#B794F4; }
  .soul-lv6{ background:#F6AD55; color:#F6AD55; }
  .soul-lv7{ background:#FC8181; color:#FC8181; }
  .soul-lv8{ background:#F687B3; color:#F687B3; }
  .soul-lv9{ background:#E53E3E; color:#E53E3E; }

  /* Release target pin */
  .rel-pin{
    width:26px; height:26px; border-radius:50%; border:2px solid #ffdd66;
    background:rgba(255,221,102,.12); box-shadow:0 0 18px #ffdd66;
  }

  /* Soul image markers */
  .soul-pin img{
    display:block;
    width:48px;
    height:48px;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
    pointer-events:auto;
  }

  #dbg {
    display: none;
  }

  #lsc-overlay{
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(8,12,20,.40);            /* donker laagje */
    backdrop-filter: blur(6px);               /* BLUR hier! */
    -webkit-backdrop-filter: blur(6px);
    z-index: 2200;
  }
  #lsc-overlay.lsc-show{ display:flex; }
  #lsc-overlay.lsc-animate-in .lsc-panel{ transform: translateY(0); opacity: 1; }

  /* Panel: transparant (geen achtergrond achter de ghost) */
  #lsc-overlay .lsc-panel{
    width: clamp(280px, 88vw, 720px);
    max-height: 90vh;
    overflow: hidden;
    background: transparent;                  /* <— geen achtergrond */
    border: 0;
    box-shadow: none;
    padding: 12px 0 10px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;

    transform: translateY(8px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* Character */
  #lsc-overlay .lsc-char{
    width: min(44vw, 320px);
    max-height: 42vh;
    object-fit: contain;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
    user-select: none; -webkit-user-drag: none;
  }

  /* Scrollbare tekst-bubble met MEER marge links/rechts */
  #lsc-overlay .lsc-bubble{
    width: calc(100% - 32px);                 /* ruimte links/rechts */
    margin: 0 16px;
    background: rgba(30,41,59,.86);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 12px 14px;

    max-height: clamp(140px, 36vh, 360px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #lsc-overlay .lsc-text{
    color: #e6f1ff;
    font: 600 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    white-space: pre-wrap;
  }

  /* Footer: alleen een Close-knop, rechts uitgelijnd */
  #lsc-overlay .lsc-footer{
    width: 100%;
    display: flex; justify-content: flex-end; align-items: center;
    padding: 6px 16px 0;
  }
  #lsc-overlay .lsc-close{
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(51,65,85,.88);
    color: #e6f1ff;
    font: 700 14px/1 system-ui, sans-serif;
    cursor: pointer;
  }
  #lsc-overlay .lsc-close:hover{ filter: brightness(1.06); }

  /* ===== Reliquary Drawer (game style) ===== */
:root{
  --glass-bg: rgba(12,18,32,.58);
  --glass-border: rgba(255,255,255,.10);
  --glass-highlight: rgba(120,230,255,.18);
  --panel-radius: 18px;
  --shadow-xl: 0 24px 60px rgba(0,10,26,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --text: #e8f1ff;
  --text-dim: #9fb2c7;
  --accent: #67e8f9;
}

/* container */
.drawer{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* volle hoogte met kleine marge */
  top: 12px;
  bottom: 12px;
  width: min(880px, 92vw);
  max-height: none;            /* niet limiteren; flex regelt de verdeling */
  display: none;               /* toggled door JS → gebruik 'flex' i.p.v. 'block' */
  z-index: 2100;
  color: var(--text);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  background:
    linear-gradient(180deg, var(--glass-highlight) 0%, rgba(103,232,249,0) 22%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  opacity: 1;

  /* kolomlayout: header | list (scroll) | footer */
  flex-direction: column;
}

/* kleine “appear” motion wanneer zichtbaar wordt gezet */
.drawer[style*="display: block"],
.drawer[style*="display: flex"]{
  animation: drawerPop .22s ease-out;
}
@keyframes drawerPop{
  from{ transform: translate(-50%, 8px); opacity:.0; }
  to{ transform: translate(-50%, 0); opacity:1; }
}

/* header */
.drawer-head{
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.drawer-title{
  font: 700 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .2px; display:flex; align-items:center; gap:10px;
}
.title-glow{
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #9ff, #0ff0);
  box-shadow: 0 0 14px #6ff, 0 0 28px #0ff6;
}

/* close button */
.xbtn{
  appearance: none; border: 0; cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.xbtn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.xbtn:active{ transform: translateY(0); }

/* list area → ENIGE scrollende gedeelte */
.inv-list{
  flex: 1 1 auto;          /* pak alle resterende ruimte */
  min-height: 0;           /* essentieel voor flex-scrolling */
  overflow: auto;          /* scroll als nodig */
  max-height: 100%;        /* veiligheid */
  padding: 12px 14px 6px 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* inventory row cards (works with your JS-generated structure) */
.inv-item{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.inv-badge{
  width: 56px; height: 56px; border-radius: 14px;
  display:grid; place-items:center;
  color:#0b1424; font-weight:800;
  background: radial-gradient(120% 120% at 50% 100%, rgba(255,255,255,.55), rgba(255,255,255,.2) 55%, transparent 70%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.inv-meta .inv-name{ font-weight:700; letter-spacing:.2px; }
.inv-meta .inv-sub{ color: var(--text-dim); font-size: 12px; margin-top:2px; }

/* "Release" button your JS adds */
.inv-act{
  appearance:none; cursor:pointer;
  padding: 8px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: var(--text); font-weight: 700;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.inv-act:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.inv-act:active{ transform: translateY(0); }

/* footer */
.drawer-foot{
  position: sticky; bottom: 0;
  padding: 12px 14px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.08));
  border-top: 1px solid rgba(255,255,255,.07);
}
.stats{ display:flex; gap: 12px; flex-wrap: wrap; }
.stat{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
}
.stat-ico{
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #c8f1ff, #47e7ff 60%, #0ae 100%);
  box-shadow: 0 0 12px rgba(71,231,255,.55);
}
.stat-ico-img{
  width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(80,220,255,.35));
}
.stat-label{ color: var(--text-dim); font-weight:600; font-size: 12px; text-transform: uppercase; letter-spacing:.3px; }
.stat-val{ font-weight:800; }

/* mobile tweaks */
@media (max-width: 560px){
  .drawer{
    top: 8px;
    bottom: 8px;
    width: 94vw;
  }
  .inv-item{ grid-template-columns: 52px 1fr auto; }
  .inv-badge{ width:52px; height:52px; }
}