:root{
  --bg:#070707;
  --panel:#0d0d0d;
  --text:#ece7de;
  --muted:#b8b0a4;
  --gold:#b9904d;
  --gold-light:#d6b072;
  --gold-bright:#f0d6a1;
  --line:rgba(185,144,77,.34);
  --shadow:rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}

#explorer{
  width:100%;
  height:100dvh;
  min-height:560px;
  position:relative;
  overflow:hidden;
  background:#050505;
}

.topbar{
  position:absolute;
  top:0;left:0;right:0;
  z-index:50;
  min-height:68px;
  display:flex;
  gap:18px;
  align-items:center;
  padding:10px 16px;
  background:linear-gradient(180deg,rgba(7,7,7,.97),rgba(7,7,7,.82));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}

.brand{
  min-width:max-content;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand strong{
  color:var(--gold-light);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.18rem;
  letter-spacing:.04em;
}
.brand span{color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-top:5px}

.search-wrap{position:relative;flex:1;max-width:520px;margin-left:auto}
#searchInput{
  width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  outline:none;
  padding:11px 16px;
}
#searchInput:focus{border-color:var(--gold-light);box-shadow:0 0 0 2px rgba(185,144,77,.12)}
#searchInput::placeholder{color:#8f887e}

.search-results{
  position:absolute;
  left:0;right:0;top:calc(100% + 8px);
  background:#0c0c0c;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.search-results button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:11px 14px;
  cursor:pointer;
}
.search-results button:hover{background:rgba(185,144,77,.11);color:var(--gold-bright)}

.controls{display:flex;gap:7px}
.controls button,.panel-close{
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0d0d0d;
  color:var(--gold-light);
  cursor:pointer;
}
.controls button:hover,.panel-close:hover{border-color:var(--gold-light);color:var(--gold-bright);background:#14110d}

.map-viewport{
  position:absolute;
  inset:68px 0 0 0;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  background:
    radial-gradient(circle at center,rgba(185,144,77,.06),transparent 42%),
    #030303;
}
.map-viewport.dragging{cursor:grabbing}

.map-transform{
  position:absolute;
  left:0;top:0;
  width:1536px;
  height:1024px;
  transform-origin:0 0;
  will-change:transform;
  user-select:none;
}
#mapImage{
  position:absolute;
  inset:0;
  width:1536px;
  height:1024px;
  display:block;
  pointer-events:none;
  user-select:none;
}

.hotspot-layer{position:absolute;inset:0}
.hotspot{
  position:absolute;
  width:30px;height:30px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(240,214,161,.95);
  border-radius:50%;
  background:rgba(7,7,7,.72);
  box-shadow:0 0 0 5px rgba(185,144,77,.12),0 0 22px rgba(185,144,77,.35);
  cursor:pointer;
  z-index:5;
}
.hotspot::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:var(--gold-light);
}
.hotspot:hover,.hotspot:focus-visible{
  transform:translate(-50%,-50%) scale(1.16);
  outline:none;
  box-shadow:0 0 0 7px rgba(185,144,77,.16),0 0 28px rgba(214,176,114,.55);
}
.hotspot-label{
  position:absolute;
  left:50%;top:34px;
  transform:translateX(-50%);
  white-space:nowrap;
  color:#fff5e3;
  background:rgba(7,7,7,.9);
  border:1px solid rgba(185,144,77,.28);
  border-radius:8px;
  padding:5px 8px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label{opacity:1}

.map-hint{
  position:absolute;
  left:16px;bottom:16px;
  z-index:20;
  padding:8px 11px;
  color:var(--muted);
  background:rgba(7,7,7,.75);
  border:1px solid rgba(185,144,77,.2);
  border-radius:10px;
  font-size:12px;
  pointer-events:none;
  backdrop-filter:blur(8px);
}

.info-panel{
  position:absolute;
  z-index:60;
  right:16px;
  top:84px;
  bottom:16px;
  width:min(390px,calc(100% - 32px));
  padding:28px;
  background:linear-gradient(180deg,rgba(18,18,18,.98),rgba(8,8,8,.98));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  backdrop-filter:blur(12px);
  overflow:auto;
  transform:translateX(calc(100% + 40px));
  transition:transform .28s ease;
}
.info-panel.open{transform:translateX(0)}
.panel-close{
  position:absolute;
  right:12px;top:12px;
  border-radius:50%;
  font-size:24px;
  line-height:1;
}
.info-panel h2{
  margin:12px 42px 8px 0;
  color:var(--gold-light);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.7rem;
}
.info-panel .eyebrow{
  margin:0 0 8px;
  color:var(--gold);
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:.7rem;
}
.info-panel p{line-height:1.65;color:#ddd5c8}
.info-panel img,.info-panel video{
  width:100%;
  display:block;
  margin:18px 0;
  border-radius:12px;
  border:1px solid var(--line);
}
.info-panel a{
  display:inline-block;
  margin-top:8px;
  padding:11px 16px;
  color:var(--gold-bright);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:12px;
}
.info-panel a:hover{border-color:var(--gold-light);background:rgba(185,144,77,.08)}

@media(max-width:760px){
  .topbar{
    min-height:112px;
    flex-wrap:wrap;
    gap:8px 10px;
  }
  .brand{width:calc(100% - 190px)}
  .controls{margin-left:auto}
  .search-wrap{order:3;max-width:none;width:100%}
  .map-viewport{inset:112px 0 0 0}
  .info-panel{
    top:auto;
    left:8px;right:8px;bottom:8px;
    width:auto;
    max-height:58%;
    border-radius:18px;
    transform:translateY(calc(100% + 24px));
  }
  .info-panel.open{transform:translateY(0)}
  .map-hint{display:none}
}


/* V4 – Entdeckungsfortschritt & sanfte Kartenfahrt */
.map-transform.smooth-move{
  transition:transform .38s cubic-bezier(.22,.8,.28,1);
}

.discovery-counter{
  min-width:max-content;
  padding:8px 12px;
  border:1px solid rgba(185,144,77,.25);
  border-radius:999px;
  color:var(--gold-light);
  background:rgba(185,144,77,.055);
  font-size:.78rem;
  letter-spacing:.03em;
}

.hotspot.visited{
  border-color:rgba(214,176,114,.68);
  background:rgba(185,144,77,.19);
  box-shadow:0 0 0 5px rgba(185,144,77,.08);
}
.hotspot.visited::after{
  background:var(--gold-bright);
  box-shadow:0 0 10px rgba(240,214,161,.42);
}

.info-panel .discovered-note{
  margin:14px 0 2px;
  color:var(--gold-light);
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

@media(max-width:760px){
  .discovery-counter{
    order:2;
    margin-left:auto;
    padding:7px 10px;
    font-size:.72rem;
  }
  .controls{order:2;margin-left:0}
  .brand{width:auto;flex:1}
}


/* V4.1 – 7th Realm Branding */
.realm-home{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-decoration:none;
  border:1px solid rgba(185,144,77,.24);
  background:rgba(185,144,77,.035);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.realm-home img{
  width:32px;
  height:32px;
  display:block;
  object-fit:contain;
}
.realm-home:hover,
.realm-home:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(214,176,114,.72);
  background:rgba(185,144,77,.08);
  outline:none;
}

@media(max-width:760px){
  .realm-home{
    width:30px;
    height:30px;
  }
  .realm-home img{
    width:24px;
    height:24px;
  }
}


/* V5 – Filter, Markertypen & Medien */
.map-filter{
  position:absolute;
  z-index:26;
  left:14px;
  top:14px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px 7px 11px;
  border:1px solid rgba(185,144,77,.28);
  border-radius:999px;
  background:rgba(7,7,7,.82);
  backdrop-filter:blur(9px);
  box-shadow:0 10px 28px rgba(0,0,0,.26);
}
.map-filter label{
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.04em;
}
.map-filter select{
  min-height:34px;
  max-width:132px;
  border:0;
  outline:0;
  color:var(--gold-light);
  background:#111;
  border-radius:999px;
  padding:5px 28px 5px 10px;
  cursor:pointer;
}

.hotspot[data-marker-type="magie"]{
  border-color:rgba(181,123,255,.92);
  box-shadow:0 0 0 5px rgba(137,78,206,.13),0 0 23px rgba(150,87,222,.34);
}
.hotspot[data-marker-type="magie"]::after{background:#b787ef}

.hotspot[data-marker-type="drache"]{
  border-color:rgba(232,132,82,.96);
  box-shadow:0 0 0 5px rgba(175,75,35,.12),0 0 23px rgba(211,94,45,.32);
}
.hotspot[data-marker-type="drache"]::after{background:#d88a5e}

.hotspot[data-marker-type="akte"]{
  border-color:rgba(111,169,205,.92);
  box-shadow:0 0 0 5px rgba(59,112,148,.12),0 0 23px rgba(71,132,171,.3);
}
.hotspot[data-marker-type="akte"]::after{background:#75aac8}

.hotspot[data-marker-type="piraten"]{
  border-color:rgba(205,143,86,.95);
  box-shadow:0 0 0 5px rgba(153,91,39,.12),0 0 23px rgba(190,112,52,.30);
}
.hotspot[data-marker-type="piraten"]::after{background:#c58a57}

.hotspot.is-filtered{
  display:none;
}

.info-panel .facts{
  display:grid;
  gap:8px;
  margin:14px 0 4px;
}
.info-panel .fact{
  padding:9px 11px;
  border-left:2px solid rgba(185,144,77,.45);
  background:rgba(255,255,255,.025);
  border-radius:0 8px 8px 0;
  color:#d7cfc4;
  line-height:1.45;
  font-size:.9rem;
}
.info-panel .fact strong{
  color:var(--gold-light);
  font-weight:600;
}

.info-panel .media-title{
  margin:20px 0 8px;
  color:var(--gold-light);
  font-size:.76rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.youtube-embed{
  width:100%;
  aspect-ratio:9 / 16;
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  background:#000;
  margin:10px 0 18px;
}

@media(max-width:760px){
  .map-filter{
    top:10px;
    left:10px;
    padding:6px 8px 6px 10px;
  }
  .map-filter label{display:none}
  .map-filter select{
    min-height:38px;
    font-size:16px;
    max-width:128px;
  }
}


/* V6 – Bildzoom / Geheimnisse */
.info-panel img.zoomable-image{
  cursor:zoom-in;
  transition:transform .18s ease, border-color .18s ease;
}
.info-panel img.zoomable-image:hover{
  transform:scale(1.012);
  border-color:rgba(214,176,114,.7);
}

.hotspot[data-marker-type="secret"]{
  border-color:rgba(228,199,119,.95);
  background:rgba(20,15,5,.74);
  box-shadow:0 0 0 4px rgba(228,199,119,.10),0 0 30px rgba(228,199,119,.5);
}
.hotspot[data-marker-type="secret"]::after{
  background:#f0d27f;
  box-shadow:0 0 12px rgba(240,210,127,.75);
}
.hotspot[data-marker-type="secret"] .hotspot-label{
  border-color:rgba(228,199,119,.42);
  color:#ffeab0;
}

.image-viewer{
  position:fixed;
  inset:0;
  z-index:250;
  display:none;
  background:rgba(0,0,0,.96);
  color:var(--text);
}
.image-viewer.open{
  display:block;
}
.image-viewer-toolbar{
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  min-height:58px;
  padding:9px 12px 9px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg,rgba(5,5,5,.98),rgba(5,5,5,.76));
  border-bottom:1px solid rgba(185,144,77,.25);
  backdrop-filter:blur(10px);
}
#imageViewerTitle{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--gold-light);
  font-family:Georgia,"Times New Roman",serif;
}
.image-viewer-buttons{
  display:flex;
  gap:7px;
}
.image-viewer-buttons button{
  min-width:40px;
  height:40px;
  padding:0 10px;
  border:1px solid rgba(185,144,77,.34);
  border-radius:11px;
  background:#101010;
  color:var(--gold-light);
  cursor:pointer;
}
.image-viewer-buttons button:hover{
  border-color:var(--gold-light);
  background:#17130e;
}
.image-viewer-viewport{
  position:absolute;
  inset:58px 0 0;
  overflow:hidden;
  touch-action:none;
  cursor:grab;
  display:flex;
  align-items:center;
  justify-content:center;
}
.image-viewer-viewport.dragging{
  cursor:grabbing;
}
#imageViewerImage{
  max-width:92vw;
  max-height:84vh;
  width:auto;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:center center;
  will-change:transform;
  box-shadow:0 18px 80px rgba(0,0,0,.65);
}
.image-viewer-hint{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  padding:7px 11px;
  color:#aaa297;
  border:1px solid rgba(185,144,77,.18);
  border-radius:999px;
  background:rgba(7,7,7,.76);
  font-size:.73rem;
  pointer-events:none;
}

@media(max-width:760px){
  .image-viewer-toolbar{
    min-height:54px;
    padding:7px 8px 7px 11px;
  }
  #imageViewerTitle{
    max-width:38vw;
    font-size:.9rem;
  }
  .image-viewer-buttons{
    gap:5px;
  }
  .image-viewer-buttons button{
    min-width:36px;
    height:38px;
    padding:0 8px;
  }
  .image-viewer-viewport{
    inset:54px 0 0;
  }
  #imageViewerImage{
    max-width:96vw;
    max-height:82vh;
  }
  .image-viewer-hint{
    display:none;
  }
}


/* V7 – Technikpunkte & Bildergalerie */
.hotspot[data-marker-type="technik"]{
  border-color:rgba(112,196,193,.94);
  box-shadow:0 0 0 5px rgba(67,139,136,.12),0 0 24px rgba(80,168,164,.34);
}
.hotspot[data-marker-type="technik"]::after{
  background:#77c8c5;
}

.info-panel .image-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:18px 0;
}
.info-panel .image-gallery img{
  width:100%;
  height:150px;
  object-fit:cover;
  margin:0;
}
.info-panel .image-gallery .portrait{
  object-position:center 28%;
}

@media(max-width:760px){
  .info-panel .image-gallery{
    grid-template-columns:1fr;
  }
  .info-panel .image-gallery img{
    height:auto;
    max-height:none;
  }
}


/* V8 – Aetherkonvergenz, Kanon-Callouts & verbundene Orte */
.hotspot[data-marker-type="aether"]{
  border-color:rgba(97,213,227,.96);
  background:rgba(5,23,27,.78);
  box-shadow:0 0 0 5px rgba(61,174,188,.12),0 0 28px rgba(86,209,225,.46);
}
.hotspot[data-marker-type="aether"]::after{
  background:#69dbe7;
  box-shadow:0 0 13px rgba(105,219,231,.78);
}

.info-panel .world-callout{
  margin:16px 0;
  padding:12px 14px;
  border:1px solid rgba(105,219,231,.22);
  border-left:3px solid rgba(105,219,231,.72);
  border-radius:0 10px 10px 0;
  background:rgba(42,118,129,.075);
  color:#d9e7e8;
  line-height:1.5;
}
.info-panel .world-callout strong{
  color:#a9edf3;
}

.info-panel .source-note{
  margin:12px 0 4px;
  color:#999187;
  font-size:.76rem;
  line-height:1.45;
  font-style:italic;
}

.related-places{
  margin:18px 0 4px;
}
.related-places-title{
  margin:0 0 8px;
  color:var(--gold-light);
  font-size:.76rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.related-place-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.related-place-button{
  border:1px solid rgba(185,144,77,.34);
  border-radius:999px;
  background:rgba(185,144,77,.07);
  color:var(--gold-light);
  padding:8px 11px;
  cursor:pointer;
  font:inherit;
  font-size:.82rem;
}
.related-place-button:hover,
.related-place-button:focus-visible{
  border-color:rgba(214,176,114,.78);
  background:rgba(185,144,77,.13);
  outline:none;
}


/* V9 – Kompass, verbundene Punkte & feinere Arkopolis-Erkundung */
#discoverBtn{
  color:#f3d594;
  border-color:rgba(214,176,114,.48);
  background:rgba(185,144,77,.08);
}
#discoverBtn:hover,
#discoverBtn:focus-visible{
  background:rgba(185,144,77,.16);
  box-shadow:0 0 18px rgba(214,176,114,.18);
}

.hotspot.related-highlight{
  border-color:#f0d59d !important;
  box-shadow:
    0 0 0 6px rgba(240,213,157,.12),
    0 0 30px rgba(240,213,157,.54) !important;
  animation:relatedPulse 1.65s ease-in-out infinite;
}
.hotspot.related-highlight .hotspot-label{
  opacity:1;
  transform:translate(-50%,-115%);
}

@keyframes relatedPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.45)}
}

.hotspot[data-place-id="crown-square"]::after{
  background:#e2c182;
}


/* V10 – Explorer-Journal & dezenter Desktop-Branding-Boost */
.journal-panel{
  position:absolute;
  z-index:59;
  left:16px;
  top:84px;
  bottom:16px;
  width:min(400px,calc(100% - 32px));
  padding:28px;
  background:linear-gradient(180deg,rgba(18,18,18,.98),rgba(8,8,8,.98));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  backdrop-filter:blur(12px);
  overflow:auto;
  transform:translateX(calc(-100% - 40px));
  transition:transform .28s ease;
}
.journal-panel.open{transform:translateX(0)}

.journal-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0 22px;
}
.journal-stat{
  padding:12px 10px;
  border:1px solid rgba(185,144,77,.22);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  text-align:center;
}
.journal-stat strong{
  display:block;
  color:var(--gold-bright);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.2rem;
}
.journal-stat span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.3;
}

.journal-group{margin:18px 0 0}
.journal-group h3{
  margin:0 0 10px;
  color:var(--gold-light);
  font-size:.8rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.journal-list{display:grid;gap:8px}
.journal-place{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 13px;
  border:1px solid rgba(185,144,77,.18);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.journal-place:hover,.journal-place:focus-visible{
  border-color:rgba(214,176,114,.58);
  background:rgba(185,144,77,.08);
  outline:none;
}
.journal-place-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.journal-place-title{font-weight:600;color:#f1eadf}
.journal-place-category{font-size:.77rem;color:var(--muted)}
.journal-place-state{
  flex:0 0 auto;
  color:var(--gold-light);
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.journal-place.visited{
  border-color:rgba(214,176,114,.34);
  background:rgba(185,144,77,.055);
}
.journal-place.locked{
  cursor:default;
  opacity:.7;
  border-style:dashed;
}
.journal-place.secret .journal-place-state{color:#f0d59d}

@media(min-width:1100px){
  .realm-home{width:44px;height:44px}
  .realm-home img{width:36px;height:36px}
}

@media(max-width:760px){
  .journal-panel{
    top:auto;
    left:8px;right:8px;bottom:8px;
    width:auto;
    max-height:62%;
    border-radius:18px;
    transform:translateY(calc(100% + 24px));
  }
  .journal-panel.open{transform:translateY(0)}
  .journal-summary{grid-template-columns:1fr 1fr 1fr}
  .journal-stat{padding:10px 8px}
  .journal-place{padding:11px 12px}
}


/* V11 – Fundstücke & Ellies geheimes Sonnendeck */
.collectible-counter{
  min-width:max-content;
  padding:8px 12px;
  border:1px solid rgba(118,194,191,.27);
  border-radius:999px;
  color:#9ad8d5;
  background:rgba(76,157,154,.055);
  font-size:.78rem;
  letter-spacing:.03em;
}

.finds-section{
  margin:18px 0 4px;
}
.finds-title{
  margin:0 0 9px !important;
  color:var(--gold-light) !important;
  font-size:.75rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.finds-list{
  display:grid;
  gap:9px;
}
.find-card{
  width:100%;
  display:block;
  padding:12px 13px;
  border:1px solid rgba(185,144,77,.22);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  color:#ddd5c8;
  text-align:left;
}
button.find-card{
  cursor:pointer;
  font:inherit;
}
button.find-card:hover,
button.find-card:focus-visible{
  border-color:rgba(214,176,114,.66);
  background:rgba(185,144,77,.075);
  outline:none;
}
.find-card strong{
  display:block;
  margin:5px 0 4px;
  color:#f0e5d1;
}
.find-card span:not(.find-badge){
  display:block;
  color:#bfb6a9;
  line-height:1.45;
  font-size:.87rem;
}
.find-card p{
  margin:7px 0 0 !important;
  color:#d6cdc0 !important;
  line-height:1.5 !important;
  font-size:.9rem;
}
.find-badge{
  display:inline-block;
  color:#91d7d2;
  font-size:.67rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.find-card.collected{
  border-color:rgba(112,196,193,.26);
  background:rgba(67,139,136,.06);
}

.explorer-toast{
  position:absolute;
  z-index:210;
  left:50%;
  bottom:28px;
  transform:translate(-50%,20px);
  max-width:min(520px,calc(100% - 32px));
  padding:11px 15px;
  border:1px solid rgba(112,196,193,.52);
  border-radius:999px;
  background:rgba(8,17,17,.94);
  color:#b6efeb;
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 28px rgba(80,168,164,.15);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  text-align:center;
  font-size:.84rem;
}
.explorer-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

.journal-place.find .journal-place-state{
  color:#91d7d2;
}

.hotspot[data-place-id="ellies-sonnensteg-e4"]{
  border-color:rgba(239,199,110,.95);
  box-shadow:0 0 0 5px rgba(239,199,110,.1),0 0 31px rgba(239,199,110,.43);
}
.hotspot[data-place-id="ellies-sonnensteg-e4"]::after{
  background:#f3ce79;
  box-shadow:0 0 13px rgba(243,206,121,.68);
}

@media(max-width:760px){
  .collectible-counter{
    order:2;
    padding:7px 10px;
    font-size:.72rem;
  }
  .explorer-toast{
    bottom:82px;
    border-radius:15px;
  }
  .journal-summary{
    grid-template-columns:1fr 1fr;
  }
}


/* V12 – lebendige Luftschiffrouten */
.route-layer{
  position:absolute;
  inset:0;
  width:1536px;
  height:1024px;
  z-index:3;
  overflow:visible;
  pointer-events:none;
}
.route-group{
  pointer-events:auto;
  transition:opacity .25s ease;
}
.route-group.route-locked{
  display:none;
}
.route-path{
  fill:none;
  stroke:rgba(214,176,114,.42);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:10 9;
  filter:drop-shadow(0 0 4px rgba(214,176,114,.18));
  vector-effect:non-scaling-stroke;
  animation:routeFlow 16s linear infinite;
}
.route-hit{
  fill:none;
  stroke:transparent;
  stroke-width:16;
  cursor:pointer;
  pointer-events:stroke;
}
.route-group:hover .route-path,
.route-hit:focus + .route-ship{
  stroke:rgba(240,214,161,.88);
  stroke-width:3;
}
.route-hit:focus{
  outline:none;
}
.route-group[data-route-type="imperial"] .route-path{
  stroke:rgba(110,188,215,.58);
}
.route-group[data-route-type="trade"] .route-path{
  stroke:rgba(214,176,114,.48);
}
.route-group[data-route-type="local"] .route-path{
  stroke:rgba(111,188,175,.48);
}
.route-group[data-route-type="pirate"] .route-path{
  stroke:rgba(207,121,75,.68);
  stroke-dasharray:7 8;
}
.route-group[data-route-type="secret"] .route-path{
  stroke:rgba(148,126,193,.74);
  stroke-dasharray:4 7;
  filter:drop-shadow(0 0 5px rgba(148,126,193,.32));
}

@keyframes routeFlow{
  to{stroke-dashoffset:-190}
}

.route-ship{
  pointer-events:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.route-ship .ship-balloon{
  fill:#d1b273;
  stroke:#49361e;
  stroke-width:1;
}
.route-ship .ship-rib{
  stroke:#735a32;
  stroke-width:1;
}
.route-ship .ship-gondola{
  fill:#513921;
  stroke:#c5a060;
  stroke-width:.8;
}
.route-ship .ship-prop{
  fill:#e4c27d;
}
.route-ship-freighter .ship-balloon{
  fill:#9e865a;
}
.route-ship-utility{
  transform:scale(.82);
  transform-box:fill-box;
  transform-origin:center;
}
.route-ship-hydra .ship-balloon{
  fill:#7d3f2e;
  stroke:#25130e;
}
.route-ship-hydra .ship-gondola{
  fill:#4c2118;
}
.route-ship-black .ship-balloon{
  fill:#262b30;
  stroke:#090a0b;
}
.route-ship-black .ship-gondola{
  fill:#101215;
  stroke:#6a607b;
}

.route-layer.routes-off{
  display:none;
}
.route-layer.traffic-off .route-ship{
  display:none;
}

.route-controls{
  position:absolute;
  z-index:26;
  right:14px;
  top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 11px;
  border:1px solid rgba(185,144,77,.25);
  border-radius:999px;
  background:rgba(7,7,7,.82);
  backdrop-filter:blur(9px);
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.route-controls label{
  display:flex;
  align-items:center;
  gap:6px;
  color:#bdb3a4;
  font-size:.72rem;
  cursor:pointer;
}
.route-controls input{
  accent-color:#cba361;
}

.info-panel .route-note{
  margin:14px 0 2px;
  color:#90d0dd;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

@media(max-width:760px){
  .route-controls{
    top:10px;
    right:10px;
    gap:7px;
    padding:7px 9px;
  }
  .route-controls label{
    font-size:.68rem;
  }
  .route-path{
    stroke-width:2.5;
  }
}