.nav{
  position:relative; z-index:5;
  display:flex; align-items:center; gap:28px;
  padding:18px 36px;
  border-bottom:1px solid rgba(233,192,115,0.08);
  background:linear-gradient(180deg, rgba(10,15,34,0.85), rgba(10,15,34,0.55) 70%, transparent);
  backdrop-filter:blur(8px);
}
.brand{ display:flex; align-items:center; gap:12px; min-width:200px }
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f5d99a 0%, #c89642 55%, #6b4818 100%);
  box-shadow:0 0 22px rgba(233,192,115,0.45), inset 0 0 8px rgba(0,0,0,0.4);
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(circle at 60% 60%, transparent 50%, rgba(0,0,0,0.3));
}
.brand-name{ font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600; letter-spacing:0.18em; color:var(--ivory) }
.brand-name em{ font-style:italic; color:var(--gold); font-weight:500; letter-spacing:0.04em; margin-left:2px }
.brand-sub{ font-size:10px; letter-spacing:0.32em; color:var(--muted); text-transform:uppercase; margin-top:2px }

.search{
  flex:0 0 360px; display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(233,192,115,0.12);
  border-radius:999px;
  position:relative;
}
.search svg{ flex:none; color:var(--muted) }
.search input{
  flex:1; background:none; border:none; outline:none; color:var(--ivory);
  font-family:'Inter'; font-size:13px; letter-spacing:0.01em;
}
.search input::placeholder{ color:#6c7290 }
.search .kbd{
  font-family:'JetBrains Mono'; font-size:10px; color:var(--muted);
  border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:2px 6px; letter-spacing:0.05em;
}
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:linear-gradient(180deg, #131a36, #0c1228);
  border:1px solid rgba(233,192,115,0.25); border-radius:10px;
  box-shadow:0 18px 50px rgba(0,0,0,0.7), 0 0 30px rgba(245,217,154,0.12);
  max-height:340px; overflow-y:auto; z-index:60;
  display:none;
}
.search-results.open{ display:block }
.search-result{
  padding:9px 14px; font-size:12px; color:var(--ivory-dim);
  border-bottom:1px solid rgba(233,192,115,0.06); cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.search-result:hover,
.search-result.active{ background:rgba(233,192,115,0.12); color:var(--ivory-strong) }
.search-result.active{ outline:1px solid rgba(245,217,154,0.4); outline-offset:-1px }
.search-result .kind{ font-size:9.5px; letter-spacing:0.18em; color:var(--gold); text-transform:uppercase }

.era-filters{ display:flex; align-items:center; gap:6px; flex:1; flex-wrap:wrap }
.filter-label{ font-size:10px; letter-spacing:0.28em; color:var(--muted); text-transform:uppercase; margin-right:8px }
.chip{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  background:transparent; border:1px solid rgba(233,192,115,0.16);
  color:var(--ivory-dim); cursor:pointer; font-weight:500;
  transition:all .2s;
}
.chip.active{
  background:linear-gradient(180deg, rgba(233,192,115,0.16), rgba(233,192,115,0.08));
  border-color:rgba(233,192,115,0.55); color:var(--gold-2);
  box-shadow:0 0 18px rgba(233,192,115,0.18), inset 0 1px 0 rgba(255,220,150,0.18);
}
.chip.cool.active{
  background:linear-gradient(180deg, rgba(110,166,230,0.18), rgba(110,166,230,0.06));
  border-color:rgba(110,166,230,0.5); color:var(--sapphire-2);
  box-shadow:0 0 18px rgba(110,166,230,0.18);
}

.nav-actions{ display:flex; align-items:center; gap:14px; color:var(--muted) }
.icon-btn{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02);
  color:var(--ivory-dim); cursor:pointer;
  transition:all .15s;
}
.icon-btn:hover{ border-color:rgba(233,192,115,0.35); color:var(--gold-2) }
.icon-btn.active{ border-color:rgba(233,192,115,0.55); color:var(--gold-2); box-shadow:0 0 14px rgba(233,192,115,0.25) }
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, #2c3458, #4b3a6c);
  border:1px solid rgba(233,192,115,0.25); display:grid; place-items:center;
  font-family:'Cormorant Garamond'; font-weight:600; color:var(--gold-2); font-size:13px;
}

.nav-spacer{ flex:1 }

/* World layer category dropdown */
.world-panel{
  width:300px;
  background:linear-gradient(180deg, rgba(20,28,56,0.98), rgba(10,15,34,0.98));
  border:1px solid rgba(110,166,230,0.4);
  border-radius:10px;
  padding:14px 14px 10px;
  box-shadow:0 18px 50px rgba(0,0,0,0.6), 0 0 24px rgba(110,166,230,0.15);
  z-index:100;
  font-family:'Inter', sans-serif;
}
.world-panel header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.world-panel-title{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-weight:500;
  font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--sapphire-2);
}
.world-panel-master{
  font-family:'JetBrains Mono'; font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px; cursor:pointer;
  border:1px solid rgba(110,166,230,0.5);
  background:rgba(110,166,230,0.1);
  color:var(--sapphire-2);
  transition:all .15s;
}
.world-panel-master.on{
  background:rgba(110,166,230,0.32);
  color:#e7eef9;
  box-shadow:0 0 12px rgba(110,166,230,0.25);
}
.world-panel-master.off{ opacity:0.55 }
.world-panel-intro{
  font-size:11px; line-height:1.45;
  color:var(--muted);
  margin:0 0 10px;
  font-style:italic;
}
.world-cat-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1px }
.world-cat{
  display:grid;
  grid-template-columns:14px 1fr;
  gap:10px;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  transition:background .15s;
}
.world-cat:hover{ background:rgba(110,166,230,0.08) }
.world-cat-dot{
  width:10px; height:10px; border-radius:50%;
  background:transparent;
  border:1px solid color-mix(in srgb, var(--cat-color, #6ea6e6) 55%, transparent);
  margin-top:5px;
  transition:all .15s;
}
.world-cat.on .world-cat-dot{
  background:radial-gradient(circle,
    color-mix(in srgb, var(--cat-color, #6ea6e6) 95%, white 25%) 0%,
    var(--cat-color, #6ea6e6) 60%,
    color-mix(in srgb, var(--cat-color, #6ea6e6) 50%, black 30%) 100%);
  border-color:color-mix(in srgb, var(--cat-color, #6ea6e6) 90%, transparent);
  box-shadow:0 0 8px color-mix(in srgb, var(--cat-color, #6ea6e6) 60%, transparent);
}
.world-cat-label{
  display:block;
  font-size:12.5px; font-weight:500;
  color:var(--ivory-strong);
  letter-spacing:0.005em;
}
.world-cat.off .world-cat-label{ color:var(--muted) }
.world-cat-note{
  display:block;
  font-size:10.5px; line-height:1.35;
  color:var(--muted);
  margin-top:1px;
}

/* ===== Hover tooltips for controls =====
   Any element with a data-tip attribute gets a styled hover tooltip.
   data-tip-title (small uppercase gold heading) + data-tip (description). */
[data-tip]{ position:relative }
.lumen-tooltip{
  position:fixed;            /* positioned via JS to avoid clipping */
  pointer-events:none;
  width:240px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(20,28,56,0.98), rgba(10,15,34,0.98));
  border:1px solid rgba(245,217,154,0.35);
  border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,0.55), 0 0 16px rgba(245,217,154,0.1);
  font-family:'Inter', sans-serif;
  font-size:11.5px;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  color:var(--ivory-dim);
  text-align:left;
  opacity:0; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;
  z-index:200;
}
.lumen-tooltip.visible{ opacity:1; transform:translateY(0) }
.lumen-tooltip .tt-title{
  display:block;
  font-size:9.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-2);
  font-weight:600;
  margin-bottom:5px;
}
.lumen-tooltip .tt-body{
  display:block;
  color:var(--ivory-dim);
}
@media (hover: none) {
  .lumen-tooltip{ display:none }
}