.glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

a {
  color; #fff007 !important;
}

.marker{
  position:absolute;width:14px;height:14px;border-radius:9999px;
  background:#ef4444;border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 6px rgba(15,23,42,.25);
  transform:translate(-50%,-50%);
  pointer-events:none;display:none;
}

#mapViewport{ position:relative; }
#mapInner{
  position:absolute;
  left:0; top:0;
  transform-origin:0 0;
  will-change: transform;
  contain: layout paint style;
}

#mapImg{ max-width:none; }

#mapLoading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  background: rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#mapLoading.show { display: flex; }

.map-spinner {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: rgba(99,102,241,0.95);
  animation: mapSpin 0.8s linear infinite;
  box-shadow: 0 0 0 8px rgba(15,23,42,0.25);
}

.map-spinner-label {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(226,232,240,0.9);
  letter-spacing: 0.02em;
}

#poiLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:12;
}

.poi-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  width:14px;
  height:14px;
  border-radius:9999px;
  border:2px solid rgba(255,255,255,.88);
  box-shadow:0 0 0 6px rgba(15,23,42,.25);
  pointer-events:auto;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:white;
  font-size:9px;
  font-weight:700;
  user-select:none;
}
.poi-marker:hover{
  filter:brightness(1.08);
  box-shadow:0 0 0 8px rgba(99,102,241,.18);
}
.poi-marker.is-hidden { display:none; }

.poi-tooltip{
  position:absolute;
  z-index:30;
  min-width:320px;
  max-width:320px;
  pointer-events:auto;
  transform:none;
  background:rgba(2,6,23,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:10px;
  display:none;
  max-height: calc(100% - 16px);
  overflow: auto;
}
.poi-tooltip.show{ display:block; }
.poi-tooltip-title{ font-size:13px; font-weight:700; color:#e2e8f0; line-height:1.2; }
.poi-tooltip-sub{ font-size:11px; color:#94a3b8; margin-top:2px; }
.poi-tooltip-list{ margin-top:8px; display:grid; gap:6px; }
.poi-tooltip-row{
  display:flex; justify-content:space-between; gap:8px;
  font-size:11px; color:#cbd5e1;
  background:rgba(15,23,42,.45);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:6px 8px;
}
.poi-tooltip-row .k{ color:#93c5fd; }
.poi-tooltip-row .v{ text-align:right; }
.poi-tooltip-row-block{ flex-direction: column; align-items: stretch; }
.poi-tooltip-row-block .k{ margin-bottom: 6px; }

.poi-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(2,6,23,.45);
  border-radius:12px;
  padding:8px 10px;
}
.poi-toggle-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.poi-dot{
  width:10px; height:10px; border-radius:9999px; border:1px solid rgba(255,255,255,.5);
  flex:0 0 auto;
}
.poi-toggle-label{ font-size:12px; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poi-toggle-count{ font-size:11px; color:#94a3b8; margin-left:auto; }

.donate-shell{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:4px;
  margin-left: 50px;
  border-radius:16px;
  border:1px solid rgba(251,191,36,.28);
  background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(99,102,241,.18));
  box-shadow:0 10px 30px rgba(245,158,11,.16), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.donate-shell:hover{
  border-color:rgba(251,191,36,.45);
  box-shadow:0 14px 36px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.donate-badge{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:10px;
  padding:0 8px;
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  color:#fde68a;
  text-transform:uppercase;
}

.donate-badge svg{
  width:14px;
  height:14px;
  color:#fbbf24;
  flex:0 0 auto;
}

#donate-button-container{ display:flex; align-items:center; }
#donate-button{
  min-width:150px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#donate-button iframe,
#donate-button img{ pointer-events:auto; }

.poi-dest-wrap{ display: grid; gap: 10px; }
.poi-dest-group{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(2,6,23,.35);
  border-radius: 10px;
  padding: 4px 4px;
}
.poi-dest-head{
  font-size: 11px;
  font-weight: 700;
  color: rgba(226,232,240,.95);
  margin-bottom: 6px;
  justify-self: start;
}
.poi-dest-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.poi-dest-list li{ line-height: 1.25; }
.poi-dest-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}
.poi-dest-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-self: start;
}
.poi-cost{ justify-self: end; }
.poi-coin{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:rgba(226,232,240,.95);
  margin-left: 8px;
}
.poi-coin-dot{
  width:10px;
  height:10px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.poi-coin-dot.gold{ background:#fbbf24; }
.poi-coin-dot.silver{ background:#cbd5e1; }
.poi-coin-dot.copper{ background:#fb923c; }

@media (max-width: 767px){
  .header-brand{ flex-wrap:wrap; row-gap:10px; }
  .donate-shell{ width:100%; justify-content:center; }
  .donate-badge{ display:none; }
}

@keyframes mapSpin { to { transform: rotate(360deg); } }
img { pointer-events: none; }

#mapImg{ transition: filter 160ms ease; }
html.map-invert #mapImg{
  filter: grayscale(100%);
}

.invert-map-btn{width:38px;height:34px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center;color:rgba(226,232,240,.95);}#invertMapIcon{display:inline-flex;align-items:center;justify-content:center;line-height:0;}.invert-map-btn svg{width:20px;height:20px;display:block;}

#statusPill,
#togglePanelBtn,
#invertMapBtn,
#downloadPluginBtn{
  height: 34px;
}

#statusPill{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}

#togglePanelBtn,
#invertMapBtn{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}

#invertMapIcon{
  line-height: 0;
}

/* Download Plugin button: keep consistent and readable */
#downloadPluginBtn{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  text-decoration: none; /* because it's an <a> */
}

/* Optional: hide label on small screens so the header doesn't explode */
@media (max-width: 640px){
  #downloadPluginBtn span{ display:none; }
  #downloadPluginBtn{ width:38px; justify-content:center; padding-left:0 !important; padding-right:0 !important; }
}

/* --- Build Planner extras (kept separate so you can delete/adjust easily) --- */
:root { color-scheme: dark; }

.card-glass{
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}

.inp{
  padding: .5rem .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.40);
  outline: none;
}
.inp:focus{ box-shadow: 0 0 0 3px rgba(99,102,241,.25); }

.btn-primary{
  padding: .5rem .75rem;
  border-radius: .75rem;
  background: rgba(99,102,241,.9);
  font-weight: 700;
}
.btn-primary:hover{ background: rgba(99,102,241,1); }

.btn-ghost{
  padding: .5rem .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.btn-ghost:hover{ background: rgba(255,255,255,.10); }

.tree-panel{
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.tree-head{
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between;
}

.tree-blue{ background: rgba(59,130,246,.10); }
.tree-red{ background: rgba(239,68,68,.10); }
.tree-yellow{ background: rgba(251,191,36,.10); }

/* uniform grid rows */
.traitGrid{
  display:grid;
  gap:.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 cols matches Beorning */
  grid-auto-rows: 92px; /* consistent row height */
  align-content: start;
}

/* uniform grid rows */
.traitGrid{
  display:grid;
  gap:.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 cols */
  grid-auto-rows: 92px; /* uniform row height */
  align-content: start;
}

/* force cards to fill row height */
.traitCard{
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* stop titles from expanding height */
.traitCard .trait-title{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* force cards to fill row height */
.traitCard{
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* stop titles from expanding height */
.traitCard .trait-title{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.traitCard{
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.20);
  padding: .5rem;
  text-align:left;
}
.traitCard:hover{ background: rgba(255,255,255,.05); }

.traitBarWrap{ height:.5rem; border-radius: 999px; background: rgba(255,255,255,.05); overflow:hidden; }
.traitBar{ height:.5rem; background: rgba(99,102,241,.70); }