/* --- 1. Y2K CORE & VARIABLES --- */
:root {
    --hot-pink: #ff00ff;
    --baby-blue: #00ffff;
    --silver: #c0c0c0;
    --dark-purple: #4b0082;

}
@font-face {
    font-family: quicksand;
    src: url(/fonts/Quicksand_Light.otf);
}

/* --- 2. GLOBAL STYLES --- */
body {
    background-color: #0080ff;
    background-image: url('https://cdn.pixabay.com/animation/2024/07/23/19/52/19-52-56-478_512.gif');
    background-blend-mode: lighten;
    font-family: "quicksand", "Arial", sans-serif;
    margin: 0;
    padding: 20px;
    color: var(--text-color);
    transition: background-color 0.5s ease, color 0.5s ease;
    cursor: url('/images/cursor.webp'), auto !important;
    min-height: 100vh; /* Ensures it's at least the screen height */
    position: relative; /* Acts as the anchor for absolute sparkles */
}
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 100%;
    cursor: url('/images/cursor.webp'), auto;

}
a, button, .center-button, .wheel-button, .link-row {
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}
footer {
    display: flex;
    justify-content: space-between; /* Spreads items to left, center, and right */
    align-items: center;
    flex-wrap: wrap; /* Allows it to stack on very small phone screens */
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-top: 2px ridge var(--silver);
    gap: 15px;
}
.footer-info {
    text-align: right;
    font-size: 0.8rem;
    line-height: 1.4;
}
.footer-info p {
    margin: 0;
}
/* --- 3. THEME MODES & CONTAINER --- */
body.twilight-mode {
    background-color: #191970;
}

.website-container {
    margin: 40px auto; /* Centers the site with top/bottom spacing */
    background: white;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
    
    /* THE FIX: Re-constraining the width to the middle */
    max-width: 1000px !important; 
    width: 90%; 
    
    overflow: hidden !important;
}

.twilight-mode .website-container {
    background: #f0f0f0;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
}
.sparkle {
    position: absolute;
    background: gold;
    /* This creates a diamond/star shape */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    pointer-events: none; /* Crucial: so you can click through them */
    z-index: 10000005;
    animation: sparkle-fade 1.5s linear forwards;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

@keyframes sparkle-fade {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        /* Uses the --drift variable from your JS */
        transform: translate(var(--drift), 40px) scale(0) rotate(180deg);
        opacity: 0;
    }
}
/* --- 4. HEADER & TICKER --- */
header {
    background: linear-gradient(45deg, var(--hot-pink), var(--baby-blue));
    background-image: url("https://media.tenor.com/8vRiuPLm7z8AAAAM/hermosos-caballos-horse.gif");
    padding: 20px;
    text-align: center;
}

header h1 {
    color: white;
    text-shadow: 3px 3px #000;
    font-size: 3rem;
    margin: 0;
    letter-spacing: 2px;
}

.news-ticker {
    background-image: url("https://i.pinimg.com/originals/1e/04/f1/1e04f1e51f9da17a4a0aa9be1a5cd6d2.gif");
    color: #3800a1;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
}

.ticker-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 15s linear infinite;
    font-weight: bold;
}

@keyframes marquee-scroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* --- 5. MAIN CONTENT & NAV --- */
.main-flex {
    display: flex;
    min-height: 500px;
    align-items: stretch; /* Ensures nav and main stay equal height */
}

nav {
    width: 200px; /* Sidebar width restored */
    flex-shrink: 0; /* Prevents sidebar from squishing */
    background: var(--silver);
    border-right: 2px solid #888;
    padding: 15px;
}

main {
    flex: 1; /* Takes up the rest of the container width */
    padding: 30px;
    background: white;
    min-width: 0; /* Prevents content from overflowing the flex item */
}

nav a {
    display: block;
    text-decoration: none;
    background: #eee;
    color: black;
    padding: 8px;
    border: 2px outset white;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}
#instagram-logo {
    display: block;
    text-decoration: none;
    background: #fff;
    color: black;
    padding: 1px;
    border: none;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    cursor: url('/images/cursorOpen.webp'), pointer !important;}

nav a:hover {
    background: #00ff44;
    background-blend-mode: lighten;
}

nav ul {
    list-style: none;
    padding-left: 0;
}

.active {
    background-image: url("/images/ride.gif");
    background-size: contain;
    color: white;
}

.active:hover { 
    background-image: url("/images/ride.gif");
    background-size: contain;
    background: #00ff44;
    background-blend-mode: lighten;
    color: white;
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}
.specialactive {
    background-image: url("/images/wtbtlt.jpeg");
    background-size: contain;
    color: black;
}

.specialactive:hover { 
    background-image: url("/images/wtbtlt.jpeg");
    background-size: contain;
    background: #00ff44;
    background-blend-mode: lighten;
    color: white;
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}
.welcome-box {
    border: 2px dashed var(--hot-pink);
    padding: 15px;
    margin-bottom: 20px;
    background: #fffafa;
}

.new-badge {
    background: red;
    color: white;
    padding: 2px 5px;
    font-size: 0.7rem;
    font-weight: bold;
    vertical-align: top;
    border-radius: 5px;
}

.blink {
    animation: blinker 1s linear infinite;
    color: #ff00ff;
    font-weight: bold;
}

@keyframes blinker {
    50% { opacity: 0; }
}

/* --- 6. IPOD PLAYER (DESKTOP) --- */
#draggable-player.ipod-nano {
    visibility: hidden;
    width: 160px;
    height: 270px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 
        inset 1px 1px 2px rgba(255,255,255,0.8),
        inset -1px -1px 2px rgba(0,0,0,0.2),
        5px 5px 15px rgba(0,0,0,0.3);
    background-color: #e0e0e0;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999; 
    cursor: grab !important;
    pointer-events: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    user-select: none;
}

#player-content.color-screen {
    width: 135px;
    height: 110px;
    background: #ffffff;
    border: 2px solid #222;
    border-radius: 3px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    cursor: url('/images/cursor.webp'), auto;
    pointer-events: auto !important;
}

.screen-top {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

.screen-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.album-art {
    max-height: 40px; 
    width: 40px;
    border: 1px solid #999;
    flex-shrink: 0;
    background: #000;
}

.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.track-info {
    font-family: 'Arial', sans-serif;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
}

#display-title {
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#display-artist, #display-album {
    font-size: 9px;
    color: #555;
}

.progress-section {
    width: 100% !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.time-labels {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

#current-time, #duration-time {
    font-family: monospace;
    font-size: 10px;
    color: #333;
    min-width: 30px;
}

.progress-bar-bg {
    width: 100% !important;
    height: 6px !important;
    background: #d1d1d1 !important;
    border: 1px solid #999;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    cursor: url('/images/cursorOpen.webp'), pointer !important;
    pointer-events: auto !important;
}

#progress-fill {
    width: 0%;
    height: 100%;
    background: #0080ff !important;
}

.click-wheel {
    margin-top: 20px;
    width: 110px;
    height: 110px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    position: relative;
    box-shadow: inset 0px 2px 5px rgba(0,0,0,0.05);
    pointer-events: auto !important;
}

.center-button {
    width: 40px;
    height: 40px;
    background: #e8e8e8;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    z-index: 30;
    cursor: pointer !important;
}

.wheel-button {
    position: absolute;
    font-family: sans-serif;
    font-size: 9px;
    font-weight: bold;
    color: rgba(0,0,0,0.4);
    cursor: pointer !important;
    z-index: 20;
}

.menu-btn { top: 8px; left: 50%; transform: translateX(-50%); }
.prev-btn { left: 8px; top: 50%; transform: translateY(-50%); }
.next-btn { right: 8px; top: 50%; transform: translateY(-50%); }
.play-pause-label { bottom: 8px; left: 50%; transform: translateX(-50%); }

/* --- 7. SPECIAL EFFECTS --- */
.pixel-trail {
    position: absolute;
    height: 2px;
    width: 4px;
    z-index: 1000004;
    animation: pixel-smear 1.0s linear forwards;
}

@keyframes pixel-smear {
    0% { width: 0px; opacity: 1; }
    100% { width: 400px; opacity: 0; transform: translateX(var(--drift-x)); }
}

.theme-icon-container {
    position: absolute;
    bottom: 100px;
    left: 20px;
    z-index: 1000003;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}

.theme-icon-container:hover {
    transform: scale(1.2) rotate(10deg);
}

.hit-counter {
    background-image: url("/images/catkiss.gif");
    background-size: cover;
    color: white;
    padding: 5px 10px;
    font-family: quicksand;
    text-shadow: 2px 2px 0px #000;
    border: 2px inset var(--silver);
    justify-content: center;
    align-items: center;
    display: flex;   
    flex-direction: column;/* Changed from inline-block to block */
    margin-left: auto;   /* Magic for horizontal centering */
    margin-right: auto;
    width: fit-content;  /* Prevents it from stretching to full width */
    text-align: center;
}

.floating-pony {
    position: absolute;
    z-index: 1000005;
    pointer-events: none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.1));
}

.draggable-window {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 180px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    z-index: 1000;
}

.window-header {
    background: #000080;
    color: white;
    padding: 2px 6px;
    cursor: grab;
    font-size: 12px;
    font-weight: bold;
}

.window-content { padding: 10px; }
.link-row {
    display: block;
    padding: 5px;
    margin-bottom: 5px;
    background: #eee;
    border: 1px solid #808080;
    color: black;
    text-decoration: none;
    text-align: center;
}

/* --- 8. MOBILE LAYOUT --- */
#mobile-toggle { display: none; }
#mini-play-pause {display: none;}

/* --- 8. MOBILE LAYOUT --- */
#mobile-toggle { display: none; }
#mini-play-pause { display: none; }

@media (max-width: 600px) {
    html, body { overflow-x: hidden !important; position: relative; }
    body { padding: 10px !important; padding-bottom: 100px !important; }
    .website-container { max-width: 100vw; width: 95%; }

    nav { width: 100% !important; }
    nav ul { 
      display: flex !important; 
        flex-direction: row !important; /* Forces them into a line */
        flex-wrap: nowrap !important;   /* Keeps them on one bar */
        overflow-x: auto !important;    /* Allows swiping if there are too many links */
        justify-content: flex-start !important; 
        gap: 5px !important; 
        padding: 5px 10px !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch; /* Smooth swiping on iPhones */ 
      }
nav a { 
        flex: 0 0 auto !important; /* Prevents buttons from shrinking */
        display: inline-block !important;
        padding: 2px 5px !important;
        margin-bottom: 0 !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important; /* Prevents text from wrapping inside buttons */
    }
    .main-flex { flex-direction: column !important; }
    main { width: 100% !important; padding: 5px !important; }

    /* FULL IPOD STATE - NOW MATCHES DESKTOP DESIGN */
    #draggable-player.ipod-nano:not(.minimized) {
        display: flex !important;
        position: fixed !important;
        top: 50% !important; 
        left: 50% !important;
        transform: translate(-50%, -50%) scale(1.4); /* Scales up to look "full screen" but keeps design */
        width: 160px !important; 
        height: 270px !important;
        z-index: 1000006;
        visibility: visible !important;
    }

    /* THE METALLIC CIRCULAR MINIMISE BUTTON */
    #mobile-toggle {
        display: flex !important;
        position: absolute !important;
        top: -15px; 
        left: -15px;
        width: 25px;
        height: 25px;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #c0c0c0 100%) !important;
    border: 1px solid #999 !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
    z-index: 1000010 !important;
}

    /* MINIMIZED BAR STATE */
#draggable-player.ipod-nano.minimized {
    /* CHANGE THIS VALUE */
    height: 90px !important; 
    
    width: 100vw !important; 
    bottom: 0 !important;
    left: 0 !important;
    position: fixed !important;
    /* ... other styles ... */
}

    #draggable-player.minimized .click-wheel { display: none !important; }

/* --- PERFECT BUTTON ALIGNMENT --- */
#draggable-player.ipod-nano.minimized {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important; /* Reset padding so we control the lane manually */
    height: 90px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
}

/* THE SHARED ALIGNMENT (The "Lane") */
#draggable-player.minimized #mobile-toggle,
#draggable-player.minimized #mini-play-pause {
    display: flex !important;
    position: absolute !important;
    /* This centers the 32px button in a 55px wide lane */
    left: 12px !important; 
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #c0c0c0 100%) !important;
    border: 1px solid #999 !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
    z-index: 1000010 !important;
}

/* TOP BUTTON (Maximize) */
#draggable-player.minimized #mobile-toggle {
    top: 9px !important; /* Equal distance from top */
    bottom: auto !important;
}

/* BOTTOM BUTTON (Play/Pause) */
#draggable-player.minimized #mini-play-pause {
    bottom: 9px !important; /* Equal distance from bottom */
    top: auto !important;
}

/* THE SCREEN (Shifted to respect the button lane) */
#draggable-player.minimized #player-content.color-screen {
    margin-left: 35px !important; /* Creates the empty lane on the left */
    margin-left: 35px !important; /* Creates the empty lane on the left */
    width: calc(100% - 65px) !important;
    height: 72px !important;
    background: #fff !important;
    border: 1px solid #999 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
  #progress-fill {
    width: 0%;
    height: 100%;
    background: #0080ff !important; /* <--- CHANGE THIS HEX CODE */
}
.theme-icon-container {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        bottom: auto !important; /* Overrides the 'bottom: 100px' from desktop */
        width: 30px !important;   /* Makes it smaller */
        height: 30px !important;
        z-index: 1000008 !important; /* Keeps it above the iPod layers */
    }

    .theme-icon-container img {
        width: 100% !important;
        height: auto !important;
        filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
    }
    .moon-module {
        display: none !important;
    }
}
/* --- MEDIEVAL LINKS WINDOW --- */
.draggable-window {
    position: fixed;
    width: 280px;
    background: black; /* Parchment color */
    background-image: url('https://i.pinimg.com/1200x/db/5c/e5/db5ce5301dfe6e9490388c1de3b1835a.jpg'); /* Paper texture */
    background-size: cover;
    border: 6px double #3d2b1f; /* "Forged Iron" border */
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5), inset 0 0 50px rgba(0,0,0,0.1);
    font-family: "Old English Text MT", "Blackletter", serif; /* Fallback to serif */
    z-index: 100000;
    padding: 2px;
    border: 30px solid transparent; /* This creates the "space" for your frame */
    border-image-source: url('/images/frame.webp'); /* <--- CHANGE TO YOUR FILENAME */
    border-image-slice: 150; /* Adjust this number until the corners look right */
    border-image-repeat: round; /* This tiles the edges smoothly */
    top: 200px;
    left: 100px;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
    padding: 0; /* Keep internal padding tight to the frame */
}

/* THE TITLE BAR (Iron Handle) */
.window-header {
    background: #2a1b0a;
    background-image: url("https://i.pinimg.com/736x/1a/85/c8/1a85c8170cf68f884a7b08f28c603a25.jpg");
    background-size: fill;
    color: #d4af37 !important; /* Gold text */
    letter-spacing: 2px;
    font-weight: bold;
    border-bottom: 2px solid #d4af37;
    padding: 8px !important;
    cursor: pointer;
    text-align: left;
    user-select: none; 
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none;
}

/* THE CONTENT AREA */
.window-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* MEDIEVAL LINKS */
.link-row {
    display: block;
    text-decoration: none;
    color: #5d1a1a !important; /* Dried blood red */
    font-size: 1.2rem;
    padding: 5px;
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    text-align: center;
}

.link-row:before {
    content: "🕯️ "; /* Candle icon before links */
}

.link-row:after {
    content: " 🕯️";
}

.link-row:hover {
    background: rgba(212, 175, 55, 0.2); /* Gold glow */
    color: #000 !important;
    transform: scale(1.05);
    border-bottom: 1px solid #3d2b1f;
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}
/* --- MUSIC GALLERY GRID --- */
.music-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.release-card {
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s;
}

.release-card img {
    width: 50%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
.release-card:hover {
    transform: scale(1.1);
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}

.release-name {
    margin-top: 8px;
}

/* --- EXPANDABLE LINKS --- */
.expandable-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-image: url("https://media.tenor.com/xADg2WPh76EAAAAM/cavalos.gif"); /* Parchment tint */
    background-size: fill;
    display: flex;
    flex-direction: column;
}

.expandable-links.open {
    max-height: 150px; /* Adjust based on number of links */
    padding: 10px 0;
    margin-top: 10px;
}

.expandable-links a {
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    padding: 5px;
    cursor: url('/images/cursorOpen.webp'), pointer !important;

}

.expandable-links a:hover {
    text-decoration: underline;
    color: var(--hot-pink);
    cursor: url('/images/cursorOpen.webp'), pointer !important;

}
/* MOBILE ADJUSTMENT */
@media (max-width: 600px) {
.draggable-window {display: none;}
footer {
        display: flex;
        flex-direction: column !important; /* Stack items vertically */
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        gap: 5px; /* Space between the three sections */
        padding-bottom: 55px !important; /* Extra padding so the iPod doesn't cover the text */
    }

    .footer-info {
        text-align: center !important;
        order: 3; /* Moves copyright to the very bottom */
    }

    .hit-counter {
        order: 2; /* Keeps counter in the middle */
        transform: scale(0.9); /* Slightly smaller to fit better */
    }

    .social-links {
        order: 1; /* Puts Instagram at the top of the footer stack */
    }

    /* Make the hit counter gif feel more responsive */
    .hit-counter {
        width: 100% !important;
        max-width: 200px;
    }
}

.insta-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--hot-pink);
    padding: 5px 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.feather feather-instagram {
  stroke: #ff00ff; 
  }
.insta-link svg {
    stroke: #ff00ff;
    transition: stroke 0.3s ease;
}

.insta-link:hover {
    filter: drop-shadow(0 0 8px var(--hot-pink));    
    transform: translateY(-2px);
}

.insta-link:hover svg {
    stroke: #ff00ff;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5)); /* Gold glow */
}
  .willthis {
    background-image: url("/images/wtbtlt.jpeg");
        background-size: contain;
    }
  .willthis:hover { 
    background-image: url("/images/wtbtlt/3.gif");
    background-size: contain;
    color: white;
    cursor: url('/images/cursorOpen.webp'), pointer !important;
}