/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    cursor: auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Ocean Map Container */
#ocean-map {
    width: 100vw;
    height: 100vh;
    background:
        /* Main deep blue base */
        linear-gradient(180deg,
            #0c1445 0%,
            #0f172a 15%,
            #1e3a5f 35%,
            #172554 55%,
            #1e3a8a 75%,
            #1e40af 100%
        );
    position: relative;
    overflow: hidden;
}

/* Subtle depth overlay */
#ocean-map::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Ocean depth and shadows */
#ocean-map::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(30, 64, 175, 0.4) 0%, transparent 60%),
        linear-gradient(to top,
            rgba(30, 58, 138, 0.3) 0%,
            transparent 100%
        );
    pointer-events: none;
    z-index: 1;
}

/* Animated color blobs for gentle transitions */
.ocean-color-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    mix-blend-mode: screen;
}

/* Islands */
.island {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s ease;
    isolation: isolate;
}

#island-rpg {
    top: 20%;
    left: 15%;
}

#island-platformer {
    top: 50%;
    left: 50%;
    margin-left: -70px;  /* Half of island width (140px / 2) */
    margin-top: -60px;   /* Half of island height (120px / 2) */
}

#island-fighter {
    top: 25%;
    right: 20%;
}

/* Island Sprites (8-bit pixel art using CSS) */
.island-sprite {
    width: 140px;
    height: 120px;
    position: relative;
}

/* ── Portals ─────────────────────────────────────────────────────────── */
.portal {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    top: 60px;
    left: 70px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Spinning color ring via conic gradient masked to ring shape */
.portal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    mask-image: radial-gradient(circle, transparent 62%, black 69%, black 100%);
    -webkit-mask-image: radial-gradient(circle, transparent 62%, black 69%, black 100%);
}

/* Inner void glow */
.portal::after {
    content: '';
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    opacity: 0.8;
}

/* RPG Portal - Forest green */
.portal-rpg {
    animation: portal-glow-rpg 2.5s ease-in-out infinite;
}
.portal-rpg::before {
    background: repeating-conic-gradient(#22c55e 0deg 45deg, #4ade80 45deg 90deg);
    animation: portal-spin 3.5s steps(8, end) infinite;
}
.portal-rpg::after {
    background: radial-gradient(circle, #052e16 0%, #14532d 70%, rgba(21, 128, 61, 0.1) 100%);
    animation: portal-inner-pulse-rpg 2.5s ease-in-out infinite;
}

/* Fighter Portal - Volcanic fire */
.portal-fighter {
    animation: portal-glow-fighter 1.5s ease-in-out infinite;
}
.portal-fighter::before {
    background: repeating-conic-gradient(#f97316 0deg 45deg, #dc2626 45deg 90deg);
    animation: portal-spin 1.8s steps(8, end) infinite;
}
.portal-fighter::after {
    background: radial-gradient(circle, #1c0700 0%, #450a0a 70%, rgba(127, 29, 29, 0.1) 100%);
    animation: portal-inner-pulse-fighter 1.4s ease-in-out infinite;
}

/* Platformer Portal - Crystal cyan/purple */
.portal-platformer {
    animation: portal-glow-platformer 3.5s ease-in-out infinite;
}
.portal-platformer::before {
    background: repeating-conic-gradient(#22d3ee 0deg 45deg, #a855f7 45deg 90deg);
    animation: portal-spin 5s steps(8, end) infinite;
}
.portal-platformer::after {
    background: radial-gradient(circle, #0c0018 0%, #2e1065 70%, rgba(46, 16, 101, 0.1) 100%);
    animation: portal-inner-pulse-platformer 3.5s ease-in-out infinite;
}

/* RPG Island - Forest/Mountain theme */
.island-rpg-sprite {
    background: radial-gradient(ellipse at 50% 35%, #4d7c0f 0%, #365314 70%, #1a2e05 100%);
    border-radius: 50% 50% 48% 52%;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Mountain peak + forest canopy */
.island-rpg-sprite::before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    height: 65%;
    background:
        /* Snow cap */
        radial-gradient(ellipse at 50% 0%, #f8fafc 0%, #e2e8f0 12%, transparent 22%),
        /* Mountain rock */
        radial-gradient(ellipse at 50% 18%, #78716c 0%, #57534e 28%, transparent 48%),
        /* Dense forest */
        radial-gradient(ellipse at 50% 60%, #22c55e 0%, #16a34a 55%, #15803d 100%);
    border-radius: 50%;
    z-index: 1;
}

/* Beach + pixel trees */
.island-rpg-sprite::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 20px;
    background: #86efac;
    border-radius: 50%;
    box-shadow:
        0 -3px 0 #4ade80,
        0 5px 0 rgba(56, 189, 248, 0.4),
        /* Tree canopies (pixel blobs) */
        -38px -55px 0 7px #15803d,
        -18px -63px 0 6px #16a34a,
        8px -68px 0 9px #22c55e,
        32px -61px 0 6px #16a34a,
        52px -55px 0 7px #15803d,
        /* Tree trunks */
        -38px -44px 0 2px #92400e,
        -18px -52px 0 2px #92400e,
        8px -55px 0 2px #92400e,
        32px -50px 0 2px #92400e,
        52px -44px 0 2px #92400e;
    z-index: 2;
}

/* Platformer Island - Crystal/Mystic theme */
.island-platformer-sprite {
    background: radial-gradient(ellipse at 50% 40%, #4a1d96 0%, #2e1065 70%, #1a0840 100%);
    border-radius: 52% 48% 50% 50%;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 18px rgba(139, 92, 246, 0.25);
}

/* Crystal formations + purple rock */
.island-platformer-sprite::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 18px;
    right: 18px;
    bottom: 18px;
    background:
        /* Crystal cluster glow */
        radial-gradient(circle at 50% 8%, rgba(34, 211, 238, 0.5) 0%, transparent 28%),
        /* Left crystal mass */
        radial-gradient(circle at 32% 38%, #0e7490 0%, #164e63 22%, transparent 38%),
        /* Right crystal mass */
        radial-gradient(circle at 68% 32%, #0891b2 0%, #155e75 22%, transparent 38%),
        /* Purple rock base */
        radial-gradient(ellipse at 50% 68%, #6d28d9 0%, #4c1d95 55%, transparent 80%);
    border-radius: 45% 55% 50% 50%;
    z-index: 1;
}

/* Crystal beach + spire pixels */
.island-platformer-sprite::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 20px;
    background: #7c3aed;
    border-radius: 50%;
    box-shadow:
        0 -3px 0 #6d28d9,
        0 5px 0 rgba(56, 189, 248, 0.4),
        /* Crystal spires (narrow tapering towers) */
        -32px -60px 0 4px #22d3ee,
        -32px -70px 0 3px #67e8f9,
        -32px -78px 0 2px #cffafe,
        -10px -65px 0 5px #06b6d4,
        -10px -75px 0 4px #22d3ee,
        -10px -83px 0 2px #67e8f9,
        14px -63px 0 4px #0891b2,
        14px -72px 0 3px #22d3ee,
        14px -79px 0 2px #67e8f9,
        38px -57px 0 4px #22d3ee,
        38px -65px 0 3px #67e8f9,
        38px -71px 0 2px #cffafe;
    z-index: 2;
}

/* Fighter Island - Volcano/Lava theme */
.island-fighter-sprite {
    background: radial-gradient(ellipse at 50% 30%, #292524 0%, #1c1917 100%);
    border-radius: 48% 52% 50% 50%;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(239, 68, 68, 0.12);
}

/* Volcano cone + lava streams */
.island-fighter-sprite::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 18px;
    right: 18px;
    bottom: 15px;
    background:
        /* Crater glow */
        radial-gradient(circle at 50% 3%, #fbbf24 0%, #ef4444 9%, transparent 18%),
        /* Volcano cone */
        radial-gradient(ellipse at 50% 22%, #7c2d12 0%, #431407 38%, transparent 58%),
        /* Lava stream left */
        radial-gradient(ellipse at 33% 55%, #ea580c 0%, #c2410c 14%, transparent 26%),
        /* Lava stream right */
        radial-gradient(ellipse at 68% 60%, #f97316 0%, #b45309 12%, transparent 24%),
        /* Barren rock ground */
        radial-gradient(ellipse at 50% 72%, #44403c 0%, #292524 100%);
    border-radius: 50%;
    z-index: 1;
}

/* Dark volcanic beach + burnt tree sticks */
.island-fighter-sprite::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 18px;
    background: #44403c;
    border-radius: 50%;
    box-shadow:
        0 -3px 0 #292524,
        0 5px 0 rgba(56, 189, 248, 0.3),
        /* Burnt tree 1 - left */
        -38px -52px 0 2px #1c1917,
        -38px -44px 0 2px #1c1917,
        -38px -36px 0 2px #1c1917,
        -34px -49px 0 1px #292524,
        -42px -47px 0 1px #292524,
        /* Burnt tree 2 - right */
        18px -47px 0 2px #1c1917,
        18px -39px 0 2px #1c1917,
        18px -31px 0 2px #1c1917,
        14px -44px 0 1px #292524,
        22px -42px 0 1px #292524,
        /* Burnt tree 3 - far left, short */
        -56px -40px 0 2px #1c1917,
        -56px -32px 0 2px #1c1917,
        -54px -37px 0 1px #292524;
    z-index: 2;
}

/* Scroll Labels - Parchment style */
.scroll-label {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center center;
    background:
        /* Parchment texture */
        linear-gradient(to bottom,
            #fef3c7 0%,
            #fef08a 10%,
            #fef3c7 50%,
            #fde68a 90%,
            #fef3c7 100%
        );
    border: none;
    padding: 16px 24px 16px 24px;
    border-radius: 4px;
    box-shadow:
        /* Parchment edges */
        inset 0 2px 4px rgba(217, 119, 6, 0.2),
        inset 0 -2px 4px rgba(217, 119, 6, 0.2),
        /* Drop shadow */
        0 6px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    min-width: 180px;
    text-align: center;
    position: relative;
}

/* Wooden scroll handles */
.scroll-label::before,
.scroll-label::after {
    content: '';
    position: absolute;
    width: 12px;
    height: calc(100% + 20px);
    background:
        linear-gradient(to right,
            #78350f 0%,
            #92400e 30%,
            #a16207 50%,
            #92400e 70%,
            #78350f 100%
        );
    border-radius: 6px;
    top: -10px;
    box-shadow:
        inset 1px 0 2px rgba(0, 0, 0, 0.4),
        inset -1px 0 2px rgba(0, 0, 0, 0.4),
        2px 0 4px rgba(0, 0, 0, 0.3);
}

/* Left handle */
.scroll-label::before {
    left: -16px;
}

/* Right handle */
.scroll-label::after {
    right: -16px;
}

/* Rope/string at top and bottom of handles */
.scroll-content {
    font-size: 18px;
    font-weight: bold;
    color: #78350f;
    text-shadow:
        0.5px 0.5px 0 rgba(254, 243, 199, 0.8),
        -0.5px -0.5px 0 rgba(146, 64, 14, 0.3);
    white-space: nowrap;
    position: relative;
}

/* Speedboat */
#speedboat {
    position: absolute;
    width: 40px;
    height: 60px;
    pointer-events: none;
    z-index: 15;
    transition: transform 0.1s ease;
    left: 50%;
    top: 50%;
}

.boat-body {
    position: relative;
    width: 40px;
    height: 60px;
}

/* Speedboat pixel art using box-shadows */
.boat-body::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #dc2626;
    top: 0;
    left: 16px;
    box-shadow:
        /* Front point (red) */
        0 0 0 0 #dc2626,
        /* Hull rows */
        -8px 8px 0 #f3f4f6,
        0 8px 0 #f3f4f6,
        8px 8px 0 #f3f4f6,
        -8px 16px 0 #e5e7eb,
        0 16px 0 #e5e7eb,
        8px 16px 0 #e5e7eb,
        -12px 24px 0 #d1d5db,
        -4px 24px 0 #d1d5db,
        4px 24px 0 #d1d5db,
        12px 24px 0 #d1d5db,
        -12px 32px 0 #9ca3af,
        -4px 32px 0 #9ca3af,
        4px 32px 0 #9ca3af,
        12px 32px 0 #9ca3af,
        /* Motor (dark) */
        -8px 40px 0 #374151,
        0 40px 0 #374151,
        8px 40px 0 #374151,
        -4px 48px 0 #1f2937,
        4px 48px 0 #1f2937;
}

/* Boat Wake */
.boat-wake {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    top: 60px;
    left: 18px;
    box-shadow:
        -8px 8px 0 rgba(255, 255, 255, 0.4),
        8px 8px 0 rgba(255, 255, 255, 0.4),
        -12px 16px 0 rgba(255, 255, 255, 0.3),
        12px 16px 0 rgba(255, 255, 255, 0.3),
        -16px 24px 0 rgba(255, 255, 255, 0.2),
        16px 24px 0 rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#speedboat.moving .boat-wake {
    opacity: 1;
}

/* Sea Monsters */
.sea-monster {
    position: absolute;
    width: 64px;
    height: 48px;
    z-index: 5;
    pointer-events: none;
}

.sea-monster-1 {
    top: 60%;
    left: -100px;
}

.sea-monster-2 {
    top: 30%;
    right: -100px;
}

/* Sea monster sprite (simple serpent) */
.sea-monster::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #047857;
    box-shadow:
        /* Body segments */
        8px 0 0 #059669,
        16px 4px 0 #059669,
        24px 8px 0 #10b981,
        32px 8px 0 #10b981,
        40px 4px 0 #059669,
        48px 0 0 #047857,
        /* Head */
        56px -4px 0 #065f46,
        56px -12px 0 #065f46,
        /* Eye */
        58px -10px 0 #fbbf24;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Scroll-style modal content */
.modal-content {
    background:
        /* Parchment texture */
        linear-gradient(to bottom,
            #fef3c7 0%,
            #fef08a 5%,
            #fef3c7 15%,
            #fde68a 50%,
            #fef3c7 85%,
            #fef08a 95%,
            #fef3c7 100%
        );
    border: none;
    box-shadow:
        /* Parchment depth */
        inset 0 4px 8px rgba(217, 119, 6, 0.15),
        inset 0 -4px 8px rgba(217, 119, 6, 0.15),
        /* Drop shadow */
        0 12px 32px rgba(0, 0, 0, 0.5);
    padding: 48px 56px;
    max-width: 650px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    border-radius: 8px;
}

/* Wooden scroll handles for modal */
.modal-content::before,
.modal-content::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    background:
        linear-gradient(to right,
            #5c2f0f 0%,
            #78350f 20%,
            #92400e 40%,
            #a16207 50%,
            #92400e 60%,
            #78350f 80%,
            #5c2f0f 100%
        );
    border-radius: 10px;
    top: 0;
    box-shadow:
        inset 2px 0 3px rgba(0, 0, 0, 0.5),
        inset -2px 0 3px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        3px 0 6px rgba(0, 0, 0, 0.4);
}

/* Left handle */
.modal-content::before {
    left: -28px;
}

/* Right handle */
.modal-content::after {
    right: -28px;
}

.modal-content h2 {
    font-size: 32px;
    color: #78350f;
    margin-bottom: 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 1px 1px 2px rgba(254, 243, 199, 0.8);
    font-family: 'Courier New', monospace;
}

.modal-body {
    margin-bottom: 24px;
}

.controls-section {
    margin-bottom: 20px;
}

.controls-section h3 {
    font-size: 20px;
    color: #92400e;
    margin-bottom: 12px;
    border-bottom: 2px solid #d97706;
    padding-bottom: 8px;
    text-shadow: 0.5px 0.5px 1px rgba(254, 243, 199, 0.6);
}

.controls-list {
    background: rgba(254, 252, 232, 0.6);
    border: 2px solid #d97706;
    padding: 16px;
    font-size: 14px;
    line-height: 1.8;
    color: #78350f;
    border-radius: 4px;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.pixel-button {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;
    border: 3px solid #92400e;
    background:
        linear-gradient(to bottom,
            #fde68a 0%,
            #fcd34d 100%
        );
    color: #78350f;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 2px rgba(254, 243, 199, 0.8),
        0 4px 0 #78350f,
        0 6px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease;
    position: relative;
    border-radius: 4px;
}

.pixel-button:hover {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 2px rgba(254, 243, 199, 0.8),
        0 2px 0 #78350f,
        0 4px 6px rgba(0, 0, 0, 0.3);
}

.pixel-button:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 1px 2px rgba(254, 243, 199, 0.8),
        0 0 0 #78350f,
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.pixel-button-primary {
    background:
        linear-gradient(to bottom,
            #a16207 0%,
            #92400e 100%
        );
    color: #fef3c7;
    border-color: #78350f;
    box-shadow:
        inset 0 1px 2px rgba(217, 119, 6, 0.6),
        0 4px 0 #5c2f0f,
        0 6px 8px rgba(0, 0, 0, 0.4);
}

.pixel-button-primary:hover {
    box-shadow:
        inset 0 1px 2px rgba(217, 119, 6, 0.6),
        0 2px 0 #5c2f0f,
        0 4px 6px rgba(0, 0, 0, 0.4);
}

.pixel-button-primary:active {
    box-shadow:
        inset 0 1px 2px rgba(217, 119, 6, 0.6),
        0 0 0 #5c2f0f,
        0 2px 4px rgba(0, 0, 0, 0.4);
}