/* Custom Fonts */
@font-face {
    font-family: 'Grand Paradiso Script';
    src: url('../fonts/grand_paradiso/GrandParadisoScript-Regular.woff2') format('woff2'),
         url('../fonts/grand_paradiso/GrandParadisoScript-Regular.woff') format('woff'),
         url('../fonts/grand_paradiso/GrandParadisoScript-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Grand Paradiso';
    src: url('../fonts/grand_paradiso/GrandParadiso-Regular.woff2') format('woff2'),
         url('../fonts/grand_paradiso/GrandParadiso-Regular.woff') format('woff'),
         url('../fonts/grand_paradiso/GrandParadiso-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Grand Paradiso Italic';
    src: url('../fonts/grand_paradiso/GrandParadisoItalic-Italic.woff2') format('woff2'),
         url('../fonts/grand_paradiso/GrandParadisoItalic-Italic.woff') format('woff'),
         url('../fonts/grand_paradiso/GrandParadisoItalic-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bohemian Typewriter';
    src: url('../fonts/bohemian_typewriter/Bohemian Typewriter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Great Warrior';
    src: url('../fonts/great_warrior/Great Warrior.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Punkbabe';
    src: url('../fonts/punkbabe/PUNKBABE TRIAL.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

html {
    background: #000000 !important;
}

body {
    font-family: 'Bohemian Typewriter', sans-serif;
    background: 
        #000000,
        radial-gradient(4px 4px at 20px 30px, #ffffff, transparent),
        radial-gradient(4px 4px at 40px 70px, #ffffff, transparent),
        radial-gradient(3px 3px at 90px 40px, #ffffff, transparent),
        radial-gradient(4px 4px at 130px 80px, #ffffff, transparent),
        radial-gradient(3px 3px at 160px 30px, #ffffff, transparent),
        radial-gradient(4px 4px at 200px 60px, #ffffff, transparent),
        radial-gradient(3px 3px at 250px 20px, #ffffff, transparent),
        radial-gradient(4px 4px at 300px 80px, #ffffff, transparent),
        radial-gradient(3px 3px at 350px 50px, #ffffff, transparent),
        radial-gradient(4px 4px at 400px 90px, #ffffff, transparent),
        radial-gradient(3px 3px at 450px 30px, #ffffff, transparent),
        radial-gradient(4px 4px at 500px 70px, #ffffff, transparent),
        radial-gradient(3px 3px at 550px 20px, #ffffff, transparent),
        radial-gradient(4px 4px at 600px 60px, #ffffff, transparent),
        radial-gradient(3px 3px at 650px 40px, #ffffff, transparent),
        radial-gradient(4px 4px at 700px 80px, #ffffff, transparent),
        radial-gradient(3px 3px at 750px 10px, #ffffff, transparent),
        radial-gradient(4px 4px at 800px 50px, #ffffff, transparent),
        radial-gradient(3px 3px at 850px 90px, #ffffff, transparent),
        radial-gradient(4px 4px at 900px 30px, #ffffff, transparent),
        radial-gradient(3px 3px at 950px 70px, #ffffff, transparent),
        radial-gradient(4px 4px at 1000px 40px, #ffffff, transparent),
        radial-gradient(3px 3px at 1050px 60px, #ffffff, transparent),
        radial-gradient(4px 4px at 1100px 20px, #ffffff, transparent),
        radial-gradient(3px 3px at 1150px 80px, #ffffff, transparent),
        radial-gradient(4px 4px at 1200px 40px, #ffffff, transparent),
        radial-gradient(3px 3px at 1250px 70px, #ffffff, transparent),
        radial-gradient(4px 4px at 1300px 10px, #ffffff, transparent),
        radial-gradient(3px 3px at 1350px 50px, #ffffff, transparent),
        radial-gradient(4px 4px at 1400px 90px, #ffffff, transparent),
        radial-gradient(3px 3px at 1450px 30px, #ffffff, transparent),
        radial-gradient(4px 4px at 1500px 60px, #ffffff, transparent) !important;
    background-size: 100%, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px !important;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat !important;
    color: #FFFFFF;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Mystical Crystal Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 90%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 90%),
        radial-gradient(circle at 40% 60%, rgba(107, 70, 193, 0.03) 0%, transparent 90%),
        radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.02) 0%, transparent 90%),
        radial-gradient(circle at 10% 70%, rgba(192, 132, 252, 0.02) 0%, transparent 80%),
        radial-gradient(circle at 90% 30%, rgba(192, 132, 252, 0.02) 0%, transparent 80%);
    pointer-events: none;
    z-index: 1;
    animation: mysticalGlow 8s ease-in-out infinite alternate;
}

/* Additional mystical elements */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(1px 1px at 20px 30px, rgba(192, 132, 252, 0.1), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(139, 92, 246, 0.08), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(192, 132, 252, 0.06), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(139, 92, 246, 0.07), transparent),
        radial-gradient(1px 1px at 160px 30px, rgba(192, 132, 252, 0.04), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(139, 92, 246, 0.05), transparent),
        radial-gradient(1px 1px at 250px 20px, rgba(192, 132, 252, 0.03), transparent),
        radial-gradient(1px 1px at 300px 80px, rgba(139, 92, 246, 0.04), transparent);
    background-repeat: repeat;
    background-size: 300px 200px;
    animation: mysticalSparkle 4s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes mysticalGlow {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    100% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

@keyframes mysticalSparkle {
    from { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    to { 
        transform: translateY(-200px) rotate(360deg);
        opacity: 0.8;
    }
}


/* Tattoo Sticker Sleeve Background Layer */
.mystical-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.mystical-graphic {
    position: absolute;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    overflow: hidden;
}

.mystical-graphic.visible {
    opacity: 0.7;
}


.mystical-graphic img,
.mystical-graphic svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(27%) 
        sepia(51%) 
        saturate(2878%) 
        hue-rotate(346deg) 
        brightness(104%) 
        contrast(119%);
    position: relative;
    z-index: 2;
}




.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
}

/* Navigation */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-brand h2,
.nav-brand-link {
    font-family: 'Great Warrior', sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px #c084fc;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-brand-link:hover {
    color: #d8b4fe;
    text-shadow: 
        0 0 10px #d8b4fe,
        0 0 20px #d8b4fe;
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-link {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 6px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-link:hover {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.2);
    transform: translateY(-1px);
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 0 10px #c084fc;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 60px 20px;
    background: transparent;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin-top: 40px;
    gap: 60px;
}

.character-container {
    flex: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.start-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.character {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
    animation: mysticalFloat 3s ease-in-out infinite, mysticalGlow 2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 30px rgba(138, 43, 226, 0.6));
}

.mystical-aura {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.3) 0%, rgba(255, 215, 0, 0.2) 50%, transparent 70%);
    border-radius: 50%;
    animation: auraPulse 2s ease-in-out infinite alternate;
    z-index: 1;
}

.crystal-ball {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.9));
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.8);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(138, 43, 226, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    animation: crystalFloat 2s ease-in-out infinite, crystalGlow 1.5s ease-in-out infinite alternate;
    z-index: 3;
}

.crystal-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(138, 43, 226, 0.6));
    border-radius: 50%;
    animation: innerGlow 1s ease-in-out infinite alternate;
}

.crystal-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    animation: sparkleFloat 2s ease-in-out infinite;
}

.sparkle-1 {
    top: 10px;
    left: 15px;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 25px;
    right: 10px;
    animation-delay: 0.5s;
}

.sparkle-3 {
    bottom: 15px;
    left: 10px;
    animation-delay: 1s;
}

.sparkle-4 {
    bottom: 10px;
    right: 15px;
    animation-delay: 1.5s;
}

.character-face {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1A0033, #4A148C);
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(138, 43, 226, 0.6),
        0 0 60px rgba(255, 215, 0, 0.3);
}

.mystical-eyes {
    display: flex;
    gap: 25px;
    margin-bottom: 15px;
}

.eye {
    width: 25px;
    height: 25px;
    background: linear-gradient(45deg, #FFD700, #FFA500);
    border-radius: 50%;
    position: relative;
    animation: mysticalBlink 4s infinite, mysticalSparkle 2s ease-in-out infinite;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.9),
        0 0 25px rgba(255, 255, 255, 0.7),
        0 0 35px rgba(138, 43, 226, 0.5);
}

.eye-pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #1A0033;
    border-radius: 50%;
    animation: pupilGlow 1.5s ease-in-out infinite alternate;
}

.eye-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent 70%);
    border-radius: 50%;
    animation: eyeGlow 2s ease-in-out infinite alternate;
}

.mystical-mouth {
    position: relative;
    width: 35px;
    height: 20px;
    margin-top: 15px;
}

.mystical-mouth::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #FFD700;
    border-radius: 0 0 35px 35px;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(138, 43, 226, 0.6);
    animation: mouthGlow 2s ease-in-out infinite alternate;
}

.mouth-glow {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.2), transparent 70%);
    border-radius: 50%;
    animation: mouthAura 1.5s ease-in-out infinite alternate;
}

.mystical-mouth.happy::before {
    border-radius: 35px 35px 0 0;
    border-top: 3px solid #FFD700;
    border-bottom: none;
}

.main-title {
    font-family: 'Great Warrior', sans-serif;
    font-size: 4rem;
    font-weight: normal;
    color: #FFFFFF;
    margin-bottom: 30px;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px #c084fc;
    animation: mysticalPulse 2s ease-in-out infinite alternate;
    letter-spacing: 3px;
    line-height: 1.2;
    text-transform: uppercase;
    word-spacing: 10px;
    position: relative;
}

.main-title::before {
    content: '🔮';
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    animation: crystalFloat 3s ease-in-out infinite;
}

.main-title::after {
    content: '🔮';
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    animation: crystalFloat 3s ease-in-out infinite reverse;
}

.tagline {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    color: #FFFFFF;
    margin-bottom: 50px;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 0 10px #c084fc;
    letter-spacing: 1px;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
}

.tagline::before {
    content: '✨';
    position: absolute;
    left: -30px;
    top: 0;
    animation: sparkleGlow 2s ease-in-out infinite;
}

.tagline::after {
    content: '✨';
    position: absolute;
    right: -30px;
    top: 0;
    animation: sparkleGlow 2s ease-in-out infinite reverse;
}

.start-btn {
    font-family: 'Great Warrior', sans-serif;
    background: linear-gradient(45deg, #8b5cf6, #7c3aed, #8b5cf6);
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    padding: 20px 40px;
    font-size: 1.3rem;
    font-weight: normal;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 
        0 0 20px #8b5cf6,
        0 0 40px #8b5cf6,
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    min-width: 250px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: mysticalButtonGlow 2s ease-in-out infinite alternate;
}

.start-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    transition: left 0.5s;
}

.start-btn:hover::before {
    left: 100%;
}

.start-btn:hover {
    background: linear-gradient(45deg, #d8b4fe, #c084fc, #d8b4fe);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 0 30px #c084fc,
        0 0 60px #c084fc,
        0 0 90px #c084fc,
        inset 0 0 30px rgba(192, 132, 252, 0.5);
    border-color: #d8b4fe;
}

/* Quiz Section */
.quiz-section {
    background: transparent;
    padding: 80px 20px;
    min-height: 80vh;
    position: relative;
    overflow: visible; /* Allow map transforms to extend beyond section */
}

.quiz-container {
    max-width: 800px;
    margin: 0 auto;
    overflow: visible; /* Allow map transforms to extend beyond container */
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #c084fc;
    border-radius: 0;
    margin-bottom: 60px;
    overflow: hidden;
    box-shadow: 
        0 0 10px #c084fc,
        inset 0 0 10px rgba(192, 132, 252, 0.3);
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
    animation: progressScan 2s linear infinite;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #c084fc, #d8b4fe, #c084fc);
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 0;
    box-shadow: 
        0 0 10px #c084fc,
        inset 0 0 10px rgba(192, 132, 252, 0.5);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88;
    animation: progressPulse 1s ease-in-out infinite;
}

.question-container {
    text-align: center;
    margin-bottom: 40px;
    overflow: visible; /* Allow map transforms to extend beyond container */
}

.question-text {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 2rem;
    font-weight: normal;
    color: #FFFFFF;
    margin-bottom: 60px;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px #c084fc;
    line-height: 1.3;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    animation: mysticalQuestionGlow 3s ease-in-out infinite alternate;
}

.options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.option-btn {
    font-family: 'Bohemian Typewriter', sans-serif;
    background: rgba(0, 0, 0, 0.9);
    color: #FFFFFF;
    border: 2px solid #c084fc;
    padding: 20px 30px;
    font-size: 1.1rem;
    font-weight: normal;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 
        0 0 15px rgba(192, 132, 252, 0.3),
        inset 0 0 15px rgba(192, 132, 252, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.option-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transition: left 0.4s;
}

.option-btn:hover {
    background: rgba(192, 132, 252, 0.1);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 0 25px #c084fc,
        0 0 50px #c084fc,
        inset 0 0 25px rgba(192, 132, 252, 0.3);
    border-color: #d8b4fe;
    color: #d8b4fe;
    text-shadow: 0 0 10px #d8b4fe;
}

.option-btn:hover::before {
    left: 100%;
}

/* Slider Styles */
.slider-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.slider-value {
    font-family: 'Bohemian Typewriter', monospace;
    font-size: 1.3rem;
    font-weight: normal;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.3);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
}

.slider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(90deg, #1A0033, #4A148C);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 20px 0;
    box-shadow: 
        inset 0 0 10px rgba(138, 43, 226, 0.4),
        0 0 15px rgba(255, 215, 0, 0.3),
        0 0 25px rgba(255, 255, 255, 0.2);
}

.slider-labels {
    position: relative;
    margin-top: 10px;
    font-family: 'Bohemian Typewriter', monospace;
    font-size: 0.9rem;
    color: #FFD700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    min-height: 20px;
}

/* For decade labels - absolute positioning */
.slider-label.decade-label {
    text-align: center;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

/* For length labels - absolute positioning at fractional positions */
.slider-label.length-label {
    text-align: center;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

/* For regular labels - flex layout */
.slider-label.regular-label {
    text-align: center;
    flex: 1;
    padding: 0 5px;
}

/* For regular labels container - use flex layout */
.slider-labels.regular-labels {
    display: flex;
    justify-content: space-between;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFD700, #FFA500);
    cursor: pointer;
    border: 3px solid #4A148C;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.8),
        0 0 25px rgba(255, 255, 255, 0.6),
        0 4px 8px rgba(138, 43, 226, 0.4);
    transition: all 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 1),
        0 0 40px rgba(255, 255, 255, 0.8),
        0 6px 12px rgba(138, 43, 226, 0.6);
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFD700, #FFA500);
    cursor: pointer;
    border: 3px solid #4A148C;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.8),
        0 0 25px rgba(255, 255, 255, 0.6),
        0 4px 8px rgba(138, 43, 226, 0.4);
    transition: all 0.3s ease;
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 1),
        0 0 40px rgba(255, 255, 255, 0.8),
        0 6px 12px rgba(138, 43, 226, 0.6);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.slider-label {
    font-family: 'Bohemian Typewriter', monospace;
    font-size: 0.9rem;
    font-weight: normal;
    color: #FFFFFF;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    flex: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.slider-label.left {
    text-align: left;
}

.slider-label.right {
    text-align: right;
}

.slider-continue-btn {
    font-family: 'Great Warrior', sans-serif;
    background: linear-gradient(145deg, #1A0033, #4A148C);
    color: #FFD700;
    border: 2px solid #FFD700;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: normal;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 20px;
    box-shadow: 
        0 6px 15px rgba(138, 43, 226, 0.4),
        0 0 20px rgba(255, 215, 0, 0.3);
    position: relative;
    z-index: 1000; /* Ensure buttons are always on top of maps */
}

.slider-continue-btn:hover {
    background: linear-gradient(145deg, #4A148C, #6A1B9A);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(138, 43, 226, 0.6),
        0 0 30px rgba(255, 215, 0, 0.5);
}

/* Ensure continue container is always on top */
#continueContainer {
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

/* Map Styles */
/* .map-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
} */

.map-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    overflow: visible; /* Allow scaled/transformed elements to extend beyond container */
    max-height: calc(100vh - 150px);
    min-height: 400px; /* Ensure minimum height for maps */
    box-sizing: border-box;
}

.continent-map-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 450px; /* Constrain container height */
    overflow: visible; /* Contain maps within their bounds */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1; /* Keep maps below buttons */
}

/* Continent Selection Styles */
.continent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 800px;
    background: linear-gradient(145deg, #1A0033, #4A148C);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 
        0 12px 35px rgba(138, 43, 226, 0.5),
        0 0 40px rgba(255, 215, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.continent-button {
    font-family: 'Bohemian Typewriter', monospace;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 215, 0, 0.1));
    color: #FFFFFF;
    border: 2px solid #FFD700;
    padding: 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 
        0 4px 8px rgba(138, 43, 226, 0.3),
        inset 0 0 8px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: visible;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.continent-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    transition: left 0.4s;
}

.continent-button:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 255, 255, 0.2));
    border-color: #FFFFFF;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 8px 16px rgba(138, 43, 226, 0.5),
        0 0 20px rgba(255, 215, 0, 0.6),
        inset 0 0 12px rgba(255, 255, 255, 0.3);
}

.continent-button:hover::before {
    left: 100%;
}

.continent-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 2px 4px rgba(138, 43, 226, 0.4),
        inset 0 0 8px rgba(255, 215, 0, 0.4);
}

.continent-button.selected {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.7), rgba(255, 255, 255, 0.3));
    border-color: #FFA500;
    box-shadow: 
        0 8px 16px rgba(138, 43, 226, 0.6),
        0 0 25px rgba(255, 215, 0, 0.8),
        inset 0 0 15px rgba(255, 255, 255, 0.4);
    animation: continentPulse 2s ease-in-out infinite;
}

.continent-name {
    font-size: 1.3rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

@keyframes continentPulse {
    0%, 100% {
        box-shadow: 
            0 8px 16px rgba(138, 43, 226, 0.6),
            0 0 25px rgba(255, 215, 0, 0.8),
            inset 0 0 15px rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 
            0 8px 20px rgba(138, 43, 226, 0.8),
            0 0 35px rgba(255, 215, 0, 1),
            inset 0 0 20px rgba(255, 255, 255, 0.6);
    }
}

/* Country Maps Container Styles */
.country-maps-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    padding: 20px;
}

.continent-map-section {
    background: linear-gradient(145deg, #1A0033, #4A148C);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 
        0 12px 35px rgba(138, 43, 226, 0.5),
        0 0 40px rgba(255, 215, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    overflow: visible;
    min-height: fit-content;
}

.continent-map-title {
    font-family: 'Grand Paradiso Italic', serif;
    font-size: 1.8rem;
    font-weight: normal;
    color: #FFFFFF;
    margin-bottom: 20px;
    text-shadow: 
        1px 1px 3px rgba(0, 0, 0, 0.4);
    text-align: center;
    letter-spacing: 1px;
}

.continent-map-svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    max-height: 1000px;
    margin: 0 auto;
    overflow: visible;
}

.continent-map-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    max-height: 1000px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    overflow: visible;
}

.us-map {
    width: 100%;
    height: auto;
    display: block;
    max-width: 800px;
    overflow: visible; /* Allow transforms to extend beyond bounds */
}

.map-container svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 1000px;
    overflow: visible; /* Allow transforms to extend beyond bounds */
}

/* Continent-specific map sizing to fit within question bounds */
/* Conservative sizing to prevent overflow over continue button and footer */

/* Africa - tall map */
.continent-map-container[data-continent="africa"] .continent-map-svg,
.continent-map-container svg[data-continent="africa"] {
    max-width: 500px;
    max-height: 1000px;
    width: 500px;
    height: auto;
    margin: 0 auto;
    display: block;
    transform: translateY(-6%) scale(90%);
}

/* North America - tall map */
.continent-map-container[data-continent="north-america"] .continent-map-svg,
.continent-map-container svg[data-continent="north-america"] {
    max-width: 700px !important;
    max-height: 900px !important;
    width: 700px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    transform: translateX(-8%) translateY(-5%) scale(80%) !important;
}

/* Central America - wide map with Caribbean */
.continent-map-container[data-continent="central-america"] .continent-map-svg,
.continent-map-container svg[data-continent="central-america"] {
    max-width: 650px;
    max-height: 900px;
    width: 650px;
    height: auto;
    margin: 0 auto;
    display: block;
    transform: translateY(-10%) scale(105%) !important;
}

/* Asia - square-ish map */
.continent-map-container[data-continent="asia"] .continent-map-svg,
.continent-map-container svg[data-continent="asia"] {
    max-width: 500px;
    max-height: 1000px;
    width: 500px;
    height: auto;
    margin: 0 auto;
    display: block;
    transform: translateX(-30%) translateY(30%) scale(165%);
}

/* Thinner strokes for Asia since it's scaled up */
.continent-map-container[data-continent="asia"] .country-path,
.continent-map-container[data-continent="asia"] .state-path {
    stroke-width: 0.05 !important;
}

.continent-map-container[data-continent="asia"] .country-path:hover:not(.selected),
.continent-map-container[data-continent="asia"] .state-path:hover:not(.selected) {
    stroke-width: 0.1 !important;
}

.continent-map-container[data-continent="asia"] .country-path:active:not(.selected),
.continent-map-container[data-continent="asia"] .state-path:active:not(.selected),
.continent-map-container[data-continent="asia"] .country-path.selected,
.continent-map-container[data-continent="asia"] .state-path.selected {
    stroke-width: 0.3 !important;
}

/* Europe - wide map */
.continent-map-container[data-continent="europe"] .continent-map-svg,
.continent-map-container svg[data-continent="europe"] {
    max-width: 600px;
    max-height: 1000px;
    width: 600px;
    height: auto;
    margin: 0 auto;
    display: block;
    transform: translateX(-8%) translateY(-5%) scale(115%) !important;
}

/* Oceania - very wide map */
.continent-map-container[data-continent="oceania"] .continent-map-svg,
.continent-map-container svg[data-continent="oceania"] {
    max-width: 650px;
    max-height: 1000px;
    width: 650px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* South America - tall map */
.continent-map-container[data-continent="south-america"] .continent-map-svg,
.continent-map-container svg[data-continent="south-america"] {
    max-width: 600px;
    max-height: 1000px;
    width: 500px;
    height: auto;
    margin: 0 auto;
    display: block;
    transform: translateY(-4%) scale(55%);
}

/* World map now uses same styling as state map (us-map and state-path classes) */
  

.map-title {
    font-family: 'Grand Paradiso Italic', serif;
    font-size: 1.8rem;
    font-weight: normal;
    color: #FFFFFF;
    margin-bottom: 20px;
    text-shadow: 
        1px 1px 3px rgba(0, 0, 0, 0.4);
    text-align: center;
    letter-spacing: 1px;
}

.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 800px;
    background: linear-gradient(145deg, #1A0033, #4A148C);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 
        0 12px 35px rgba(138, 43, 226, 0.5),
        0 0 40px rgba(255, 215, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.state-button {
    font-family: 'Bohemian Typewriter', monospace;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 215, 0, 0.1));
    color: #FFFFFF;
    border: 2px solid #FFD700;
    padding: 12px 8px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 
        0 4px 8px rgba(138, 43, 226, 0.3),
        inset 0 0 8px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.state-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    transition: left 0.4s;
}

.state-button:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 255, 255, 0.2));
    border-color: #FFFFFF;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 8px 16px rgba(138, 43, 226, 0.5),
        0 0 20px rgba(255, 215, 0, 0.6),
        inset 0 0 12px rgba(255, 255, 255, 0.3);
}

.state-button:hover::before {
    left: 100%;
}

.state-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 2px 4px rgba(138, 43, 226, 0.4),
        inset 0 0 8px rgba(255, 215, 0, 0.4);
}

.state-path {
    fill: rgba(255, 255, 255, 0.08);
    stroke: #FFD700;
    stroke-width: 1.5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.2));
}

.state-path:hover {
    fill: rgba(255, 215, 0, 0.4);
    stroke: #FFFFFF;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    transform: scale(1.02);
}

/* Disable CSS hover for world map - JavaScript handles continent-wide hover */
.world-map-continent-selector .state-path:hover {
    fill: rgba(255, 215, 0, 0.1) !important;
    stroke: #FFD700 !important;
    stroke-width: 1.5 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Also disable active state for world map */
.world-map-continent-selector .state-path:active {
    fill: rgba(255, 215, 0, 0.1) !important;
    stroke: #FFD700 !important;
    stroke-width: 1.5 !important;
    filter: none !important;
    transform: none !important;
}

/* Disable CSS hover for North America - JavaScript handles country-wide hover (US states together, CA provinces together) */
.continent-map-container[data-continent="north-america"] .state-path:hover {
    fill: rgba(255, 215, 0, 0.1) !important;
    stroke: #FFD700 !important;
    stroke-width: 1.5 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Also disable active state for North America */
.continent-map-container[data-continent="north-america"] .state-path:active {
    fill: rgba(255, 215, 0, 0.1) !important;
    stroke: #FFD700 !important;
    stroke-width: 1.5 !important;
    filter: none !important;
    transform: none !important;
}

/* Country path styling for continent maps - enhanced with hover effects */
.continent-map-container .country-path,
.continent-map-container .state-path {
    fill: rgba(255, 215, 0, 0.1);
    stroke: #FFD700;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke; /* Keep stroke width consistent regardless of zoom/scale */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.2));
}

/* Hover effects for country paths - overriding JavaScript inline styles */
/* EXCEPT for North America which uses JavaScript grouping */
.continent-map-container:not([data-continent="north-america"]) .country-path:hover:not(.selected),
.continent-map-container:not([data-continent="north-america"]) .state-path:hover:not(.selected) {
    fill: rgba(255, 215, 0, 0.4) !important;
    stroke: #FFFFFF !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) !important;
    transform: scale(1.02);
}

/* Active/click effects for country paths */
.continent-map-container:not([data-continent="north-america"]) .country-path:active:not(.selected),
.continent-map-container:not([data-continent="north-america"]) .state-path:active:not(.selected) {
    fill: rgba(255, 215, 0, 0.6) !important;
    stroke: #FFA500 !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) !important;
    transform: scale(0.98);
}

/* Selected state for country paths */
.continent-map-container .country-path.selected,
.continent-map-container .state-path.selected {
    fill: rgba(255, 215, 0, 0.7) !important;
    stroke: #FFA500 !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) !important;
    animation: countryPulse 2s ease-in-out infinite;
}

@keyframes countryPulse {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1.2));
    }
}

.state-path:active {
    fill: rgba(255, 215, 0, 0.6);
    stroke: #FFA500;
    stroke-width: 3;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    transform: scale(0.98);
}

.state-path.selected {
    fill: rgba(255, 215, 0, 0.7);
    stroke: #FFA500;
    stroke-width: 3;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    animation: statePulse 2s ease-in-out infinite;
}

.state-label {
    fill: #FFFFFF;
    font-family: 'Bohemian Typewriter', monospace;
    font-size: 9px;
    font-weight: bold;
    text-anchor: middle;
    pointer-events: none;
    text-shadow: 
        1px 1px 3px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(255, 215, 0, 0.6);
    transition: all 0.3s ease;
}

.state-path:hover + .state-label {
    font-size: 11px;
    text-shadow: 
        1px 1px 4px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(255, 215, 0, 0.8);
}

@keyframes statePulse {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1.2));
    }
}

.character-thinking {
    text-align: center;
    margin-top: 40px;
}

.thinking-dots {
    display: inline-flex;
    gap: 8px;
}

.thinking-dots span {
    width: 12px;
    height: 12px;
    background: #000000;
    border-radius: 50%;
    animation: thinking 1.5s infinite;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Result Section */
.result-section {
    background: transparent;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    min-height: 100vh;
}

.result-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.result-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.character-celebration {
    margin-bottom: 40px;
}

.character-celebration .character {
    animation: celebrate 1s ease-in-out;
}

.result-title {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: #00ff88;
    margin-bottom: 50px;
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: uppercase;
    animation: neonPulse 2s ease-in-out infinite alternate;
}

.guess-display {
    margin: 40px 0;
}

/* Top 5 Guesses Container */
.guesses-container {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.guess-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 170, 0.1));
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 15px;
    padding: 20px 25px;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2);
}

.guess-item:hover {
    transform: translateX(10px);
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow: 0 6px 25px rgba(0, 255, 136, 0.4);
}

.guess-item:nth-child(1) {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 255, 0, 0.05));
    border: 3px solid rgba(255, 215, 0, 0.7) !important;
    padding: 20px 25px;
    box-shadow: 
        0 4px 20px rgba(255, 215, 0, 0.25),
        0 0 25px rgba(255, 215, 0, 0.15);
}

.guess-item:nth-child(1):hover {
    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.5);
}

.guess-rank {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: #00ff88;
    background: linear-gradient(45deg, #000000, #1a1a1a);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    border: 2px solid #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
    flex-shrink: 0;
}

.guess-item:nth-child(1) .guess-rank {
    color: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
}

.guess-item .guess-name {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    flex-grow: 1;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    animation: none;
    position: static;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.guess-item:nth-child(1) .guess-name {
    color: #1a1a1a !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 215, 0, 0.7), 0 0 45px rgba(255, 215, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-size: 2.2rem;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    position: static !important;
}

.guess-confidence {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid rgba(0, 255, 136, 0.3);
    min-width: 60px;
    text-align: center;
}

.guess-item:nth-child(1) .guess-confidence {
    color: #ffd700;
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 215, 0, 0.3);
}

.guess-name {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #000000;
    background: linear-gradient(45deg, #00ff88, #00ffaa, #00ff88);
    padding: 40px 60px;
    border-radius: 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 3px;
    box-shadow: 
        0 0 30px #00ff88,
        0 0 60px #00ff88,
        inset 0 0 30px rgba(0, 255, 136, 0.5);
    border: 3px solid #00ff88;
    text-shadow: none;
    animation: nameReveal 1s ease-out;
    position: relative;
}

.guess-name::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #00ff88, #00ffaa, #00ff88);
    border-radius: 0;
    z-index: -1;
    animation: borderGlow 2s ease-in-out infinite alternate;
}

.confidence-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #7209b7, #8B2FC4);
    border-radius: 4px;
    transition: width 1s ease;
}

.confidence-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'Bohemian Typewriter', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.action-buttons-row {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.action-btn {
    font-family: 'Bohemian Typewriter', sans-serif;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.5px;
    min-width: 160px;
}

.correct {
    background: linear-gradient(145deg, #7209b7, #533483);
    color: #FFFFFF;
    border-color: #7209b7;
}

.wrong {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(114, 9, 183, 0.3);
}

/* Share Section */
.share-section {
    margin: 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.share-btn {
    font-family: 'Bohemian Typewriter', sans-serif;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(145deg, #00ff88, #00cc6a);
    color: #000000;
    border: 2px solid #00ff88;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.5px;
    min-width: 200px;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.5);
    background: linear-gradient(145deg, #00ff99, #00dd77);
}

.share-btn:active {
    transform: translateY(0);
}

.share-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Name Input Section */
.name-input-section {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0, 255, 136, 0.05);
    border: 2px solid rgba(0, 255, 136, 0.2);
    border-radius: 15px;
    text-align: center;
}

.name-input-prompt {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.1rem;
    color: #00ff88;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.name-input-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.name-input {
    padding: 12px 20px;
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.7);
    color: #00ff88;
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1rem;
    text-align: center;
    min-width: 200px;
    transition: all 0.3s ease;
}

.name-input:focus {
    outline: none;
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
    background: rgba(0, 0, 0, 0.9);
}

.name-input::placeholder {
    color: rgba(0, 255, 136, 0.5);
}

.name-submit-btn {
    padding: 12px 25px;
    background: linear-gradient(145deg, #00ff88, #00cc6a);
    color: #000000;
    border: none;
    border-radius: 25px;
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

.name-submit-btn:hover {
    background: linear-gradient(145deg, #00cc6a, #00ff88);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 255, 136, 0.4);
}

.name-input-note {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 0.9rem;
    color: rgba(0, 255, 136, 0.7);
    margin: 0;
    font-style: italic;
}

.correct:hover {
    background: linear-gradient(145deg, #8B2FC4, #7209b7);
    box-shadow: 0 8px 20px rgba(114, 9, 183, 0.4);
}

.wrong:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

/* Final Section */
.final-section {
    background: #000000;
    padding: 80px 20px;
    text-align: center;
    position: relative;
}

.final-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.final-container {
    max-width: 600px;
    margin: 0 auto;
}

.character-final {
    margin-bottom: 40px;
}

.final-title {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: #00ff88;
    margin-bottom: 40px;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px #00ff88,
        0 0 20px #00ff88;
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: uppercase;
    animation: neonPulse 2s ease-in-out infinite alternate;
}

.final-message {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.4rem;
    color: #00ff88;
    margin-bottom: 60px;
    font-weight: 300;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 0 5px #00ff88,
        0 0 10px #00ff88;
    letter-spacing: 1px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
}

.play-again-btn {
    font-family: 'Bohemian Typewriter', sans-serif;
    background: linear-gradient(45deg, #00ff88, #00cc6a, #00ff88);
    color: #000000;
    border: 2px solid #00ff88;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 
        0 0 20px #00ff88,
        0 0 40px #00ff88,
        inset 0 0 20px rgba(0, 255, 136, 0.3);
    min-width: 250px;
    text-shadow: none;
    animation: buttonGlow 2s ease-in-out infinite alternate;
}

.play-again-btn:hover {
    background: linear-gradient(45deg, #00ff88, #00ffaa, #00ff88);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 0 30px #00ff88,
        0 0 60px #00ff88,
        0 0 90px #00ff88,
        inset 0 0 30px rgba(0, 255, 136, 0.5);
    border-color: #00ffaa;
}

/* About Section */
.about-section {
    background: transparent;
    padding: 80px 20px;
    min-height: 100vh;
    position: relative;
}

.about-section::before {
    display: none;
}

.about-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.about-content {
    display: grid;
    gap: 40px;
    margin-bottom: 60px;
}

.about-card {
    background: rgba(0, 0, 0, 0.8);
    padding: 40px;
    border: 2px solid #00ff88;
    border-radius: 0;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    transition: all 0.3s ease;
}

.about-card:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    transform: translateY(-3px);
    box-shadow: 
        0 0 30px #00ff88,
        0 0 60px #00ff88,
        inset 0 0 30px rgba(0, 255, 136, 0.3);
}

/* Special styling for data usage card - matches other cards */
.data-usage-card {
    border-color: #00ff88;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
}

.data-usage-card:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    box-shadow: 
        0 0 30px #00ff88,
        0 0 60px #00ff88,
        inset 0 0 30px rgba(0, 255, 136, 0.3);
}

.privacy-notice {
    text-align: left;
}

.privacy-notice ul {
    margin: 15px 0;
    padding-left: 20px;
}

.privacy-notice li {
    margin: 8px 0;
    line-height: 1.6;
}

.privacy-note {
    font-style: italic;
    color: rgba(0, 255, 136, 0.8);
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 255, 136, 0.05);
    border-left: 3px solid #00ff88;
    border-radius: 5px;
}

.about-card h3 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 20px;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-card p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.about-card ul {
    list-style: none;
    padding: 0;
}

.about-card ul li {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.about-card ul li::before {
    content: '✨';
    position: absolute;
    left: 0;
    top: 0;
    color: #00ff88;
}

/* How It Works Section */
.how-it-works-section {
    background: transparent;
    padding: 80px 20px;
    min-height: 100vh;
    position: relative;
}

.how-it-works-section::before {
    display: none;
}

.how-it-works-container {
    max-width: 1000px;
    margin: 0 auto;
}

.section-title {
    font-family: 'Great Warrior', sans-serif;
    font-size: 3rem;
    font-weight: normal;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px #c084fc;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.section-subtitle {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.4rem;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 80px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 0 10px #c084fc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.process-steps {
    display: grid;
    gap: 40px;
    margin-bottom: 80px;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background: rgba(0, 0, 0, 0.8);
    padding: 40px;
    border-radius: 0;
    border: 2px solid #00ff88;
    backdrop-filter: none;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    position: relative;
    margin-bottom: 40px;
}

.step:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    transform: translateY(-3px);
    box-shadow: 
        0 0 30px #00ff88,
        0 0 60px #00ff88,
        inset 0 0 30px rgba(0, 255, 136, 0.3);
}

.step-number {
    font-family: 'Great Warrior', sans-serif;
    font-size: 2rem;
    font-weight: normal;
    color: #FFFFFF;
    background: transparent;
    width: 60px;
    height: 60px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px #c084fc;
}

.step-content h3 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 20px;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.step-content p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.step-content ul {
    list-style: none;
    padding: 0;
}

.step-content ul li {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.step-content ul li::before {
    content: '✨';
    position: absolute;
    left: 0;
    color: #7209b7;
}

/* Technical Features */
.technical-features {
    margin: 60px 0;
    padding: 40px;
    background: rgba(138, 43, 226, 0.05);
    border: 2px solid rgba(138, 43, 226, 0.2);
    border-radius: 15px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(138, 43, 226, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.2);
}

.feature-card h4 {
    color: #c084fc;
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-family: 'Bohemian Typewriter', sans-serif;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.3);
}

.feature-card p {
    color: #e0e0e0;
    line-height: 1.6;
    font-size: 0.95rem;
}

.data-sources {
    margin-bottom: 80px;
}

.data-sources h3 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 40px;
}

.sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.source-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.source-card:hover {
    background: rgba(114, 9, 183, 0.1);
    border-color: rgba(114, 9, 183, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(114, 9, 183, 0.2);
}

.source-card h4 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.source-card p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #E0E0E0;
    line-height: 1.6;
    margin-bottom: 20px;
}

.source-link {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #7209b7;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.source-link:hover {
    color: #8B2FC4;
}

.methodology {
    margin-bottom: 80px;
}

.methodology h3 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 30px;
}

.methodology p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #E0E0E0;
    text-align: center;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.methodology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.method-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.method-item:hover {
    background: rgba(114, 9, 183, 0.1);
    border-color: rgba(114, 9, 183, 0.3);
    transform: translateY(-2px);
}

.method-item h4 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #7209b7;
    margin-bottom: 10px;
}

.method-item p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #E0E0E0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.disclaimer-container ul li::before {
    position: absolute;
    left: 0;
    max-width: 600px;
}

.disclaimer {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #B0B0B0;
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 60px;
}

.back-to-quiz {
    text-align: center;
}

/* Contact Section */
.contact-section {
    background: transparent;
    padding: 80px 20px;
    min-height: 100vh;
    position: relative;
}

.contact-section::before {
    display: none;
}

.contact-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.contact-content {
    display: grid;
    gap: 40px;
    margin-bottom: 60px;
}

.contact-card {
    background: rgba(0, 0, 0, 0.8);
    padding: 40px;
    border: 2px solid #00ff88;
    border-radius: 0;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    text-align: center;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.contact-card:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    transform: translateY(-3px);
    box-shadow: 
        0 0 30px #00ff88,
        0 0 60px #00ff88,
        inset 0 0 30px rgba(0, 255, 136, 0.3);
}

.contact-card h3 {
    font-family: 'Great Warrior', sans-serif;
    font-size: 2rem;
    font-weight: normal;
    color: #FFFFFF;
    margin-bottom: 15px;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px #c084fc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-role {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.2rem;
    color: #d8b4fe;
    margin-bottom: 10px;
    font-weight: normal;
}

.contact-location {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.1rem;
    color: #FFFFFF;
    margin-bottom: 0;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.contact-item {
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border: 2px solid #00ff88;
    border-radius: 0;
    box-shadow: 
        0 0 15px rgba(0, 255, 136, 0.3),
        inset 0 0 15px rgba(0, 255, 136, 0.1);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    transform: translateY(-2px);
    box-shadow: 
        0 0 25px #00ff88,
        0 0 50px #00ff88,
        inset 0 0 25px rgba(0, 255, 136, 0.3);
}

.contact-item h4 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 15px;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-link {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: block;
    padding: 10px 0;
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
}

.contact-link:hover {
    color: #00ffaa;
    text-shadow: 0 0 5px #00ffaa;
    transform: translateX(5px);
}

.resume-highlights {
    margin-bottom: 40px;
}

.resume-highlights h3 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 30px;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.highlight-card {
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border: 2px solid #00ff88;
    border-radius: 0;
    box-shadow: 
        0 0 15px rgba(0, 255, 136, 0.3),
        inset 0 0 15px rgba(0, 255, 136, 0.1);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.highlight-card:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    transform: translateY(-2px);
    box-shadow: 
        0 0 25px #00ff88,
        0 0 50px #00ff88,
        inset 0 0 25px rgba(0, 255, 136, 0.3);
}

.highlight-card h4 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 10px;
    text-shadow: none;
}

.highlight-card p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.skills-showcase {
    margin-bottom: 40px;
}

.skills-showcase h3 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 30px;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.skill-category {
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border: 2px solid #00ff88;
    border-radius: 0;
    box-shadow: 
        0 0 15px rgba(0, 255, 136, 0.3),
        inset 0 0 15px rgba(0, 255, 136, 0.1);
    transition: all 0.3s ease;
}

.skill-category:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    transform: translateY(-2px);
    box-shadow: 
        0 0 25px #00ff88,
        0 0 50px #00ff88,
        inset 0 0 25px rgba(0, 255, 136, 0.3);
}

.skill-category h4 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 15px;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skill-category p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    line-height: 1.6;
    font-size: 1.1rem;
}

.fun-facts {
    background: rgba(0, 0, 0, 0.8);
    padding: 40px;
    border: 2px solid #00ff88;
    border-radius: 0;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    transition: all 0.3s ease;
}

.fun-facts:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ffaa;
    transform: translateY(-2px);
    box-shadow: 
        0 0 30px #00ff88,
        0 0 60px #00ff88,
        inset 0 0 30px rgba(0, 255, 136, 0.3);
}

.fun-facts h3 {
    font-family: 'Bohemian Typewriter', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 20px;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fun-facts ul {
    list-style: none;
    padding: 0;
}

.fun-facts ul li {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    font-size: 1.1rem;
}

.fun-facts ul li::before {
    content: '🌟';
    position: absolute;
    left: 0;
    top: 0;
    color: #00ff88;
}

/* Footer */
.main-footer {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    padding: 60px 20px 20px;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.footer-section h3,
.footer-section h4 {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #FFFFFF;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-section h3 {
    font-size: 1.3rem;
}

.footer-section h4 {
    font-size: 1.1rem;
}

.footer-section p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #E0E0E0;
    line-height: 1.6;
    margin-bottom: 10px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #E0E0E0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #7209b7;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-family: 'Bohemian Typewriter', sans-serif;
    color: #B0B0B0;
    font-size: 0.9rem;
    margin: 0;
}

/* Animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes blink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

@keyframes thinking {
    0%, 80%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes celebrate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glow {
    0% {
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
    }
    100% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
    }
}

@keyframes sparkle {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

@keyframes mysticalPulse {
    0% {
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            0 0 15px #c084fc;
    }
    100% {
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            0 0 10px #c084fc;
    }
}

@keyframes mysticalButtonGlow {
    0% {
        box-shadow: 
            0 0 20px #c084fc,
            0 0 40px #c084fc,
            inset 0 0 20px rgba(192, 132, 252, 0.3);
    }
    100% {
        box-shadow: 
            0 0 30px #c084fc,
            0 0 60px #c084fc,
            inset 0 0 30px rgba(192, 132, 252, 0.5);
    }
}

@keyframes buttonGlow {
    0% {
        box-shadow: 
            0 0 20px #00ff88,
            0 0 40px #00ff88,
            inset 0 0 20px rgba(0, 255, 136, 0.3);
    }
    100% {
        box-shadow: 
            0 0 30px #00ff88,
            0 0 60px #00ff88,
            inset 0 0 30px rgba(0, 255, 136, 0.5);
    }
}

@keyframes sparkleGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes mysticalQuestionGlow {
    0% {
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            0 0 15px #c084fc;
    }
    100% {
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            0 0 10px #c084fc;
    }
}

@keyframes progressScan {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes progressPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px #00ff88;
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 20px #00ff88;
    }
}

@keyframes nameReveal {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateY(180deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) rotateY(90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 20px #00ff88;
    }
    100% {
        box-shadow: 0 0 40px #00ff88, 0 0 60px #00ff88;
    }
}

@keyframes stepPulse {
    0% {
        box-shadow: 
            0 0 15px #00ff88,
            inset 0 0 15px rgba(0, 255, 136, 0.3);
    }
    100% {
        box-shadow: 
            0 0 25px #00ff88,
            0 0 35px #00ff88,
            inset 0 0 25px rgba(0, 255, 136, 0.5);
    }
}

@keyframes mysticalFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

@keyframes mysticalGlow {
    0% {
        filter: drop-shadow(0 0 30px rgba(138, 43, 226, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.8));
    }
}

@keyframes auraPulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

@keyframes crystalFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateX(-50%) translateY(-5px) rotate(5deg);
    }
}

@keyframes crystalGlow {
    0% {
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 40px rgba(138, 43, 226, 0.4);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.9),
            0 0 60px rgba(138, 43, 226, 0.7);
    }
}

@keyframes innerGlow {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

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

@keyframes mysticalBlink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

@keyframes mysticalSparkle {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.9),
            0 0 25px rgba(255, 255, 255, 0.7);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 1),
            0 0 40px rgba(255, 255, 255, 0.9);
    }
}

@keyframes pupilGlow {
    0% {
        box-shadow: 0 0 5px rgba(26, 0, 51, 0.8);
    }
    100% {
        box-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
    }
}

@keyframes eyeGlow {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes mouthGlow {
    0% {
        box-shadow: 
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(138, 43, 226, 0.6);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 1),
            0 0 40px rgba(138, 43, 226, 0.8);
    }
}

@keyframes mouthAura {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }
    100% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 20px 15px;
    }
    
    .main-nav {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .nav-links {
        gap: 20px;
    }
    
    .nav-link {
        font-size: 0.95rem;
        padding: 6px 12px;
    }
    
    .hero {
        padding: 40px 15px;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .main-title {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
    
    .tagline {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }
    
    .question-text {
        font-size: 1.5rem;
        margin-bottom: 40px;
    }
    
    .options-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .guess-name {
        font-size: 2rem;
        padding: 20px 30px;
    }
    
    .result-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .action-buttons-row {
        flex-direction: row;
        width: 100%;
        gap: 15px;
        justify-content: center;
    }
    
    .action-btn {
        width: 100%;
        max-width: 250px;
    }
    
    .quiz-section {
        padding: 40px 15px;
    }
    
    .result-section {
        padding: 40px 15px;
        min-height: auto;
    }
    
    .result-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    
    .guesses-container {
        gap: 12px;
        margin: 30px 0;
    }
    
    .guess-item {
        padding: 15px 20px;
        flex-wrap: wrap;
    }
    
    .guess-rank {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        margin-right: 15px;
    }
    
    .guess-item .guess-name {
        font-size: 1.8rem;
    }
    
    .guess-confidence {
        font-size: 0.9rem;
    }
    
    .share-section {
        margin: 25px 0;
    }
    
    .share-btn {
        padding: 14px 24px;
        font-size: 0.95rem;
        min-width: 180px;
    }
    
    .final-section {
        padding: 60px 15px;
    }
    
    /* Responsive continent maps for tablets */
    .continent-map-container[data-continent="africa"] .continent-map-svg,
    .continent-map-container svg[data-continent="africa"],
    .continent-map-container[data-continent="north-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="north-america"],
    .continent-map-container[data-continent="asia"] .continent-map-svg,
    .continent-map-container svg[data-continent="asia"] {
        max-width: 450px !important;
        max-height: 400px !important;
    }
    
    .continent-map-container[data-continent="europe"] .continent-map-svg,
    .continent-map-container svg[data-continent="europe"],
    .continent-map-container[data-continent="central-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="central-america"],
    .continent-map-container[data-continent="oceania"] .continent-map-svg,
    .continent-map-container svg[data-continent="oceania"] {
        max-width: 450px;
        max-height: 300px;
    }
    
    .continent-map-container[data-continent="south-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="south-america"] {
        max-width: 280px;
        max-height: 350px;
    }
    
    .main-footer {
        padding: 40px 15px 20px;
        margin-top: 60px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .how-it-works-section {
        padding: 60px 15px;
    }
    
    .section-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }
    
    .step {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 30px 20px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .sources-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .source-card {
        padding: 25px 20px;
    }
    
    .methodology-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .method-item {
        padding: 20px;
    }
    
    /* Tablet-specific continent map sizing */
    /* Mobile continent maps - smaller to fit screen */
    .continent-map-container[data-continent="africa"] .continent-map-svg,
    .continent-map-container svg[data-continent="africa"],
    .continent-map-container[data-continent="north-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="north-america"],
    .continent-map-container[data-continent="asia"] .continent-map-svg,
    .continent-map-container svg[data-continent="asia"] {
        max-width: 350px !important;
        max-height: 350px !important;
    }
    
    .continent-map-container[data-continent="europe"] .continent-map-svg,
    .continent-map-container svg[data-continent="europe"],
    .continent-map-container[data-continent="central-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="central-america"],
    .continent-map-container[data-continent="oceania"] .continent-map-svg,
    .continent-map-container svg[data-continent="oceania"] {
        max-width: 320px;
        max-height: 250px;
    }
    
    .continent-map-container[data-continent="south-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="south-america"] {
        max-width: 220px;
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 15px 10px;
    }
    
    .hero {
        padding: 30px 10px;
    }
    
    .main-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .tagline {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .character {
        width: 100px;
        height: 100px;
    }
    
    .start-btn {
        padding: 16px 24px;
        font-size: 1rem;
        min-width: 180px;
    }
    
    .question-text {
        font-size: 1.3rem;
        margin-bottom: 30px;
    }
    
    .option-btn {
        padding: 16px 20px;
        font-size: 0.95rem;
    }
    
    .guess-name {
        font-size: 1.8rem;
        padding: 20px 25px;
    }
    
    .result-section {
        padding: 30px 10px;
    }
    
    .result-title {
        font-size: 1.5rem;
        margin-bottom: 25px;
        line-height: 1.3;
    }
    
    .guesses-container {
        gap: 10px;
        margin: 25px 0;
    }
    
    .guess-item {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .guess-rank {
        font-size: 1.3rem;
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
    
    .guess-item .guess-name {
        font-size: 1.5rem;
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
    }
    
    .guess-confidence {
        font-size: 0.85rem;
        flex: 0 0 auto;
    }
    
    .name-input-section {
        margin: 25px 0;
        padding: 15px;
    }
    
    .name-input {
        min-width: 150px;
        font-size: 0.9rem;
        padding: 10px 15px;
    }
    
    .name-submit-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .result-actions {
        gap: 12px;
        margin: 20px 0;
    }
    
    .action-buttons-row {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .action-btn {
        padding: 14px 20px;
        font-size: 0.9rem;
        width: 100%;
        max-width: 100%;
    }
    
    .share-section {
        margin: 0;
        width: 100%;
    }
    
    .share-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-width: 160px;
        width: 100%;
        max-width: 100%;
    }
    
    .final-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .final-message {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }
    
    .play-again-btn {
        padding: 16px 24px;
        font-size: 1rem;
        min-width: 180px;
    }
    
    .map-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    .map-grid {
        padding: 15px;
        border-radius: 15px;
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        gap: 6px;
    }
    
    .state-button {
        font-size: 0.8rem;
        padding: 8px 6px;
        min-height: 40px;
    }
    
    .state-label {
        font-size: 8px;
    }
    
    .state-path:hover + .state-label {
        font-size: 9px;
    }
    
    .continent-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        padding: 15px;
    }
    
    .continent-button {
        padding: 15px;
        min-height: 70px;
    }
    
    .continent-name {
        font-size: 1.1rem;
    }
    
    .continent-map-section {
        padding: 15px;
    }
    
    .continent-map-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    /* Mobile-specific continent map sizing */
    .continent-map-container[data-continent="africa"] .continent-map-svg,
    .continent-map-container svg[data-continent="africa"] {
        max-width: 90vw;
        max-height: 50vh;
    }
    
    .continent-map-container[data-continent="north-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="north-america"] {
        max-width: 90vw !important;
        max-height: 55vh !important;
        transform: scale(1.15) !important;
    }
    
    .continent-map-container[data-continent="asia"] .continent-map-svg,
    .continent-map-container svg[data-continent="asia"] {
        max-width: 90vw;
        max-height: 50vh;
    }
    
    .continent-map-container[data-continent="europe"] .continent-map-svg,
    .continent-map-container svg[data-continent="europe"] {
        max-width: 90vw;
        max-height: 50vh;
    }
    
    .continent-map-container[data-continent="central-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="central-america"] {
        max-width: 90vw;
        max-height: 50vh;
    }
    
    .continent-map-container[data-continent="oceania"] .continent-map-svg,
    .continent-map-container svg[data-continent="oceania"] {
        max-width: 90vw;
        max-height: 50vh;
    }
    
    .continent-map-container[data-continent="south-america"] .continent-map-svg,
    .continent-map-container svg[data-continent="south-america"] {
        max-width: 90vw;
        max-height: 50vh;
    }
}

/* ============================================
   FEEDBACK FORM STYLES
   ============================================ */

/* Floating Feedback Button */
.feedback-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 25px;
    background: linear-gradient(145deg, #6A1B9A, #8E24AA);
    color: white;
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
    transition: all 0.3s ease;
    animation: feedbackPulse 2s infinite;
}

.feedback-float-btn:hover {
    background: linear-gradient(145deg, #7B1FA2, #9C27B0);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.6);
    border-color: rgba(255, 215, 0, 0.8);
}

@keyframes feedbackPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
    }
    50% {
        box-shadow: 0 6px 30px rgba(138, 43, 226, 0.7);
    }
}

/* Feedback Modal */
.feedback-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.feedback-modal-content {
    background: linear-gradient(145deg, #1a0033, #2d0052);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 50px rgba(138, 43, 226, 0.5);
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.feedback-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255, 215, 0, 0.8);
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.feedback-close-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    color: rgba(255, 215, 0, 1);
    transform: rotate(90deg);
}

.feedback-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    text-align: center;
}

.feedback-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-bottom: 30px;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feedback-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-field label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 215, 0, 0.9);
}

.feedback-field input,
.feedback-field select,
.feedback-field textarea {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.feedback-field input:focus,
.feedback-field select:focus,
.feedback-field textarea:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.6);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.feedback-field input::placeholder,
.feedback-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.feedback-field select {
    cursor: pointer;
}

.feedback-field select option {
    background: #1a0033;
    color: white;
}

.feedback-field textarea {
    resize: vertical;
    min-height: 120px;
}

.feedback-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.feedback-submit-btn {
    padding: 15px 40px;
    background: linear-gradient(145deg, #6A1B9A, #8E24AA);
    color: white;
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

.feedback-submit-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, #7B1FA2, #9C27B0);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.6);
    border-color: rgba(255, 215, 0, 0.8);
}

.feedback-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.feedback-status {
    margin-top: 15px;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    display: none;
}

.feedback-status:not(:empty) {
    display: block;
}

.feedback-status-loading {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    color: rgba(255, 215, 0, 0.9);
}

.feedback-status-success {
    background: rgba(46, 204, 113, 0.1);
    border: 2px solid rgba(46, 204, 113, 0.3);
    color: rgba(46, 204, 113, 1);
}

.feedback-status-error {
    background: rgba(231, 76, 60, 0.1);
    border: 2px solid rgba(231, 76, 60, 0.3);
    color: rgba(231, 76, 60, 1);
}

.feedback-status-warning {
    background: rgba(241, 196, 15, 0.1);
    border: 2px solid rgba(241, 196, 15, 0.3);
    color: rgba(241, 196, 15, 1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .feedback-float-btn {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .feedback-modal-content {
        padding: 30px 20px;
        border-radius: 15px;
    }
    
    .feedback-title {
        font-size: 1.5rem;
    }
    
    .feedback-subtitle {
        font-size: 0.9rem;
    }
    
    .feedback-field input,
    .feedback-field select,
    .feedback-field textarea {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
    
    .feedback-submit-btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .feedback-float-btn {
        bottom: 15px;
        right: 15px;
        padding: 10px 18px;
        font-size: 0.85rem;
    }
    
    .feedback-modal-content {
        padding: 25px 15px;
    }
    
    .feedback-title {
        font-size: 1.3rem;
    }
}