html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
background: #000;
cursor: url('/Welle2/bca2_char.png') 12 0, auto;
}

#map-container {
position: relative;
display: inline-block;
}

#map {
display: block;
max-width: 100%;
height: auto;
}

.wave-button{
  position: fixed;
  right:10px;
  top:10px;
  cursor: default;
  z-index: 100;
}

.endcart{
  font-size: 1em;
  text-align: right;
}

p{
font-size: 1.2em;
}


.level-point-inactive {
visibility: hidden;
}

.level-point-active {
position: fixed;
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
background: rgba(176, 0, 0, 0.9);
border: 2px solid #fff;
border-radius: 50%;
cursor: url('/Welle2/hand.png') 12 0, auto;
transition: transform 0.2s;
}

.level-point-inactivex {
visibility: hidden;
}

.level-point-activex {
position: fixed;
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
background: rgba(195, 140, 11, 0.6);
border: 2px solid #fff;
border-radius: 50%;
cursor: url('/Welle2/hand.png') 12 0, auto;
transition: transform 0.2s;
margin:10px;
}

.level-point-x2 {
position: fixed;
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
border-radius: 50%;
cursor: url('/Welle2/bca2_charX.png') 12 0, auto;
margin:10px;
}
.level-point-x2:hover {
cursor: url('/Welle2/bca2_charX.png') 12 0, auto;
}


.level-point-x {
position: fixed;
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
border-radius: 50%;
transition: transform 0.2s;
margin:10px;
}

.level-point-active:hover {
transform: scale(1.3);
background: rgba(176, 0, 0, 0.2);
}


.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 300px;
max-width: 80vw;
background: url('/Welle2/popup-bg.png'), rgba(255, 255, 255, 0.95);
background-size: cover;
background-blend-mode: overlay;
border: 4px solid #fff;
border-radius: 16px;
padding: 16px 24px;
color: #333;
box-shadow: 0 0 30px rgba(0,0,0,0.7);
z-index: 100;
display: none;
}

.popup h3 {
min-width: 50%;
margin-top: 0;
color: #d98134;
font-size: 2em;
}

.musiclogo {
cursor: url('/Welle2/Blackonion02.png') 12 0, auto;
}

.close-level {
position: absolute;
top: -25%;
right: 40%;
cursor: url('/Welle2/Freepik_1.png') 12 0, auto;
color: #FFF;
font-weight: bold;
font-style: italic;
font-size: 2em;
line-height: 1;
}

.next-level {
position: absolute;
bottom: 15px;
right: 25px;
cursor: url('/Welle2/NajmunNahar_1.png') 0 0, auto;
color: #000;
font-weight: bold;
font-size: 2em;
line-height: 1;
}

.back-level {
cursor: url('/Welle2/gravisio_1.png') 12 0, auto;
color: #000;
font-style: italic;
font-size: 1.5em;
line-height: 1;
width: 10%;
}

.popup-overlay {
position: fixed;
top: 0;
left: 0;
cursor: url('/Welle2/Freepik_1.png') 12 0, auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
display: none;
z-index: 99;
}

.map {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.map-frame {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.music{
	bottom: 0%;
	position: absolute;
	left: 0%;
}

#BCAMusic{
	width:90%;
}


#impressum-button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: #6c757d;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 500;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  border: none;
  opacity: 0.2;
}


#impressum-popup .popup-content {
  background-color: white;
  color: #333;
  padding: 30px;
  border: 2px solid black;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  text-align: left;
  z-index: 100;
}

.OverlayImpressum {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
display: none;
z-index: 100;
}


#SecretCode-button {
  position: absolute;
  bottom: 10px;
  right: 100px;
  background-color: #6c757d;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 500;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  border: none;
}


#SecretCode-popup .popup-content {
  background-color: white;
  color: #333;
  padding: 30px;
  border: 2px solid black;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  text-align: left;
  z-index: 100;
}

.OverlaySecretCode {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
display: none;
z-index: 100;
}

#Makers-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #6c757d;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 500;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  border: none;
}


#Makers-popup .popup-content {
  background-color: white;
  color: #333;
  padding: 30px;
  border: 2px solid black;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  text-align: left;
  z-index: 100;
}

.OverlayMakers {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
display: none;
z-index: 100;
}