/* --- 1. CORE LAYOUT --- */
body {
    margin: 0; padding: 0;
    background: #2b1b11 url('world_map.jpg') no-repeat center center fixed;
    background-size: cover;
    font-family: 'EB Garamond', serif;
    overflow-x: hidden;
}

.vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 5;
    background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.8) 100%);
}

/* --- 2. LOADER --- */
#loader-wrapper {
    position: fixed; inset: 0; background: #0d0d0d; z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 1s ease;
}

#loader-image { width: 80px; filter: sepia(1) brightness(1.2); }

#loader-bar-container { 
    width: 250px; height: 10px; background: #222; 
    border: 1px solid #bf953f; margin-top: 25px; overflow: hidden; 
}

#loader-bar { width: 0%; height: 100%; background: #bf953f; transition: width 2s; }

#loader-text { 
    color: #bf953f; font-family: 'IM Fell English SC', serif; 
    margin-top: 10px; text-transform: uppercase; letter-spacing: 2px;
}

/* --- 3. PAMPHLETS (THE LINKS) --- */
.pamphlet-side {
    position: fixed; top: 35%; width: 130px; padding: 22px 10px;
    background: linear-gradient(to bottom, #bf953f, #fcf6ba, #aa771c);
    border: 2px solid #5d4037; text-align: center; text-decoration: none;
    z-index: 2000; opacity: 0; visibility: hidden;
    transition: opacity 1s ease, transform 0.4s ease, left 0.4s ease, right 0.4s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.content-visible .pamphlet-side { 
    opacity: 1 !important; 
    visibility: visible !important; 
}

#pamphlet-left { left: -15px; transform: rotate(3deg); border-radius: 0 8px 8px 0; }
#pamphlet-right { right: -15px; transform: rotate(-3deg); border-radius: 8px 0 0 8px; }

.pamphlet-side:hover { transform: scale(1.1) rotate(0deg); filter: brightness(1.1); z-index: 2001; }
#pamphlet-left:hover { left: 0; }
#pamphlet-right:hover { right: 0; }

.pamphlet-side span { font-family: 'IM Fell English SC', serif; color: #1a110a; font-weight: bold; font-size: 18px; }

/* --- 4. MAIN CONTENT --- */
#sea-overlay {
    opacity: 0; transition: opacity 1.5s ease;
    min-height: 100vh; display: flex; justify-content: center; padding: 50px 0;
}

.content-visible { opacity: 1 !important; }

#main-ledger {
    background: #e6d3af url('https://www.transparenttextures.com/patterns/old-map.png');
    max-width: 850px; width: 90%; padding: 60px;
    border: 3px solid #3d2b1f; 
    box-shadow: 0 0 0 10px #e6d3af, 0 0 0 15px #3d2b1f, 0 40px 100px rgba(0,0,0,0.9);
    position: relative; z-index: 10;
}

.golden-title {
    font-family: 'IM Fell English SC', serif; font-size: 4rem; text-align: center; margin: 0;
    background: linear-gradient(to bottom, #bf953f, #aa771c);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- 5. COMPASS (NO MORE SQUEEZING) --- */
#music-compass { position: fixed; top: 30px; right: 30px; z-index: 4000; cursor: pointer; }

#compass-img { 
    width: 80px; 
    height: auto; /* Fixed: prevents squeezing */
    aspect-ratio: 1 / 1; /* Ensures it stays a perfect circle */
    object-fit: contain;
    transition: transform 0.4s ease;
}

.compass-spinning { animation: spin 15s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.captains-log-date { text-align: center; font-style: italic; color: #5d4037; margin-bottom: 25px; font-size: 1.2rem; }

/* 1. THE CONTAINER (The "Invisible Box" holding the compass) */
#music-compass {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 6000;
    cursor: pointer;
    /* This ensures the container is a perfect square */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. THE IMAGE (The actual compass icon) */
#compass-img {
    /* Setting one dimension to a fixed size and the other to auto prevents squeezing */
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; 
    object-fit: contain;
    
    /* Smooth transition for the hover effect */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Pirate-style glow (Optional) */
    filter: drop-shadow(0 0 5px rgba(191, 149, 63, 0.5));
}

/* 3. THE ANIMATION */
.compass-spinning {
    animation: spin-compass 15s linear infinite;
}

@keyframes spin-compass {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 4. HOVER EFFECT */
#music-compass:hover #compass-img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(252, 246, 186, 0.8));
}