html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    zoom: 1 !important;
    /*overflow: hidden;*/
    background-color: #1e1e1e;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Magic Container: It shrinks/grows to fit the screen, 
    but strictly locks itself to the image's dimensions.
*/
.map-container {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    
    /* CRITICAL: Change this to match your image's exact pixel dimensions!
    For example, if your image is 1920x1080, use 16 / 9. 
    */
    aspect-ratio: 2559 / 3649; 
}

.map-container img {
    width: 100%;
    height: 100%;
    display: block; /* Removes unwanted bottom whitespace */
}

.hitbox {
    position: absolute;
    cursor: pointer;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* Typography */
    font-family: 'Playfair Display', serif;
    font-size: 2.7vh;
    font-weight:bolder ;
    color: #000000 !important; /* Locks text color to pure black */
    
    /* 1. Thinner outline with 70% opacity (less harsh than pure white) */
    -webkit-text-stroke: 1.3px rgba(255, 255, 255, 1);
    
    /* 2. Soft, subtle drop glow just to keep it readable over dark terrain */
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);

    /* Debug styling */
    background-color: rgba(255, 0, 0, 0.0); 
    border: 0px solid red; 
}
.hitbox#Hölle {
    -webkit-text-stroke: 1.3px rgba(255, 0, 0, 0.9);
    
    /* 2. Soft, subtle drop glow just to keep it readable over dark terrain */
    text-shadow: 0px 1px 1px rgba(255, 0, 0, 0.9);
}

.hitbox:hover {
    background-color: rgba(255, 255, 0, 0.4);
}

.green {
    background-color: rgb(77, 167, 77);
}
.red {
    background-color: rgb(180, 74, 74);
}
.blue {
    background-color: rgb(106, 106, 199);
}



/* Individual Hitboxes: Always use % values for top, left, width, and height.
    This ensures they scale perfectly with the map.
*/

/* === Regions === */
.hitbox#Hölle { top: 10%; left: 45%; width: 25%; height: 7%; }
.hitbox#Schlucht { top: 10%; left: 20%; width: 25%; height: 7%; }
.hitbox#Schlucht2 { top: 10%; left: 22%; width: 12%; height: 22%; }
.hitbox#Vulkan   { top: 18%; left: 35%; width: 21%; height: 15%; }
.hitbox#Dschungel{ top: 18%; left: 58%; width: 25%; height: 15%; }
.hitbox#Sumpf    { top: 18%; left: 84%; width: 16%; height: 22%; }
.hitbox#Wüste   { top: 18%; left: 2%;  width: 18%; height: 24%; }
.hitbox#Berge    { top: 34%; left: 23%; width: 22%; height: 15%; }
.hitbox#Urwald   { top: 34%; left: 50%; width: 35%; height: 15%; }
.hitbox#Ödland  { top: 42%; left: 2%;  width: 20%; height: 23%; }
.hitbox#Moor     { top: 40%; left: 83%; width: 16%; height: 22%; }
.hitbox#Wald     { top: 49%; left: 52%; width: 28%; height: 12%; }
.hitbox#Hügel   { top: 56%; left: 22%; width: 30%; height: 11%; transform: rotate(-37deg); }
.hitbox#Marsch   { top: 58%; left: 63%; width: 24%; height: 12%; transform: rotate(-37deg); }
.hitbox#Ebene    { top: 65%; left: 2%;  width: 20%; height: 25%; }
.hitbox#Wiesen   { top: 72%; left: 18%; width: 37%; height: 10%; transform: rotate(-50deg); }
.hitbox#Felder   { top: 70%; left: 52%; width: 16%; height: 16%; }
.hitbox#Kliff    { top: 70%; left: 70%; width: 30%; height: 8%; transform: rotate(-25deg); }
.hitbox#Insel   { top: 90%; left: 75%; width: 25%; height: 10%; }
.hitbox#Meer     { top: 88%; left: 35%; width: 40%; height: 10%; }
.hitbox#Strand     { top: 87.5%; left: 2%; width: 35%; height: 4%; transform: rotate(-6deg); }

/*FLUSS*/
.hitbox#UntererFluss   { top: 63%; left: 64%; width: 5%; height: 11%; transform: rotate(-35deg); }
.hitbox#UntererFluss2   { top: 73%; left: 67%; width: 5%; height: 11%; transform: rotate(-3deg); }
.hitbox#ObererFluss   { top: 28%; left: 53%; width: 5%; height: 8%; transform: rotate(15deg); }
.hitbox#ObererFluss2   { top: 41%; left: 48%; width: 5%; height: 21%; transform: rotate(-17deg); }

/* === Locations === */
.hitbox#Zhima    { top: 38.3%; left: 9%;    width: 9.75%; height: 6.8%; border-radius: 50%; }
.hitbox#Dammfurt { top: 33.6%; left: 43.1%; width: 9.75%; height: 6.8%; border-radius: 50%; }
.hitbox#Xzetec   { top: 30.3%; left: 62.3%; width: 9.75%; height: 6.8%; border-radius: 50%; }
.hitbox#Yzhuzh   { top: 35.3%; left: 87.4%; width: 9.75%; height: 6.8%; border-radius: 50%; }
.hitbox#Lulluk   { top: 53.0%; left: 78.0%; width: 9.75%; height: 6.8%; border-radius: 50%; }

.hitbox#Gadur    { top: 46.5%; left: 22%; width: 11%; height: 9%; }
.hitbox#Gylravar { top: 42%; left: 59%; width: 12%; height: 8%; }
.hitbox#Abendheim{ top: 62%; left: 50%; width: 12%; height: 6%; }
.hitbox#Gomoa    { top: 60%; left: 81%; width: 15%; height: 9%; }
.hitbox#Grent    { top: 69%; left: 18%; width: 16%; height: 9%; border-radius: 50%; }
.hitbox#Traumburg{ top: 76%; left: 40%; width: 15%; height: 11%; }



/* Schätze und Verlies */
.hitbox#Schätze { top: 5%; left: 5%; width: 15%; height: 10%; }
.hitbox#Verliese{ top: 5%; left: 80%; width: 15%; height: 10%; }