/* Prevent layout shift when content height changes (accordion open/close) */
html {
  overflow-y: scroll;         /* legacy fallback */
  scrollbar-gutter: stable;   /* modern: keep gutter reserved even when not scrolling */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.nav-bar {
    width: 350px; /* Matches the 350px width of the CD cover image */
    background: linear-gradient(180deg, rgba(250, 250, 255, 0.9), rgba(200, 200, 200, 0.8));
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    border-radius: 8px; /* Matches the border-radius of buttons */
    margin-top: 10px; /* Adds spacing from top of viewport */
}

.nav-button {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-button:hover, .nav-button:active {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.container {
    max-width: 100%;
    width: 100%;
    padding: 20px;
    text-align: center;
}

header {
    margin-bottom: 30px;
}

h1 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 5px;
}

.cd-cover {
    width: 350px;
    height: 350px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cd-cover-art {
    width: 350px;
    height: 350px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #a93226
}

.img-border-red {
    border-radius: 8px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #a93226
}

.cd-cover-games {
    width: 350px;
    height: 350px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #ff9900
}

.cd-cover-music {
    width: 350px;
    height: 350px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #6c3483
}

.cd-cover-support {
    width: 350px;
    height: 350px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #1e8449
}

.cd-cover-home-art {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #a93226
}

.cd-cover-home-music {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #6c3483
}

.cd-cover-home-games {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #ff9900
}

.cd-cover-home-support {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-color: #1e8449
}



.links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center; /* Center buttons to align with 350px width */
}

.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-size: 1.1em;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    touch-action: manipulation;
    width: 350px; /* Matches the 350px width of the CD cover image */
}

.link-button i {
    margin-right: 10px;
}

.link-button:hover, .link-button:active {
    transform: scale(1.02);
    opacity: 0.9;
}

/* Brand-specific colors */
.tidal {
    background-color: #000000; /* Tidal Black */
}

.apple {
    background-color: #666666; /* Apple Black */
}

.youtube {
    background-color: #FF0000; /* YouTube Red */
}

.deezer {
    background-color: #FEAA2B; /* Deezer Orange */
}

.qobuz {
    background-color: #222222; /* Deezer Orange */
}


.spotify {
    background-color: #1DB954; /* Spotify Green */
}

.amazon {
    background-color: #00A1D6; /* Amazon Blue */
}

footer {
    margin-top: 30px;
    font-size: 0.9em;
    color: #999;
}

/* Media query for larger screens */
@media (min-width: 600px) {
    .container {
        max-width: 400px;
    }

    .cd-cover {
        width: 350px;
        height: 350px;
    }

    .nav-bar {
        width: 350px; /* Maintain 350px width on larger screens */
    }

    .link-button {
        width: 350px; /* Maintain 350px width on larger screens */
    }
}

/* Top Category menu */
.category-menu {
            text-align: center;
            padding: 12px 0;
            background-color: #f8f8f8;
            border-bottom: 2px solid #ddd;
        }
        .category-menu-wrapper {
            display: inline-block;
			width: 350px;
		}

        .category-button {
			padding: 8px 12px; /* Reduced padding for tighter fit */
            margin: 0 6px;     /* Reduced margin */
            font-size: 15px;   /* Slightly smaller font */            
			font-weight: bold;
            cursor: pointer;
            border: none;
            background: none;
            transition: all 0.3s ease;
            border-radius: 4px;
        }
        .category-button:hover {
            transform: translateY(-2px);
        }

        /* Games - Orange */
        .category-button.games { color: #ff9900; }
        .category-button.games:hover { background-color: #fdf0e6; }
        .category-button.games.active {
            color: #ff6600;
            background-color: #fce8d5;
            border-bottom: 3px solid #ff6600;
        }

        /* Music - Violet */
        .category-button.music { color: #8e44ad; }
        .category-button.music:hover { background-color: #f4e8f9; }
        .category-button.music.active {
            color: #6c3483;
            background-color: #ebdcff;
            border-bottom: 3px solid #6c3483;
        }

        /* Art - Red */
        .category-button.art { color: #c0392b; }
        .category-button.art:hover { background-color: #fbeaea; }
        .category-button.art.active {
            color: #a93226;
            background-color: #f7d4d4;
            border-bottom: 3px solid #a93226;
        }

        /* Support - Green */
        .category-button.support { color: #27ae60; }
        .category-button.support:hover { background-color: #e8f7ee; }
        .category-button.support.active {
            color: #1e8449;
            background-color: #d0f0db;
            border-bottom: 3px solid #1e8449;
        }

.text-red { color: #a93226; }
.text-orange { color: #ff6600; }
.text-violet { color: #6c3483; }
.text-green { color: #1e8449; }
.text-black-small {font-size: .75em; color: #000000; }

/* font size 1.5 times the default font size (24px) */
.song-title-red {font-size: 1.5em; font-weight: bold; color: #a93226; }
.song-title-orange {font-size: 1.5em; font-weight: bold; color: #ff6600; }
.song-title-violet {font-size: 1.5em; font-weight: bold; color: #6c3483; }
.song-title-green {font-size: 1.5em; font-weight: bold; color: #1e8449; }


A.link-red:link {text-decoration: none; color: #a93226;}
A.link-red:visited {text-decoration: none; color: #a93226;}
A.link-red:active {text-decoration: none; color: #CC2F1F;}
A.link-red:hover {text-decoration: underline; color: #CC2F1F;}

A.link-orange:link {text-decoration: none; color: #ff6600;}
A.link-orange:visited {text-decoration: none; color: #ff6600;}
A.link-orange:active {text-decoration: none; color: #FF8E00;}
A.link-orange:hover {text-decoration: underline; color: #FF8E00;}

A.link-violet:link {text-decoration: none; color: #6c3483;}
A.link-violet:visited {text-decoration: none; color: #6c3483;}
A.link-violet:active {text-decoration: none; color: #51339A;}
A.link-violet:hover {text-decoration: underline; color: #6c3483;}

A.link-green:link {text-decoration: none; color: #1e8449;}
A.link-green:visited {text-decoration: none; color: #156035;}
A.link-green:active {text-decoration: none; color: #1AA354;}
A.link-green:hover {text-decoration: underline; color: #19CC65;}

/* Crypto collapsible buttons*/
		.crypto-section-wrapper {display:flex;justify-content:center;margin:0 0 0 0;}
        .crypto-section {width:340px;max-width:100%;box-sizing:border-box;}
        .crypto-section h3 {text-align:center;color:#333;margin:0 0 15px 0;font-size:18px;}

        .crypto-toggle {
            width:100%;padding:12px 16px;margin-bottom:8px;font-size:15px;font-weight:bold;text-align:left;color:white;
            border:none;border-radius:6px;cursor:pointer;transition:background .3s;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;
        }
        .crypto-toggle:hover {opacity:0.9;}
        .crypto-toggle i {transition:transform .3s;}
        .crypto-toggle[aria-expanded="true"] i {transform:rotate(180deg);}

        .crypto-toggle.bitcoin {background:#f7931a;}.crypto-toggle.bitcoin:hover {background:#e67e22;}
        .crypto-toggle.monero {background:#ff6600;}.crypto-toggle.monero:hover {background:#e65c00;}
        .crypto-toggle.ethereum {background:#627eea;}.crypto-toggle.ethereum:hover {background:#526ecc;}
        .crypto-toggle.dogecoin {background:#c2a633;}.crypto-toggle.dogecoin:hover {background:#b5962c;}
        .crypto-toggle.litecoin {background:#345d9d;}.crypto-toggle.litecoin:hover {background:#2e5490;}
        .crypto-toggle.solana {background:#00ffa3;}.crypto-toggle.solana:hover {background:#00e699;}
        .crypto-toggle.ripple {background:#00aae4;}.crypto-toggle.ripple:hover {background:#0099cc;}

		.crypto-toggle.art {background:#AB0000;}.crypto-toggle.ripple:hover {background:#DF0000;}



        .crypto-content {
            width:100%;overflow:hidden;border-radius:6px;box-sizing:border-box;
            margin-bottom:8px;padding:0 16px;max-height:0;
            transition:max-height .6s cubic-bezier(.4,0,.2,1),padding-top .6s cubic-bezier(.4,0,.2,1),padding-bottom .6s cubic-bezier(.4,0,.2,1);
        }
.crypto-content.red {background:#FDF9F9;border:1px solid #E8C0C0;}
.crypto-content.green {background:#f9fdfa;border:1px solid #c0e8d0;}
.crypto-content.orange {background:#FDFBF9;border:1px solid #E8DAC0;}
.crypto-content.purple {background:#FAF9FD;border:1px solid #CFC0E8;}


        .crypto-content.open {
            max-height:100%;   /* Reduced — plenty for QR + text */
            padding:16px;
        }

        .address-container {display:flex;align-items:center;background:#f0f0f0;padding:8px 12px;border-radius:4px;margin:6px 0;}
        .address {flex:1;font-family:monospace;font-size:14px;word-break:break-all;margin-right:10px;}
        .copy-btn {padding:6px 12px;background:#27ae60;color:white;border:none;border-radius:4px;cursor:pointer;font-size:13px;transition:background .3s;}
        .copy-btn:hover {background:#1e8449;}

        .qr-code {
            display:block;max-width:100%;height:auto;margin:15px auto;
            image-rendering:-webkit-optimize-contrast;
        }