: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:default;
  touch-action:none;
  background:
    radial-gradient(circle at center,rgba(185,144,77,.06),transparent 42%),
    #030303;
}
.map-viewport.dragging{cursor:default}

.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;
  transition:filter .35s ease;
}
.night-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .35s ease;
  background:
    radial-gradient(circle at 28% 18%, rgba(163,198,255,.10), transparent 18%),
    radial-gradient(circle at 78% 14%, rgba(177,203,255,.08), transparent 16%),
    radial-gradient(ellipse at 78% 38%, rgba(136,182,225,.18), transparent 20%),
    radial-gradient(ellipse at 72% 72%, rgba(94,142,184,.11), transparent 28%),
    linear-gradient(180deg, rgba(3,8,22,.52), rgba(1,4,12,.72));
}
body.night-mode #mapImage{
  filter:brightness(.28) saturate(.66) contrast(1.12) hue-rotate(-10deg);
}
body.night-mode .night-overlay{opacity:1;}
body.night-mode .map-viewport{
  background:
    radial-gradient(circle at center,rgba(80,111,169,.10),transparent 42%),
    #02040a;
}
body.night-mode .hotspot{background:rgba(8,10,16,.78);}
body.night-mode .hotspot::after{background:#d0b474;}
body.night-mode .map-hint,
body.night-mode .route-controls,
body.night-mode .map-filter{background-color:rgba(8,10,16,.82);}
body.night-mode .world-orb{filter:drop-shadow(0 0 18px rgba(88,190,220,.55));}
#nightModeBtn.active{border-color:var(--gold-light);color:var(--gold-bright);background:#14110d;box-shadow:0 0 0 1px rgba(214,176,114,.15),0 0 18px rgba(214,176,114,.22);}

.world-orb{
  position:absolute;
  left:64.0%;
  top:4.8%;
  width:132px;
  height:132px;
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  z-index:4;
  filter:drop-shadow(0 0 14px rgba(71,184,210,.35));
  transition:transform .2s ease,filter .2s ease;
}
.world-orb:hover,.world-orb:focus-visible{
  transform:translate(-50%,-50%) scale(1.06);
  filter:drop-shadow(0 0 20px rgba(111,220,237,.58));
  outline:none;
}
.world-orb img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.world-orb span{
  position:absolute;
  left:50%;bottom:-2px;
  transform:translateX(-50%);
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(225,201,147,.52);
  background:rgba(4,12,16,.82);
  color:#f0dca8;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.creature-layer{
  position:absolute;
  inset:0;
  width:1536px;
  height:1024px;
  z-index:2;
  overflow:visible;
  pointer-events:none;
}
.sea-creature{opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.48))}
.sea-creature .body,.sea-creature .hump,.sea-creature .neck,.sea-creature .head,.sea-creature .tail{fill:rgba(23,50,57,.7);stroke:rgba(192,219,217,.24);stroke-width:1}
.sea-creature.whale .tail{transform-box:fill-box;transform-origin:center;animation:tailFlick 1.2s ease-in-out infinite alternate}
@keyframes tailFlick{to{transform:rotate(12deg)}}

.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;
}

.video-gallery{
  display:grid;
  gap:14px;
  margin:10px 0 18px;
}
.video-card{
  display:grid;
  gap:8px;
}
.place-video{
  width:100%;
  max-height:72vh;
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  background:#000;
}

@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="dragon"] .route-path{
  stroke:rgba(214,118,86,.72);
  stroke-dasharray:9 7;
  filter:drop-shadow(0 0 6px rgba(214,118,86,.28));
}
.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-vehicle-image image{
  overflow:visible;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.42));
}
.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 .route-path,
.route-layer.routes-off .route-hit{
  display:none;
}
.route-layer.traffic-off .route-ship{
  display:none;
}
.route-path.route-path-hidden,.route-hit.route-hit-hidden{opacity:0;pointer-events:none}
.creature-layer.traffic-off{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;
  }
}

/* V14 – Kamien wird über das Weltenfenster statt über einen Kartenpunkt geöffnet */
.hotspot[data-place-id="kamien"]{display:none}
.hotspot[data-marker-type="kartenort"]{width:22px;height:22px}
.hotspot[data-marker-type="kartenort"]::after{width:6px;height:6px}


/* V15: local clip cue */
.hotspot.has-video .hotspot-label::after{
  content:"  ▶";
  color:#e6c982;
  font-size:.82em;
}

/* V17 – zufällige Schatztruhen: absichtlich nicht im Filter/Journal */
.treasure-layer{
  position:absolute;
  inset:0;
  width:1536px;
  height:1024px;
  z-index:4;
  pointer-events:none;
}
.treasure-chest{
  position:absolute;
  width:17px;
  height:15px;
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  opacity:.78;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.82));
  transition:opacity .18s ease,transform .18s ease,filter .18s ease;
}
.treasure-chest:hover,.treasure-chest:focus-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.2);
  filter:drop-shadow(0 0 5px rgba(228,187,99,.62));
  outline:none;
}
.treasure-chest .chest-lid{
  position:absolute;
  left:1px;top:0;
  width:15px;height:7px;
  border:1px solid #4a2d13;
  border-radius:7px 7px 2px 2px;
  background:linear-gradient(#a66b2f,#6b3c18);
  box-shadow:inset 0 1px rgba(238,191,105,.5);
  transform-origin:2px 7px;
  transition:transform .2s ease;
}
.treasure-chest .chest-base{
  position:absolute;
  left:1px;bottom:0;
  width:15px;height:9px;
  border:1px solid #41250f;
  border-radius:2px 2px 3px 3px;
  background:linear-gradient(90deg,#5c3215,#9b6128 45%,#5c3215);
}
.treasure-chest .chest-lock{
  position:absolute;
  left:7px;top:6px;
  width:4px;height:5px;
  border-radius:1px;
  background:#d5a746;
  box-shadow:0 0 2px rgba(255,221,134,.65);
  z-index:2;
}
.treasure-chest.opened .chest-lid{transform:rotate(-32deg) translate(-1px,-2px)}
.treasure-chest.opened{opacity:.45;pointer-events:none}
.spell-burst{
  position:absolute;
  width:68px;height:68px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:7;
}
.spell-burst::before,.spell-burst::after{
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid rgba(255,213,105,.95);
  border-radius:50%;
  box-shadow:0 0 14px rgba(255,198,74,.72),inset 0 0 12px rgba(255,224,143,.25);
  animation:spellRing 1.35s ease-out forwards;
}
.spell-burst::after{
  inset:19px;
  border-style:dashed;
  animation:spellRingInner 1.35s ease-out forwards;
}
.spell-runes{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ffe49b;
  font-size:25px;
  text-shadow:0 0 8px #f6ae35,0 0 16px rgba(246,174,53,.75);
  animation:spellRunes 1.35s ease-out forwards;
}
@keyframes spellRing{
  0%{transform:scale(.25) rotate(0deg);opacity:0}
  18%{opacity:1}
  100%{transform:scale(1.6) rotate(155deg);opacity:0}
}
@keyframes spellRingInner{
  0%{transform:scale(.2) rotate(0deg);opacity:0}
  20%{opacity:1}
  100%{transform:scale(1.15) rotate(-210deg);opacity:0}
}
@keyframes spellRunes{
  0%{transform:scale(.15);opacity:0}
  22%{transform:scale(1);opacity:1}
  100%{transform:scale(1.65);opacity:0}
}


/* V19 – lebendige Welt & ausgebaute Nacht */
.night-lights,.ambient-layer,.weather-layer{
  position:absolute; inset:0; width:1536px; height:1024px; pointer-events:none;
}
.night-lights{z-index:2;opacity:0;transition:opacity .35s ease}
body.night-mode .night-lights{opacity:1}
.night-light{
  position:absolute;width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,201,93,.98);
  box-shadow:0 0 5px rgba(255,190,70,.95),0 0 13px rgba(255,166,39,.65);
  animation:windowFlicker 2.7s ease-in-out infinite alternate;
}
.night-light.big{width:7px;height:7px;box-shadow:0 0 7px rgba(255,211,118,1),0 0 18px rgba(255,170,48,.78)}
@keyframes windowFlicker{0%{opacity:.5;transform:translate(-50%,-50%) scale(.85)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
body.night-mode .route-path{filter:drop-shadow(0 0 6px currentColor);opacity:.92}
body.night-mode .route-group[data-route-type="imperial"] .route-path{stroke:rgba(112,206,239,.82)}
body.night-mode .route-group[data-route-type="trade"] .route-path{stroke:rgba(233,193,116,.72)}
body.night-mode .route-group[data-route-type="dragon"] .route-path{stroke:rgba(238,133,92,.78)}
body.night-mode .sea-creature{filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}

.ambient-layer{z-index:4}
.ambient-clickable{pointer-events:auto;cursor:pointer}
.flotsam-bottle{
  position:absolute;width:10px;height:18px;border:0;padding:0;background:transparent;
  transform:translate(-50%,-50%) rotate(18deg);opacity:.62;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
.flotsam-bottle::before{content:"";position:absolute;left:2px;top:5px;width:7px;height:12px;border:1px solid rgba(67,42,22,.9);border-radius:2px 2px 4px 4px;background:linear-gradient(90deg,rgba(121,80,39,.72),rgba(210,167,89,.55));}
.flotsam-bottle::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:6px;border-radius:1px;background:#6c4829}
.flotsam-bottle:hover,.flotsam-bottle:focus-visible{opacity:1;filter:drop-shadow(0 0 5px rgba(211,178,104,.75));outline:none}

.fake-point{
  position:absolute;width:18px;height:18px;border-radius:50%;border:1px solid rgba(228,207,161,.65);background:rgba(8,8,8,.55);
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(185,144,77,.08);opacity:.65;
}
.fake-point::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#c9ae73}
.fake-point:hover,.fake-point:focus-visible{opacity:1;outline:none}
.fake-point.vanish{animation:fakeVanish .7s ease forwards}
@keyframes fakeVanish{to{opacity:0;transform:translate(-50%,-50%) scale(.25)}}

.wandering-trader{
  position:absolute;transform:translate(-50%,-50%);border:1px solid rgba(212,176,108,.45);border-radius:999px;
  background:rgba(10,8,5,.72);color:#e2c487;padding:5px 8px;font-size:11px;letter-spacing:.03em;opacity:.62;
  box-shadow:0 3px 10px rgba(0,0,0,.45);white-space:nowrap;
}
.wandering-trader:hover,.wandering-trader:focus-visible{opacity:1;outline:none;border-color:#e2c487}

.sera-thief{
  position:absolute;width:58px;height:58px;pointer-events:none;z-index:6;opacity:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.sera-thief img{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}
.sera-thief span{position:absolute;right:-7px;top:-5px;font-size:19px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.sera-thief.fly{animation:seraSwipe 6.2s ease-in-out forwards}
@keyframes seraSwipe{
  0%{opacity:0;transform:translate(-80px,40px) rotate(-7deg) scale(.82)}
  12%{opacity:1}
  50%{transform:translate(55px,-18px) rotate(5deg) scale(1)}
  86%{opacity:1}
  100%{opacity:0;transform:translate(175px,-65px) rotate(-3deg) scale(.84)}
}

.ghost-airship{
  position:absolute;width:110px;height:45px;opacity:0;filter:blur(.2px) drop-shadow(0 0 8px rgba(161,206,227,.38));
}
.ghost-airship .balloon{position:absolute;left:10px;top:4px;width:88px;height:27px;border:1px solid rgba(182,221,232,.45);border-radius:50%;background:rgba(131,175,191,.10);box-shadow:inset 0 0 14px rgba(173,218,230,.10)}
.ghost-airship .gondola{position:absolute;left:39px;top:29px;width:33px;height:8px;border:1px solid rgba(180,215,224,.35);border-radius:3px;background:rgba(70,101,112,.18)}
.ghost-airship.drift{animation:ghostDrift 18s linear forwards}
@keyframes ghostDrift{0%{opacity:0;transform:translate(-130px,20px)}10%{opacity:.32}82%{opacity:.25}100%{opacity:0;transform:translate(850px,-75px)}}

.weather-layer{z-index:3;overflow:hidden}
.weather-fog{position:absolute;width:380px;height:150px;border-radius:50%;background:radial-gradient(ellipse,rgba(210,221,219,.21),rgba(160,178,181,.08) 48%,transparent 72%);filter:blur(14px);opacity:0;animation:fogPass 9s ease-in-out forwards}
@keyframes fogPass{0%{opacity:0;transform:translateX(-120px)}22%{opacity:.72}75%{opacity:.5}100%{opacity:0;transform:translateX(160px)}}
.weather-lightning{position:absolute;width:5px;height:175px;background:linear-gradient(180deg,rgba(255,248,199,0),rgba(255,248,199,.95),rgba(180,221,255,.2));clip-path:polygon(45% 0,100% 0,62% 44%,92% 44%,12% 100%,42% 58%,13% 58%);opacity:0;filter:drop-shadow(0 0 10px rgba(216,235,255,.9));animation:lightningFlash 1.1s ease-out forwards}
@keyframes lightningFlash{0%,16%,30%,100%{opacity:0}8%,22%{opacity:1}}
.weather-sparks{position:absolute;width:250px;height:150px;opacity:0;background-image:radial-gradient(circle,rgba(255,193,74,.9) 0 2px,transparent 3px);background-size:32px 27px;filter:drop-shadow(0 0 4px rgba(255,155,43,.65));animation:sparkRain 4.5s linear forwards}
@keyframes sparkRain{0%{opacity:0;transform:translateY(-45px)}20%{opacity:.65}85%{opacity:.45}100%{opacity:0;transform:translateY(90px)}}

.sea-creature.leviathan .body{fill:rgba(7,24,31,.56);stroke:rgba(125,169,180,.14)}

/* 7R Core integration 0.1.0 */
.player-badge{display:flex;align-items:center;gap:7px;max-width:145px;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:#0d0d0d;color:#e8d7b6;font:600 12px system-ui;white-space:nowrap;overflow:hidden;cursor:pointer}.player-badge span:last-child{overflow:hidden;text-overflow:ellipsis}.player-badge-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#78d6a2;box-shadow:0 0 8px #78d6a266}.player-badge.guest{color:#a69d91}.player-badge.guest .player-badge-dot{background:#81786d;box-shadow:none}.player-badge:hover{border-color:var(--gold-light);color:var(--gold-bright)}.help-btn{font-weight:800!important;font-size:16px!important;color:var(--gold-bright)!important}.guide-panel{position:absolute;z-index:160;top:80px;right:12px;bottom:12px;width:min(540px,94vw);padding:22px 22px 28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(15,14,12,.98),rgba(6,6,6,.97));backdrop-filter:blur(10px);box-shadow:-18px 0 40px rgba(0,0,0,.55);overflow:auto;transform:translateX(calc(100% + 30px));transition:transform .32s ease}.guide-panel.open{transform:translateX(0)}.guide-panel h2{margin:5px 0 10px;color:var(--gold-bright);font:700 30px/1.1 Georgia,serif}.guide-panel h3{margin:20px 0 10px;color:var(--gold-light);font:700 20px Georgia,serif}.guide-panel .eyebrow{margin:0;color:#9e8e74;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}.guide-intro{color:#d9d1c6;line-height:1.6}.guide-section{border-top:1px solid rgba(185,144,77,.22);margin-top:18px;padding-top:2px}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.guide-card{padding:11px 12px;border:1px solid rgba(185,144,77,.20);border-radius:12px;background:rgba(255,255,255,.025)}.guide-card strong{display:block;color:#ead3a4;font:15px Georgia,serif}.guide-card span{display:block;margin-top:5px;color:#aaa196;font:12px/1.45 system-ui}.legend-list{display:grid;gap:8px}.legend-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:9px 10px;border:1px solid rgba(185,144,77,.18);border-radius:10px;background:rgba(255,255,255,.02)}.legend-row strong{display:block;color:#e4d2ae;font-size:13px}.legend-row small{display:block;margin-top:3px;color:#978e82;font:11px/1.4 system-ui}.legend-symbol{display:grid;place-items:center;width:30px;height:30px;position:relative}.legend-place::before,.legend-secret::before{content:"";width:16px;height:16px;border:1px solid rgba(240,214,161,.95);border-radius:50%;background:#0d0d0d;box-shadow:0 0 0 4px rgba(185,144,77,.10),0 0 12px rgba(185,144,77,.35)}.legend-place::after,.legend-secret::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold-light)}.legend-secret::before{border-color:#eed58e;box-shadow:0 0 0 4px rgba(228,199,119,.10),0 0 16px rgba(228,199,119,.45)}.legend-secret::after{background:#f0d27f;box-shadow:0 0 8px #f0d27f99}.legend-find{color:#91d7d2;font-size:22px;text-shadow:0 0 9px #91d7d277}.legend-route::before{content:"";width:28px;border-top:2px dashed #b9904d;opacity:.8}.guide-account p{color:#cbc2b5;line-height:1.55;margin:8px 0}
@media(max-width:1100px){.player-badge{max-width:105px;padding:0 8px}}
@media(max-width:760px){.player-badge{order:2;height:36px;max-width:82px;padding:0 8px;font-size:10px}.guide-panel{top:120px;right:8px;bottom:8px;width:calc(100% - 16px);border-radius:16px;padding:18px}.guide-grid{grid-template-columns:1fr}.guide-panel h2{font-size:25px}}
@media(max-width:520px){.player-badge{max-width:68px}.controls{gap:4px}.controls button{width:36px;height:36px}.guide-panel{top:120px}}

/* --- 7R 0.2.0: Fundstücke, Secrets, Meldedialog, Promo --- */
.book-btn{
  font-weight:800!important;
  font-size:15px!important;
  color:#f2ce82!important;
  border-color:#8a642d!important;
  box-shadow:inset 0 0 12px #b7822220;
}
.book-btn:hover{
  box-shadow:inset 0 0 14px #b7822233,0 0 12px #d09b3f33;
}
.guide-panel,.promo-panel{
  width:min(560px,94vw);
}
.promo-panel{
  position:absolute;
  z-index:150;
  top:76px;
  right:12px;
  bottom:12px;
  width:min(560px,94vw);
  padding:18px 18px 26px;
  border-left:1px solid #4f391d;
  border-radius:18px 0 0 18px;
  background:linear-gradient(180deg,#100b07fa,#070504f6);
  backdrop-filter:blur(7px);
  box-shadow:-20px 0 30px #000b;
  overflow:auto;
  transform:translateX(104%);
  transition:transform .35s ease;
}
.promo-panel.open{transform:translateX(0)}
.promo-intro{font-size:15px!important}
.promo-hero{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:18px;
  align-items:start;
  margin-top:16px;
}
.promo-covers{display:grid;gap:14px}
.promo-cover{
  width:100%;
  border-radius:14px;
  border:1px solid #5d4524;
  box-shadow:0 12px 24px #0008;
  display:block;
}
.promo-copy{display:grid;gap:14px}
.promo-zarah-wrap{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  min-height:120px;
  padding:12px;
  border:1px solid #47341b;
  border-radius:14px;
  background:radial-gradient(circle at 30% 20%,#3b291088,#120d07 66%);
}
.promo-zarah{
  width:170px;
  max-width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  border:2px solid rgba(202,161,92,.55);
  box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 0 6px rgba(34,21,10,.45);
}
.promo-blurb{
  padding:12px 14px;
  border:1px solid #47341b;
  border-radius:12px;
  background:#ffffff04;
}
.promo-blurb strong{display:block;color:#e7c57f;font:24px Georgia,serif}
.promo-blurb span{display:block;margin-top:5px;color:#8f826e;font:11px system-ui;text-transform:uppercase;letter-spacing:.12em}
.promo-blurb p{margin:10px 0 0}
.promo-actions{display:flex;flex-wrap:wrap;gap:10px}
.promo-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid #614826;
  border-radius:999px;
  background:#140f09;
  color:#ecd4a1;
  text-decoration:none;
  font:600 13px system-ui;
  transition:.18s;
}
.promo-action:hover{border-color:#b68439;background:#24170b;color:#ffe2a3;box-shadow:0 0 14px #d2a44b22}
.promo-action.primary{background:linear-gradient(180deg,#d8b663,#b88834);color:#1f1305;border-color:#e6c672}
.promo-action.primary:hover{background:linear-gradient(180deg,#e3c778,#c39543);color:#190f04}
.promo-note{padding:12px 14px;border-left:2px solid #6ecfff;background:#3aa5d012;border-radius:0 11px 11px 0;color:#d7c9b4;font:13px/1.55 system-ui}
.promo-note strong{color:#f0d18c}

.legend-secret::before,.legend-find::before{content:none!important}
.legend-secret img,.legend-find img{display:block;max-width:30px;max-height:30px;object-fit:contain;filter:drop-shadow(0 0 6px #65cfff55)}
.legend-find{font-size:0!important}

.report-box{
  margin-top:16px;
  padding:12px;
  border:1px solid #3f5660;
  border-radius:11px;
  background:linear-gradient(180deg,#15303a18,#08101640);
}
.report-box h4{
  margin:0 0 6px;
  color:#d4f2ff;
  font:18px Georgia,serif;
}
.report-box p{
  margin:0 0 10px;
  color:#c1d4dc;
}
.report-box .report-open-btn,.report-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid #56839a;
  border-radius:999px;
  background:linear-gradient(180deg,#22536a,#133340);
  color:#dff6ff;
  cursor:pointer;
  font:600 13px system-ui;
}
.report-box .report-open-btn:hover,.report-submit-btn:hover{
  background:linear-gradient(180deg,#2d6986,#184252);
}
.report-complete{
  border-color:#41667a;
  background:#0c171d;
}
.report-complete .report-status-ok,
.luna-reply.sent{
  color:#c9f3ff;
}
.report-history{
  display:block;
  color:#9ec5d6;
  font-size:12px;
  margin-top:4px;
}

.report-modal{
  position:fixed;
  inset:0;
  z-index:260;
  display:none;
  place-items:center;
  background:rgba(4,5,7,.74);
  backdrop-filter:blur(6px);
  padding:16px;
}
.report-modal.open{display:grid}
.report-modal-card{
  width:min(640px,96vw);
  max-height:min(86vh,760px);
  overflow:auto;
  padding:22px 20px 22px;
  border:1px solid #5a7e90;
  border-radius:18px;
  background:linear-gradient(180deg,#141b21,#0a0f12);
  box-shadow:0 24px 60px rgba(0,0,0,.58);
}
.report-modal-intro{margin:0 0 14px;color:#c8d8de;font:14px/1.55 system-ui}
.report-recipient-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.report-choice{
  text-align:left;
  padding:12px;
  border:1px solid rgba(97,131,145,.45);
  border-radius:12px;
  background:rgba(24,38,44,.75);
  color:#dceef4;
  cursor:pointer;
  transition:.18s;
}
.report-choice strong{display:block;color:#f3d59a;font:17px Georgia,serif}
.report-choice span{display:block;margin-top:5px;color:#aac4ce;font:12px/1.45 system-ui}
.report-choice:hover,.report-choice.selected{
  border-color:#83d5ff;
  box-shadow:0 0 0 1px rgba(125,214,255,.5),0 0 15px rgba(69,170,222,.15);
  transform:translateY(-1px);
}
.report-note-label{display:block;color:#d7e8ee;font:600 12px system-ui;margin-bottom:6px;text-transform:uppercase;letter-spacing:.12em}
.report-note-label span{color:#8ba9b4}
.report-note{
  width:100%;
  min-height:110px;
  resize:vertical;
  border:1px solid #415964;
  border-radius:12px;
  padding:12px;
  background:#0d1418;
  color:#eaf6fb;
  outline:none;
}
.report-note:focus{border-color:#83d5ff;box-shadow:0 0 0 1px rgba(125,214,255,.35)}
.report-modal-status{min-height:20px;margin-top:10px;color:#98c6d7;font:12px/1.45 system-ui}
.report-modal-actions{display:flex;justify-content:flex-end;margin-top:14px}
.report-submit-btn:disabled{opacity:.55;cursor:default}

.find-card{
  position:relative;
  overflow:hidden;
}
.find-card.with-thumb{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:12px;
  align-items:start;
}
.find-thumb{
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:10px;
  background:radial-gradient(circle at 35% 30%,rgba(32,53,66,.8),rgba(10,15,18,.92));
  border:1px solid rgba(92,127,145,.42);
  padding:6px;
  box-shadow:inset 0 0 18px rgba(98,181,224,.08);
}
.find-copy strong{display:block}
.find-copy p{margin:5px 0 0}

.treasure-layer{
  position:absolute;
  inset:0;
  width:1536px;
  height:1024px;
  z-index:10;
  pointer-events:none;
}
.map-collectible{
  position:absolute;
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.56));
  transition:transform .18s ease,filter .18s ease,opacity .18s ease;
}
.map-collectible:hover,.map-collectible:focus-visible{
  transform:translate(-50%,-50%) scale(1.1);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.66)) drop-shadow(0 0 10px rgba(107,214,255,.28));
  outline:none;
}
.map-collectible img{
  display:block;
  width:var(--collectible-size,32px);
  height:var(--collectible-size,32px);
  object-fit:contain;
}
.map-collectible.collected{opacity:.45}
.map-collectible.collectible-secret{opacity:.28}
.map-collectible.collectible-secret:hover,.map-collectible.collectible-secret:focus-visible{opacity:.92}
.map-collectible.collectible-secret.visited{opacity:.7}
.map-collectible.collectible-secret img{
  width:var(--collectible-size,40px);
  height:var(--collectible-size,40px);
  filter:drop-shadow(0 0 8px rgba(73,193,255,.36));
}
.map-collectible .collectible-tip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 6px);
  transform:translateX(-50%);
  padding:5px 8px;
  white-space:nowrap;
  border-radius:7px;
  background:#100b07e8;
  border:1px solid #66502c;
  color:#eedbb9;
  font:11px system-ui;
  opacity:0;
  pointer-events:none;
  transition:.18s;
}
.map-collectible:hover .collectible-tip,.map-collectible:focus-visible .collectible-tip{opacity:1}
.collectible-twinkle{
  position:absolute;
  left:50%;
  top:50%;
  width:110%;
  height:110%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(117,208,255,.34) 0,rgba(117,208,255,.12) 28%,rgba(117,208,255,0) 70%);
  animation:collectibleGlow 3.1s ease-in-out infinite;
  pointer-events:none;
}
.map-collectible.collectible-secret .collectible-twinkle{
  background:radial-gradient(circle,rgba(105,171,255,.26) 0,rgba(105,171,255,.09) 28%,rgba(105,171,255,0) 72%);
}
@keyframes collectibleGlow{
  0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.85)}
  50%{opacity:.95;transform:translate(-50%,-50%) scale(1.08)}
}

@media(max-width:920px){
  .guide-panel,.promo-panel{width:min(430px,94vw)}
  .promo-panel{top:62px;right:7px;bottom:7px;padding:16px 14px 20px}
  .promo-hero{grid-template-columns:1fr;gap:14px}
  .promo-covers{grid-template-columns:1fr 1fr;display:grid}
  .promo-cover{max-width:210px}
  .report-recipient-choices{grid-template-columns:1fr}
}


/* 7R Basics · einheitlicher Zurück-Schalter */
.map-back-btn{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(185,144,77,.42);border-radius:10px;background:rgba(20,14,7,.88);color:#f0cf82;font:700 22px/1 Georgia,serif;box-shadow:0 5px 14px #0007;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.map-back-btn:hover,.map-back-btn:focus-visible{transform:translateY(-1px);border-color:#d6b070;background:rgba(49,34,15,.94);outline:none}
@media(max-width:760px){.map-back-btn{width:32px;height:32px;font-size:19px}}


/* 7R 1.64.2 — Standard-Mauszeiger auf allen Karten
   Verhindert grab/grabbing/custom cursor auf der Kartenfläche.
   Klickbare Marker/Buttons behalten den normalen Browser-Pointer. */
html, body, #explorer,
.map-viewport, .map-transform, .base-art, .marker-layer, .ambient-layer {
  cursor: default !important;
}
.map-viewport.dragging,
.map-viewport.dragging .map-transform,
.map-viewport.dragging .base-art,
.map-viewport.dragging .marker-layer,
.map-viewport.dragging .ambient-layer {
  cursor: default !important;
}