/* ---------- GLOBAL PAGE VIBES ---------- */


body {
    margin: 0;
    padding: 0;
    background-color: #000; /* fallback while images load */
    font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
    color: #000040;

    /* PIRATE HOOK CURSOR */
    cursor: url('piratehook.png') 8 0, auto;
}


/* center the main box & give it that boxed layout look */
.container {
    width: 900px;
    max-width: 95%;
    margin: 6px auto 0;        /* close to top */
    padding: 10px;
    background-color: rgba(204, 255, 204, 1); /* or whatever green you picked */
    border: 4px solid #00aa55;  /* your green border */
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #66dd88;
    position: relative;
    z-index: 1;
}

/* ---------- HEADER ---------- */

h1 {
    margin: 0 0 12px;
    padding: 10px;
    text-align: center;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #00ff4f, #00ff8a);
    border: 3px solid #00cc86;
    color: #006637;
    text-shadow: 1px 1px 0 #ffffff;
}

/* ---------- TEXT BOX / CONTENT ---------- */

.palegreen {
    background-color: #ccffcc;
    border: 3px solid #33cc66;
    padding: 10px;
    margin-top: 10px;
}

.palegreen p {
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
}

/* ---------- NAV LINKS = CHUNKY BUTTONS ---------- */

.palegreen a {
    display: inline-block;
    margin: 6px 4px 0;
    padding: 4px 10px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;

    background: #ccfff1;
    border: 2px solid #66cc9d;
    color: #006604;

    box-shadow: 2px 2px 0 #91cc66;
}

.palegreen a:hover {
    background: #99ffb9;
    color: #330033;
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: 1px 1px 0 #469933;
}

.palegreen a:visited {
    background: #bbffe0;
    color: #005511;
}

/* ---------- FUN EXTRA BORDER ---------- */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    border: 6px dotted #ffffff88;
    pointer-events: none;
}

/* ---------- BACKGROUND CROSSFADE LAYERS ---------- */

.bg-layer {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
/* ----- HEADER IMAGE CARD ----- */

.header-card {
    background: transparent;
    border: 3px solid #59ff33;
    padding: 0;       /* THIS is the important fix */
}


.header-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;  /* was 260 – you can nudge this up/down */
    object-fit: cover;
}


/* ----- NAV BAR UNDER HEADER ----- */

.nav-bar {
    margin-bottom: 8px;
    padding: 6px;
    background-color: #e6fffb; /* pale pink */
    border: 3px solid #66c4cc;
    text-align: center;
}

/* chunky Neopets buttons */
.nav-bar a {
    display: inline-block;
    margin: 4px 6px;
    padding: 4px 10px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;

    background: #ccffe0;
    border: 2px solid #66ccb5;
    color: #006653;
    box-shadow: 2px 2px 0 #66ccbd;
}

.nav-bar a:hover {
    background: #99ffb1;
    color: #330033;
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: 1px 1px 0 #33997a;
}

.nav-bar a:visited {
    background: #efffbb;
    color: #375500;
}
/* ----- TWO-COLUMN TOP ROW ----- */

.top-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* left side: header image */
.header-card {
    flex: 1 1 55%;
}

/* right side: nav + text stacked */
.top-content {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* make sure header image doesn’t get too tall */
.header-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;      /* you can nudge this down to shorten more */
    object-fit: cover;
}
@media (max-width: 800px) {
    .top-row {
        flex-direction: column;
    }
}
/* ----- CLICKABLE AREA FOR CAPTAIN'S JOURNAL (DEBUG VISIBLE) ----- */
.click-journal {
    position: fixed;

    /* placement on the right side bookshelf area */
    left: 85%;
    top: 55%;

    width: 60px;
    height: 170px;

    

    cursor: pointer;
    z-index: 3;  /* same “layer” as your other hotspots */
}

  
/* ----- CLICKABLE AREA OVER BOOK STACK ----- */
.click-books {
    position: fixed;

    left: 10%;     /* ← horizontally aligned with your red box */
    top: 80%;     /* ↓ vertically aligned perfectly */

    width: 260px;   /* matches your red box width */
    height: 140px;  /* matches your red box height */

   
}


/* ----- CLICKABLE AREA OVER BED ----- */
.click-bed {
    position: fixed;

    /* tweak these values to sit over the bed */
    right: 26%;      /* move left/right */
    top: 60%;        /* move up/down */

    width: 260px;
    height: 180px;

}

/* ----- CLICKABLE AREA FOR BALCONY ----- */
.click-balcony {
    position: fixed;

    /* adjust for perfect placement */
    left: 20%;   
    top: 32%;    
    width: 200px;
    height: 300px;
}
/* ----- CLICKABLE AREA OVER WIZARD ----- */
.click-wizard {
    position: fixed;

    /* roughly centered on your VTuber */
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);

    width: 260px;
    height: 420px;

   

    cursor: pointer;
    z-index: 5;
}

/* ----- CLICKABLE AREA OVER GOLD PILE / PLUNDER ----- */
.click-gold {
    position: fixed;

    right: 6%;
    bottom: 10%;

    width: 220px;
    height: 180px;

    cursor: pointer;
    z-index: 5;
}

/* ----- CLICKABLE AREA FOR WANTED POSTER ----- */
.click-wanted {
    position: fixed;

    left: 13%;
    top: 25%;
    width: 120px;
    height: 260px;

    cursor: pointer;
    z-index: 5;
}
/* ----- CLICKABLE AREA FOR LOVE POTION ----- */
.click-potion {
    position: fixed;

    /* You’ll probably tweak these to line it up: */
    right: 95%;   /* move left/right */
    bottom: 6%;  /* move up/down */
    width: 120px;
    height: 160px;


    cursor: pointer;
    z-index: 5;
}
/* ----- SKULL (left shelf-ish) ----- */
.click-skull {
    position: fixed;
    left: 89%;      /* tweak left/right */
    top: 59%;      /* tweak up/down */
    width: 70px;
    height: 90px;

    cursor: pointer;
    z-index: 5;
}

/* ----- TREASURE MAP ----- */
.click-map {
    position: fixed;
    left: 25%;     /* adjust to where the map is */
    top: 87%;
    width: 220px;
    height: 90px;

    cursor: pointer;
    z-index: 5;
}

/* ----- GLOBE ----- */
.click-globe {
    position: fixed;
    left: 87%;
    top: 36%;
    width: 90px;
    height: 100px;

    cursor: pointer;
    z-index: 5;
}

/* ----- KEYS (hanging near the door) ----- */
.click-keys {
    position: fixed;
    left: 14%;
    top: 55%;
    width: 70px;
    height: 110px;

    cursor: pointer;
    z-index: 5;
}

/* ----- COMPASS (near bottom left) ----- */
.click-compass {
    position: fixed;
    left: 5%;
    bottom: 6%;
    width: 100px;
    height: 100px;

   
}

/* ----- STAIRS IN BACK ----- */
.click-stairs {
    position: fixed;
    left: 32%;
    top: 40%;
    width: 140px;
    height: 200px;
    
    cursor: pointer;
    z-index: 5;
  
}


/* ---------- KRAKEN ATTACK EFFECT ---------- */

.kraken-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.15),
        rgba(0, 0, 0, 0.85)
    );
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 999; /* above cabin, below cursor */
    transition: opacity 0.2s ease;
}

/* when kraken attacks, we animate flicker + shake */
body.kraken-attack .kraken-overlay {
    animation: krakenFlicker 0.2s infinite;
}

/* shake the whole cabin box */
body.kraken-attack .container {
    animation: krakenShake 0.4s infinite;
}

/* optional: also shake the header image a bit */
body.kraken-attack .header-card {
    animation: krakenShake 0.4s infinite;
}

/* keyframes */

@keyframes krakenFlicker {
    0%   { opacity: 0.0; }
    10%  { opacity: 0.5; }
    20%  { opacity: 0.1; }
    30%  { opacity: 0.6; }
    40%  { opacity: 0.2; }
    50%  { opacity: 0.7; }
    60%  { opacity: 0.3; }
    70%  { opacity: 0.6; }
    80%  { opacity: 0.15; }
    90%  { opacity: 0.5; }
    100% { opacity: 0.25; }
}

@keyframes krakenShake {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-4px, 2px) rotate(-1deg); }
    40%  { transform: translate(4px, -2px) rotate(1deg); }
    60%  { transform: translate(-3px, 3px) rotate(-1deg); }
    80%  { transform: translate(3px, -3px) rotate(1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* ---------- WEATHER OVERLAY (globe) ---------- */

.weather-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;                    /* behind .container (which is z-index:1) */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* each mode mainly just bumps opacity + tint */

.weather-rain {
    opacity: 1;
    background-color: rgba(0, 0, 30, 0.4);
}

.weather-waves {
    opacity: 1;
    background-color: rgba(0, 20, 40, 0.4);
}

.weather-disco {
    opacity: 1;
    background-color: rgba(10, 0, 30, 0.4);
}

.weather-snow {
    opacity: 1;
    background-color: rgba(220, 230, 250, 0.2);
}

/* --- COMPASS POPUP --- */
#compass-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;          /* hidden until activated */
    opacity: 0;
    transition: opacity 0.4s ease;
}

#compass-overlay.active {
    opacity: 1;
    z-index: 9999;
}

#compass-gif {
    width: 420px;
    height: auto;
    animation: compassPop 0.25s ease-out;
}

/* pop animation */
@keyframes compassPop {
    0% { transform: scale(0.2); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
/* =======================
   MOBILE QUICK TRAVEL NAV
   ======================= */
@media (max-width: 768px) {

  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 4px 8px;
    background: rgba(0, 0, 0, 0.85);
    border-top: 2px solid #7fdc7f;
    z-index: 20000;
    font-family: "Trebuchet MS", Arial, sans-serif;
  }

  .mobile-nav-title {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #c8ffcf;
    margin-bottom: 4px;
  }

  .mobile-nav-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 3px;
  }

  .mobile-nav a {
    flex: 1;
    max-width: 110px;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;

    padding: 3px 4px;
    border-radius: 4px;

    background: #2b5932;
    color: #ffe9c4;
    border: 2px solid #a2d08c;
    box-shadow: 2px 2px 0 #143018;
  }

  .mobile-nav a:active,
  .mobile-nav a:hover {
    background: #3d7a45;
    box-shadow: 1px 1px 0 #102010;
    transform: translate(1px, 1px);
  }

  /* make sure main content doesn't get hidden behind the bar */
  .container {
    margin-bottom: 70px;
  }
}

/* Desktop: hide the mobile nav completely */
@media (min-width: 769px) {
  .mobile-nav {
    display: none;
  }
}