@property --drip-offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.neon-drip {
  --drip-offset: 0px;
  --drip-speed: 1;
  background: paint(neon-drip);
  animation: drip-flow 3s infinite linear;
}

@keyframes drip-flow {
  to { --drip-offset: 50px; }
}

/* Define root variables for default fallbacks */
:root {
/* Default theme - clean, modern, and compatible */
--primary: #2196f3;
--secondary: #673ab7;
--accent: #00bcd4;
--dark: #121212;
--glass: rgba(255, 255, 255, 0.1);
--glow: rgba(33, 150, 243, 0.3);
--rgb-glow: linear-gradient(45deg, #2196f3, #673ab7, #00bcd4);
--text-color: rgba(255, 255, 255, 0.87);
--background: linear-gradient(135deg, #121212, #1a1a1a);
--card-background: rgba(255, 255, 255, 0.05);
--border-color: rgba(255, 255, 255, 0.12);

/* Oracle Mode Buttons */
.oracle-modes {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}

.mode-btn {
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 0.5rem 1rem;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
font-size: 0.8rem;
}

.mode-btn.active {
background: var(--primary);
color: var(--dark);
box-shadow: 0 0 15px var(--glow);
}

.mode-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 10px var(--glow);
}

/* Oracle Options */
.oracle-options {
margin: 1rem 0;
}

#genreSelect {
width: 100%;
padding: 0.8rem;
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--text-color);
border-radius: 8px;
font-family: 'Space Grotesk', sans-serif;
margin-bottom: 1rem;
}

.compatibility-inputs {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}

.compatibility-inputs input {
flex: 1;
padding: 0.8rem;
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--text-color);
border-radius: 8px;
font-family: 'Space Grotesk', sans-serif;
}

/* Prophecy History */
.oracle-history {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}

.oracle-history h3 {
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
font-size: 0.9rem;
margin-bottom: 1rem;
}

.prophecy-item {
background: var(--glass);
padding: 0.8rem;
border-radius: 8px;
margin-bottom: 0.8rem;
font-size: 0.9rem;
color: var(--text-color);
transition: all 0.3s ease;
}

.prophecy-item:hover {
transform: translateX(5px);
background: var(--rgb-glow);
background-size: 200% 200%;
animation: rgbShift 3s linear infinite;
}


/* Fallback colors for older browsers */
background-color: #121212;
color: #ffffff;

/* Magic Oracle Styling */
.magic-search {
background: linear-gradient(135deg, 
  rgba(255, 255, 255, 0.1),
  rgba(255, 255, 255, 0.05) 50%,
  rgba(255, 255, 255, 0.1)
);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 2rem;
max-width: 500px;
margin: 2rem auto;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

.magic-search::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
  circle at center,
  var(--primary) 0%,
  transparent 70%
);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}

.magic-search.pulse-glow::before {
animation: oraclePulse 1.5s ease-out;
}

@keyframes oraclePulse {
0% { opacity: 0; transform: scale(0.8); }
50% { opacity: 0.2; transform: scale(1.1); }
100% { opacity: 0; transform: scale(1.2); }
}

@keyframes oracleReveal {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 1; transform: translateY(0); }
}

#magicAnswer {
background: linear-gradient(90deg, 
  transparent, 
  rgba(255, 255, 255, 0.1),
  transparent
);
padding: 1rem;
border-radius: 10px;
font-family: 'Syncopate', sans-serif;
letter-spacing: 2px;
text-shadow: 0 0 10px var(--glow);
margin-top: 1.5rem;
}

.magic-search-bar {
position: relative;
display: flex;
gap: 1rem;
}

.magic-search-bar input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 1rem;
color: var(--text-color);
font-family: 'Space Grotesk', sans-serif;
}

.magic-search-bar button {
background: var(--primary);
color: var(--dark);
border: none;
border-radius: 8px;
padding: 0 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}

.magic-search-bar button:hover {
transform: scale(1.05);
box-shadow: 0 0 15px var(--glow);
}

--glow-intensity: 0;
--drip-offset: 0px;
--time: 0deg;
--reveal: 0%;
--flip-angle: 0deg;
--hue: 0deg;
}

/* Modern Property Definitions */
@property --drip-offset {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}

@property --glow-intensity {
syntax: '<number>';
inherits: true;
initial-value: 0;
}

/* Normal Mode - Subtle futuristic glow with layered gradients */
[data-theme="normal"] {
--primary: #00f7ff;
--secondary: #ff00f7;
--accent: #7B68EE;
--dark: #0a0a0a;
--glass: rgba(255, 255, 255, 0.1);
--glow: rgba(0, 247, 255, 0.5);
--rgb-glow: linear-gradient(45deg, #00f7ff 0%, #ff00f7 50%, #7B68EE 100%);
--text-color: rgba(255, 255, 255, 0.9);
--background: radial-gradient(circle at 50% 50%, #1a1a1a, #0a0a0a);
--card-background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 247, 255, 0.1));
--border-color: rgba(0, 247, 255, 0.3);
}

/* Satin Mode - Silky shimmer with metallic sheen */
[data-theme="satin"] {
--primary: #FFD700;
--secondary: #FF6347;
--accent: #DA70D6;
--dark: #1C2526;
--glass: rgba(255, 215, 0, 0.15);
--glow: rgba(255, 215, 0, 0.6);
--rgb-glow: linear-gradient(90deg, #FFD700 0%, #FF6347 50%, #DA70D6 100%);
--text-color: rgba(255, 245, 238, 0.95);
--background: linear-gradient(120deg, #1C2526, #2E3839);
--card-background: conic-gradient(from 45deg, rgba(255, 215, 0, 0.1), rgba(255, 99, 71, 0.15), rgba(255, 215, 0, 0.1));
--border-color: rgba(255, 215, 0, 0.25);
}

/* Frosted Mode - Cool, icy glass effect with blur */
[data-theme="frosted"] {
--primary: #00CED1;
--secondary: #FF69B4;
--accent: #6A5ACD;
--dark: #F5F5F5;
--glass: rgba(255, 255, 255, 0.35);
--glow: rgba(0, 206, 209, 0.7);
--rgb-glow: linear-gradient(60deg, #00CED1, #FF69B4, #6A5ACD);
--text-color: #333333;
--background: radial-gradient(circle, #F5F5F5, #E0E8E8);
--card-background: rgba(255, 255, 255, 0.7);
--border-color: rgba(0, 206, 209, 0.3);
}

/* Veazy Mode - Neon green cybernetic pulse */
[data-theme="veazy"] {
--primary: #00ff00;
--secondary: #47ff47;
--accent: #83ff83;
--dark: #1a1a1a;
--glass: rgba(188, 255, 188, 0.15);
--glow: rgba(244, 255, 244, 0.6);
--rgb-glow: linear-gradient(45deg, #00ff00, #47ff47, #83ff83);
--text-color: #f4fff4;
--background: linear-gradient(135deg, #1a1a1a, #2e2e2e);
--card-background: rgba(188, 255, 188, 0.1);
--border-color: rgba(244, 255, 244, 0.25);
}

/* Satin Mode - Silky shimmer with metallic sheen */
[data-theme="satin"] {
--primary: #FFD700;
--secondary: #FF6347;
--accent: #DA70D6;
--dark: #1C2526;
--glass: rgba(255, 215, 0, 0.15);
--glow: rgba(255, 215, 0, 0.6);
--rgb-glow: linear-gradient(90deg, #FFD700 0%, #FF6347 50%, #DA70D6 100%);
--text-color: rgba(255, 245, 238, 0.95);
--background: linear-gradient(120deg, #1C2526, #2E3839);
--card-background: conic-gradient(from 45deg, rgba(255, 215, 0, 0.1), rgba(255, 99, 71, 0.15), rgba(255, 215, 0, 0.1));
--border-color: rgba(255, 215, 0, 0.25);
}

/* Frosted Mode - Cool, icy glass effect with blur */
[data-theme="frosted"] {
--primary: #00CED1;
--secondary: #FF69B4;
--accent: #6A5ACD;
--dark: #F5F5F5;
--glass: rgba(255, 255, 255, 0.35);
--glow: rgba(0, 206, 209, 0.7);
--rgb-glow: linear-gradient(60deg, #00CED1, #FF69B4, #6A5ACD);
--text-color: #333333;
--background: radial-gradient(circle, #F5F5F5, #E0E8E8);
--card-background: rgba(255, 255, 255, 0.7);
--border-color: rgba(0, 206, 209, 0.3);
}

/* Veazy Mode - Neon green cybernetic pulse */
[data-theme="veazy"] {
--primary: #00ff00;
--secondary: #47ff47;
--accent: #83ff83;
--dark: #1a1a1a;
--glass: rgba(188, 255, 188, 0.15);
--glow: rgba(244, 255, 244, 0.6);
--rgb-glow: linear-gradient(45deg, #00ff00, #47ff47, #83ff83);
--text-color: #f4fff4;
--background: linear-gradient(135deg, #1a1a1a, #2e2e2e);
--card-background: rgba(188, 255, 188, 0.1);
--border-color: rgba(244, 255, 244, 0.25);
}
body[data-theme="veazy"] {
animation: pulse 4s infinite;
}

/* White Mode - Minimalist with subtle shimmer */
[data-theme="white"] {
--primary: #ffffff;
--secondary: #cccccc;
--accent: #999999;
--dark: #000000;
--glass: rgba(255, 255, 255, 0.2);
--glow: rgba(255, 255, 255, 0.4);
--rgb-glow: linear-gradient(45deg, #ffffff, #cccccc, #999999);
--text-color: #ffffff;
--background: #000000;
--card-background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(204, 204, 204, 0.05));
--border-color: rgba(255, 255, 255, 0.15);
}

/* Black Mode - Clean void with no glow or shadow */
[data-theme="black"] {
--primary: #333333;
--secondary: #4d4d4d;
--accent: #666666;
--dark: #1a1a1a;
--glass: rgba(255, 255, 255, 0.1);
--glow: rgba(0, 0, 0, 0);
--rgb-glow: none;
--text-color: #ffffff;
--background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
--card-background: rgba(255, 255, 255, 0.05);
--border-color: rgba(128, 128, 128, 0.3);
}

/* All White Mode - Pure light with holographic shine */
[data-theme="all-white"] {
--primary: #999999;
--secondary: #666666;
--accent: #888888;
--dark: #FFFFFF;
--glass: rgba(245, 245, 245, 0.25);
--glow: rgba(255, 255, 255, 0.6);
--rgb-glow: linear-gradient(45deg, #FFFFFF, #F5F5F5, #EDEDED);
--text-color: #666666;
--background: conic-gradient(from 0deg, #FFFFFF, #F0F0F0, #FFFFFF);
--card-background: rgba(245, 245, 245, 0.35);
--border-color: rgba(237, 237, 237, 0.25);
}

[data-theme="all-white"] p,
[data-theme="all-white"] .review-card p,
[data-theme="all-white"] .track-highlight-item p,
[data-theme="all-white"] .glass-card p {
color: #666666;
}

/* All Red Mode - Fiery intensity with heatwave distortion */
[data-theme="all-red"] {
--primary: #FF0000;
--secondary: #E50000;
--accent: #CC0000;
--dark: #660000;
--glass: rgba(255, 0, 0, 0.2);
--glow: rgba(255, 0, 0, 0.7);
--rgb-glow: linear-gradient(45deg, #FF0000, #E50000, #CC0000);
--text-color: #FFFFFF;
--background: radial-gradient(circle, #660000, #330000);
--card-background: rgba(102, 0, 0, 0.25);
--border-color: rgba(153, 0, 0, 0.3);
}
body[data-theme="all-red"] {
animation: heatwave 3s infinite;
}

/* All Blue Mode - Oceanic depth with wave animation */
[data-theme="all-blue"] {
--primary: #0000FF;
--secondary: #0000E5;
--accent: #0000CC;
--dark: #000066;
--glass: rgba(0, 0, 255, 0.2);
--glow: rgba(0, 0, 255, 0.7);
--rgb-glow: linear-gradient(45deg, #0000FF, #0000E5, #0000CC);
--text-color: #FFFFFF;
--background: linear-gradient(135deg, #000066, #000033);
--card-background: rgba(0, 0, 102, 0.25);
--border-color: rgba(0, 0, 153, 0.3);
}
body[data-theme="all-blue"] {
animation: wave 6s infinite;
}

/* Pink Rose Mode - Floral elegance with petal-like gradients */
[data-theme="pink-rose"] {
--primary: #F2C4DE;
--secondary: #FFC5D3;
--accent: #EA76CB;
--dark: #DC8A78;
--glass: rgba(242, 196, 222, 0.15);
--glow: rgba(234, 118, 203, 0.6);
--rgb-glow: linear-gradient(45deg, #F2C4DE, #FFC5D3, #EA76CB);
--text-color: #333333;
--background: radial-gradient(circle at bottom right, #DD7878, #FFB6C1);
--card-background: conic-gradient(from 90deg, rgba(242, 196, 222, 0.2), rgba(234, 118, 203, 0.15));
--border-color: rgba(220, 138, 120, 0.25);
}

/* Blue Sky Mode - Airy expanse with cloud-like effects */
[data-theme="blue-sky"] {
--primary: #71B1D9;
--secondary: #AED8F2;
--accent: #B3EBF2;
--dark: #71B1D9;
--glass: rgba(174, 216, 242, 0.25);
--glow: rgba(113, 177, 217, 0.6);
--rgb-glow: linear-gradient(45deg, #71B1D9, #AED8F2, #B3EBF2);
--text-color: #333333;
--background: linear-gradient(to top, #AED8F2, #87CEEB);
--card-background: rgba(179, 235, 242, 0.35);
--border-color: rgba(113, 177, 217, 0.3);
}

/* Yellow Beige Mode - Warm sands with subtle shimmer */
[data-theme="yellow-beige"] {
--primary: #F2DEA2;
--secondary: #FDFD96;
--accent: #F2DEA2;
--dark: #FDFD96;
--glass: rgba(242, 222, 162, 0.25);
--glow: rgba(253, 253, 150, 0.6);
--rgb-glow: linear-gradient(45deg, #F2DEA2, #FDFD96, #F2DEA2);
--text-color: #333333;
--background: radial-gradient(circle, #FDFD96, #F5E050);
--card-background: rgba(242, 222, 162, 0.35);
--border-color: rgba(242, 222, 162, 0.3);
}

/* Green Mode - Lush forest with organic flow */
[data-theme="green"] {
--primary: #77DD77;
--secondary: #77DD77;
--accent: #77DD77;
--dark: #77DD77;
--glass: rgba(119, 221, 119, 0.25);
--glow: rgba(119, 221, 119, 0.6);
--rgb-glow: linear-gradient(45deg, #77DD77, #98FF98, #77DD77);
--text-color: #333333;
--background: linear-gradient(135deg, #77DD77, #4CAF50);
--card-background: rgba(119, 221, 119, 0.35);
--border-color: rgba(119, 221, 119, 0.3);
}

/* Purple Lavender Mode - Mystical twilight with gradient flow */
[data-theme="purple-lavender"] {
--primary: #B39EB5;
--secondary: #8839EF;
--accent: #DCB0F2;
--dark: #B39EB5;
--glass: rgba(179, 158, 181, 0.25);
--glow: rgba(136, 57, 239, 0.6);
--rgb-glow: linear-gradient(45deg, #B39EB5, #8839EF, #DCB0F2);
--text-color: #FFFFFF;
--background: conic-gradient(from 135deg, #8839EF, #B39EB5, #8839EF);
--card-background: rgba(220, 176, 242, 0.35);
--border-color: rgba(179, 158, 181, 0.3);
}

/* Vogue Mode - Chic elegance with metallic gradients */
[data-theme="vogue"] {
--primary: #ACB7AE;
--secondary: #C2B490;
--accent: #E4DECD;
--dark: #82716E;
--glass: rgba(172, 183, 174, 0.25);
--glow: rgba(194, 180, 144, 0.6);
--rgb-glow: linear-gradient(45deg, #ACB7AE, #C2B490, #E4DECD);
--text-color: #333333;
--background: linear-gradient(90deg, #E4DECD, #D3CBB8);
--card-background: rgba(172, 183, 174, 0.35);
--border-color: rgba(130, 113, 110, 0.3);
}

/* Neon Future Mode - Cyberpunk vibrance with neon flicker */
[data-theme="neon-future"] {
--primary: #00ff9f;
--secondary: #00f7ff;
--accent: #ff00ff;
--dark: #000033;
--glass: rgba(0, 255, 159, 0.15);
--glow: rgba(0, 247, 255, 0.7);
--rgb-glow: linear-gradient(45deg, #00ff9f, #00f7ff, #ff00ff);
--text-color: #ffffff;
--background: radial-gradient(circle, #000033, #000011);
--card-background: rgba(0, 255, 159, 0.1);
--border-color: rgba(0, 247, 255, 0.3);
}
body[data-theme="neon-future"] {
animation: neon-flicker 2s infinite;
}

/* Midnight Gold Mode - Luxurious night with golden shimmer */
[data-theme="midnight-gold"] {
--primary: #ffd700;
--secondary: #4a4a8a;
--accent: #c0c0c0;
--dark: #1a1a3a;
--glass: rgba(255, 215, 0, 0.15);
--glow: rgba(255, 215, 0, 0.6);
--rgb-glow: linear-gradient(45deg, #ffd700, #4a4a8a, #c0c0c0);
--text-color: #ffd700;
--background: radial-gradient(circle at top, #1a1a3a, #0f0f1f);
--card-background: conic-gradient(from 45deg, rgba(255, 215, 0, 0.1), rgba(74, 74, 138, 0.15));
--border-color: rgba(255, 215, 0, 0.25);
}

/* Desert Oasis Mode - Sandy warmth with mirage effects */
[data-theme="desert-oasis"] {
--primary: #ff8c00;
--secondary: #4b0082;
--accent: #00ced1;
--dark: #2d1810;
--glass: rgba(255, 140, 0, 0.15);
--glow: rgba(0, 206, 209, 0.6);
--rgb-glow: linear-gradient(45deg, #ff8c00, #4b0082, #00ced1);
--text-color: #ff8c00;
--background: linear-gradient(to bottom, #2d1810, #4a2e1a);
--card-background: rgba(255, 140, 0, 0.1);
--border-color: rgba(0, 206, 209, 0.25);
}
body[data-theme="desert-oasis"] {
animation: mirage 5s infinite;
}

/* Cyber Punk Mode - Retro-futuristic neon grid */
[data-theme="cyber-punk"] {
--primary: #ff00ff;
--secondary: #00ff00;
--accent: #ffff00;
--dark: #000000;
--glass: rgba(255, 0, 255, 0.15);
--glow: rgba(0, 255, 0, 0.7);
--rgb-glow: linear-gradient(45deg, #ff00ff, #00ff00, #ffff00);
--text-color: #ffffff;
--background: #000000 linear-gradient(90deg, rgba(255,0,255,0.1) 1px, transparent 1px), linear-gradient(0deg, rgba(0,255,0,0.1) 1px, transparent 1px);
--card-background: rgba(255, 0, 255, 0.1);
--border-color: rgba(0, 255, 0, 0.3);
}

/* Aurora Breeze Mode - Ethereal aurora with flowing colors */
[data-theme="aurora-breeze"] {
--primary: #80ffdb;
--secondary: #64dfdf;
--accent: #48bfe3;
--dark: #1b3a4b;
--glass: rgba(128, 255, 219, 0.15);
--glow: rgba(100, 223, 223, 0.6);
--rgb-glow: linear-gradient(45deg, #80ffdb, #64dfdf, #48bfe3);
--text-color: #80ffdb;
--background: linear-gradient(135deg, #1b3a4b, #2e5a6b);
--card-background: rgba(128, 255, 219, 0.1);
--border-color: rgba(100, 223, 223, 0.25);
}
body[data-theme="aurora-breeze"] {
animation: aurora-flow 8s infinite;
}

/* Ultra Glass Morphism Mode - Maximum transparency and glass effects */
[data-theme="ultra-glass"] {
--primary: #ffffff;
--secondary: #e0e0e0;
--accent: #f0f0f0;
--dark: rgba(10, 20, 30, 0.4);
--glass: rgba(255, 255, 255, 0.25);
--glow: rgba(255, 255, 255, 0.8);
--rgb-glow: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
--text-color: rgba(255, 255, 255, 0.95);
--background: linear-gradient(135deg, rgba(20, 30, 50, 0.3), rgba(40, 60, 100, 0.3));
--card-background: rgba(255, 255, 255, 0.1);
--border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="ultra-glass"] .glass-card {
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 
  0 4px 30px rgba(0, 0, 0, 0.1),
  inset 0 0 20px rgba(255, 255, 255, 0.2);
}

[data-theme="ultra-glass"] .glass-card:hover {
backdrop-filter: blur(25px);
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
box-shadow: 
  0 8px 40px rgba(0, 0, 0, 0.2),
  inset 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Glass Morphism background overlay */
[data-theme="glass-morphism"]::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
z-index: -1;
pointer-events: none;
}

/* Galactic Nebula (Original) - Cosmic swirl with starry overlay */
[data-theme="galactic-nebula"] {
--primary: #ff1a8c;
--secondary: #00ccff;
--accent: #b347ff;
--dark: #0d001a;
--glass: rgba(255, 26, 140, 0.2);
--glow: rgba(0, 204, 255, 0.7);
--rgb-glow: linear-gradient(45deg, #ff1a8c, #00ccff, #b347ff);
--text-color: #e6ccff;
--background: radial-gradient(circle at center, #1a0033, #0d001a);
--card-background: rgba(179, 71, 255, 0.15);
--border-color: rgba(255, 26, 140, 0.3);
}
body[data-theme="galactic-nebula"] {
animation: nebula-swirl 15s ease-in-out infinite;
}

/* Electric Storm (Original) - Charged energy with lightning effects */
[data-theme="electric-storm"] {
--primary: #00ffcc;
--secondary: #ffcc00;
--accent: #ff0066;
--dark: #1a1a2e;
--glass: rgba(0, 255, 204, 0.25);
--glow: rgba(255, 204, 0, 0.8);
--rgb-glow: linear-gradient(45deg, #00ffcc, #ffcc00, #ff0066);
--text-color: #ffffff;
--background: linear-gradient(135deg, #1a1a2e, #2e2e47);
--card-background: rgba(255, 0, 102, 0.2);
--border-color: rgba(0, 255, 204, 0.35);
}
body[data-theme="electric-storm"] {
animation: storm-flash 5s infinite;
}

/* Void Pulse (Original) - Dark abyss with pulsating neon */
[data-theme="void-pulse"] {
--primary: #ff00ff;
--secondary: #00ff00;
--accent: #ff6600;
--dark: #000000;
--glass: rgba(255, 0, 255, 0.15);
--glow: rgba(0, 255, 0, 0.9);
--rgb-glow: linear-gradient(45deg, #ff00ff, #00ff00, #ff6600);
--text-color: #ffffff;
--background: #000000;
--card-background: rgba(255, 102, 0, 0.1);
--border-color: rgba(255, 0, 255, 0.4);
}
/* Theme-specific animations */
body[data-theme="void-pulse"] {
  animation: void-pulse 3s infinite;
}

body[data-theme="galactic-nebula"] {
  animation: nebula-swirl 15s infinite;
}

body[data-theme="electric-storm"] {
  animation: lightning-flash 5s infinite;
}

body[data-theme="prism-shard"] {
  animation: prism-shift 6s infinite;
}

body[data-theme="inferno-core"] {
  animation: inferno-glow 4s infinite;
}

body[data-theme="cosmic-rift"] {
  animation: rift-swirl 8s infinite;
}

body[data-theme="neon-eclipse"] {
  animation: eclipse-pulse 5s infinite;
}

body[data-theme="quantum-flux"] {
  animation: quantum-shimmer 3s infinite;
}

body[data-theme="holo-abyss"] {
  animation: holo-shift 4s infinite;
}

body[data-theme="spectral-surge"] {
  animation: spectral-surge 4s infinite;
}

body[data-theme="starforge-nebula"] {
  animation: aurora-flow 8s infinite;
}

body[data-theme="cyber-punk"] {
  animation: neon-flicker 2s infinite;
}

body[data-theme="aurora-breeze"] {
  animation: aurora-flow 8s infinite;
}

body[data-theme="glass-morphism"] {
  animation: glass-shimmer 4s infinite;
}

/* Prism Shard (Original) - Refracted light with crystalline edges */
[data-theme="prism-shard"] {
--primary: #66ffcc;
--secondary: #ff99cc;
--accent: #ccff66;
--dark: #1a2e47;
--glass: rgba(102, 255, 204, 0.3);
--glow: rgba(255, 153, 204, 0.6);
--rgb-glow: linear-gradient(45deg, #66ffcc, #ff99cc, #ccff66);
--text-color: #ffffff;
--background: linear-gradient(90deg, #1a2e47, #2e475c);
--card-background: rgba(204, 255, 102, 0.25);
--border-color: rgba(102, 255, 204, 0.35);
}
body[data-theme="prism-shard"] {
animation: prism-shift 6s infinite;
}

/* Inferno Core (Original) - Molten core with fiery glow */
[data-theme="inferno-core"] {
--primary: #ff3300;
--secondary: #ff8c00;
--accent: #ffcc00;
--dark: #2e0f00;
--glass: rgba(255, 51, 0, 0.2);
--glow: rgba(255, 140, 0, 0.8);
--rgb-glow: linear-gradient(45deg, #ff3300, #ff8c00, #ffcc00);
--text-color: #ffffff;
--background: radial-gradient(circle, #2e0f00, #1a0700);
--card-background: rgba(255, 204, 0, 0.15);
--border-color: rgba(255, 51, 0, 0.4);
}
body[data-theme="inferno-core"] {
animation: inferno-glow 4s infinite;
}

/* Cosmic Rift (Original) - Interdimensional tear with swirling colors */
[data-theme="cosmic-rift"] {
--primary: #b366ff;
--secondary: #00e6ff;
--accent: #ff66b3;
--dark: #0f1a2e;
--glass: rgba(179, 102, 255, 0.25);
--glow: rgba(0, 230, 255, 0.7);
--rgb-glow: linear-gradient(45deg, #b366ff, #00e6ff, #ff66b3);
--text-color: #e6f2ff;
--background: linear-gradient(135deg, #0f1a2e, #1a2e47);
--card-background: rgba(255, 102, 179, 0.2);
--border-color: rgba(179, 102, 255, 0.35);
}
body[data-theme="cosmic-rift"] {
animation: rift-swirl 6s infinite;
}

/* Neon Eclipse (Original) - Darkened glow with eclipse-like transitions */
[data-theme="neon-eclipse"] {
--primary: #ff00cc;
--secondary: #00ff99;
--accent: #ffcc00;
--dark: #1a001a;
--glass: rgba(255, 0, 204, 0.2);
--glow: rgba(0, 255, 153, 0.8);
--rgb-glow: linear-gradient(45deg, #ff00cc, #00ff99, #ffcc00);
--text-color: #ffffff;
--background: radial-gradient(circle, #1a001a, #0d000d);
--card-background: rgba(255, 204, 0, 0.15);
--border-color: rgba(255, 0, 204, 0.3);
}
body[data-theme="neon-eclipse"] {
animation: eclipse-pulse 5s infinite;
}

/* Quantum Flux (Original) - Fluxing energy with particle effects */
[data-theme="quantum-flux"] {
--primary: #66ff99;
--secondary: #ff3399;
--accent: #3399ff;
--dark: #0f2e1a;
--glass: rgba(102, 255, 153, 0.25);
--glow: rgba(255, 51, 153, 0.7);
--rgb-glow: linear-gradient(45deg, #66ff99, #ff3399, #3399ff);
--text-color: #ffffff;
--background: linear-gradient(90deg, #0f2e1a, #1a4733);
--card-background: rgba(51, 153, 255, 0.2);
--border-color: rgba(102, 255, 153, 0.35);
}
body[data-theme="quantum-flux"] {
animation: flux-shift 3s infinite;
}

/* Holo Abyss (Original) - Holographic depth with shimmering reflections */
[data-theme="holo-abyss"] {
--primary: #00ccff;
--secondary: #ff00ff;
--accent: #ccff00;
--dark: #0a1a33;
--glass: rgba(0, 204, 255, 0.3);
--glow: rgba(255, 0, 255, 0.8);
--rgb-glow: linear-gradient(45deg, #00ccff, #ff00ff, #ccff00);
--text-color: #e6f2ff;
--background: radial-gradient(circle, #0a1a33, #051428);
--card-background: rgba(204, 255, 0, 0.25);
--border-color: rgba(0, 204, 255, 0.4);
}
body[data-theme="holo-abyss"] {
animation: holo-shift 4s infinite;
}

/* Spectral Surge (Original) - Vibrant energy with spectral waves */
[data-theme="spectral-surge"] {
--primary: #ff3366;
--secondary: #33ccff;
--accent: #ffcc33;
--dark: #2e1a0f;
--glass: rgba(255, 51, 102, 0.25);
--glow: rgba(51, 204, 255, 0.7);
--rgb-glow: linear-gradient(45deg, #ff3366, #33ccff, #ffcc33);
--text-color: #ffffff;
--background: linear-gradient(135deg, #2e1a0f, #472e1a);
--card-background: rgba(255, 204, 51, 0.2);
--border-color: rgba(255, 51, 102, 0.35);
}
body[data-theme="spectral-surge"] {
animation: spectral-wave 4s infinite;
}

/* Starforge Nebula - Cosmic swirl with glowing nebulae */
[data-theme="starforge-nebula"] {
--primary: #ff1a8c;
--secondary: #00ccff;
--accent: #b347ff;
--dark: #0d001a;
--glass: rgba(255, 26, 140, 0.25);
--glow: rgba(0, 204, 255, 0.8);
--rgb-glow: linear-gradient(45deg, #ff1a8c 0%, #00ccff 50%, #b347ff 100%);
--text-color: #e6ccff;
--background: radial-gradient(circle at 20% 80%, #1a0033 0%, #0d001a 80%);
--card-background: conic-gradient(from 45deg, rgba(255, 26, 140, 0.2), rgba(0, 204, 255, 0.15), rgba(179, 71, 255, 0.25));
--border-color: rgba(255, 26, 140, 0.4);
}
body[data-theme="starforge-nebula"] {
animation: nebula-swirl 15s ease-in-out infinite;
}

/* Thunder Vortex - Dynamic lightning and charged energy */
[data-theme="thunder-vortex"] {
--primary: #00ffcc;
--secondary: #ffcc00;
--accent: #ff0066;
--dark: #1a1a2e;
--glass: rgba(0, 255, 204, 0.3);
--glow: rgba(255, 204, 0, 0.9);
--rgb-glow: linear-gradient(90deg, #00ffcc, #ffcc00, #ff0066);
--text-color: #ffffff;
--background: linear-gradient(135deg, #1a1a2e, #2e2e47);
--card-background: rgba(255, 0, 102, 0.25);
--border-color: rgba(0, 255, 204, 0.45);
}
body[data-theme="thunder-vortex"] {
animation: lightning-flash 3s infinite alternate;
}

/* Abyss Echo - Pulsating void with neon ripples */
[data-theme="abyss-echo"] {
--primary: #ff00ff;
--secondary: #00ff00;
--accent: #ff6600;
--dark: #000000;
--glass: rgba(255, 0, 255, 0.2);
--glow: rgba(0, 255, 0, 0.9);
--rgb-glow: radial-gradient(circle, #ff00ff, #00ff00, #ff6600);
--text-color: #ffffff;
--background: #000000;
--card-background: rgba(255, 102, 0, 0.15);
--border-color: rgba(255, 0, 255, 0.5);
}
body[data-theme="abyss-echo"] {
animation: void-ripple 4s infinite ease-in-out;
}

/* Crystal Prism - Crystalline refractions with 3D effects */
[data-theme="crystal-prism"] {
--primary: #66ffcc;
--secondary: #ff99cc;
--accent: #ccff66;
--dark: #1a2e47;
--glass: rgba(102, 255, 204, 0.35);
--glow: rgba(255, 153, 204, 0.8);
--rgb-glow: linear-gradient(45deg, #66ffcc, #ff99cc, #ccff66);
--text-color: #ffffff;
--background: linear-gradient(90deg, #1a2e47, #2e475c);
--card-background: rgba(204, 255, 102, 0.3);
--border-color: rgba(102, 255, 204, 0.5);
}
body[data-theme="crystal-prism"] {
animation: prism-shift 6s infinite;
}

/* Magma Forge - Molten lava with fiery distortions */
[data-theme="magma-forge"] {
--primary: #ff3300;
--secondary: #ff8c00;
--accent: #ffcc00;
--dark: #2e0f00;
--glass: rgba(255, 51, 0, 0.3);
--glow: rgba(255, 140, 0, 1);
--rgb-glow: conic-gradient(from 0deg, #ff3300, #ff8c00, #ffcc00, #ff3300);
--text-color: #ffffff;
--background: radial-gradient(circle at center, #2e0f00 0%, #1a0700 100%);
--card-background: rgba(255, 204, 0, 0.25);
--border-color: rgba(255, 51, 0, 0.5);
}
body[data-theme="magma-forge"] {
animation: lava-flow 6s infinite;
}

/* Dimensional Veil - Interdimensional portal with swirling energy */
[data-theme="dimensional-veil"] {
--primary: #b366ff;
--secondary: #00e6ff;
--accent: #ff66b3;
--dark: #0f1a2e;
--glass: rgba(179, 102, 255, 0.35);
--glow: rgba(0, 230, 255, 0.9);
--rgb-glow: linear-gradient(135deg, #b366ff, #00e6ff, #ff66b3);
--text-color: #e6f2ff;
--background: linear-gradient(45deg, #0f1a2e, #1a2e47);
--card-background: rgba(255, 102, 179, 0.3);
--border-color: rgba(179, 102, 255, 0.45);
}
body[data-theme="dimensional-veil"] {
animation: rift-portal 8s infinite ease-in-out;
}

/* Shadow Pulse - Darkened neon with eclipse-like glow */
[data-theme="shadow-pulse"] {
--primary: #ff00cc;
--secondary: #00ff99;
--accent: #ffcc00;
--dark: #1a001a;
--glass: rgba(255, 0, 204, 0.25);
--glow: rgba(0, 255, 153, 1);
--rgb-glow: radial-gradient(circle, #ff00cc 0%, #00ff99 50%, #ffcc00 100%);
--text-color: #ffffff;
--background: radial-gradient(circle at 50% 50%, #1a001a, #0d000d);
--card-background: rgba(255, 204, 0, 0.2);
--border-color: rgba(255, 0, 204, 0.4);
}
body[data-theme="shadow-pulse"] {
animation: eclipse-glow 5s infinite alternate;
}

/* Flux Horizon - Fluxing particles with quantum shimmer */
[data-theme="flux-horizon"] {
--primary: #66ff99;
--secondary: #ff3399;
--accent: #3399ff;
--dark: #0f2e1a;
--glass: rgba(102, 255, 153, 0.35);
--glow: rgba(255, 51, 153, 0.9);
--rgb-glow: linear-gradient(45deg, #66ff99, #ff3399, #3399ff);
--text-color: #ffffff;
--background: linear-gradient(90deg, #0f2e1a, #1a4733);
--card-background: rgba(51, 153, 255, 0.3);
--border-color: rgba(102, 255, 153, 0.5);
}
body[data-theme="flux-horizon"] {
animation: quantum-shimmer 3s infinite;
}

/* Holo Vortex - Holographic void with 3D reflections */
[data-theme="holo-vortex"] {
--primary: #00ccff;
--secondary: #ff00ff;
--accent: #ccff00;
--dark: #0a1a33;
--glass: rgba(0, 204, 255, 0.4);
--glow: rgba(255, 0, 255, 1);
--rgb-glow: conic-gradient(from 90deg, #00ccff, #ff00ff, #ccff00, #00ccff);
--text-color: #e6f2ff;
--background: radial-gradient(circle at top right, #0a1a33, #051428);
--card-background: rgba(204, 255, 0, 0.35);
--border-color: rgba(0, 204, 255, 0.5);
}
body[data-theme="holo-vortex"] {
animation: holo-shift 4s infinite;
}

/* Waveform Surge - Spectral waves with vibrant energy */
[data-theme="waveform-surge"] {
--primary: #ff3366;
--secondary: #33ccff;
--accent: #ffcc33;
--dark: #2e1a0f;
--glass: rgba(255, 51, 102, 0.35);
--glow: rgba(51, 204, 255, 0.9);
--rgb-glow: linear-gradient(45deg, #ff3366, #33ccff, #ffcc33);
--text-color: #ffffff;
--background: linear-gradient(135deg, #2e1a0f, #472e1a);
--card-background: rgba(255, 204, 51, 0.3);
--border-color: rgba(255, 51, 102, 0.45);
}
body[data-theme="waveform-surge"] {
animation: spectral-surge 4s infinite ease-in-out;
}

/* Mirror Glass - Black and white with shiny mirror effects */
[data-theme="mirror-glass"] {
--primary: #ffffff;
--secondary: #d0d0d0;
--accent: #f5f5f5;
--dark: #000000;
--glass: rgba(255, 255, 255, 0.3);
--glow: rgba(255, 255, 255, 1);
--rgb-glow: linear-gradient(45deg, #ffffff, #d0d0d0, #000000);
--text-color: #ffffff;
--background: linear-gradient(135deg, #000000, #1a1a1a);
--card-background: rgba(255, 255, 255, 0.15);
--border-color: rgba(255, 255, 255, 0.5);
}

[data-theme="mirror-glass"] .glass-card {
backdrop-filter: blur(25px);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 
  0 4px 30px rgba(0, 0, 0, 0.2),
  inset 0 0 30px rgba(255, 255, 255, 0.2);
}

[data-theme="mirror-glass"] .glass-card:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 
  0 8px 40px rgba(0, 0, 0, 0.3),
  inset 0 0 50px rgba(255, 255, 255, 0.3);
transform: translateY(-5px);
}

/* Animation Keyframes */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}

@keyframes heatwave {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}

@keyframes wave {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}

@keyframes neon-flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.95; }
}

@keyframes storm-flash {
0%, 100% { filter: brightness(1); }
10%, 12% { filter: brightness(1.5); }
}

@keyframes void-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}

@keyframes inferno-glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}

@keyframes rift-swirl {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}

@keyframes eclipse-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(0.9); }
}

@keyframes flux-shift {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}

@keyframes spectral-wave {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}

@keyframes mirage {
0%, 100% { filter: blur(0px); }
50% { filter: blur(2px); }
}

@keyframes aurora-flow {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}

@keyframes nebula-swirl {
0% { background-position: 0% 0%; transform: scale(1); }
50% { background-position: 100% 100%; transform: scale(1.02); }
100% { background-position: 0% 0%; transform: scale(1); }
}

@keyframes lightning-flash {
0%, 100% { filter: brightness(1); }
10%, 12%, 50%, 52% { filter: brightness(1.8); }
}

@keyframes void-ripple {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.05); opacity: 1; }
}

@keyframes lava-flow {
0% { background-position: 0% 0%; filter: brightness(1); }
50% { background-position: 100% 100%; filter: brightness(1.3); }
100% { background-position: 0% 0%; filter: brightness(1); }
}

@keyframes rift-portal {
0% { transform: rotate(0deg); background-position: 0% 0%; }
100% { transform: rotate(360deg); background-position: 100% 100%; }
}

@keyframes eclipse-glow {
0%, 100% { filter: brightness(1); transform: scale(1); }
50% { filter: brightness(0.8); transform: scale(1.03); }
}

@keyframes quantum-shimmer {
0% { background-position: 0% 0%; filter: brightness(1); }
50% { background-position: 100% 100%; filter: brightness(1.2); }
100% { background-position: 0% 0%; filter: brightness(1); }
}

@keyframes spectral-surge {
0% { background-position: 0% 0%; transform: translateY(0); }
50% { background-position: 100% 100%; transform: translateY(-5px); }
100% { background-position: 0% 0%; transform: translateY(0); }
}

@keyframes prism-shift {
0% { background-position: 0% 0%; transform: translateX(0); }
50% { background-position: 100% 100%; transform: translateX(5px); }
100% { background-position: 0% 0%; transform: translateX(0); }
}

@keyframes holo-shift {
0% { background-position: 0% 0%; transform: rotate(0deg); }
50% { background-position: 100% 100%; transform: rotate(2deg); }
100% { background-position: 0% 0%; transform: rotate(0deg); }
}

/* 1. Custom Paint API Neon Drip */
@property --drip-offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.neon-drip {
  --drip-offset: 0px;
  background: paint(neon-drip);
  animation: drip-flow 3s infinite linear;
}
@keyframes drip-flow {
  100% { --drip-offset: 50px; }
}

/* 2. Scroll-Driven Animation */
.scroll-glow {
  animation: glow-shift linear both;
  animation-timeline: scroll();
}
@keyframes glow-shift {
  from { box-shadow: 0 0 10px var(--glow); }
  to { box-shadow: 0 0 30px var(--primary); }
}

/* Apply theme variables to body */
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--background, #0a0a0a);
color: var(--text-color, rgba(255, 255, 255, 0.8));
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}

/* Fallback styles for browsers without paint worklet support */
body.no-worklet {
background: linear-gradient(135deg, #1a1a1a, #0a0a0a) !important;
}

/* Theme-specific fallbacks for browsers without modern features */
body.no-worklet[data-theme="normal"] { background: linear-gradient(135deg, #1a1a1a, #0a0a0a) !important; }
body.no-worklet[data-theme="satin"] { background: linear-gradient(120deg, #1C2526, #2E3839) !important; }
body.no-worklet[data-theme="frosted"] { background: linear-gradient(135deg, #F5F5F5, #E0E8E8) !important; }
body.no-worklet[data-theme="veazy"] { background: linear-gradient(135deg, #1a1a1a, #2e2e2e) !important; }
body.no-worklet[data-theme="white"] { background: #000000 !important; }
body.no-worklet[data-theme="black"] { background: #1a1a1a !important; }

/* Fallback for glass effects */
body.no-worklet .glass-card {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

/* Hide paint worklet effects when not supported */
body.no-worklet .neon-drip {
background: none !important;
}

/* Universe canvas styling for starfield background */
#universe {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
}

/* Reset default margins, padding, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Cursor and Starfield Styles */
#cursor, #cursor-spotlight {
  display: none; /* Removes cursor and spotlight */
}

/* #cursor-blur {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: var(--glow);
  filter: blur(50px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2500;
  will-change: transform, opacity, width, height;
  transition: all 0.3s ease;
} */

/* Add hover effect for text elements */
h1:hover ~ #cursor-blur,
h2:hover ~ #cursor-blur,
h3:hover ~ #cursor-blur,
p:hover ~ #cursor-blur,
a:hover ~ #cursor-blur,
span:hover ~ #cursor-blur {
  width: 600px;
  height: 600px;
  background: var(--primary);
  opacity: 0.8;
  filter: blur(60px);
}

#universe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  transition: opacity 0.3s ease;
}

.scroll-container, .glass-card {
  background: rgba(0, 0, 0, 0.3); /* Transparent to show starfield */
  backdrop-filter: blur(10px);
}

.wallet-modal-overlay.active #cursor-blur,
.tip-overlay.active #cursor-blur {
  display: none;
}

.glass-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--glow);
  background: var(--rgb-glow);
  background-size: 200% 200%;
  animation: rgbShift 3s linear infinite;
}

@keyframes rgbShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Container for main content */
.container {
flex: 1;
padding: 80px 1rem 2rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
width: calc(100% - 2rem);
box-sizing: border-box;
background: transparent !important;
backdrop-filter: none !important;
}

/* Container for sections with glass cards */
.glass-section {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
background: transparent;
border-radius: 20px;
z-index: 2;
position: relative;
}

/* Grid layout for cards */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 1rem;
width: 100%;
max-width: 1200px;
margin: 0 auto;
justify-items: center;
box-sizing: border-box;
}

.grid .scroll-item {
width: 100%;
text-decoration: none;
}

.grid .news-title-card {
min-height: auto;
padding: 0.5rem 1rem;
}

.grid .news-content-card {
padding: 1rem;
}

.grid .news-content-card img {
width: 100%;
height: 260px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}

/* Card pair for title and content */
.card-pair {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: clamp(250px, 25vw, 300px);
margin: 0;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 1rem 0.5rem;
}
.card-pair {
  max-width: clamp(200px, 90vw, 250px);
}
}

@media (min-width: 769px) and (max-width: 900px) {
.grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}

@media (min-width: 901px) and (max-width: 1200px) {
.grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}

@media (min-width: 1201px) {
.grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}

/* Table styling for charts, certifications, and awards */
.trend-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
background: var(--card-background);
border-radius: 8px;
overflow: hidden;
display: table;
font-size: 0.9rem;
table-layout: fixed;
}

/* Specific styling for Awards Recognition table */
.trend-table.awards-table {
min-width: 100%;
}
.trend-table.awards-table th,
.trend-table.awards-table td {
width: 33.33%;
}

/* Specific styling for Album Certifications table */
.trend-table.certifications-table {
min-width: 100%;
}
.trend-table.certifications-table th,
.trend-table.certifications-table td {
width: 33.33%;
}

/* Specific styling for Chart Performance table */
.trend-table.chart-table {
min-width: 100%;
}
.trend-table.chart-table th,
.trend-table.chart-table td {
width: 16.67%;
}

/* Table cell styling */
.trend-table th,
.trend-table td {
padding: 0.8rem 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
color: var(--text-color);
font-size: 0.9rem;
word-wrap: break-word;
}

/* Table header styling */
.trend-table th {
color: var(--primary);
font-weight: bold;
background: rgba(255, 255, 255, 0.1);
text-transform: uppercase;
}

/* Table container styling */
.glass-card .table-container {
width: 100%;
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
}

/* Navigation bar styling */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(10px);
padding: 0 1rem;
z-index: 1002;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid transparent;
height: 50px;
box-sizing: border-box;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
/* animation: rgbBorderPulse 3s infinite linear; */
}

@media (max-width: 768px) {
.navbar {
  padding: 0.5rem;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1002;
}

.nav-logo {
  flex: 0 1 auto;
}

.nav-logo .logo-symbol i {
  font-size: 1.2rem;
}

.nav-logo .heartbeat-text {
  display: none;
}

.search-container {
  display: none;
}

.dropdown {
  position: relative;
  margin-left: auto;
}

.dropdown-toggle {
  padding: 0.8rem;
  font-size: 1.4rem;
  background: transparent;
  border: none;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 50px);
  overflow-y: auto;
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 1rem;
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
}

.dropdown-menu.active {
  transform: translateY(0);
  opacity: 1;
}

.dropdown-menu ul {
  padding: 0;
  margin: 0;
  width: 100%;
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.dropdown-menu li a {
  font-size: 1.1rem;
  padding: 1rem;
  display: block;
  width: 100%;
  color: var(--text-color);
  font-family: 'Space Grotesk', sans-serif;
  transition: all 0.3s ease;
}

.dropdown-menu li:last-child {
  border-bottom: none;
}

.dropdown-menu a:active {
  background: var(--primary);
  color: var(--dark);
}

.dropdown-menu a:hover {
  background: var(--glass);
  transform: none;
}
}

@keyframes rgbBorderPulse {
0% { border-image: linear-gradient(90deg, #ff0000, #00ff00) 1; }
33% { border-image: linear-gradient(90deg, #00ff00, #0000ff) 1; }
66% { border-image: linear-gradient(90deg, #0000ff, #ff0000) 1; }
100% { border-image: linear-gradient(90deg, #ff0000, #00ff00) 1; }
}

.navbar .nav-logo {
flex: 0 0 auto;
margin-right: 2rem;
display: flex;
align-items: center;
padding: 0 1rem;
height: 100%;
}

.navbar .search-container {
flex: 1;
max-width: 400px;
margin: 0 2rem;
}

.navbar .dropdown {
flex: 0 0 auto;
margin-left: 2rem;
}

.logo-symbol {
display: flex;
align-items: center;
}

.heartbeat-text {
margin: 0 0 0 1rem;
display: flex;
align-items: center;
height: 100%;
}

/* Logo symbol icon styling */
.nav-logo .logo-symbol i {
color: var(--primary);
font-size: 1.5rem;
animation: pulse-heart 1.5s ease-in-out infinite;
line-height: 1;
}

/* Heartbeat pulse animation keyframes */
@keyframes pulse-heart {
0%, 100% { color: var(--primary); transform: scale(1); }
50% { color: var(--secondary); transform: scale(1.2); }
}

/* Footer styling */
footer {
display: none;
flex-shrink: 0;
background: var(--glass);
backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 0.3s ease;
-webkit-backdrop-filter: blur(5px);
border-top: 1px solid var(--border-color);
padding: 0.5rem;
margin-top: 0;
text-align: center;
font-size: 0.9rem;
color: var(--secondary);
position: relative;
}

footer.visible {
display: flex;
opacity: 1;
}

/* Footer logo container */
.footer .nav-logo {
flex: 0 0 auto;
margin: 0;
padding: 0 1rem;
}

/* Footer logo symbol icon styling */
.footer .logo-symbol i {
color: var(--primary);
font-size: 1.5rem;
animation: pulse-heart 1.5s ease-in-out infinite;
line-height: 1;
}

/* Footer content container */
.footer {
display: flex;
width: 100%;
height: 50px;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
gap: 1rem;
z-index: 1000;
margin-top: 0.5rem;
background: var(--glass);
backdrop-filter: blur(10px);
border-top: 1px solid var(--border-color);
}

.footer.visible {
display: flex;
opacity: 1;
}

.footer-content {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
}

/* Footer paragraph styling */
.footer-content p {
margin: 0;
font-size: 0.9rem;
color: var(--text-color);
}

/* Footer newsletter form styling */
.footer .newsletter-form {
flex: 0 0 auto;
display: flex;
gap: 0.5rem;
margin-right: 0;
}

/* Newsletter input styling */
.footer .newsletter-form input {
padding: 0.5rem;
border: 1px solid var(--border-color);
background: var(--glass);
color: var(--text-color);
border-radius: 5px;
font-family: 'Space Grotesk', sans-serif;
width: 150px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}

/* Hover effect for newsletter input */
.footer .newsletter-form input:hover {
box-shadow: 0 0 10px var(--primary);
}

/* Newsletter input placeholder styling */
.footer .newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.5);
}

/* Newsletter button styling */
.footer .newsletter-form button {
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 5px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Hover effect for newsletter button */
.footer .newsletter-form button:hover {
background: var(--rgb-glow);
box-shadow: 0 0 20px var(--secondary);
color: var(--dark);
animation: rgbShift 3s linear infinite;
}

/* Search container styling */
.search-container {
display: flex;
align-items: center;
margin-left: 1rem;
flex: 1;
max-width: 300px;
}

/* Search input styling */
.search-input {
border: 2px solid var(--primary);
background: var(--card-background);
color: var(--text-color);
padding: 0.5rem 1rem;
border-radius: 20px;
font-family: 'Space Grotesk', sans-serif;
width: 100%;
transition: all 0.3s ease;
box-sizing: border-box;
}

/* Search input focus state */
.search-input:focus {
box-shadow: 0 0 15px var(--glow);
outline: none;
}

/* Search input placeholder styling */
.search-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}

/* Dropdown container styling */
.dropdown {
position: relative;
margin-right: 1rem;
}

/* Dropdown toggle button styling */
.dropdown-toggle {
background: none;
border: none;
color: var(--primary);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
transition: all 0.3s ease;
}

/* Hover effect for dropdown toggle */
.dropdown-toggle:hover {
color: transparent;
background: var(--rgb-glow);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 0 10px var(--primary);
}

/* Dropdown menu styling */
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background: var(--background);
border-radius: 10px;
padding: 1rem;
width: 200px;
z-index: 1003;
border: 1px solid var(--border);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
max-height: 90vh;
overflow-y: auto;
transform-origin: top right;
transform: scale(0.9);
}

@media screen and (max-width: 768px) {
.dropdown-menu {
  right: -1rem;
  width: 180px;
}
}

@media screen and (max-width: 480px) {
.dropdown-menu {
  right: -0.5rem;
  width: 160px;
}
}

.dropdown-menu.active {
transform: translateX(0);
}

@media screen and (max-width: 768px) {
.dropdown-menu {
  right: 10px;
  width: 180px;
  transform: translateX(0);
}
}

@media screen and (max-width: 480px) {
.dropdown-menu {
  right: 5px;
  width: 160px;
}
}

.dropdown-menu.active {
display: block;
opacity: 1;
visibility: visible;
}

/* Active state for dropdown menu */
.dropdown-menu.active {
display: block;
}

/* Dropdown menu list styling */
.dropdown-menu ul {
list-style: none;
padding: 0;
margin: 0;
}

/* Dropdown menu list item styling */
.dropdown-menu li {
margin-bottom: 1rem;
}

/* Dropdown menu link styling */
.dropdown-menu a {
color: var(--text-color);
text-decoration: none;
font-size: 0.9rem;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
transition: all 0.3s ease;
}

/* Hover effect for dropdown menu links */
.dropdown-menu a:hover {
color: transparent;
background: var(--rgb-glow);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 0 10px var(--primary);
}

/* Wallet Connect Button in Navbar */
.wallet-connect {
background: var(--glass);
background: rgba(255, 255, 255, 0.1);
@supports (backdrop-filter: blur(10px)) {
  backdrop-filter: blur(10px);
  background: var(--glass);
}
border: 1px solid var(--border-color);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 25px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Wallet connect hover effect */
.wallet-connect:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 15px var(--glow);
animation: rgbShift 3s linear infinite;
transform: translateY(-3px);
}

/* Wallet connect connected state */
.wallet-connect.connected {
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: var(--dark);
border-color: var(--primary);
box-shadow: 0 0 10px var(--glow);
}

/* Wallet status in navbar */
.navbar .wallet-status {
color: var(--text-color);
font-size: 0.8rem;
margin-left: 1rem;
font-family: 'Space Grotesk', sans-serif;
}

/* Fixed button styling */
#backToTop, #musicToggle, #tipMachine, #themeToggle, #starfieldToggle {
position: fixed;
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--primary);
padding: 0.8rem;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
z-index: 1001;
}

#starfieldToggle:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 20px var(--primary);
animation: rgbShift 3s linear infinite;
transform: translateY(-3px);
}

/* Button positioning */
#backToTop { bottom: 20px; right: 220px; display: none; }
#musicToggle { bottom: 20px; right: 170px; }
#themeToggle { bottom: 20px; right: 120px; }
#starfieldToggle { 
  bottom: 20px; 
  right: 70px; 
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tipMachine { bottom: 20px; right: 20px; }

/* Mobile responsive button positioning */
@media (max-width: 768px) {
  #backToTop { right: 180px; bottom: 15px; }
  #musicToggle { right: 135px; bottom: 15px; }
  #themeToggle { right: 90px; bottom: 15px; }
  #starfieldToggle { 
      right: 45px; 
      bottom: 15px;
      width: 32px;
      height: 32px;
      font-size: 14px;
  }
  #tipMachine { right: 10px; bottom: 15px; }

  .dropdown-menu {
      width: 100vw;
      right: -1rem;
      left: -1rem;
      padding: 1rem;
      border-radius: 0;
      backdrop-filter: blur(10px);
      background: rgba(0, 0, 0, 0.9);
  }

  .dropdown-menu ul {
      width: 100%;
  }

  .dropdown-menu li {
      text-align: center;
      padding: 0.8rem 0;
      border-bottom: 1px solid var(--border-color);
  }

  .dropdown-menu li:last-child {
      border-bottom: none;
  }

  .heartbeat-text {
      font-size: 0.7rem;
      margin: 0 0 0.3rem 0.5rem;
  }
}

@media (max-width: 480px) {
  #backToTop { right: 155px; }
  #musicToggle { right: 115px; }
  #themeToggle { right: 75px; }
  #starfieldToggle { 
      right: 35px;
      width: 30px;
      height: 30px;
      font-size: 12px;
  }
  #tipMachine { right: 5px; }

  .dropdown-menu {
      width: 200px;
      right: -5px;
      max-height: 80vh;
      overflow-y: auto;
  }

  .dropdown-menu ul {
      padding: 0.5rem;
  }

  .dropdown-menu li {
      margin-bottom: 0.5rem;
  }
}

@media (max-width: 375px) {
  #backToTop { right: 145px; }
  #musicToggle { right: 110px; }
  #themeToggle { right: 75px; }
  #starfieldToggle { right: 40px; }
  #tipMachine { right: 5px; }

  .dropdown-menu {
      width: 180px;
      right: 0;
  }
}

/* News Ticker Styling */
/* .news-ticker {
  width: 100%;
  height: 40px;
  background: var(--glass);
  overflow: hidden;
  position: fixed;
  top: 50px;
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ticker-content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker 240s linear infinite;
  height: 100%;
}

.ticker-content span {
  display: inline-flex;
  align-items: center;
  padding: 0 30px;
  color: var(--text-color);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  height: 100%;
}

@keyframes ticker {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
 */
/* Primary Theme */
[data-theme="primary"] {
--primary: #00f7ff;
--secondary: #00e6ff;
--accent: #00ccff;
--dark: #0a0a0a;
--glass: rgba(0, 247, 255, 0.15);
--glow: rgba(0, 247, 255, 0.6);
--rgb-glow: linear-gradient(45deg, #00f7ff, #00e6ff, #00ccff);
--text-color: #ffffff;
--background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
--card-background: rgba(0, 247, 255, 0.1);
--border-color: rgba(0, 247, 255, 0.3);
}

/* Theme-specific icon colors for theme toggle */
#themeToggle[title="Primary Mode"] i { color: #00f7ff; }
#themeToggle[title="Normal Mode"] i { color: #00f7ff; }
#themeToggle[title="Satin Mode"] i { color: #FFD700; }
#themeToggle[title="Frosted Mode"] i { color: #00CED1; }
#themeToggle[title="Veazy Mode"] i { color: #00ff00; }
#themeToggle[title="White Mode"] i { color: #ffffff; }
#themeToggle[title="Black Mode"] i { color: #333333; }
#themeToggle[title="All White Mode"] i { color: #FFFFFF; }
#themeToggle[title="All Red Mode"] i { color: #FF0000; }
#themeToggle[title="All Blue Mode"] i { color: #0000FF; }
#themeToggle[title="Pink Rose Mode"] i { color: #F2C4DE; }
#themeToggle[title="Blue Sky Mode"] i { color: #71B1D9; }
#themeToggle[title="Yellow Beige Mode"] i { color: #F2DEA2; }
#themeToggle[title="Green Mode"] i { color: #77DD77; }
#themeToggle[title="Purple Lavender Mode"] i { color: #B39EB5; }
#themeToggle[title="Vogue Mode"] i { color: #ACB7AE; }
#themeToggle[title="Neon Future Mode"] i { color: #00ff9f; }
#themeToggle[title="Midnight Gold Mode"] i { color: #ffd700; }
#themeToggle[title="Desert Oasis Mode"] i { color: #ff8c00; }
#themeToggle[title="Cyber Punk Mode"] i { color: #ff00ff; }
#themeToggle[title="Aurora Breeze Mode"] i { color: #80ffdb; }
#themeToggle[title="Glass Morphism Mode"] i { color: #a3d9ff; }
#themeToggle[title="Galactic Nebula"] i { color: #ff1a8c; }
#themeToggle[title="Electric Storm"] i { color: #00ffcc; }
#themeToggle[title="Void Pulse"] i { color: #ff00ff; }
#themeToggle[title="Prism Shard"] i { color: #66ffcc; }
#themeToggle[title="Inferno Core"] i { color: #ff3300; }
#themeToggle[title="Cosmic Rift"] i { color: #b366ff; }
#themeToggle[title="Neon Eclipse"] i { color: #ff00cc; }
#themeToggle[title="Quantum Flux"] i { color: #66ff99; }
#themeToggle[title="Holo Abyss"] i { color: #00ccff; }
#themeToggle[title="Spectral Surge"] i { color: #ff3366; }
#themeToggle[title="Starforge Nebula"] i { color: #ff1a8c; }
#themeToggle[title="Thunder Vortex"] i { color: #00ffcc; }
#themeToggle[title="Abyss Echo"] i { color: #ff00ff; }
#themeToggle[title="Crystal Prism"] i { color: #66ffcc; }
#themeToggle[title="Magma Forge"] i { color: #ff3300; }
#themeToggle[title="Dimensional Veil"] i { color: #b366ff; }
#themeToggle[title="Shadow Pulse"] i { color: #ff00cc; }
#themeToggle[title="Flux Horizon"] i { color: #66ff99; }
#themeToggle[title="Holo Vortex"] i { color: #00ccff; }
#themeToggle[title="Waveform Surge"] i { color: #ff3366; }

/* Hover effect for fixed buttons */
#backToTop:hover, #musicToggle:hover, #tipMachine:hover, #themeToggle:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 20px var(--primary);
animation: rgbShift 3s linear infinite;
transform: translateY(-3px);
}

/* RGB shift animation keyframes */
@keyframes rgbShift {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}

/* Main content styling */
.main-content {
margin-left: 0;
width: 100%;
padding: 0.5rem 0;
position: relative;
z-index: 1;
margin-top: 0;
margin-bottom: 0;
flex: 1 0 auto;
}

/* Hero section styling */
.hero {
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative; /* Contain heartbeat-line */
}

/* Heartbeat text styling */
.heartbeat-text {
font-size: 0.8rem;
letter-spacing: 0.2em;
color: var(--text-color);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
margin: 8px 0 0.5rem 1rem;
opacity: 0.7;
text-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
position: relative;
white-space: nowrap;
}

/* Hover effect for heartbeat text */
.heartbeat-text:hover {
opacity: 1;
text-shadow: 0 0 10px var(--primary);
}

/* Heartbeat line styling */
.heartbeat-line {
position: absolute;
top: calc(100% + 2px);
left: 0;
width: 100%;
height: 1px;
background: var(--rgb-glow);
animation: heartMonitor 1.5s ease-in-out infinite;
}

/* Heartbeat animation keyframes */
@keyframes heartMonitor {
0% { transform: translateX(-50%) scaleX(0); opacity: 0; }
20% { transform: translateX(-50%) scaleX(0.3); opacity: 1; }
40% { transform: translateX(-50%) scaleX(1); opacity: 1; }
43% { transform: translateX(-50%) scaleX(0.6); }
46% { transform: translateX(-50%) scaleX(1.4); }
50% { transform: translateX(-50%) scaleX(0.2); }
60% { transform: translateX(-50%) scaleX(1); }
80% { transform: translateX(-50%) scaleX(0.3); }
100% { transform: translateX(-50%) scaleX(0); opacity: 0; }
}

/* Oracle Page Styling */
.oracle-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 70vh;
width: 100%;
}

.oracle-subtitle {
text-align: center;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.8;
}

.oracle-intro {
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
animation: glowPulse 2s infinite;
}

.oracle-vibe-check {
margin: 1rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
text-align: center;
}

.vibe-indicator {
display: block;
color: var(--primary);
font-family: 'Syncopate', sans-serif;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}

.vibe-meter {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
position: relative;
}

.vibe-meter::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--rgb-glow);
animation: vibeFlow 2s infinite linear;
}

@keyframes vibeFlow {
0% { left: -100%; }
100% { left: 100%; }
}

.oracle-disclaimer {
text-align: center;
color: var(--text-color);
font-size: 0.8rem;
opacity: 0.6;
margin-top: 2rem;
font-style: italic;
}

.magic-search {
max-width: 500px;
width: 90%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 0 30px var(--glow);
transition: all 0.3s ease;
}

.magic-search:hover {
transform: translateY(-5px);
box-shadow: 0 0 50px var(--glow);
}

.mode-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 0.8rem 1.2rem;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Syncopate', sans-serif;
font-size: 0.8rem;
text-transform: uppercase;
}

.mode-btn:hover {
background: var(--rgb-glow);
color: var(--dark);
transform: translateY(-2px);
}

.mode-btn.active {
background: var(--primary);
color: var(--dark);
box-shadow: 0 0 20px var(--glow);
}

#prophecyHistory .prophecy-item {
padding: 1rem;
margin: 0.5rem 0;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
}

#prophecyHistory .prophecy-item:hover {
transform: translateX(10px);
background: var(--rgb-glow);
}

.oracle-answer {
font-size: 1.4rem !important;
margin-top: 2rem !important;
padding: 1.5rem !important;
background: linear-gradient(135deg, 
  rgba(255, 255, 255, 0.1),
  rgba(255, 255, 255, 0.05)
);
border-radius: 15px;
animation: oracleReveal 1.5s ease-out;
}

/* Magic Oracle styling */
.magic-search {
max-width: 400px;
width: 90%;
background: linear-gradient(135deg, 
  rgba(255, 255, 255, 0.1),
  rgba(255, 255, 255, 0.05) 50%,
  rgba(255, 255, 255, 0.1)
);
animation: oracleGlow 4s infinite alternate;
@supports (backdrop-filter: blur(15px)) {
  backdrop-filter: blur(15px);
  background: var(--glass);
}
border-radius: 15px;
border: 1px solid var(--border-color);
padding: 2rem;
box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}

/* Hover effect for magic search */
.magic-search:hover {
box-shadow: 0 0 20px var(--glow);
background: var(--rgb-glow);
background-size: 200% 200%;
animation: rgbShift 3s linear infinite;
}

/* Magic search bar styling */
.magic-search-bar {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 700px;
margin: 0 auto;
}

/* Magic search input styling */
.magic-search input {
width: 300px;
padding: 1rem;
border: 1px solid var(--border-color);
background: var(--dark);
color: var(--text-color);
border-radius: 5px 0 0 5px;
font-family: 'Space Grotesk', sans-serif;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}

/* Hover effect for magic search input */
.magic-search input:hover {
box-shadow: 0 0 10px var(--primary);
}

/* Magic search input placeholder styling */
.magic-search input::placeholder {
color: rgba(255, 255, 255, 0.5);
}

/* Magic search button styling */
.magic-search button {
padding: 1rem 1.5rem;
border: 2px solid var(--primary);
background: var(--glass);
color: var(--primary);
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
box-shadow: 
  inset 0 2px 4px rgba(0, 0, 0, 0.5),
  0 0 10px var(--glow);
backdrop-filter: blur(5px);
min-width: 120px;
position: relative;
overflow: hidden;
}

.magic-search button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(255, 255, 255, 0.1),
  transparent
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}

/* Hover effect for magic search button */
.magic-search button:hover {
background: var(--rgb-glow);
transform: translateY(-3px);
box-shadow: 
  0 0 20px var(--glow),
  0 5px 15px rgba(0, 0, 0, 0.3);
color: var(--dark);
}

.magic-search button:active {
transform: translateY(1px);
}

@keyframes shimmer {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}

/* Magic answer text styling */
#magicAnswer {
margin-top: 1rem;
font-size: 1.1rem;
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
text-align: center;
}

/* Scroll section styling */
.scroll-section {
padding: 1rem;
margin: 0.5rem 0;
width: 100%;
}

/* Scroll container styling */
.scroll-container {
display: flex;
overflow-x: auto;
gap: 2rem;
padding: 1rem;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
width: 100%;
background: transparent !important;
backdrop-filter: none !important;
}

/* Scroll container scrollbar styling */
.scroll-container::-webkit-scrollbar {
height: 8px;
}

/* Scrollbar track styling */
.scroll-container::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}

/* Scrollbar thumb styling */
.scroll-container::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 4px;
}

/* Scroll item styling */
.scroll-item {
flex: 0 0 300px;
min-width: 300px;
display: flex;
flex-direction: column;
text-decoration: none;
margin: 0.5rem;
}

/* News title card in scroll item */
.scroll-item .news-title-card {
padding: 0.3rem 1rem;
min-height: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--card-background);
backdrop-filter: blur(15px);
border: 2px solid var(--border-color);
border-bottom: none;
border-radius: 15px 15px 0 0;
margin-bottom: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-item .news-title-card h2 {
margin: 0;
font-size: 1rem;
line-height: 1.2;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
color: var(--primary);
text-shadow: 0 0 10px var(--glow);
}

/* News content card in scroll item */
.scroll-item .news-content-card {
padding: 1rem;
background: var(--card-background);
backdrop-filter: blur(15px);
border: 2px solid var(--border-color);
border-top: none;
border-radius: 0 0 15px 15px;
margin-top: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-item .news-content-card img,
.scroll-item .news-content-card video {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 0;
}

.scroll-item .news-content-card .date {
font-size: 0.9rem;
color: var(--secondary);
text-align: center;
margin-bottom: 0.5rem;
font-family: 'Space Grotesk', sans-serif;
}

.scroll-item:hover .news-title-card {
transform: translateY(-5px);
box-shadow: 0 0 20px var(--glow);
background: var(--rgb-glow);
background-size: 200% 200%;
animation: rgbShift 3s linear infinite;
}

.scroll-item:hover .news-content-card {
transform: translateY(-5px);
box-shadow: 0 0 20px var(--glow);
}

.scroll-item img {
height: 280px;
width: 280px;
object-fit: cover;
}

/* Hover effect for scroll items */
.scroll-item:hover {
opacity: 1;
box-shadow: 0 0 20px var(--glow);
background: var(--rgb-glow);
background-size: 200% 200%;
animation: rgbShift 3s linear infinite;
transform: translateY(-5px);
}

/* Scroll item image styling */
.scroll-item img {
width: 100%;
height: 260px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 0.5rem;
}

/* Scroll item heading styling */
.scroll-item h3 {
font-size: 1.1rem;
color: var(--text-color);
margin: 0.3rem 0 0.2rem;
font-family: 'Space Grotesk', sans-serif;
text-transform: uppercase;
transition: color 0.3s ease;
}

/* Hover effect for scroll item heading */
.scroll-item:hover h3 {
color: var(--text-color);
}

/* Scroll item link styling */
.scroll-item, .scroll-item a {
text-decoration: none;
color: inherit;
}

/* Scroll item paragraph styling */
.scroll-item p {
font-size: 0.9rem;
color: var(--text-color);
margin: 0.3rem 0 0;
font-family: 'Space Grotesk', sans-serif;
height: 1.2em;
line-height: 1.2;
overflow: hidden;
}

.scroll-item audio {
width: 100%;
height: 40px;
margin-top: 0.5rem;
border-radius: 5px;
opacity: 0.8;
transition: opacity 0.3s ease;
}

.scroll-item audio:hover {
opacity: 1;
}

.scroll-item:hover audio {
opacity: 1;
}

/* Section header styling */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

/* Section title styling */
.section-title {
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
font-size: 1.5rem;
}

/* Hover effect for section title */
.section-title:hover {
color: var(--primary);
}

/* Scroll navigation styling */
.section-header .scroll-nav {
display: flex;
gap: 1rem;
}

/* Scroll button styling */
.section-header .scroll-nav .scroll-button {
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--primary);
padding: 0.75rem 1.25rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
font-size: 1.2rem;
min-width: 50px;
display: flex;
align-items: center;
justify-content: center;
}

/* Hover effect for scroll buttons */
.section-header .scroll-nav .scroll-button:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 20px var(--primary);
animation: rgbShift 3s linear infinite;
transform: scale(1.1);
}

/* Glitch text styling for headings */
.glitch {
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;

.glass-card a {
text-decoration: none;
color: inherit;
}

font-size: 2.5rem;
margin-bottom: 1.5rem;
text-align: center;
position: relative;
width: 100%;
overflow-wrap: break-word;
}

/* Glitch pseudo-elements for effect */
.glitch::before,
.glitch::after {
content: attr(data-text, '');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Glitch before pseudo-element (cyan) */
.glitch::before {
left: 2px;
text-shadow: -2px 0 #00ffea;
animation: glitch-1 2s linear infinite reverse;
}

/* Glitch after pseudo-element (theme-specific) */
.glitch::after {
left: -2px;
text-shadow: -2px 0 var(--secondary);
animation: glitch-2 3s linear infinite;
}

/* Glitch animation keyframes */
@keyframes glitch-1 {
0% { clip-path: inset(82% 0 13% 0); transform: translate(-2px, 2px) skew(3deg); }
10% { clip-path: inset(31% 0 62% 0); transform: translate(1px, -3px) skew(-2deg); }
20% { clip-path: inset(13% 0 82% 0); transform: translate(3px, 1px) skew(1deg); }
30% { clip-path: inset(62% 0 31% 0); transform: translate(-3px, -2px) skew(-3deg); }
40% { clip-path: inset(43% 0 43% 0); transform: translate(2px, 3px) skew(2deg); }
50% { clip-path: inset(25% 0 75% 0); transform: translate(-1px, -1px) skew(-1deg); }
60% { clip-path: inset(75% 0 25% 0); transform: translate(3px, -3px) skew(3deg); }
70% { clip-path: inset(86% 0 5% 0); transform: translate(-2px, 2px) skew(-2deg); }
80% { clip-path: inset(95% 0 5% 0); transform: translate(1px, -1px) skew(1deg); }
90% { clip-path: inset(5% 0 95% 0); transform: translate(-3px, 3px) skew(-3deg); }
100% { clip-path: inset(82% 0 13% 0); transform: translate(2px, -2px) skew(3deg); }
}

@keyframes glitch-2 {
0% { clip-path: inset(13% 0 82% 0); transform: translate(3px, -3px) scale(1.2); }
15% { clip-path: inset(82% 0 13% 0); transform: translate(-2px, 2px) scale(0.8); }
30% { clip-path: inset(31% 0 62% 0); transform: translate(1px, -1px) scale(1.3); }
45% { clip-path: inset(62% 0 31% 0); transform: translate(-3px, 3px) scale(0.9); }
60% { clip-path: inset(43% 0 43% 0); transform: translate(2px, -2px) scale(1.1); }
75% { clip-path: inset(25% 0 75% 0); transform: translate(-1px, 1px) scale(1.4); }
90% { clip-path: inset(75% 0 25% 0); transform: translate(3px, -3px) scale(0.7); }
100% { clip-path: inset(13% 0 82% 0); transform: translate(-2px, 2px) scale(1.2); }
}

/* Standard glass card styling */
.glass-card {
background: linear-gradient(135deg,
  rgba(255, 255, 255, 0.15),
  rgba(255, 255, 255, 0.1) 35%,
  rgba(255, 255, 255, 0.05) 50%,
  rgba(255, 255, 255, 0.1) 65%,
  rgba(255, 255, 255, 0.15)
);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 1.5rem;
border: 1px solid var(--border-color);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 400px;
width: 100%;
max-width: 300px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}

.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px var(--glow);
background: var(--rgb-glow);
background-size: 200% 200%;
animation: rgbShift 3s linear infinite;
}

.glass-card:hover {
--glow-intensity: 1;
box-shadow: 0 0 calc(var(--glow-intensity) * 20px) var(--glow);
transform: perspective(1000px) rotateY(var(--flip-angle));
background: var(--rgb-glow);
mix-blend-mode: difference;
isolation: isolate;
}

@keyframes wave-time {
100% { --time: 360deg; }
}

/* Hover effect for glass cards */
.glass-card:hover {
opacity: 0.8;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
transform: translateY(-5px);
transition: all 0.3s ease;
}

/* Override hover effect for cards with special effects */
.glass-card[data-effect="glow"]:hover {
opacity: 1;
box-shadow: 0 0 20px var(--glow);
background: var(--rgb-glow);
animation: rgbShift 3s linear infinite;
}

.glass-card[data-effect="shine"]:hover {
opacity: 1;
background: linear-gradient(135deg,
  rgba(255, 255, 255, 0.15),
  rgba(255, 255, 255, 0.08) 50%,
  rgba(255, 255, 255, 0.15)
);
animation: shine 1.5s infinite linear;
}

@keyframes shine {
0% {
  background-position: 200% 0;
}
100% {
  background-position: -200% 0;
}
}

/* Glass card image styling */
.glass-card img {
width: 100%;
height: 260px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}

/* RGB Glitch Effect */
.char {
display: inline-block;
transition: all 0.2s ease;
position: relative;
}

.word {
display: inline-block;
margin-right: 0.2em;
}

.char.glitch-hover:hover {
animation: glitchChar 0.2s infinite steps(2);
color: transparent;
text-shadow: 
  3px 0 #ff0000,
  -3px 0 #00ff00,
  0 3px #0000ff;
transform: scale(1.4);
z-index: 2;
}

@keyframes glitchChar {
0% {
  text-shadow: 
    2px 0 #ff0000,
    -2px 0 #00ff00,
    0 2px #0000ff;
}
25% {
  text-shadow: 
    -2px 0 #ff0000,
    2px 0 #00ff00,
    0 -2px #0000ff;
}
50% {
  text-shadow: 
    -2px -2px #ff0000,
    2px 2px #00ff00,
    0 0 #0000ff;
}
75% {
  text-shadow: 
    2px -2px #ff0000,
    -2px 2px #00ff00,
    0 0 #0000ff;
}
100% {
  text-shadow: 
    2px 0 #ff0000,
    -2px 0 #00ff00,
    0 2px #0000ff;
}
}

/* Glass card heading styling */
.glass-card h2, .glass-card h3 {
font-size: 1.2rem;
color: var(--primary);
margin: 0.5rem 0;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
font-weight: 700;
position: relative;
}

.glass-card h2:hover {
animation: textGlitch 0.3s infinite;
}

.glass-card h2:hover::before,
.glass-card h2:hover::after {
content: attr(data-text);
position: absolute;
left: 0;
width: 100%;
clip: rect(0, 0, 0, 0);
animation: textGlitchClip 3s infinite linear alternate-reverse;
}

.glass-card h2:hover::before {
left: 2px;
text-shadow: 1px 0 var(--primary);
top: -1px;
}

.glass-card h2:hover::after {
left: -2px;
text-shadow: -1px 0 var(--secondary);
top: 1px;
}

@keyframes textGlitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}

@keyframes textGlitchClip {
0% { clip: rect(44px, 450px, 56px, 0); }
5% { clip: rect(12px, 450px, 76px, 0); }
10% { clip: rect(54px, 450px, 96px, 0); }
15% { clip: rect(30px, 450px, 88px, 0); }
20% { clip: rect(24px, 450px, 64px, 0); }
25% { clip: rect(42px, 450px, 70px, 0); }
30% { clip: rect(38px, 450px, 84px, 0); }
35% { clip: rect(18px, 450px, 92px, 0); }
40% { clip: rect(46px, 450px, 80px, 0); }
45% { clip: rect(36px, 450px, 68px, 0); }
50% { clip: rect(58px, 450px, 86px, 0); }
55% { clip: rect(22px, 450px, 67px, 0); }
60% { clip: rect(32px, 450px, 73px, 0); }
65% { clip: rect(48px, 450px, 95px, 0); }
70% { clip: rect(26px, 450px, 78px, 0); }
75% { clip: rect(34px, 450px, 89px, 0); }
80% { clip: rect(16px, 450px, 72px, 0); }
85% { clip: rect(52px, 450px, 99px, 0); }
90% { clip: rect(28px, 450px, 83px, 0); }
95% { clip: rect(20px, 450px, 91px, 0); }
100% { clip: rect(40px, 450px, 75px, 0); }
}

/* Hover effect for glass card heading */
.glass-card h2, .glass-card h3 {
position: relative;
transition: all 0.3s ease;
}

.glass-card h2:hover, .glass-card h3:hover {
animation: textGlitch 0.3s infinite;
color: var(--text-color);
}

.glass-card h2:hover::before,
.glass-card h2:hover::after,
.glass-card h3:hover::before,
.glass-card h3:hover::after {
content: attr(data-text);
position: absolute;
left: 0;
width: 100%;
clip: rect(0, 0, 0, 0);
animation: textGlitchClip 3s infinite linear alternate-reverse;
}

.glass-card h2:hover::before,
.glass-card h3:hover::before {
left: 2px;
text-shadow: 1px 0 var(--primary);
top: -1px;
}

.glass-card h2:hover::after,
.glass-card h3:hover::after {
left: -2px;
text-shadow: -1px 0 var(--secondary);
top: 1px;
}

@keyframes textGlitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}

@keyframes textGlitchClip {
0% { clip: rect(44px, 450px, 56px, 0); }
5% { clip: rect(12px, 450px, 76px, 0); }
10% { clip: rect(54px, 450px, 96px, 0); }
15% { clip: rect(30px, 450px, 88px, 0); }
20% { clip: rect(24px, 450px, 64px, 0); }
25% { clip: rect(42px, 450px, 70px, 0); }
30% { clip: rect(38px, 450px, 84px, 0); }
35% { clip: rect(18px, 450px, 92px, 0); }
40% { clip: rect(46px, 450px, 80px, 0); }
45% { clip: rect(36px, 450px, 68px, 0); }
50% { clip: rect(58px, 450px, 86px, 0); }
55% { clip: rect(22px, 450px, 67px, 0); }
60% { clip: rect(32px, 450px, 73px, 0); }
65% { clip: rect(48px, 450px, 95px, 0); }
70% { clip: rect(26px, 450px, 78px, 0); }
75% { clip: rect(34px, 450px, 89px, 0); }
80% { clip: rect(16px, 450px, 72px, 0); }
85% { clip: rect(52px, 450px, 99px, 0); }
90% { clip: rect(28px, 450px, 83px, 0); }
95% { clip: rect(20px, 450px, 91px, 0); }
100% { clip: rect(40px, 450px, 75px, 0); }
}

/* Glass card paragraph styling */
.glass-card p {
font-size: 0.9rem;
color: var(--text-color);
margin: 0.5rem 0;
font-family: 'Space Grotesk', sans-serif;
line-height: 1.4;
}

/* Glass card description styling */
.glass-card .description {
flex-grow: 1;
margin: 0.8rem 0;
line-height: 1.35;
font-size: clamp(0.75rem, 2.5vw, 0.9rem);
}

@media (max-width: 768px) {
  .glass-card h2 {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    margin: 0.3rem 0;
  }
  
  .glass-card .rating {
    font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    margin: 0.3rem 0;
  }
  
  .glass-card {
    padding: 1rem;
    min-height: auto;
  }
}

/* Modern Rating Card Styles */
.ratings-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 2.5rem;
margin: 3rem auto;
max-width: 1000px;
border: 1px solid var(--border-color);
box-shadow: 0 0 30px var(--glow);
transition: all 0.3s ease;
}

.ratings-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 50px var(--glow);
}

.ratings-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}

.overall-score-ring {
text-align: center;
}

.score-circle {
width: 120px;
height: 120px;
position: relative;
margin: 0 auto;
}

.score-circle svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}

.score-circle circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}

.score-bg {
stroke: rgba(255, 255, 255, 0.1);
}

.score-progress {
stroke: var(--primary);
stroke-dasharray: 283;
stroke-dashoffset: calc(283 - (283 * var(--progress)) / 100);
transition: stroke-dashoffset 1.5s ease;
filter: drop-shadow(0 0 10px var(--glow));
}

.score-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
font-weight: bold;
color: var(--primary);
text-shadow: 0 0 10px var(--glow);
}

.score-label {
margin-top: 0.5rem;
color: var(--text-color);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}

.ratings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}

.rating-category {
background: rgba(255, 255, 255, 0.03);
padding: 1.5rem;
border-radius: 15px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.rating-category:hover {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.rating-category:hover {
transform: scale(1.02);
}

.rating-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

.rating-header h3 {
color: var(--primary);
margin: 0;
font-size: 1.2rem;
}

.rating-header .score {
color: var(--text-color);
font-weight: 500;
}

.rating-bar-wrapper {
background: rgba(255, 255, 255, 0.1);
height: 8px;
border-radius: 4px;
overflow: hidden;
margin: 1rem 0;
}

.rating-bar {

@keyframes oracleGlow {
0% { box-shadow: 0 0 20px var(--glow); }
100% { box-shadow: 0 0 40px var(--primary); }
}

@keyframes fadeInPulse {
0% { opacity: 0; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}

#magicAnswer {
background: linear-gradient(90deg, 
  transparent, 
  rgba(255, 255, 255, 0.1),
  transparent
);
padding: 1rem;
border-radius: 10px;
font-family: 'Syncopate', sans-serif;
letter-spacing: 2px;
text-shadow: 0 0 10px var(--glow);
animation: fadeInPulse 1s ease-in-out;
}

height: 100%;
position: relative;
}

.rating-fill {
height: 100%;
width: calc(var(--score) * 1%);
background: var(--primary);
border-radius: 4px;
position: relative;
transition: width 1s ease;
}

.rating-glow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: linear-gradient(90deg, transparent, var(--glow));
filter: blur(3px);
animation: glowPulse 2s infinite;
}

.rating-note {
color: var(--text-color);
margin: 1rem 0 0;
font-size: 0.9rem;
opacity: 0.8;
}

@keyframes glowPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}

@media (min-width: 768px) {
.ratings-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

/* Title card styling */
.glass-card.title-card {
padding: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
max-width: 300px;
min-height: auto;
opacity: 1;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

/* Title container inside title card */
.glass-card.title-card .card-title-container {
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
font-size: 1.2rem;
margin: 0;
}

/* Date inside title card */
.glass-card.title-card .date {
color: var(--text-color);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
margin: 0.2rem 0 0;
}

/* Content card styling */
.glass-card.content-card {
padding: 1.5rem;
width: 100%;
max-width: 300px;
min-height: 100px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
@supports (backdrop-filter: blur(15px)) {
  backdrop-filter: blur(15px);
  background: var(--card-background);
}
}

/* Image styling inside content card */
.glass-card.content-card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 0.5rem;
}

/* Contact card container */
.contact-card-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}

/* Subpage-specific card styling */
.glass-card.grad-card {
padding: 10px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
overflow: hidden;
max-width: 100%;
min-height: auto;
width: 100%;
}

/* Hover effect for grad-card */
.glass-card.grad-card:hover {
transform: scale(1.05);
}

/* Album cover image styling in grad-card */
.glass-card.grad-card img {
max-width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
display: block;
width: 100%;
}

/* Zoom effect for grad-card image on hover */
.glass-card.grad-card:hover img {
transform: scale(1.05);
}

/* Subpage-specific image card */
.kendrick-image-card {
padding: 0;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
overflow: hidden;
max-width: 100%;
background: var(--card-background);
background: rgba(255, 255, 255, 0.1);
@supports (backdrop-filter: blur(15px)) {
  backdrop-filter: blur(15px);
  background: var(--card-background);
}
border: 1px solid var(--border-color);
}

/* Hover effect for kendrick-image-card */
.kendrick-image-card:hover {
transform: scale(1.05);
}

/* Image styling in kendrick-image-card */
.kendrick-image-card img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
border-radius: 8px;
transition: transform 0.3s ease;
display: block;
}

/* Zoom effect for kendrick-image-card image on hover */
.kendrick-image-card:hover img {
transform: scale(1.1);
}

/* Review content styling */
.review-content {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
@supports (backdrop-filter: blur(10px)) {
  backdrop-filter: blur(10px);
  background: var(--glass);
}
border-radius: 20px;
padding: 1.5rem;
margin-top: 1rem;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
z-index: 2;
position: relative;
}

/* Ensure text readability in review content */
.review-content h2, .review-content p {
color: var(--text-color);
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Highlight text styling */
.highlight {
color: var(--primary);
font-weight: bold;
}

/* Adjust highlight color for specific subpages */
[data-page="review-wlr"] .highlight {
color: #FF0000;
}

[data-page="features-kendrick"] .highlight {
color: #9900ff;
}

/* Overall rating heading styling */
.overall-rating h3 {
color: var(--primary);
}

/* Adjust overall rating color for specific subpages */
[data-page="review-wlr"] .overall-rating h3 {
color: #FF0000;
}

[data-page="features-kendrick"] .overall-rating h3 {
color: #9900ff;
}

/* Track highlight item styling */
.track-highlight-item {
padding: 0.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for track highlight items */
.track-highlight-item:hover {
transform: scale(1.02);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Ensure glass-card containing tables renders correctly */
.glass-card:has(.table-container) {
display: block;
min-height: auto;
max-width: 100%;
padding: 1rem;
opacity: 1;
}

/* Contact form styling */
.contact-form {
width: 100%;
max-width: 100%;
margin: 0;
}

/* Form group styling */
.form-group {
margin-bottom: 1rem;
text-align: left;
}

/* Form label styling */
.form-group label {
display: block;
color: var(--text-color);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
margin-bottom: 0.3rem;
}

/* Form input and textarea styling */
.form-control {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--border-color);
background: var(--glass);
background: rgba(255, 255, 255, 0.1);
@supports (backdrop-filter: blur(5px)) {
  backdrop-filter: blur(5px);
  background: var(--glass);
}
color: var(--text-color);
border-radius: 5px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
transition: all 0.3s ease;
}

/* Form input focus state */
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 10px var(--glow);
}

/* Textarea specific styling */
textarea.form-control {
height: 100px;
resize: vertical;
}

/* Submit button styling */
.submit-btn {
background: var(--glass);
background: rgba(255, 255, 255, 0.1);
@supports (backdrop-filter: blur(5px)) {
  backdrop-filter: blur(5px);
  background: var(--glass);
}
border: 1px solid var(--primary);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
font-size: 0.9rem;
width: 100%;
}

/* Submit button hover effect */
.submit-btn:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 20px var(--primary);
animation: rgbShift 3s linear infinite;
}

/* Center the contact title */
.contact-title {
text-align: center;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
.main-content {
  margin-left: 0;
  width: 100%;
}
.scroll-section {
  padding: 1rem;
}
.scroll-item {
  flex: 0 0 250px;
  min-width: 250px;
  height: 350px;
}
.scroll-item img {
  height: 250px;
}
.section-title {
  font-size: 1.2rem;
}
#musicToggle, #themeToggle, #tipMachine {
  bottom: 10px;
}
#musicToggle { right: 120px; }
#themeToggle { right: 70px; }
#tipMachine { right: 10px; }
.footer {
  padding: 0.5rem 1rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.footer .nav-logo {
  margin-left: 0.5rem;
}
.footer-content p {
  font-size: 0.8rem;
}
.footer .newsletter-form {
  margin-right: 0.5rem;
}
.footer .newsletter-form input {
  width: 120px;
}
.hero {
  padding: 1rem;
}
.heartbeat-text {
  font-size: 1rem;
  margin-bottom: 2rem;
}
.magic-search {
  max-width: 280px;
  padding: 1rem;
  width: calc(100% - 2rem);
  margin: 0 auto;
}
.magic-search-bar {
  flex-direction: column;
  max-width: 100%;
  align-items: center;
}
.magic-search input {
  width: 100%;
  max-width: 220px;
  padding: 0.8rem;
  border-radius: 5px;
  margin-bottom: 0.8rem;
  margin-right: 0;
  font-size: 0.9rem;
}
.magic-search button {
  padding: 0.8rem 1.2rem;
  border-radius: 5px;
  border: 1px solid var(--primary);
}
.form-control {
  padding: 0.4rem;
  font-size: 0.85rem;
}
.submit-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}
.glitch {
  font-size: 1.5rem;
}
.container {
  padding: 60px 0.5rem 1rem;
  width: calc(100% - 1rem);
}
.trend-table {
  display: block;
  overflow-x: auto;
  font-size: 0.8rem;
}
.glass-card {
  min-height: 450px;
  max-width: clamp(200px, 90vw, 250px);
}
.glass-card img {
  height: 200px;
}
.navbar {
  padding: 0.5rem;
  height: 50px;
}
.nav-logo {
  margin-left: 0.5rem;
}
.nav-logo .logo-symbol i {
  font-size: 1.2rem;
}
.search-container {
  max-width: 220px;
  margin-left: 0.5rem;
}
.search-input {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}
[data-page="shop"] .shop-hero h1 {
  font-size: 2rem;
}
[data-page="shop"] .shop-grid {
  grid-template-columns: 1fr;
}
[data-page="shop"] .crypto-grid {
  grid-template-columns: 1fr;
}
[data-page="shop"] .countdown-timer div {
  font-size: 1rem;
  min-width: 50px;
}
[data-page="shop"] .crypto-options {
  grid-template-columns: 1fr;
}
}

/* Shop Page Specific Styles */
[data-page="shop"] body {
background: var(--background);
}

/* Hero banner for shop page */
[data-page="shop"] .hero-banner {
position: relative;
width: 100%;
max-width: 1200px;
height: 400px;
background: linear-gradient(135deg, var(--dark), #2c2c2c);
border-radius: 15px;
overflow: hidden;
margin: 2rem auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 0 30px var(--glow);
}

/* Crypto options styling */
[data-page="shop"] .crypto-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
padding: 1rem;
background: rgba(0, 0, 0, 0.8);
border-radius: 15px;
border: 2px solid var(--primary);
box-shadow: 0 0 30px var(--glow);
}

/* Construction tape animation */
[data-page="shop"] .construction-tape {
position: fixed;
width: 150%;
height: 50px;
background: repeating-linear-gradient(
  45deg,
  #000,
  #000 10px,
  #ffcc00 10px,
  #ffcc00 20px
);
top: 0;
left: -25%;
z-index: 1000;
transform: rotate(-5deg);
animation: slide 15s linear infinite;
}

/* Wallet Modal Styling */
.wallet-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
z-index: 2000;
justify-content: center;
align-items: center;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.3s ease;
}

.wallet-modal-overlay.active {
display: flex;
opacity: 1;
}

.wallet-modal-content {
background: var(--glass);
background: rgba(255, 255, 255, 0.1);
@supports (backdrop-filter: blur(15px)) {
  backdrop-filter: blur(15px);
  background: var(--card-background);
}
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 2rem;
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 0 20px var(--glow);
position: relative;
transform: scale(0.9);
transition: transform 0.3s ease;
}

.wallet-modal-overlay.active .wallet-modal-content {
transform: scale(1);
}

.wallet-modal-header {
position: relative;
margin-bottom: 1.5rem;
}

.wallet-modal-header h2 {
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
font-size: 1.5rem;
margin-bottom: 0.5rem;
text-shadow: 0 0 10px var(--primary);
}

.wallet-modal-header p {
color: var(--text-color);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
margin: 0;
}

.wallet-modal-close {
position: absolute;
top: -10px;
right: -10px;
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--primary);
padding: 0.5rem;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.wallet-modal-close:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 20px var(--primary);
animation: rgbShift 3s linear infinite;
}

.wallet-modal-body {
display: flex;
flex-direction: column;
gap: 1rem;
}

.wallet-option {
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--primary);
padding: 1rem;
border-radius: 10px;
cursor: pointer;
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.wallet-option i {
font-size: 1.5rem;
}

.wallet-option:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 20px var(--primary);
animation: rgbShift 3s linear infinite;
transform: translateY(-3px);
}

/* Tip Machine Overlay */
.tip-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
z-index: 2000;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}

.tip-overlay.active {
display: flex;
opacity: 1;
}

.tip-modal {
background: var(--glass);
background: rgba(255, 255, 255, 0.1);
@supports (backdrop-filter: blur(15px)) {
  backdrop-filter: blur(15px);
  background: var(--card-background);
}
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 2rem;
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 0 20px var(--glow);
transform: scale(0.9);
transition: transform 0.3s ease;
}

.tip-overlay.active .tip-modal {
transform: scale(1);
}

.tip-modal p {
color: var(--text-color);
margin-bottom: 1rem;
font-family: 'Space Grotesk', sans-serif;
}

.tip-modal input {
background: var(--glass);
border: 1px solid var(--primary);
border-radius: 5px;
color: var(--text-color);
padding: 0.5rem;
width: 100%;
margin-bottom: 1rem;
}

.tip-modal button {
background: var(--primary);
color: var(--dark);
padding: 0.5rem 1rem;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.3s;
margin: 0.5rem;
}

.tip-modal button:hover {
background: var(--secondary);
transform: scale(1.05);
}

.tip-modal .close-btn {
background: var(--glass);
color: var(--primary);
}

.tip-modal .close-btn:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 20px var(--primary);
animation: rgbShift 3s linear infinite;
}

/* New Shop-Specific Styles for Remodeled shop.html */
[data-page="shop"] .shop-container {
padding: 100px 2rem 4rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}

[data-page="shop"] .shop-hero {
position: relative;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 20, 50, 0.8));
border-radius: 20px;
margin-bottom: 4rem;
overflow: hidden;
box-shadow: 0 0 40px var(--glow);
}

[data-page="shop"] .shop-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--rgb-glow);
opacity: 0.2;
animation: pulseGlow 6s infinite;
pointer-events: none;
}

[data-page="shop"] .shop-hero h1 {
font-size: 3rem;
color: var(--primary);
text-shadow: 0 0 15px var(--glow);
animation: glitch 3s infinite;
}

[data-page="shop"] .shop-hero p {
font-size: 1.2rem;
color: var(--text-color);
margin: 1rem 0;
}

/* Shop Hero Connect Wallet Button */
[data-page="shop"] .connect-wallet-btn {
background: var(--glass);
background: rgba(255, 255, 255, 0.1);
@supports (backdrop-filter: blur(15px)) {
  backdrop-filter: blur(15px);
  background: var(--glass);
}
border: 1px solid var(--border-color);
color: var(--primary);
padding: 1rem 2rem;
border-radius: 30px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px var(--glow);
font-size: 1rem;
position: relative;
z-index: 2;
}

[data-page="shop"] .connect-wallet-btn:hover {
background: var(--rgb-glow);
color: var(--dark);
transform: scale(1.1);
box-shadow: 0 0 30px var(--primary);
animation: rgbShift 3s linear infinite;
}

[data-page="shop"] .connect-wallet-btn.connected {
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: var(--dark);
border-color: var(--primary);
box-shadow: 0 0 15px var(--glow);
}

[data-page="shop"] .shop-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}

[data-page="shop"] .shop-card {
background: var(--card-background);
@supports (backdrop-filter: blur(15px)) {
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.1);
}
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
min-height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}

[data-page="shop"] .shop-card:hover {
transform: translateY(-10px);
box-shadow: 0 0 30px var(--glow);
background: var(--rgb-glow);
animation: rgbShift 3s linear infinite;
}

[data-page="shop"] .shop-card i {
font-size: 4rem;
color: var(--primary);
margin-bottom: 1rem;
animation: float 3s ease-in-out infinite;
}

[data-page="shop"] .shop-card h2 {
font-size: 1.5rem;
color: var(--primary);
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
margin: 0.5rem 0;
}

[data-page="shop"] .shop-card p {
font-size: 1rem;
color: var(--text-color);
margin: 0;
}

[data-page="shop"] .countdown-section {
text-align: center;
margin: 4rem 0;
}

[data-page="shop"] .countdown-timer {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}

[data-page="shop"] .countdown-timer div {
background: var(--glass);
border: 1px solid var(--primary);
padding: 1rem;
border-radius: 10px;
font-size: 1.5rem;
color: var(--primary);
min-width: 60px;
text-align: center;
box-shadow: 0 0 10px var(--glow);
}

[data-page="shop"] .support-section {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 50, 0.7));
border-radius: 20px;
padding: 2rem;
margin-bottom: 4rem;
box-shadow: 0 0 30px var(--glow);
}

[data-page="shop"] .crypto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

[data-page="shop"] .crypto-card {
background: var(--glass);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}

[data-page="shop"] .crypto-card:hover {
transform: translateY(-10px);
box-shadow: 0 0 20px var(--glow);
}

[data-page="shop"] .crypto-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}

[data-page="shop"] .wallet-address {
font-size: 0.8rem;
word-break: break-all;
color: var(--text-color);
margin: 0.5rem 0;
}

[data-page="shop"] .copy-address-btn {
background: var(--glass);
border: 1px solid var(--primary);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}

[data-page="shop"] .copy-address-btn:hover {
background: var(--rgb-glow);
transform: translateY(-2px);
}

[data-page="shop"] .donate-input {
background: var(--glass);
border: 1px solid var(--primary);
border-radius: 5px;
color: var(--text-color);
padding: 0.5rem;
width: 100%;
margin-bottom: 1rem;
}

[data-page="shop"] .donate-button {
background: var(--primary);
color: var(--dark);
padding: 0.5rem 1rem;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.3s;
width: 100%;
}

[data-page="shop"] .donate-button:hover {
background: var(--secondary);
transform: scale(1.05);
}

/* Responsive adjustments for wallet modal */
@media (max-width: 768px) {
.wallet-modal-content {
  max-width: 300px;
  padding: 1.5rem;
}
.wallet-modal-header h2 {
  font-size: 1.2rem;
}
.wallet-modal-header p {
  font-size: 0.8rem;
}
.wallet-option {
  padding: 0.8rem;
  font-size: 0.9rem;
}
.wallet-option i {
  font-size: 1.2rem;
}
}

/* Responsive adjustments for tip overlay */
@media (max-width: 768px) {
.tip-modal {
  max-width: 300px;
  padding: 1.5rem;
}
.tip-modal p {
  font-size: 0.9rem;
}
.tip-modal input {
  padding: 0.4rem;
}
.tip-modal button {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}
}

/* Additional Keyframes */
@keyframes slide {
0% { transform: translateX(-50px) rotate(-5deg); }
100% { transform: translateX(50px) rotate(-5deg); }
}

@keyframes pulseGlow {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.4; }
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

/* Wallet Connect Button in Dropdown */
.dropdown-menu .wallet-connect {
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 25px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
position: relative;
padding-left: 2rem;
}

.dropdown-menu .wallet-connect::before {
content: '';
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff0000;
box-shadow: 0 0 5px #ff0000;
}

.dropdown-menu .wallet-connect:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 15px var(--glow);
animation: rgbShift 3s linear infinite;
transform: translateY(-3px);
}

.dropdown-menu .wallet-connect.connected {
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: var(--dark);
border-color: var(--primary);
box-shadow: 0 0 10px var(--glow);
}

.dropdown-menu .wallet-connect.connected::before {
background: #00ff00;
box-shadow: 0 0 5px #00ff00;
}

/* Wallet Disconnect Button in Dropdown */
.wallet-disconnect, #wallet-disconnect {
background: var(--glass);
border: 1px solid var(--border-color);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 25px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
display: inline-block;
}

.dropdown-menu .wallet-disconnect, .dropdown-menu #wallet-disconnect {
margin-top: 0.5rem;
}

.wallet-disconnect:hover, #wallet-disconnect:hover {
background: var(--rgb-glow);
color: var(--dark);
box-shadow: 0 0 15px var(--glow);
animation: rgbShift 3s linear infinite;
transform: translateY(-3px);
}

/* Wallet status in dropdown */
.dropdown-menu .wallet-status {
color: var(--text-color);
font-size: 0.8rem;
margin-top: 0.5rem;
font-family: 'Space Grotesk', sans-serif;
display: block;
}
/* 1. Custom Paint API Neon Drip */
@property --drip-offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.neon-drip {
  --drip-offset: 0px;
  background: paint(neon-drip); /* Requires custom Houdini paint worklet */
  animation: drip-flow 3s infinite linear;
}
@keyframes drip-flow {
  100% { --drip-offset: 50px; }
}

/* 2. Scroll-Driven Animation */
.scroll-glow {
  animation: glow-shift linear both;
  animation-timeline: scroll();
}
@keyframes glow-shift {
  from { box-shadow: 0 0 10px var(--glow); }
  to { box-shadow: 0 0 30px var(--primary); }
}

/* 3. Container Query Units */
.responsive-card {
  container-type: inline-size;
  padding: calc(1rem + 10cqw);
  border-radius: 10cqi;
}

/* 4. Color-Function Mix */
.color-mix-text {
  color: color-mix(in srgb, var(--primary) 70%, var(--secondary));
  text-shadow: 0 0 15px color-mix(in lch, var(--glow), black 20%);
}

/* 5. Subgrid Layout */
.grid-sub {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 2fr) 1fr;
  gap: 1rem;
}
.grid-sub > * {
  display: grid;
  grid: subgrid;
}

/* 6. Backdrop Blend Mode */
.glass-blend {
  backdrop-filter: blur(15px) saturate(150%);
  background-blend-mode: overlay;
  background: linear-gradient(135deg, var(--glass), color-mix(in hsl, var(--primary), white 50%));
}

/* 7. Motion Path */
.orbit-path {
  offset-path: path('M 0 0 A 50 50 0 0 1 100 0 A 50 50 0 0 1 0 0');
  animation: orbit 4s infinite linear;
}
@keyframes orbit {
  100% { offset-distance: 100%; }
}

/* 8. Mask Layering */
.masked-cyber {
  mask: url(#cyber-mask) layer, linear-gradient(45deg, transparent 40%, black);
  -webkit-mask-composite: source-in;
}

/* 9. Custom Property Transitions */
@property --glow-intensity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.glow-transition {
  --glow-intensity: 0;
  transition: --glow-intensity 0.5s ease;
}
.glow-transition:hover {
  --glow-intensity: 1;
  box-shadow: 0 0 calc(var(--glow-intensity) * 20px) var(--glow);
}

/* 10. Viewport Units with Clamp */
.dynamic-height {
  height: clamp(50dvh, calc(60vh + var(--scroll-offset, 0px)), 100dvh);
}

/* 11. Accent Color Customization */
.accent-shift {
  accent-color: var(--primary);
  outline: 2px solid color-mix(in oklab, var(--accent), transparent 50%);
}

/* 12. Trigonometric Functions */
.wave-border {
  border-radius: calc(12px + sin(var(--time, 0deg)) * 5px);
  animation: wave-time 2s infinite;
}
@keyframes wave-time {
  100% { --time: 360deg; }
}

/* 13. Scroll Snap Points */
.snap-section {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100dvh;
}
.snap-section > * {
  scroll-snap-align: center;
}

/* 14. Advanced Blend Mode */
.holo-blend {
  background: var(--rgb-glow);
  mix-blend-mode: difference;
  isolation: isolate;
}

/* 15. Layered Shadows */
.depth-shadow {
  box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 0 20px color-mix(in lab, var(--dark), transparent 80%);
}

/* 16. Dynamic Clip Path */
.clip-reveal {
  clip-path: polygon(0 0, calc(var(--reveal, 0%) * 2) 0, 100% 100%, 0 100%);
  transition: --reveal 0.5s ease;
}
.clip-reveal:hover { --reveal: 100%; }

/* 17. Focus Within Styling */
.focus-glow:focus-within {
  outline: 3px solid var(--primary);
  box-shadow: 0 0 15px var(--glow);
}

/* 18. Overscroll Behavior */
.no-bounce {
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* 19. Custom Cursor */
.cyber-cursor {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="10" fill="none" stroke="cyan"/></svg>') 16 16, auto;
}

/* 20. Text Gradient Fill */
.gradient-text {
  background: var(--rgb-glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 21. Scrollbar Customization */
.fancy-scroll {
  scrollbar-color: var(--primary) var(--dark);
  scrollbar-width: thin;
}
.fancy-scroll::-webkit-scrollbar-thumb {
  background: var(--rgb-glow);
  border-radius: 10px;
}

/* 22. Perspective Transform */
.3d-flip {
  transform: perspective(1000px) rotateY(var(--flip-angle, 0deg));
  transition: --flip-angle 0.5s ease;
}
.3d-flip:hover { --flip-angle: 180deg; }

/* 23. Environment Blend */
.env-blend {
  background: env(safe-area-inset-top) var(--dark);
  mix-blend-mode: screen;
}

/* 24. Logical Properties */
.logical-pad {
  padding-inline: 2rem;
  margin-block: 1rem;
}

/* 25. Aspect Ratio */
.square-ratio {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 26. Color Contrast */
.contrast-text {
  color: color-contrast(var(--background) vs white, black to AA);
}

/* 27. Sticky Hover */
.sticky-hover {
  position: sticky;
  top: 10px;
  transition: background 0.3s ease;
}
.sticky-hover:hover { background: var(--glass); }

/* 28. Gap with Flex */
.flex-gap {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
}

/* 29. Filter Stack */
.filter-stack {
  filter: blur(2px) hue-rotate(var(--hue, 0deg)) brightness(1.2);
  animation: hue-cycle 5s infinite;
}
@keyframes hue-cycle { 100% { --hue: 360deg; } }

/* 30. Container Style Queries */
@container (min-width: 300px) {
  .adaptive-text {
      font-size: clamp(1rem, 5cqi, 2rem);
  }
}
/* Ensure album card doesn’t restrict image */
.album-card {
  max-width: 100%; /* Full width of parent */
  margin: 0 auto;
  padding: 2rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all 0.4s ease;
}

/* Full album image in view */
.album-image {
  display: block;
  width: 100%;
  max-width: min(90vw, 400px);
  aspect-ratio: 1/1;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  will-change: transform;
  margin: 0 auto 1rem;
  object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 768px) {
  .album-image {
      max-width: 90vw;
      margin: 0 auto 1rem;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--primary-rgb), 0.2);
  }
  .album-image:hover {
      transform: translateY(-5px);
  }
}

.album-image:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--primary-rgb), 0.4);
}

/* Scale down responsively */
@media (max-width: 800px) {
  .album-image {
      width: 100%;
      height: auto;
  }
}
.dropdown-menu {
display: none;
}
.dropdown-menu.active {
display: block;
}
.dropdown {
position: relative;
z-index: 1000; /* Ensure it stays above other content */
}

.dropdown-toggle {
background: none;
border: none;
color: var(--primary);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
transition: transform 0.2s ease;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
transform: scale(1.1);
outline: none;
}

.dropdown-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 1rem;
width: 200px;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
z-index: 1003;
}

.dropdown-menu.active {
display: block;
opacity: 1;
transform: translateY(0);
}

@media (max-width: 768px) {
.dropdown-menu {
  position: fixed;
  top: 50px;
  right: 0;
  width: 200px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateX(100%);
}

.dropdown-menu.active {
  transform: translateX(0);
}
}

.dropdown-menu {
right: 0;
left: auto;
transform: translateX(0) translateY(-10px);
}

.dropdown-menu.active {
transform: translateX(0) translateY(0);
}
#backToTop:hover {
  background: var(--rgb-glow);
  color: var(--dark);
  box-shadow: 0 0 20px var(--primary);
  transform: translateY(-3px);
}

/* Rankings Section Styling */
.rankings-section {
    padding: 3rem 1rem;
    text-align: center;
    background: transparent;
    margin: 2rem 0;
}

.rankings-header {
    margin-bottom: 3rem;
}

.rankings-title {
    font-family: 'Syncopate', sans-serif;
    font-size: 2.5rem;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px var(--glow);
}

.rankings-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    color: var(--text-color);
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.8;
}

.rankings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.ranking-card {
    background: var(--card-background);
    backdrop-filter: blur(15px);
    border: 2px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.ranking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--rgb-glow));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ranking-card:hover::before {
    opacity: 1;
}

.ranking-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px var(--glow);
    border-color: var(--primary);
    background: var(--rgb-glow);
    background-size: 200% 200%;
    animation: rgbShift 3s linear infinite;
}

.ranking-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.ranking-card:hover .ranking-icon {
    transform: scale(1.2);
}

.ranking-card h3 {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-card p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.5;
    flex-grow: 1;
    margin: 0;
}

@media (max-width: 768px) {
    .rankings-section {
        padding: 2rem 1rem;
    }

    .rankings-title {
        font-size: 2rem;
    }

    .rankings-subtitle {
        font-size: 1rem;
    }

    .rankings-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ranking-card {
        padding: 1.5rem;
        min-height: 250px;
    }

    .ranking-icon {
        font-size: 2.5rem;
    }

    .ranking-card h3 {
        font-size: 1.2rem;
    }
}