<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* General Styles (can complement or override inline styles in HTML if needed) */
a {
    color: #90cce1; /* Lighter blue for links */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
    padding-left: 10px;
}
li a {
    display: block;
    padding: 5px 0;
}
li a:hover {
    color: #ffffff;
    background-color: #0f3460; /* Highlight on hover */
}


/* Room Styles */
.room {
    width: 100px;
    height: 100px;
    position: absolute; /* Crucial for positioning */
    border: 3px solid #53a8b6; /* Blue border */
    box-sizing: border-box;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions */
}

.room.discovered {
    background-color: rgba(15, 52, 96, 0.7); /* Semi-transparent dark blue */
    cursor: pointer; /* Indicate interactivity only for discovered rooms */
}
.room.discovered:hover {
     border-color: #ffffff; /* Highlight border on hover */
     /* background-color: rgba(83, 168, 182, 0.5); Lighten background slightly */
}

.room.undiscovered {
    background-color: #16213e; /* Darker, less distinct */
    border: 3px dashed #4a4a6a; /* Dashed border for unknown */
    /* background-image: url('../img/fog_pattern.png'); Optional fog/pattern */
    cursor: default; /* Not interactive */
}
.room.undiscovered .format-icon {
    opacity: 0.6; /* Make icon less prominent */
}

.room-door {
    background-image: url("../img/Rooms/door.png");
}


/* Format Icon inside Room */
.format-icon {
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain; /* Prevents distortion */
}
/* === Remove these lines === */
/*
.tunnel {
    position: absolute;
    background-color: #53a8b6;
    z-index: -1;
}

.tunnel.horizontal {
    width: 50px;
    height: 10px;
}

.tunnel.vertical {
    width: 10px;
    height: 50px;
}
*/

/* === Add these lines === */
.connection {
    width: 50px;
    height: 50px;
    position: absolute; /* Crucial for positioning */
    box-sizing: border-box;
    z-index: -1;
    display: flex; /* Useful if placing an img inside */
    justify-content: center;
    align-items: center;
}

body #dungeon-map .connection.visited-hall {
    background-color: #550050; /* Placeholder color */

}

/* Style for Horizontal Bridges */
.connection.horizontal-bridge {
    background-color: #4a4a6a; /* Placeholder color */
    /* Or use a background image */
    /* background-image: url('../img/bridge-h.png'); */
    /* background-size: cover; */
}

/* Style for Vertical Bridges */
.connection.vertical-bridge {
    background-color: #3a3a5b; /* Placeholder color (slightly different) */
     /* Or use a background image */
    /* background-image: url('../img/bridge-v.png'); */
    /* background-size: cover; */
}

/* Optional: Style for images inside connection blocks */
.connection img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}</pre></body></html>