*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- Frutiger Aero Theme for Nivvle - Polished Version --- */

:root {
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --text-color: #003366;
    --text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
    --accent-blue: #3498db;
    --accent-green: rgba(110, 220, 130, 0.8);
    --accent-red: rgba(255, 130, 150, 0.8);
    --glass-bg: rgba(240, 248, 255, 0.4);
    /* NEW: More opaque background for readability */
    --glass-bg-opaque: rgba(240, 248, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.6);
    --gloss-gradient: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 100%);
    --button-bg: linear-gradient(to bottom, #f0f9ff, #cbebff);
    --button-hover-bg: linear-gradient(to bottom, #ffffff, #d6f0ff);
    --button-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

body {
    font-family: var(--font-family);
    background: url("background.png") no-repeat center center fixed;
    background-size: cover;
    color: var(--text-color);
    margin: 0;
    /* UPDATED: Removed vertical padding to allow perfect flexbox centering */
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.3s ease;
    /* Hide scrollbar but keep functionality */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hide scrollbar for webkit browsers */
body::-webkit-scrollbar {
    display: none;
}

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes scaleOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.9); opacity: 0; } }
@keyframes slideUpIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes correctGlow {
    0%, 100% { box-shadow: 0 0 10px var(--accent-green), 0 0 5px #ffffff inset; }
    50% { box-shadow: 0 0 20px var(--accent-green), 0 0 10px #ffffff inset; }
}

/* Main Game Container */
#gameContent {
    width: clamp(350px, 40vw, 550px);
    padding: 2rem;
    background: var(--glass-bg);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 20, 40, 0.2);
    text-align: center;
    display: none;
    transition: transform 0.3s ease;
    transform-origin: center;
    position: relative;
    /* Align with top controls and bottom home button */
    margin-top: 20px;
    margin-bottom: 20px;
}
#gameContent.visible {
    display: block;
}

#logo {
    max-width: 180px; /* Restored original logo size */
    margin-bottom: 1.5rem;
}

/* --- Overlays and Modals --- */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    z-index: 100;
    display: none;
    justify-content: center;
    align-items: center;
}
.overlay.visible { display: flex; animation: fadeIn 0.3s ease forwards; }
.overlay.hiding { animation: fadeOut 0.3s ease forwards; }
.overlay.hiding .modal { animation: scaleOut 0.3s ease forwards; }
.modal {
    background: var(--glass-bg);
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 20, 40, 0.2);
    padding: 2.25rem 2.5rem;
    width: 90%;
    max-width: 750px;
    text-align: center;
    animation: scaleIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal h2 { margin-top: 0; color: var(--text-color); text-shadow: var(--text-shadow); }
/* modal subtitle */
.modal-subtitle { max-width:360px; margin-left:auto; margin-right:auto; color: rgba(0,0,0,0.6); font-weight:400; }

/* Input + icon wrapper */
.input-with-icon { display:flex; align-items:center; gap:8px; margin-top:18px; margin-bottom:12px; }
.input-with-icon .input-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--accent-blue); }
.input-with-icon .input-icon svg { width:18px; height:18px; }
.input-field { flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.2); color:var(--text-color); box-shadow: inset 0 2px 6px rgba(0,0,0,0.03); }

/* Primary CTA styling for Load Playlist */
.btn.primary { background: linear-gradient(180deg,#eaf6ff,#cdeeff); border: none; color: var(--text-color); font-weight:700; padding:12px 18px; border-radius:12px; box-shadow: 0 6px 18px rgba(52,152,219,0.12); }
.btn.primary:hover { background: linear-gradient(180deg,#d6efff,#bfe8ff); }

/* unify button/input border-radius */
.modal .btn, .modal .input-field, .modal .icon-btn { border-radius: 12px; }

/* --- Guess Boxes & VERTICAL Flip Animation --- */
#guesses-container {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Restored gap */
    margin: 1.5rem 0; /* Restored margin */
    perspective: 1000px;
}
.guess-box {
    height: 42px; /* Restored height */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
.guess-box.flipped {
    transform: rotateX(180deg);
}
.guess-box-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px; /* Restored padding */
}
.guess-box-front {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.guess-box-back {
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transform: rotateX(180deg);
}
.guess-box-back.correct {
    background-color: var(--accent-green);
    border: 2px solid rgba(150, 255, 170, 0.8);
    animation: correctGlow 1.5s ease-in-out infinite;
}
.guess-box-back.incorrect {
    background-color: var(--accent-red);
    border: 1px solid rgba(255, 160, 170, 0.8);
}
.guess-box .time {
    font-size: 12px;
    font-family: monospace;
    background: rgba(0,0,0,0.2);
    padding: 2px 6px;
    border-radius: 5px;
}

/* Active guess highlight */
.guess-box.active-guess {
    box-shadow: 0 0 0 3px rgba(52,152,219,0.6), 0 0 20px rgba(52,152,219,0.4);
    animation: pulseGlow 1.5s ease-in-out infinite, fadeInHighlight 0.3s ease-in;
    border-radius: 10px;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52,152,219,0.6), 0 0 20px rgba(52,152,219,0.4); }
    50% { box-shadow: 0 0 0 3px rgba(52,152,219,0.8), 0 0 30px rgba(52,152,219,0.6); }
}

@keyframes fadeInHighlight {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* --- Progress Bar Styles --- */
#progress-container {
    margin: 2rem 0 1.5rem 0; /* Restored margin */
}
#progress-bar-wrapper {
    position: relative;
    width: 100%;
    height: 12px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#progress-label {
    position: absolute;
    bottom: 100%;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    transform: translateX(-50%);
    transition: left 0.3s ease;
    white-space: nowrap;
}
#progress-bar-fill {
    position: absolute;
    top: 0; left: 0;
    width: 0%;
    height: 100%;
    background: var(--accent-blue);
    border-radius: 6px;
}
#progress-bar-marker {
    position: absolute;
    top: -2px;
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: 2px solid var(--accent-blue);
    box-shadow: 0 0 6px rgba(52, 152, 219, 0.7);
    transition: left 0.3s ease;
    transform: translateX(-50%);
}

/* --- Buttons --- */
.btn {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-color);
    background: var(--button-bg);
    border: 1px solid #aadeff;
    border-radius: 12px;
    box-shadow: var(--button-shadow);
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 60%;
    background: var(--gloss-gradient);
}
.btn:hover {
    background: var(--button-hover-bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    background: #e0e0e0;
}

/* Small button variant for top-left home in game */
.btn.small {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
}

.landing-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
}

.landing-fixed-hero,
.landing-scrollable {
    flex: 1;
    height: 100vh;
}

.landing-fixed-hero {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2.5rem;
    padding-left: 3rem;
}

.landing-scrollable {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 2.5rem;
    padding-right: 3rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.landing-scrollable::-webkit-scrollbar {
    display: none;
}

/* Hero Section - Windows 7 Aero Window */
.landing-hero {
    max-width: 520px;
    width: 100%;
}

/* Windows 7 Aero Hero Window Styling */
.hero-window {
    max-width: 560px;
    width: 100%;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 16px 64px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 100; /* Above everything else */
    background: transparent !important; /* Ensure transparency */
}

.hero-window .window-body {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(240, 248, 255, 0.3) 100%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.hero-window .title-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    height: auto;
}
.title-bar {cursor: move;}

.hero-window .title-bar-text {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 400;
    color: #003d66;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.hero-window .title-bar-controls button {
    width: 24px;
    height: 22px;
}

.hero-window-body {
    padding: 2rem 1.75rem;
    border: none;
    position: relative;
    background: transparent;
}

/* Glossy overlay effect for window body */
.hero-window-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    pointer-events: none;
}

.hero-left {
    text-align: center;
    margin-bottom: 1.5rem;
}

.hero-logo {
    max-width: 100%;
    width: 320px;
    filter: drop-shadow(0 12px 28px rgba(52, 152, 219, 0.25)) 
            drop-shadow(0 4px 12px rgba(255, 255, 255, 0.4));
}

.hero-logo-large {
    max-width: 400px;
}

.hero-right {
    text-align: center;
}

.lead {
    color: #003d66;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* Mobile/Tablet Responsive Layout */
@media (max-width: 1024px) {
    .landing-layout {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        align-items: stretch; /* Fix off-center issue */
        justify-content: flex-start;
    }
    
    .landing-fixed-hero {
        position: relative;
        height: auto;
        min-height: auto;
        padding: 3rem 2rem 2rem;
        justify-content: center;
        align-items: center; /* Center hero content */
        flex: none;
    }
    
    .landing-scrollable {
        position: relative;
        height: auto;
        overflow: visible;
        padding: 0 2rem 0; /* Removed bottom padding, will add to section */
        flex: none;
        align-items: center; /* Center games content */
    }
    
    .hero-window {
        max-width: 600px;
        width: 100%;
        margin: 0 auto; /* Ensure hero window is centered */
    }
    
    .hero-logo {
        width: 280px;
    }
    
    .hero-logo-large {
        max-width: 320px;
    }
}

/* Settings modal tabs - browser style */
.modal-with-tabs-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
    max-width: 750px;
}
.settings-tabs-container {
    position: relative;
    margin-bottom: 0;
    align-self: flex-start;
}
.settings-tabs { 
    display:flex; 
    gap:2px; 
    background: transparent;
    padding: 0;
    justify-content: flex-start;
}
.settings-tabs .tab { 
    padding:10px 20px; 
    border-radius:10px 10px 0 0; 
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.3); 
    border-bottom: none;
    cursor:pointer; 
    transition: all 0.2s;
    font-weight: 500;
    color: rgba(0,0,0,0.6);
}
.settings-tabs .tab:hover {
    background: rgba(255,255,255,0.85);
}
.settings-tabs .tab.active { 
    background: var(--glass-bg);
    color: var(--text-color);
    font-weight:700;
    border-color: var(--glass-border);
    border-bottom: none;
}
.settings-modal {
    border-radius: 0 0 18px 18px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    margin-top: -1px;
}
.settings-panels { margin-top:0; }
.settings-panels .panel { display:none; }
.settings-panels .panel.active { display:block; }

/* Volume control styling */
.volume-control-group {
    margin-bottom: 2rem;
}

.volume-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    font-size: 15px;
}

.volume-value {
    font-weight: 700;
    color: var(--accent-blue);
    min-width: 45px;
    text-align: right;
}

.volume-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.1);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.6);
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.volume-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.6);
}

.volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--accent-blue) 0%, var(--accent-blue) var(--slider-percent, 70%), rgba(0,0,0,0.1) var(--slider-percent, 70%), rgba(0,0,0,0.1) 100%);
}

.volume-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.1);
}

.volume-slider::-moz-range-progress {
    height: 8px;
    border-radius: 4px;
    background: var(--accent-blue);
}

/* floating home bottom-right */
.floating-home { position: fixed; right: 20px; bottom: 20px; z-index: 50; }

/* Answer overlay close and next */
.answer-close { 
    position:absolute; 
    right:10px; 
    top:10px; 
    background:var(--button-bg);
    backdrop-filter: blur(20px);
    border:1px solid var(--glass-border); 
    font-size:18px; 
    color:var(--text-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.answer-close:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
#answer-next { background: linear-gradient(180deg,#eaf6ff,#cdeeff); border:none; padding:8px 14px; border-radius:10px; }

/* Use the provided homepage background when available */
body.landing-background { background-image: url('backgroundhomepage.png'); background-size: cover; background-position: center; }

/* Top-right control group */
.top-right-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    z-index: 20;
}

/* Small circular icon button used for Home */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 8px;
    background: var(--button-bg);
    border: 1px solid #aadeff;
    box-shadow: var(--button-shadow);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}
.icon-btn img { width: 60%; height: 60%; display:block; }

/* Make inline svgs inherit text color (so they match the text color) */
.icon-btn, .icon-btn svg { color: var(--text-color); }

/* small variant for smaller circular buttons */
.icon-btn.small { width:44px; height:44px; padding:6px; }
.icon-btn.small svg { width:18px; height:18px; }

/* modal small home button */
.modal .modal-home.small { width:40px; height:40px; padding:6px; }
.modal .modal-home.small svg { width:20px; height:20px; }
.modal .modal-home { cursor: pointer; }

/* make the change playlist button slightly smaller in height to match icon */
.top-right-controls .btn { height: 44px; padding: 0 14px; display:flex; align-items:center; border-radius:12px; }
.top-right-controls .icon-btn.small + .btn.below-icon { margin-top:8px; }

/* ensure Change Playlist is below the home icon and they don't overlap */
.top-right-controls { pointer-events:auto; }

/* spotifyicon.svg as mask inside input icon */
.spotify-mask { width:34px; height:34px; display:block; background-color: var(--text-color); -webkit-mask: url('spotifyicon.svg') center/contain no-repeat; mask: url('spotifyicon.svg') center/contain no-repeat; }



/* Modal-level home icon (absolute inside modal) */
.modal .modal-home { position:absolute; top:10px; right:10px; width:42px; height:42px; padding:6px; border-radius:50%; }

/* Games Grid Section - Enhanced Frutiger Aero */
.games-grid-section {
    padding: 4rem 0 4rem; /* Equal padding top and bottom */
    display: flex;
    align-items: flex-start; /* Changed from center to flex-start */
    min-height: 100vh;
    justify-content: center; /* Center vertically with flexbox */
}

.games-grid-section .container {
    max-width: 550px;
    margin: 0;
    padding-top: 3vh; /* Reduced from 10vh to 3vh */
}

.games-grid-section h2 {
    margin: 0 0 2rem 0; /* Increased bottom margin since subtitle is removed */
    font-size: 36px;
    font-weight: 700;
    color: var(--text-color);
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8),
                 0 0 20px rgba(52, 152, 219, 0.3);
}

.subtitle {
    display: none; /* Hide the subtitle */
}

.games-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
    margin-bottom: 3rem; /* Add spacing at the bottom */
}

/* Enhanced Game Windows with Windows 7 Aero Style */
.game-window {
    display: block;
    box-shadow: 
        0 8px 24px rgba(52, 152, 219, 0.2),
        0 4px 12px rgba(0, 102, 204, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.15);
    transform: translateZ(0);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent !important; /* Ensure transparency */
}

.game-window .title-bar {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    height: auto;
}

.game-window .title-bar-text {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 400;
    color: #003d66;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.game-window .title-bar-controls button {
    width: 20px;
    height: 18px;
}

.game-window:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 
        0 20px 48px rgba(52, 152, 219, 0.3),
        0 8px 24px rgba(0, 102, 204, 0.2),
        0 0 0 2px rgba(52, 152, 219, 0.25);
}

.game-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.game-card-link:hover {
    text-decoration: none;
}

.game-card-link h3,
.game-card-link p {
    text-decoration: none !important;
}

.game-window-body {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: none;
    padding: 0;
    position: relative;
}

/* Glossy overlay for game windows */
.game-window-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.game-window .game-thumb {
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.6s ease;
}

.game-window:hover .game-thumb {
    transform: scale(1.08);
}

.game-window .game-info {
    padding: 18px 20px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(240, 248, 255, 0.3) 100%);
    position: relative;
    z-index: 2;
}

.game-window h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.game-window p {
    margin: 0;
    color: rgba(0, 51, 102, 0.8);
    font-size: 14px;
    line-height: 1.5;
    text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.6);
}

.coming-soon-window::after {
    content: 'Coming Soon';
    position: absolute;
    right: 14px;
    top: 50px; /* Adjusted for title bar */
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.95));
    color: white;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
    z-index: 3;
}

.landing-footer {
    padding: 2rem 0;
    text-align: center;
    color: rgba(0, 51, 102, 0.5);
    font-size: 13px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
}

/* Mobile adjustments for games */
@media (max-width: 1024px) {
    .games-grid-section {
        min-height: auto;
        padding: 2rem 0 4rem; /* Ensure bottom spacing on mobile */
        align-items: flex-start; /* Align to top so title is visible */
    }
    
    .games-grid-section .container {
        max-width: 100%;
        width: 100%;
        margin: 0 auto; /* Center the container */
        padding-top: 0; /* Remove top padding on mobile */
    }
    
    .games-grid-section h2 {
        font-size: 32px; /* Slightly smaller on mobile */
    }
    
    .games-grid {
        margin-bottom: 2rem; /* Bottom spacing for mobile */
    }
}

/* --- Playlist Gallery Styles --- */
#playlistGallery {
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#playlistGallery.hidden {
    display: none;
}

/* Gallery logo and layout */
#gallery-logo {
    width: 280px;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.12));
}

.gallery-section h2 {
    margin: 0 0 1rem 0;
    font-size: 28px;
    color: var(--text-color);
    text-shadow: var(--text-shadow);
}

.playlist-carousel-container {
    position: relative;
    padding: 0 50px; /* Space for arrows */
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-opaque);
    backdrop-filter: blur(10px);
    color: var(--text-color);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.carousel-arrow:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transform: translateY(-50%) scale(1.05);
}

.carousel-arrow.left {
    left: 0;
}

.carousel-arrow.right {
    right: 0;
}

/* Playlist Card Styles - Match #currentPlaylistInfo */
.playlist-card {
    min-width: 170px;
    max-width: 170px;
    background: var(--glass-bg-opaque);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s;
    flex-shrink: 0;
}

.playlist-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.playlist-card .card-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(52,152,219,0.3), rgba(155,89,182,0.3));
}

.playlist-card .card-info {
    text-align: center;
}

.playlist-card .card-info h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-shadow: var(--text-shadow);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-card .card-info p {
    margin: 0;
    font-size: 12px;
    color: rgba(0,0,0,0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Insert Link Card Special Styling */
.playlist-card.insert-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg-opaque);
    border: 1px solid var(--glass-border);
}

.playlist-card.insert-link:hover {
    background: rgba(255,255,255,0.95);
}

.insert-link-icon {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(52,152,219,0.15), rgba(155,89,182,0.15));
    margin-bottom: 10px;
    color: var(--accent-blue);
}

.insert-link-icon svg {
    width: 48px;
    height: 48px;
}

.playlist-card.insert-link .card-info h3 {
    font-size: 13px;
}

.playlist-card.insert-link .card-info p {
    font-size: 11px;
    color: rgba(0,0,0,0.6);
}

/* --- Winged Button Styles --- */
#guess-button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem; /* UPDATED: Reduced margin to move buttons up */
}

/* Next Round button styling */
.next-round-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    margin: 0;
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
}

.side-button {
    font-size: 20px; /* Restored font size */
    font-weight: bold;
    width: 140px; /* Restored width */
    height: 60px; /* Restored height */
    background: var(--button-bg);
    border: 1px solid #aadeff;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--button-shadow);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.side-button::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 60%;
    background: var(--gloss-gradient);
}
.side-button:hover {
    background: var(--button-hover-bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}
.side-button.left {
    border-radius: 30px 0 0 30px; /* Restored radius */
    margin-right: -28px; /* Restored margin */
    border-right: none;
    padding-right: 28px; /* Restored padding */
}
.side-button.right {
    border-radius: 0 30px 30px 0; /* Restored radius */
    margin-left: -28px; /* Restored margin */
    border-left: none;
    padding-left: 28px; /* Restored padding */
}
#playPauseButton {
    width: 64px; /* Restored size */
    height: 64px; /* Restored size */
    border-radius: 50%;
    border: 3px solid #aadeff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.20);
    z-index: 2;
    cursor: pointer;
    transition: transform 0.2s ease;
    background: transparent;
    padding: 0;
}
#playPauseButton:hover {
    transform: scale(1.08);
}

/* --- Other UI Elements --- */
.input-field {
    width: 100%;
    padding: 14px; /* Restored padding */
    font-size: 16px;
    border: 1px solid #b0dcf7;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
    color: var(--text-color);
    margin: 1rem 0; /* Restored margin */
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.input-field:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.08);
}
#currentPlaylistInfo {
    position: fixed; top: 20px; left: 20px;
    background: var(--glass-bg-opaque); /* UPDATED: More opaque background */
    padding: 12px; /* UPDATED: Increased padding */
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 170px; /* UPDATED: Increased width */
    text-align: center;
    z-index: 10;
    animation: fadeIn 0.5s ease 0.2s backwards;
    /* Hide by default - only show when game is playing */
    display: none;
}
#currentPlaylistInfo.visible {
    display: block;
}
#playlistImage {
    width: 145px; height: 145px; /* UPDATED: Increased size */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
#playlistName { 
    font-weight: bold; 
    font-size: 15px; /* UPDATED: Increased font size */
    margin: 0; 
}
#trackCount { 
    font-size: 13px; /* UPDATED: Increased font size */
    opacity: 0.8; 
    margin: 5px 0 0; 
}
#changePlaylistButton {
    position: fixed; top: 20px; right: 20px;
    z-index: 10;
    animation: fadeIn 0.5s ease 0.2s backwards;
    padding: 10px 20px; /* UPDATED: Increased padding */
    font-size: 15px; /* UPDATED: Increased font size */
}
#guessing-section { position: relative; }
#suggestions {
    position: absolute; bottom: 100%; left: 0; right: 0;
    margin-bottom: -1px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #b0dcf7; border-radius: 12px;
    max-height: 200px; overflow-y: auto;
    z-index: 20; display: none;
    animation: slideUpIn 0.3s ease;
}
.suggestion-item { padding: 12px 15px; cursor: pointer; text-align: left; }
.suggestion-item:hover { background-color: #d6f0ff; }
.suggestion-item:not(:last-child) { border-bottom: 1px solid #e0f0ff; }

/* --- Answer Modal --- */
#answer-box {
    background: rgba(240, 248, 255, 0.75);
    max-width: 420px; /* Make it skinnier */
    padding: 1.75rem 2rem; /* Adjust padding for narrower width */
}
#answer-box.win { border-top: 5px solid var(--accent-green); }
#answer-box.lose { border-top: 5px solid var(--accent-red); }

#answer-box h2 {
    margin: 0 0 1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#answer-album-art {
    width: 180px; height: 180px;
    border-radius: 16px;
    margin: 0 auto 0.5rem auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
#answer-details {
    margin: 1rem 0;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
#answer-details p {
    margin: 4px 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
#answer-details p strong {
    font-weight: 600;
}

.hidden { display: none !important; }
#loading-container { width: 100%; margin-top: 1rem; }
#loading-text { font-size: 14px; margin-bottom: 8px; opacity: 0.8; }
.progress-bar-background {
    width: 100%; height: 16px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
#loading-bar-fill {
    width: 0%; height: 100%;
    background: linear-gradient(to right, var(--accent-green), var(--accent-blue));
    border-radius: 8px;
    transition: width 0.2s linear;
}