* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #000000;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Light snow effect for calm atmosphere */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.2), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: snow 20s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes snow {
    0% { transform: translateY(-100px); }
    100% { transform: translateY(100vh); }
}

/* Jump animation for elements */
@keyframes elementJump {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) translateY(-20px);
        opacity: 1;
    }
    100% {
        transform: scale(0.8) translateY(0);
        opacity: 0.6;
    }
}

.element-jumping {
    position: fixed !important;
    z-index: 2147483646 !important; /* Just below maximum to ensure visibility */
    pointer-events: none;
    animation: elementJump 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid gold; /* Visual indicator */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.hidden {
    display: none !important;
}

/* Splash Screen Styles */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10002;
    animation: fadeIn 0.5s ease-in;
}

.splash-logo {
    width: 350px;
    height: 350px;
    margin-bottom: 50px;
    animation: float 3s ease-in-out infinite;
}

.button-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.start-btn {
    padding: 15px 40px;
    font-size: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

.start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.loading-bar {
    width: 300px;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    margin-top: 30px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.loading-bar.active {
    opacity: 1;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    width: 0;
    border-radius: 3px;
    transition: width 1s ease-out;
}

/* Header Controls */
.header-controls {
    display: flex;
    align-items: center;
    gap: 25px;
    min-width: 150px;
    flex-shrink: 0;
    justify-content: flex-end;
}


/* Epic animations */
@keyframes legendaryPulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(231, 76, 60, 0.8), 0 0 50px rgba(231, 76, 60, 0.5), 0 0 75px rgba(200, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 35px rgba(231, 76, 60, 1), 0 0 70px rgba(231, 76, 60, 0.7), 0 0 95px rgba(200, 0, 0, 0.4);
    }
}

@keyframes mythicalAura {
    0%, 100% {
        box-shadow: 0 0 30px rgba(155, 89, 182, 0.9), 0 0 60px rgba(155, 89, 182, 0.6), 0 0 90px rgba(128, 0, 128, 0.4), 0 0 120px rgba(75, 0, 130, 0.2);
    }
    33% {
        box-shadow: 0 0 35px rgba(155, 89, 182, 1), 0 0 70px rgba(155, 89, 182, 0.8), 0 0 100px rgba(128, 0, 128, 0.5), 0 0 130px rgba(75, 0, 130, 0.3);
    }
    66% {
        box-shadow: 0 0 40px rgba(155, 89, 182, 0.8), 0 0 80px rgba(155, 89, 182, 0.7), 0 0 110px rgba(128, 0, 128, 0.6), 0 0 140px rgba(75, 0, 130, 0.4);
    }
}

.control-button,
.mute-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    position: relative;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 22px;
}

.control-button:hover,
.mute-button:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
    border-color: rgba(255,215,0,0.5);
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
}

/* Orange cloud-like hint aura for elements with available matches */
.hint-glow {
    position: relative;
    animation: hintCloudBreath 3s ease-in-out infinite;
}

.hint-glow::before {
    content: '';
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    background: radial-gradient(circle at center,
        rgba(255, 140, 0, 0.4) 0%,
        rgba(255, 140, 0, 0.25) 25%,
        rgba(255, 140, 0, 0.15) 45%,
        rgba(255, 140, 0, 0.08) 65%,
        transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: hintCloudGlow 3s ease-in-out infinite;
    filter: blur(10px);
}

@keyframes hintCloudBreath {
    0%, 100% { 
        transform: scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

@keyframes hintCloudGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.95);
        filter: blur(10px);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.15);
        filter: blur(15px);
    }
}

/* Additional misty layer for depth */
.hint-glow::after {
    content: '';
    position: absolute;
    top: -35px;
    left: -35px;
    right: -35px;
    bottom: -35px;
    background: radial-gradient(circle at center,
        rgba(255, 160, 0, 0.2) 0%,
        rgba(255, 140, 0, 0.1) 40%,
        transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    animation: hintMistFloat 4s ease-in-out infinite;
    filter: blur(20px);
    transform: rotate(0deg);
}

@keyframes hintMistFloat {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.4;
    }
    25% {
        transform: scale(1.05) rotate(90deg);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
    75% {
        transform: scale(1.05) rotate(270deg);
        opacity: 0.7;
    }
}

/* Hint tooltip - follows cursor */
.hint-tooltip {
    position: fixed;
    background: rgba(255, 140, 0, 0.95);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    display: none;
}

.hint-tooltip.active {
    display: block;
}

@keyframes hint-pulse {
    0% {
        box-shadow: 0 0 20px rgba(128, 0, 128, 0.6), 0 0 40px rgba(128, 0, 128, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(128, 0, 128, 0.8), 0 0 60px rgba(128, 0, 128, 0.6);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 20px rgba(128, 0, 128, 0.6), 0 0 40px rgba(128, 0, 128, 0.4);
        transform: scale(1);
    }
}

/* Pagination Controls for Radial Menus */
.pagination-controls {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 15px;
    padding: 2px 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 451;
}

/* Show pagination when menu is active and has pages */
.element-corner .radial-menu.active.has-pages ~ .pagination-controls {
    opacity: 1;
    pointer-events: auto;
}

/* Position pagination controls between main button and elements */
.element-corner.top-left .pagination-controls {
    top: 50%;
    left: 110px;
    transform: translateY(-50%);
    flex-direction: column;
    width: auto;
}

.element-corner.top-right .pagination-controls {
    top: 120px;
    right: 50%;
    transform: translateX(50%);
}

.element-corner.bottom-left .pagination-controls {
    bottom: 50%;
    left: 110px;
    transform: translateY(50%);
}

.element-corner.bottom-right .pagination-controls {
    bottom: 50%;
    right: 110px;
    transform: translateY(50%);
    flex-direction: column;
    width: auto;
}

.page-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 50%;
    color: rgba(255, 215, 0, 0.9);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.page-btn:hover {
    background: rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.6);
    transform: scale(1.15);
}

.page-btn:active {
    transform: scale(0.9);
}

.page-indicator {
    color: rgba(255, 215, 0, 0.7);
    font-size: 10px;
    font-weight: bold;
    min-width: 28px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.5px;
}

/* Vertical pagination adjustments */
.pagination-controls[style*="flex-direction: column"] .page-indicator,
.pagination-controls.vertical .page-indicator,
.element-corner.top-left .pagination-controls .page-indicator,
.element-corner.bottom-right .pagination-controls .page-indicator {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-width: auto;
    min-height: 28px;
}

/* Notification badge for discoveries */
.discoveries-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    animation: badgePulse 2s ease-in-out infinite;
    z-index: 10;
}

/* Badge position adjustment for stat-item */
.stat-item .discoveries-badge {
    top: -8px;
    right: 5px;
}

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

.mute-button.muted .sound-on {
    display: none;
}

.mute-button.muted .sound-off {
    display: block !important;
}

/* Audio Control Dropdown */
.audio-control {
    position: relative;
}

.audio-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(20,20,20,0.98) 0%, rgba(45,35,25,0.98) 100%);
    border: 2px solid rgba(139,69,19,0.6);
    border-radius: 15px;
    min-width: 180px;
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.8),
        0 0 20px rgba(139,69,19,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.audio-dropdown:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    position: relative;
    border-left: 3px solid transparent;
}

.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(139,69,19,0.4) 0%, rgba(139,69,19,0.2) 100%);
    border-left-color: rgba(255,215,0,0.8);
    transform: translateX(2px);
    color: #ffffff;
}

.dropdown-item:first-child {
    border-radius: 13px 13px 0 0;
}

.dropdown-item.mute-option {
    border-radius: 0 0 13px 13px;
    border-top: 1px solid rgba(139,69,19,0.4);
}

.dropdown-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(139,69,19,0.5) 50%, transparent 100%);
    margin: 8px 0;
    position: relative;
}

.dropdown-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(139,69,19,0.3);
    border-radius: 50%;
    border: 2px solid rgba(139,69,19,0.5);
}

.song-name {
    flex: 1;
    font-weight: 500;
    position: relative;
}

.dropdown-item:not(.mute-option) .song-name::before {
    content: '♪';
    margin-right: 8px;
    color: rgba(255,215,0,0.7);
    font-size: 12px;
}

.dropdown-item.mute-option .song-name::before {
    content: '🔇';
    margin-right: 8px;
    font-size: 12px;
}

.playing-icon {
    color: #ffd700;
    font-weight: bold;
    margin-left: 10px;
    animation: musicPulse 1.5s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
    font-size: 16px;
}

.playing-icon.hidden {
    display: none;
}

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

/* Active/selected song styling */
.dropdown-item.active {
    background: linear-gradient(90deg, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0.05) 100%);
    border-left-color: #ffd700;
    color: #ffd700;
}

.dropdown-item.active .song-name::before {
    color: #ffd700;
    animation: musicPulse 1s ease-in-out infinite;
}

/* Discoveries Overlay */
.discoveries-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    z-index: 2147483646; /* One less than element details flyout */
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(0,0,0,0.5);
}

.discoveries-overlay:not(.hidden) {
    right: 0;
}

#discoveries-iframe {
    width: 85%;
    height: 100%;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    box-shadow: -10px 0 40px rgba(0,0,0,0.8);
}

@media (max-width: 768px) {
    #discoveries-iframe {
        width: 95%;
    }
}

@media (max-width: 480px) {
    #discoveries-iframe {
        width: 100%;
    }
}

.panel-header {
    background: rgba(0,0,0,0.5);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #8b4513;
}

.panel-header h2 {
    color: #ffd700;
    font-size: 24px;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.close-panel {
    background: transparent;
    border: none;
    color: #ffd700;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.close-panel:hover {
    transform: scale(1.2);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Discoveries Progress */
.discoveries-progress {
    background: rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid rgba(255,215,0,0.3);
}

.progress-title {
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 25px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(255,215,0,0.2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ff9f40);
    border-radius: 15px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.progress-text {
    text-align: center;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

/* Discoveries Tier Groups */
.discovery-tier {
    margin-bottom: 30px;
}

.discovery-tier-header {
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,215,0,0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tier-count {
    font-size: 14px;
    color: rgba(255,215,0,0.7);
    font-weight: normal;
    margin-left: auto;
}

.discovery-elements {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.discovery-item {
    width: 60px;
    height: 60px;
    background: rgba(20,20,20,0.7);
    border: 2px solid rgba(60,60,60,0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s;
}

.discovery-item.discovered {
    border-color: #8b4513;
    background: rgba(40,40,40,0.8);
}

.discovery-item.discovered:hover {
    transform: scale(1.1);
    border-color: #ffd700;
    z-index: 10;
}

.discovery-item.undiscovered {
    opacity: 0.6;
}

.discovery-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.discovery-item .unknown {
    font-size: 30px;
    color: rgba(255,255,255,0.3);
}

.discovery-tooltip {
    position: fixed;
    background: rgba(0,0,0,0.95);
    border: 1px solid rgba(255,215,0,0.5);
    padding: 8px 12px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 2147483647 !important; /* Maximum z-index */
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.discovery-tooltip .tooltip-name {
    color: #ffd700;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}

.discovery-tooltip .tooltip-recipe {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
}

.discovery-tooltip .recipe-element {
    color: #87ceeb;
    font-weight: 500;
}

/* Scrollbar styling */
.panel-content::-webkit-scrollbar {
    width: 8px;
}

.panel-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.panel-content::-webkit-scrollbar-thumb {
    background: rgba(255,215,0,0.3);
    border-radius: 4px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,215,0,0.5);
}

/* Game Container */
.game-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 100;
}

/* Game Header */
.game-header {
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 50;
    border-bottom: 2px solid rgba(255,215,0,0.2);
}

/* Hide toggle button on desktop */
.header-toggle {
    display: none;
}

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

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

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.home-button {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 22px;
}

.home-button:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
    border-color: rgba(255,215,0,0.5);
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.game-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.3);
    letter-spacing: 2px;
    text-align: center;
    white-space: nowrap;
}

.game-stats {
    display: flex;
    gap: 20px;
    padding: 0 10px;
    flex-shrink: 0;
    margin-right: 10px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    background: rgba(0,0,0,0.3);
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,215,0,0.2);
    position: relative;
}

.stat-label {
    opacity: 0.7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.stat-value {
    font-weight: bold;
    font-size: 20px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,0.4);
}

/* Game Board */
.game-board {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Element Corners - Fixed to viewport corners */
.element-corner {
    position: fixed;
    width: 100px;
    z-index: 450;
}

.element-corner.top-left {
    top: calc(120px + env(safe-area-inset-top, 0px));
    left: calc(20px + env(safe-area-inset-left, 0px));
}

.element-corner.top-right {
    top: calc(120px + env(safe-area-inset-top, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
}

.element-corner.bottom-left {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: calc(20px + env(safe-area-inset-left, 0px));
}

.element-corner.bottom-right {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
}

.corner-header {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(139,69,19,0.4) 0%, rgba(20,20,20,0.95) 100%);
    border: 3px solid rgba(255,215,0,0.4);
    border-radius: 50%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,215,0,0.1);
    position: relative;
    z-index: 600;
    pointer-events: auto;
    /* Touch-friendly */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: auto;
}

.corner-header:hover {
    transform: scale(1.1);
    border-color: rgba(255,215,0,0.8);
    box-shadow: 0 6px 20px rgba(255,215,0,0.3), inset 0 0 30px rgba(255,215,0,0.2);
    background: radial-gradient(circle, rgba(139,69,19,0.6) 0%, rgba(30,30,30,0.95) 100%);
}

.corner-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.corner-header .element-name {
    font-weight: bold;
    font-size: 12px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    color: rgba(255,215,0,0.9);
}

/* Element-specific themes */
.element-corner.top-left .corner-header {
    /* Fire theme */
    background: radial-gradient(circle, rgba(255,100,0,0.3) 0%, rgba(20,20,20,0.95) 100%);
    border-color: rgba(255,100,0,0.5);
}

.element-corner.top-left .corner-header:hover {
    background: radial-gradient(circle, rgba(255,100,0,0.5) 0%, rgba(30,30,30,0.95) 100%);
    border-color: rgba(255,150,0,0.8);
    box-shadow: 0 6px 20px rgba(255,100,0,0.4), inset 0 0 30px rgba(255,100,0,0.3);
}

.element-corner.top-right .corner-header {
    /* Water theme */
    background: radial-gradient(circle, rgba(0,150,255,0.3) 0%, rgba(20,20,20,0.95) 100%);
    border-color: rgba(0,150,255,0.5);
}

.element-corner.top-right .corner-header:hover {
    background: radial-gradient(circle, rgba(0,150,255,0.5) 0%, rgba(30,30,30,0.95) 100%);
    border-color: rgba(0,200,255,0.8);
    box-shadow: 0 6px 20px rgba(0,150,255,0.4), inset 0 0 30px rgba(0,150,255,0.3);
}

.element-corner.bottom-left .corner-header {
    /* Earth theme */
    background: radial-gradient(circle, rgba(139,69,19,0.4) 0%, rgba(20,20,20,0.95) 100%);
    border-color: rgba(139,69,19,0.6);
}

.element-corner.bottom-left .corner-header:hover {
    background: radial-gradient(circle, rgba(139,69,19,0.6) 0%, rgba(30,30,30,0.95) 100%);
    border-color: rgba(160,82,45,0.8);
    box-shadow: 0 6px 20px rgba(139,69,19,0.4), inset 0 0 30px rgba(139,69,19,0.3);
}

.element-corner.bottom-right .corner-header {
    /* Air theme */
    background: radial-gradient(circle, rgba(200,200,200,0.3) 0%, rgba(20,20,20,0.95) 100%);
    border-color: rgba(200,200,200,0.5);
}

.element-corner.bottom-right .corner-header:hover {
    background: radial-gradient(circle, rgba(200,200,200,0.5) 0%, rgba(30,30,30,0.95) 100%);
    border-color: rgba(255,255,255,0.8);
    box-shadow: 0 6px 20px rgba(200,200,200,0.4), inset 0 0 30px rgba(200,200,200,0.3);
}

/* Element Menu */
.element-menu {
    position: absolute;
    background: rgba(20,20,20,0.95);
    border: 2px solid rgba(139,69,19,0.5);
    border-radius: 10px;
    z-index: 20;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.element-menu:not(.hidden) {
    pointer-events: auto;
}

.element-menu.active {
    opacity: 1;
}

/* Custom scrollbar for compact look */
.element-menu::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.element-menu::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.element-menu::-webkit-scrollbar-thumb {
    background: rgba(139,69,19,0.5);
    border-radius: 3px;
}

.element-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(139,69,19,0.7);
}

/* Top-left (Fire) menu extends to the right */
.element-corner.top-left .element-menu {
    top: 20px;
    left: 110px;
    max-width: 400px;
    max-height: 300px;
    overflow-x: auto;
    overflow-y: auto;
}

/* Top-right (Water) menu extends downward */
.element-corner.top-right .element-menu {
    top: 110px;
    right: 20px;
    left: auto;
    max-width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

/* Bottom-left (Earth) menu extends upward */
.element-corner.bottom-left .element-menu {
    bottom: 110px;
    left: 20px;
    max-width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

/* Bottom-right (Air) menu extends to the left */
.element-corner.bottom-right .element-menu {
    bottom: 20px;
    right: 110px;
    left: auto;
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
}

.menu-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Menu Tier Section */
.menu-tier-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.menu-tier-section:last-child {
    margin-bottom: 0;
}

.menu-tier-header {
    color: #ffd700;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 5px;
    background: rgba(139,69,19,0.2);
    border-radius: 3px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.menu-tier-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Adjust grid layout based on menu direction */
/* Fire (left) and Earth (bottom-left): Normal left-to-right */
.element-corner.top-left .menu-tier-grid,
.element-corner.bottom-left .menu-tier-grid {
    flex-direction: row;
}

/* Water (top-right) and Air (bottom-right): Right-to-left */
.element-corner.top-right .menu-tier-grid,
.element-corner.bottom-right .menu-tier-grid {
    flex-direction: row-reverse;
}

/* Menu Element */
.menu-element {
    width: 50px;
    height: 50px;
    background: rgba(30,30,30,0.9);
    border: 1px solid rgba(139,69,19,0.3);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    padding: 3px;
    gap: 2px;
}

.menu-element:hover {
    transform: scale(1.1);
    background: rgba(50,50,50,0.95);
    border-color: rgba(255,215,0,0.5);
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
    z-index: 10;
}

.menu-element img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.menu-element .element-icon {
    font-size: 24px;
}

.menu-element .element-name {
    font-size: 9px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.element-item {
    width: 45px;
    height: 45px;
    background: rgba(20,20,20,0.7);
    border: 1px solid rgba(60,60,60,0.4);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    padding: 2px;
}

.element-item:hover {
    transform: scale(1.1);
    background: rgba(50,50,50,0.9);
    border-color: rgba(150,150,150,0.7);
    z-index: 10;
}

.element-item:active {
    transform: scale(0.95);
    background: rgba(70,70,70,0.9);
}

.element-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.element-item.newly-discovered {
    border: 2px solid #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.4);
    animation: newElementGlow 3s ease-in-out;
    transform: scale(1.15);
    z-index: 100;
}

@keyframes newElementGlow {
    0% {
        transform: scale(0.5) rotate(720deg);
        box-shadow: 0 0 50px rgba(255,215,0,1), 0 0 100px rgba(255,215,0,0.6);
        border-color: #fff;
    }
    50% {
        transform: scale(1.2) rotate(360deg);
        box-shadow: 0 0 30px rgba(255,215,0,0.9), 0 0 60px rgba(255,215,0,0.5);
        border-color: #ffd700;
    }
    100% {
        transform: scale(1.15) rotate(0deg);
        box-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.4);
        border-color: #ffd700;
    }
}

.element-item img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.element-tooltip {
    position: fixed;
    background: rgba(0,0,0,0.95);
    border: 1px solid rgba(255,215,0,0.3);
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 10001;
    white-space: nowrap;
    font-size: 10px;
}

.element-item:hover {
    z-index: 100;
}

.element-item:hover .element-tooltip {
    opacity: 1;
}

.tooltip-name {
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 2px;
}

.tooltip-recipe {
    color: rgba(255,255,255,0.7);
    font-size: 9px;
}

.tooltip-recipe .recipe-element {
    color: #87ceeb;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255,215,0,0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(255,215,0,0.9), 0 0 30px rgba(255,215,0,0.4);
    }
}

/* Workshop Area */
.workshop-area {
    background-image: url('../images/table.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 20px;
    position: relative;
    z-index: 10;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    width: 80vw;
    max-width: 1200px;
    min-width: 600px;
    height: 60vh;
    max-height: 600px;
    min-height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.workshop-title {
    text-align: center;
    font-size: 36px;
    color: #3a2a1a;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    font-weight: bold;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 10px;
    white-space: nowrap;
}

/* Tutorial Hint */
.tutorial-hint {
    font-size: 12px;
    color: rgba(255,215,0,0.7);
    margin-bottom: 20px;
    text-align: center;
    animation: fadeInOut 4s ease-in-out infinite;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.desktop-hint {
    display: inline;
}

.mobile-hint {
    display: none;
}

@media (max-width: 768px) {
    .desktop-hint {
        display: none;
    }
    .mobile-hint {
        display: inline;
    }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

.combination-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;  /* Reduced from 40px to bring slots closer to pot */
    height: 200px;
    width: 100%;
    max-width: 800px;
}

.drop-slot {
    width: 160px;
    height: 200px;
    background: linear-gradient(135deg, rgba(100, 100, 120, 0.1) 0%, rgba(80, 80, 100, 0.2) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
    padding: 10px;
    /* Touch-friendly */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: auto;
}

.drop-slot.drag-over {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(150, 150, 170, 0.3) 0%, rgba(120, 120, 140, 0.4) 100%);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 30px rgba(255,215,0,0.6);
}

.drop-slot.has-element {
    background: none;
}

.drop-slot.combining {
    animation: combiningPulse 1.2s ease-in-out;
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.8), inset 0 0 20px rgba(255, 69, 0, 0.4);
}

@keyframes combiningPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(255, 140, 0, 0.8), inset 0 0 20px rgba(255, 69, 0, 0.4);
    }
    25% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(255, 140, 0, 1), inset 0 0 30px rgba(255, 69, 0, 0.6);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 50px rgba(255, 215, 0, 1), inset 0 0 40px rgba(255, 140, 0, 0.8);
    }
    75% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(255, 140, 0, 1), inset 0 0 30px rgba(255, 69, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(255, 140, 0, 0.8), inset 0 0 20px rgba(255, 69, 0, 0.4);
    }
}

.slot-placeholder {
    color: rgba(255,255,255,0.5);
    text-align: center;
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.slot-top-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 20px;
}

.slot-bottom-text {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 20px;
}

/* Element inside drop slot */
.slot-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    width: 100%;
    height: 100%;
}

.slot-element:hover {
    transform: scale(1.05);
}

.slot-element img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.slot-element .element-icon {
    font-size: 120px;
    text-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.slot-element .element-name {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-weight: 600;
    max-width: 140px;
    word-wrap: break-word;
    line-height: 1.2;
}

.dropped-element {
    cursor: grab;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dropped-element img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.dropped-element-name {
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    text-align: center;
}

/* Combine Button */
.combine-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.combine-pot {
    width: 300px;
    height: 300px;
    background: transparent;
    padding: 0;
    transition: all 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.pot-image {
    width: 280px;
    height: 280px;
    object-fit: contain;
    transition: all 0.3s;
    filter: grayscale(0%) opacity(1);
}

.combine-pot.ready .pot-image {
    animation: glowPulseCreate 2s ease-in-out infinite;
}

.combine-pot.combining .pot-image {
    content: url('../images/boilingpot.gif');
}

.combine-btn {
    width: 250px;
    height: 250px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.create-image {
    width: 100%;
    height: 200px;
    object-fit: contain;
    transition: all 0.3s;
    filter: grayscale(0%) opacity(1);
}

.combine-btn:not(:disabled) .create-image {
    filter: grayscale(0%) opacity(1);
    animation: glowPulseCreate 2s ease-in-out infinite;
}

.combine-btn:not(:disabled):hover {
    transform: scale(1.1);
}

.combine-btn:not(:disabled):hover .create-image {
    filter: drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 40px #ff6b6b);
}

.combine-btn:disabled {
    cursor: not-allowed;
}

.combine-btn.combining .create-image {
    content: url('../images/boilingpot.gif');
}

@keyframes glowPulseCreate {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255,215,0,0.6)) drop-shadow(0 0 20px rgba(255,107,107,0.4));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255,215,0,0.9)) drop-shadow(0 0 30px rgba(255,107,107,0.6));
        transform: scale(1.05);
    }
}

.create-text {
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 22px;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.5;
    transition: all 0.3s;
}

.combine-btn:not(:disabled) .create-text {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,215,0,0.8), 2px 2px 4px rgba(0,0,0,0.8);
}


/* Result Area */
.result-area {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10002;
    text-align: center;
}

.result-content {
    display: inline-block;
    padding: 30px 50px;
    background: linear-gradient(135deg, 
        rgba(139,69,19,0.95) 0%, 
        rgba(60,30,15,0.98) 30%, 
        rgba(20,20,20,0.98) 100%);
    border: 3px solid #ffd700;
    border-radius: 25px;
    box-shadow: 
        0 0 30px rgba(255,215,0,0.6),
        0 0 60px rgba(255,215,0,0.4),
        0 0 100px rgba(255,140,0,0.3),
        inset 0 2px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.3);
    animation: discoveryPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(10px);
}

.discovery-animation .result-content {
    animation: discoveryBurst 0.8s ease-out;
    box-shadow: 0 0 50px rgba(255,215,0,0.5);
}

/* Dark overlay when discovery appears */
.result-area:not(.hidden)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, 
        rgba(139,69,19,0.3) 0%, 
        rgba(0,0,0,0.85) 60%);
    z-index: -1;
    animation: overlayFadeIn 0.4s ease-out;
}

.discovery-burst {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.discovery-rarity {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: shimmerText 2s ease-in-out infinite;
}

.discovery-title {
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255,215,0,0.8);
    animation: pulseGlow 1.5s ease-in-out infinite;
}

.discovery-element-icon {
    position: relative;
    animation: iconFloat 2s ease-in-out infinite;
}

.discovery-element-icon img {
    filter: drop-shadow(0 0 20px rgba(255,215,0,0.6));
    animation: iconSpin 0.8s ease-out;
}

.discovery-element-name {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: nameReveal 0.6s ease-out;
}

.discovery-tier-label {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    font-style: italic;
}

@keyframes discoveryBurst {
    0% {
        transform: scale(0.3) rotate(180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

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

@keyframes pulseGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255,215,0,0.8);
    }
    50% {
        text-shadow: 0 0 30px rgba(255,215,0,1), 0 0 40px rgba(255,215,0,0.6);
    }
}

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

@keyframes iconSpin {
    0% {
        transform: rotate(0deg) scale(0.5);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes nameReveal {
    0% {
        letter-spacing: 20px;
        opacity: 0;
    }
    100% {
        letter-spacing: 2px;
        opacity: 1;
    }
}

@keyframes particleBurst {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance));
        opacity: 0;
    }
}

@keyframes screenFlash {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
    }
}

/* Discovery Notification */
/* Enhanced Discovery Notification with Tier Emphasis and Proper Centering */
.discovery-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.discovery-notification {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 16px;
    padding: 18px;
    min-width: 320px;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.3);
    position: relative;
}

.discovery-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.discovery-tier-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    animation: tierPulse 2s ease-in-out infinite;
}

.tier-number {
    font-size: 22px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1;
}

.tier-label {
    font-size: 10px;
    font-weight: bold;
    color: #1a1a1a;
    letter-spacing: 1px;
}

.discovery-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    animation: shimmer 2s ease-in-out infinite;
}

.discovered-element {
    margin: 15px auto;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: elementFloat 3s ease-in-out infinite;
}

.discovered-element img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
}

.discovery-element-name {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: nameReveal 0.8s ease-out;
}

.discovery-tier-name {
    font-size: 14px;
    color: rgba(255, 215, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    padding: 5px 15px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 20px;
    display: inline-block;
}

.discovery-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 215, 0, 0.3);
    max-height: 70px;
    overflow-y: auto;
}

.discovery-recipe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.recipe-element-1, .recipe-element-2 {
    font-weight: bold;
    color: rgba(255, 215, 0, 0.8);
}

.recipe-plus {
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
}

/* Tier-specific color themes */
.discovery-notification[data-tier="0"] .discovery-tier-badge {
    background: linear-gradient(135deg, #808080 0%, #606060 100%);
}

.discovery-notification[data-tier="1"] .discovery-tier-badge {
    background: linear-gradient(135deg, #87CEEB 0%, #4682B4 100%);
}

.discovery-notification[data-tier="2"] .discovery-tier-badge {
    background: linear-gradient(135deg, #98D8C8 0%, #5F9EA0 100%);
}

.discovery-notification[data-tier="3"] .discovery-tier-badge {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.discovery-notification[data-tier="4"] .discovery-tier-badge {
    background: linear-gradient(135deg, #FF9F40 0%, #FF6B6B 100%);
}

.discovery-notification[data-tier="5"] .discovery-tier-badge {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
}

.discovery-notification[data-tier="6"] .discovery-tier-badge {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    animation: mythicalGlow 2s ease-in-out infinite;
}

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

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

@keyframes mythicalGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(155, 89, 182, 0.6);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 40px rgba(155, 89, 182, 0.9);
        transform: scale(1.15);
    }
}

/* Integrated Mini-Game Section */
.discovery-minigame-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.minigame-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), transparent);
    margin: 0 auto 15px;
}

.minigame-subtitle {
    color: #FFD700;
    font-size: 18px;
    margin-bottom: 8px;
    font-family: 'Cinzel', serif;
}

.minigame-instructions {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.discovery-skip-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.discovery-skip-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.discovery-skip-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

/* Update animation for new overlay structure */
.discovery-notification-overlay.hidden {
    display: none;
}

.discovery-notification-overlay.show {
    animation: overlayFadeIn 0.3s ease-out;
}

.discovery-notification-overlay.show .discovery-notification {
    animation: discoverySlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.discovery-notification-overlay.show .discovery-notification-new {
    animation: discoverySlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

@keyframes discoverySlideIn {
    from {
        transform: scale(0.7) translateY(-50px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* New Discovery Popup Design */
.discovery-notification-new {
    background: #ffffff;
    border: 2px solid #333333;
    border-radius: 12px;
    padding: 30px;
    min-width: 700px;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: block !important;
}

/* Epic Discovery Modal Redesign - Dark Theme with Golden Accents */
.discovery-notification-epic {
    background: linear-gradient(135deg, rgba(20,20,30,0.98) 0%, rgba(10,10,20,0.98) 100%);
    border: 3px solid rgba(255,215,0,0.5);
    border-radius: 20px;
    padding: 30px 35px;
    min-width: 750px;
    max-width: 850px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255,215,0,0.3);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    backdrop-filter: blur(10px);
}

.discovery-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: auto;
}

.discovery-close-btn:hover {
    background: rgba(255,0,0,0.3);
    border-color: rgba(255,0,0,0.6);
    transform: scale(1.1) rotate(90deg);
}

.discovery-header-epic {
    text-align: center;
    margin-bottom: 25px;
}

.discovery-title-epic {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    background: linear-gradient(90deg, #ffd700, #ff9f40, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 3px;
    margin: 0;
    animation: titleGlow 2s ease-in-out infinite;
}

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

.discovery-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
    margin-top: 20px;
}

/* Left Section: Element Display */
.discovery-element-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.discovered-element-epic {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
    border: 3px solid rgba(255,215,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 20px rgba(255,215,0,0.1);
    animation: elementGlow 2s ease-in-out infinite;
}

@keyframes elementGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 20px rgba(255,215,0,0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 50px rgba(255,215,0,0.5), inset 0 0 30px rgba(255,215,0,0.2);
        transform: scale(1.05);
    }
}

.discovered-element-epic img {
    width: 170px;
    height: 170px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255,215,0,0.4));
}

.discovered-element-epic .element-icon {
    font-size: 160px;
    filter: drop-shadow(0 0 15px rgba(255,215,0,0.4));
}

.discovery-element-name-epic {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 2px 10px rgba(255,215,0,0.6);
    text-align: center;
    letter-spacing: 1px;
}

.discovery-base-family {
    margin-top: 10px;
    text-align: center;
}

.base-family-label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.base-family-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px;
    background: rgba(255,215,0,0.15);
    border: 2px solid rgba(255,215,0,0.3);
    border-radius: 12px;
}

.base-family-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
}

.base-family-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    text-transform: capitalize;
}

/* Right Section: Info and Recipe */
.discovery-info-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.discovery-tier-display {
    text-align: center;
}

.tier-badge-epic {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 20px rgba(255,215,0,0.6);
    animation: tierPulse 2s ease-in-out infinite;
}

.tier-number-epic {
    font-size: 32px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1;
}

.tier-label-epic {
    font-size: 11px;
    font-weight: bold;
    color: #1a1a1a;
    letter-spacing: 1px;
    margin-top: 2px;
}

.discovery-description-epic {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.6;
    padding: 15px;
    background: rgba(255,215,0,0.05);
    border-left: 4px solid rgba(255,215,0,0.5);
    border-radius: 8px;
    font-style: italic;
}

.discovery-stats-epic {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-item-epic {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(255,215,0,0.08);
    border-radius: 10px;
    border: 1px solid rgba(255,215,0,0.2);
}

.stat-icon {
    font-size: 20px;
}

.stat-label {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    flex: 1;
    margin-right: 8px;
}

.stat-value-epic {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
}

.recipe-section-epic {
    margin-top: 10px;
}

.recipe-label-epic {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.recipe-elements-epic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.recipe-card-epic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255,215,0,0.05);
    border: 2px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.recipe-card-epic:hover {
    background: rgba(255,215,0,0.1);
    border-color: rgba(255,215,0,0.4);
    transform: translateY(-3px);
}

.recipe-card-image {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recipe-card-image img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.3));
}

.recipe-card-image .element-icon {
    font-size: 55px;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.3));
}

.recipe-card-name {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    font-weight: 500;
}

.recipe-plus-epic {
    font-size: 28px;
    color: rgba(255,215,0,0.6);
    font-weight: bold;
}

/* Top Section - Tier Badge and Banner */
.discovery-top-section {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.discovery-tier-badge-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tier-circle {
    width: 60px;
    height: 60px;
    background: #ffcc00;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

.tier-circle .tier-number {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    line-height: 1;
}

.tier-circle .tier-label {
    font-size: 10px;
    font-weight: bold;
    color: #333333;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: -2px;
}

.discovery-banner {
    background: #333333;
    color: #ffcc00;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Main Content - Two Column Layout */
.discovery-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

/* Left Column - Element Display */
.discovery-left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
}

.discovered-element-new {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.discovered-element-new img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}

.discovered-element-new .element-icon {
    font-size: 150px;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
}

.discovery-element-name {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    text-align: center;
    margin: 0;
}

/* Right Column - Description and Recipe */
.discovery-right-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 20px;
}

.discovery-description-new {
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
    font-style: italic;
    text-align: left;
}

.recipe-section-new {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recipe-label {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    text-align: center;
}

.recipe-elements-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.recipe-card {
    background: #333333;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}

.recipe-card-inner {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #555555;
    border-radius: 8px;
}

.recipe-card-inner img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.recipe-card-inner .element-icon {
    font-size: 40px;
    color: #ffcc00;
}

.recipe-card-name {
    color: #ffcc00;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.recipe-plus-new {
    color: #333333;
    font-size: 24px;
    font-weight: bold;
}

/* Mini-Game Section */
.discovery-minigame-new {
    background: #333333;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.minigame-header-new {
    margin-bottom: 20px;
}

.minigame-title {
    color: #ffcc00;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.minigame-subtitle {
    color: #ffffff;
    font-size: 12px;
    opacity: 0.8;
}

.timing-bar-container-new {
    position: relative;
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, #ff4444, #ffaa00, #44ff44, #ffaa00, #ff4444);
    border-radius: 20px;
    margin: 20px 0;
    overflow: hidden;
}

.timing-click-button-new {
    background: #ffffff;
    color: #333333;
    border: 2px solid #333333;
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timing-click-button-new:hover {
    background: #333333;
    color: #ffffff;
}

.timing-result-new {
    margin-top: 20px;
    color: #ffffff;
}

.timing-continue-btn-new {
    background: #ffcc00;
    color: #333333;
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.2s ease;
}

.timing-continue-btn-new:hover {
    background: #ffaa00;
    transform: translateY(-2px);
}

/* Responsive Design for New Discovery Popup */
@media (max-width: 768px) {
    .discovery-notification-new {
        min-width: 300px;
        max-width: 95vw;
        padding: 20px;
        margin: 0 10px;
    }
    
    .discovery-main-content {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    
    .discovered-element-new {
        width: 150px;
        height: 150px;
    }
    
    .discovered-element-new img {
        width: 130px;
        height: 130px;
    }
    
    .discovered-element-new .element-icon {
        font-size: 120px;
        width: 130px;
        height: 130px;
    }
    
    .discovery-element-name {
        font-size: 20px;
    }
    
    .discovery-description-new {
        font-size: 14px;
        text-align: center;
    }
    
    .recipe-card {
        min-width: 100px;
    }
    
    .tier-circle {
        width: 50px;
        height: 50px;
    }
    
    .tier-circle .tier-number {
        font-size: 20px;
    }
}

/* Hint Window Overlay */
.hint-window::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    backdrop-filter: blur(4px);
}

/* Hint Window */
.hint-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 20px;
    padding: 30px;
    z-index: 2500;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.3);
    min-width: 400px;
    max-width: 500px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    animation: hintWindowAppear 0.4s ease-out;
    backdrop-filter: blur(10px);
}

@keyframes hintWindowAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.hint-window.hidden {
    display: none;
}

.hint-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.hint-close-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.4);
    color: rgba(255, 215, 0, 0.9);
    transform: scale(1.05);
}

.hint-close-btn:active {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.6);
    transform: scale(0.95);
}

.hint-title {
    text-align: center;
    font-size: 24px;
    color: rgba(255, 215, 0, 0.9);
    margin-bottom: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.hint-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: nowrap;
}

.hint-element-1, .hint-element-2 {
    width: 90px;
    height: 90px;
    background: rgba(60, 60, 60, 0.8);
    border: 2px solid rgba(139, 69, 19, 0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.hint-element-1 img, .hint-element-2 img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.hint-element-1 .element-icon, .hint-element-2 .element-icon {
    font-size: 40px;
}

.hint-element-1 .element-name, .hint-element-2 .element-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.2;
}

.hint-plus, .hint-equals {
    font-size: 24px;
    color: rgba(255, 215, 0, 0.7);
    font-weight: bold;
}

.hint-mystery {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.3) 0%, rgba(60, 60, 60, 0.5) 100%);
    border: 2px dashed rgba(255, 215, 0, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255, 215, 0, 0.6);
    animation: mysteryPulse 2s ease-in-out infinite;
}

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

.hint-description {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 20px;
    font-style: italic;
}

.hint-element-group {
    color: rgba(255, 215, 0, 0.9);
    font-weight: bold;
    font-size: 16px;
    text-transform: capitalize;
}

.discovery-notification.hidden {
    display: none;
}

.discovery-notification.show {
    animation: enhancedDiscoveryPop 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes enhancedDiscoveryPop {
    0% {
        transform: translate(-50%, -50%) scale(0.2) rotate(-15deg);
        opacity: 0;
        filter: blur(8px);
    }
    20% {
        transform: translate(-50%, -50%) scale(1.15) rotate(5deg);
        opacity: 1;
        filter: blur(0);
    }
    30% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
    80% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0;
        filter: blur(2px);
    }
}

.discovery-recipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
}

.recipe-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 100px;
    min-height: 120px;
}

.recipe-element img {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    margin-bottom: 8px;
    object-fit: contain;
}

.recipe-element .element-icon {
    font-size: 64px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.recipe-element .element-name {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
}

.recipe-plus, .recipe-equals {
    color: #ffd700;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    margin: 0 10px;
}

.recipe-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


.discovered-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.discovered-element img {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    animation: float 2s ease-in-out infinite;
}

.discovered-element .element-icon {
    font-size: 60px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    animation: float 2s ease-in-out infinite;
}

.discovered-element .element-name {
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    margin-top: 15px;
    text-shadow: 
        2px 2px 0px rgba(0,0,0,1), 
        0 0 8px rgba(255, 215, 0, 0.6);
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.6);
    padding: 8px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255, 215, 0, 0.4);
}

/* Close button removed - auto-dismiss notification */
    border-radius: 25px;
    cursor: pointer;
    margin-top: 30px;
    font-weight: bold;
    transition: transform 0.3s, box-shadow 0.3s;
}

.close-discovery:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.visible {
    display: flex !important;
    opacity: 1 !important;
}

.warning-modal {
    background: linear-gradient(135deg, #2a1810 0%, #4a2818 100%);
    border: 3px solid #8b4513;
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    text-align: center;
    animation: bounceIn 0.5s ease-out;
}

.warning-modal h2 {
    color: #ffa500;
    font-size: 28px;
    margin-bottom: 20px;
}

.warning-modal p {
    color: white;
    font-size: 16px;
    margin-bottom: 15px;
}

.warning-subtext {
    color: #ffd700 !important;
    font-size: 14px !important;
}

.modal-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.modal-btn {
    padding: 12px 25px;
    font-size: 16px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}

.confirm-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4444 100%);
    color: white;
}

.cancel-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* Potency Selection Modal */
.potency-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.3) 0%, rgba(0,0,0,0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483645 !important;
    animation: potencyFadeIn 0.3s ease-out;
}

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

.potency-modal {
    background: linear-gradient(135deg, #2a1a4e 0%, #1a0e2e 100%);
    border: 2px solid #8a2be2;
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(138, 43, 226, 0.4);
    animation: potencySlideIn 0.4s ease-out;
}

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

.potency-header {
    margin-bottom: 30px;
}

.potency-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    color: #ffd700;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.potency-element-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.potency-element-display img {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.potency-element-display span {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
}

.potency-description {
    color: #b8b8b8;
    font-size: 18px;
    margin-bottom: 30px;
}

.potency-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}

.potency-btn {
    background: linear-gradient(135deg, #3a2a5e 0%, #2a1a4e 100%);
    border: 2px solid #6a4c93;
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.potency-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.5);
    border-color: #8a2be2;
    background: linear-gradient(135deg, #4a3a6e 0%, #3a2a5e 100%);
}

.potency-stars {
    font-size: 24px;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.potency-label {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.potency-points {
    color: #76d275;
    font-size: 14px;
}

.potency-rank-preview {
    color: #b8b8b8;
    font-size: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(138, 43, 226, 0.3);
}

#current-potency-score {
    color: #ffd700;
    font-weight: bold;
}

#current-rank {
    color: #8a2be2;
    font-weight: bold;
}

/* Stars display for discoveries */
.element-potency-stars {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

/* Rank Dropdown Styles */
.clickable-rank, .clickable-stat {
    cursor: pointer;
    position: relative;
}

.clickable-stat:hover {
    background: rgba(255,215,0,0.1);
    border-radius: 8px;
    transition: background 0.3s ease;
}

.rank-display-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-score {
    font-size: 16px;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.rank-image-header {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.5));
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Progressive rank glow effects - increasing intensity from rank 1 to 11 */
.rank-image-header.rank-glow-1 {
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.3));
}

.rank-image-header.rank-glow-2 {
    filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.4)) drop-shadow(0 0 12px rgba(138, 43, 226, 0.2));
}

.rank-image-header.rank-glow-3 {
    filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.5)) drop-shadow(0 0 16px rgba(138, 43, 226, 0.3));
}

.rank-image-header.rank-glow-4 {
    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.6)) drop-shadow(0 0 20px rgba(138, 43, 226, 0.3));
}

.rank-image-header.rank-glow-5 {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 24px rgba(138, 43, 226, 0.4));
}

.rank-image-header.rank-glow-6 {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 28px rgba(138, 43, 226, 0.4)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.2));
}

.rank-image-header.rank-glow-7 {
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 32px rgba(138, 43, 226, 0.5)) drop-shadow(0 0 48px rgba(255, 215, 0, 0.3));
}

.rank-image-header.rank-glow-8 {
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 36px rgba(138, 43, 226, 0.6)) drop-shadow(0 0 54px rgba(255, 140, 0, 0.3));
}

.rank-image-header.rank-glow-9 {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 40px rgba(138, 43, 226, 0.7)) drop-shadow(0 0 60px rgba(255, 140, 0, 0.4)) drop-shadow(0 0 80px rgba(255, 69, 0, 0.2));
}

.rank-image-header.rank-glow-10 {
    filter: drop-shadow(0 0 22px rgba(255, 215, 0, 1)) drop-shadow(0 0 44px rgba(138, 43, 226, 0.8)) drop-shadow(0 0 66px rgba(255, 140, 0, 0.5)) drop-shadow(0 0 88px rgba(255, 69, 0, 0.3));
}

.rank-image-header.rank-glow-11 {
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 50px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 75px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 100px rgba(255, 69, 0, 0.4)) drop-shadow(0 0 125px rgba(255, 20, 147, 0.3));
    animation: rankGlowPulse 3s ease-in-out infinite;
}

@keyframes rankGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 50px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 75px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 100px rgba(255, 69, 0, 0.4)) drop-shadow(0 0 125px rgba(255, 20, 147, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(138, 43, 226, 1)) drop-shadow(0 0 90px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 120px rgba(255, 69, 0, 0.6)) drop-shadow(0 0 150px rgba(255, 20, 147, 0.5));
    }
}

.clickable-rank:hover .rank-image-header {
    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.9));
    transform: scale(1.15) rotate(5deg);
}

.clickable-rank:hover #player-rank-display {
    text-decoration: underline;
}

.rank-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
    border: 2px solid #8a2be2;
    border-radius: 10px;
    padding: 15px;
    min-width: 250px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 10002;
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
    animation: rankDropdownSlide 0.3s ease-out forwards;
    opacity: 1;
}

@keyframes rankDropdownSlide {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.rank-dropdown-header {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: #ffd700;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 5px 0;
    border-radius: 5px;
    transition: all 0.2s;
    cursor: default;
}

.rank-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(138, 43, 226, 0.3));
}

.rank-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rank-item.current-rank .rank-image {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.rank-item:hover {
    background: rgba(138, 43, 226, 0.1);
}

.rank-item.current-rank {
    background: rgba(138, 43, 226, 0.3);
    border: 1px solid #8a2be2;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

.rank-item.achieved {
    opacity: 1;
}

.rank-item.not-achieved {
    opacity: 0.5;
}

.rank-name {
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.3;
}

.rank-range {
    color: #b8b8b8;
    font-size: 11px;
    margin-top: 2px;
}

.rank-dropdown-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(138, 43, 226, 0.3);
    text-align: center;
    color: #b8b8b8;
    font-size: 14px;
}

#dropdown-score {
    color: #ffd700;
    font-weight: bold;
}

/* Tier Achievement Modal */
.tier-achievement-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.2) 0%, rgba(0,0,0,0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647 !important; /* Maximum z-index */
    animation: tierAchievementFadeIn 0.5s ease-out;
}

.tier-achievement-modal {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
    border: 3px solid #ffd700;
    border-radius: 25px;
    padding: 50px 40px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 50px rgba(255,215,0,0.5),
        0 0 100px rgba(255,215,0,0.3),
        inset 0 0 30px rgba(255,215,0,0.1);
    animation: tierAchievementPulse 0.6s ease-out;
}

.achievement-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.achievement-particles::before,
.achievement-particles::after {
    content: '✨';
    position: absolute;
    font-size: 30px;
    animation: floatParticles 3s infinite;
}

.achievement-particles::before {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.achievement-particles::after {
    top: 80%;
    right: 10%;
    animation-delay: 1.5s;
}

.achievement-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: achievementBounce 0.8s ease-out;
    filter: drop-shadow(0 0 20px rgba(255,215,0,0.8));
}

.achievement-title {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 
        0 0 20px rgba(255,215,0,0.8),
        0 0 40px rgba(255,215,0,0.4);
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.achievement-subtitle {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 30px;
    opacity: 0.95;
}

.achievement-subtitle span,
.achievement-message span {
    color: #ffd700;
    font-weight: 600;
}

.achievement-stats {
    display: flex;
    justify-content: space-around;
    margin: 30px 0;
    padding: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
}

.achievement-stat,
.achievement-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.achievement-stat .stat-number,
.achievement-progress .progress-text {
    font-size: 32px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.achievement-stat .stat-label,
.achievement-progress .stat-label {
    font-size: 14px;
    color: #ffffff;
    opacity: 0.8;
    margin-top: 5px;
}

.achievement-message {
    font-size: 18px;
    color: #ffffff;
    margin: 20px 0 30px;
    line-height: 1.5;
}

.achievement-continue-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1e3c72;
    border: none;
    padding: 15px 50px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(255,215,0,0.4),
        0 0 30px rgba(255,215,0,0.2);
}

.achievement-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(255,215,0,0.5),
        0 0 40px rgba(255,215,0,0.3);
}

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

@keyframes tierAchievementPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes achievementBounce {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    60% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes floatParticles {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Mythical Discovery Modal */
.mythical-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(138,43,226,0.3) 0%, rgba(0,0,0,0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: mythicalFadeIn 0.5s ease-out;
}

.mythical-content {
    background: linear-gradient(135deg, #0a0015 0%, #1a0033 25%, #330066 50%, #1a0033 75%, #0a0015 100%);
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    max-width: 350px;
    min-height: 300px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 150px rgba(138,43,226,0.9),
        0 0 80px rgba(255,215,0,0.6),
        inset 0 0 50px rgba(138,43,226,0.3);
    animation: mythicalPulse 3s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

.mythical-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="white" opacity="0.5"><animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="30" r="1" fill="gold" opacity="0.5"><animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite"/></circle><circle cx="50" cy="80" r="1" fill="white" opacity="0.5"><animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite"/></circle></svg>') repeat;
    pointer-events: none;
    opacity: 0.3;
}

.mythical-title {
    color: #ffd700;
    font-size: 24px;
    margin-bottom: 10px;
    text-shadow: 
        0 0 20px rgba(255,215,0,1),
        0 0 40px rgba(255,215,0,0.8),
        0 0 80px rgba(138,43,226,0.6);
    animation: shimmer 3s ease-in-out infinite;
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
}

.mythical-subtitle {
    color: #e6e6fa;
    font-size: 14px;
    margin-bottom: 15px;
    font-style: italic;
}

.mythical-element-display {
    width: 180px;
    height: 180px;
    margin: 20px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mythical-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(138,43,226,0.4) 0%, rgba(255,215,0,0.2) 40%, transparent 70%);
    animation: rotate 8s linear infinite;
}

.mythical-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 175px;
    height: 175px;
    background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, rgba(138,43,226,0.2) 50%, transparent 70%);
    animation: rotate 12s linear infinite reverse;
}

.mythical-element-display img {
    width: 160px;
    height: 160px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 30px rgba(138,43,226,1)) drop-shadow(0 0 50px rgba(255,215,0,0.8));
    animation: mythicalFloat 4s ease-in-out infinite;
}

#mythical-icon {
    font-size: 140px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 30px rgba(138,43,226,1)) drop-shadow(0 0 50px rgba(255,215,0,0.8));
    animation: mythicalFloat 4s ease-in-out infinite;
}

.mythical-name {
    color: #ffd700;
    font-size: 20px;
    margin: 15px 0;
    text-shadow: 
        0 0 15px rgba(255,215,0,1),
        0 0 30px rgba(255,215,0,0.8),
        0 0 60px rgba(138,43,226,0.4);
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mythical-rarity {
    color: #da70d6;
    font-size: 12px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mythical-continue-btn {
    padding: 10px 25px;
    font-size: 14px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1a0033;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(255,215,0,0.4);
}

.mythical-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(255,215,0,0.6);
}

/* Mythical description section */
.mythical-description-section {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
}

.mythical-description {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: 0;
    font-style: italic;
}

/* Mythical Section in Discoveries */
.mythical-section {
    border-top: 2px solid #ffd700;
    margin-top: 30px;
    padding-top: 20px;
}

.mythical-header {
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mythical-header::before,
.mythical-header::after {
    content: '✨';
}

.mythical-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.mythical-item {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(138,43,226,0.2) 0%, rgba(75,0,130,0.2) 100%);
    border: 2px solid rgba(138,43,226,0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
}

.mythical-item.discovered {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(138,43,226,0.4) 0%, rgba(75,0,130,0.4) 100%);
    box-shadow: 0 0 10px rgba(138,43,226,0.5);
}

.mythical-item.discovered:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(138,43,226,0.8);
    z-index: 10;
}

.mythical-item.undiscovered {
    opacity: 0.4;
}

.mythical-progress {
    color: #da70d6;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

@keyframes mythicalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mythicalPulse {
    0%, 100% {
        box-shadow: 
            0 0 150px rgba(138,43,226,0.9),
            0 0 80px rgba(255,215,0,0.6),
            inset 0 0 50px rgba(138,43,226,0.3);
    }
    50% {
        box-shadow: 
            0 0 200px rgba(138,43,226,1),
            0 0 120px rgba(255,215,0,0.8),
            inset 0 0 70px rgba(138,43,226,0.4);
    }
}

@keyframes shimmer {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(255,215,0,1),
            0 0 40px rgba(255,215,0,0.8),
            0 0 80px rgba(138,43,226,0.6);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(255,215,0,1),
            0 0 60px rgba(255,215,0,1),
            0 0 120px rgba(138,43,226,0.8);
    }
}

@keyframes mythicalFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    25% {
        transform: translateY(-10px) scale(1.02);
    }
    75% {
        transform: translateY(5px) scale(0.98);
    }
}

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

/* Hint Highlighting */
.hint-highlight {
    animation: hintPulse 1s ease-in-out infinite !important;
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.8) !important;
    border: 3px solid rgba(147, 112, 219, 0.9) !important;
    z-index: 1000 !important;
}

@keyframes hintPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(147, 112, 219, 0.8), 0 0 40px rgba(147, 112, 219, 0.4);
        border-color: rgba(147, 112, 219, 0.9);
    }
    50% {
        box-shadow: 0 0 30px rgba(147, 112, 219, 1), 0 0 60px rgba(147, 112, 219, 0.6);
        border-color: rgba(147, 112, 219, 1);
        transform: scale(1.05);
    }
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

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

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

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

@keyframes discoveryPop {
    0% {
        transform: scale(0.3) rotate(-10deg);
        opacity: 0;
        filter: blur(5px);
    }
    60% {
        transform: scale(1.15) rotate(5deg);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

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

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

/* Responsive adjustments */
@media (max-width: 1200px) {
    .game-header {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
    }
    
    .game-title {
        grid-column: 1 / -1;
        margin-bottom: 10px;
    }
    
    .home-button {
        grid-row: 2;
    }
    
    .game-stats {
        grid-row: 2;
        justify-content: center;
    }
    
    .header-controls {
        grid-row: 2;
    }
}

@media (max-width: 768px) {
    .game-title {
        font-size: 24px;
    }
    
    /* Collapsible header for mobile */
    .game-header {
        transition: all 0.3s ease;
        position: relative;
    }
    
    .game-header.collapsed {
        height: 30px;
        min-height: 30px;
        overflow: hidden;
        background: linear-gradient(180deg, 
            rgba(139,69,19,0.6) 0%, 
            rgba(0,0,0,0.4) 100%);
        padding: 0;
    }
    
    .game-header.collapsed .header-left,
    .game-header.collapsed .header-center,
    .game-header.collapsed .header-right {
        opacity: 0;
        visibility: hidden;
    }
    
    /* Header toggle button */
    .header-toggle {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 8px;
        width: 70px;
        height: 14px;
        background: rgba(255,215,0,0.4);
        border-radius: 10px;
        border: 1px solid rgba(255,215,0,0.6);
        cursor: pointer;
        z-index: 10002;
        transition: all 0.3s ease;
    }
    
    .header-toggle:active {
        transform: translateX(-50%) scale(0.95);
    }
    
    .header-toggle::after {
        content: '▼';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 10px;
        color: rgba(255,215,0,0.9);
        transition: transform 0.3s ease;
    }
    
    .game-header.collapsed .header-toggle::after {
        content: '▼';
        transform: translate(-50%, -50%) rotate(0deg);
    }
    
    .game-header:not(.collapsed) .header-toggle::after {
        content: '▲';
        transform: translate(-50%, -50%) rotate(0deg);
    }
    
    /* Adjust game board when header is collapsed */
    .game-header.collapsed + .game-board {
        margin-top: 5px;
    }
    
    /* Adjust corner elements when header is collapsed */
    .game-header.collapsed ~ .game-board .element-corner.top-left,
    .game-header.collapsed ~ .game-board .element-corner.top-right {
        top: calc(50px + env(safe-area-inset-top, 0px));
    }
    
    .header-right {
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .header-controls {
        gap: 12px;
        order: 1;
    }
    
    .game-stats {
        gap: 12px;
        order: 2;
        margin-right: 0;
        padding: 0 5px;
    }
    
    .stat-item {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .stat-label {
        font-size: 10px;
    }
    
    .stat-value {
        font-size: 16px;
    }
    
    .control-button,
    .mute-button {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .control-button span,
    .mute-button span {
        font-size: 16px;
    }
}

/* Extra small screens - guarantee no overlap */
@media (max-width: 480px) {
    .header-right {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .header-controls {
        gap: 8px;
    }
    
    .game-stats {
        gap: 8px;
        padding: 0;
    }
    
    .stat-item {
        padding: 4px 8px;
        min-width: 60px;
    }
    
    .control-button,
    .mute-button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
    
    .control-button span,
    .mute-button span {
        font-size: 14px;
    }
    
    .game-title {
        font-size: 20px;
        letter-spacing: 1px;
    }
    
}

/* Mobile element corner positioning */
@media (max-width: 768px) {
    .element-corner {
        width: 80px;
        position: fixed;
    }
    
    .element-corner.top-left {
        top: 60px;
        left: 10px;
    }
    
    .element-corner.top-right {
        top: 60px;
        right: 7px;  /* Slightly more inset to accommodate pagination */
    }
    
    .element-corner.bottom-left {
        bottom: calc(7px + env(safe-area-inset-bottom, 0px));  /* Slightly more inset */
        left: calc(7px + env(safe-area-inset-left, 0px));
    }
    
    .element-corner.bottom-right {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        right: calc(10px + env(safe-area-inset-right, 0px));
    }
    
    .element-corner.top-left {
        top: calc(70px + env(safe-area-inset-top, 0px));
        left: calc(10px + env(safe-area-inset-left, 0px));
    }
    
    .element-corner.top-right {
        top: calc(70px + env(safe-area-inset-top, 0px));
        right: calc(7px + env(safe-area-inset-right, 0px));  /* Slightly more inset */
    }
    
    /* Mobile pagination controls - positioned between button and elements */
    .pagination-controls {
        padding: 2px 4px;
        gap: 4px;
    }
    
    /* Fire - vertical on right side of button */
    .element-corner.top-left .pagination-controls {
        top: 40px;
        left: 85px;
        flex-direction: column;
        width: auto;
        transform: translateY(-50%);
    }
    
    /* Water - horizontal below button */
    .element-corner.top-right .pagination-controls {
        top: 85px;
        right: 25px;
        transform: none;
    }
    
    /* Earth - on top of master button */
    .element-corner.bottom-left .pagination-controls {
        bottom: 65px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }
    
    /* Air - vertical on left side of button */
    .element-corner.bottom-right .pagination-controls {
        bottom: 40px;
        right: 85px;
        flex-direction: column;
        width: auto;
        transform: translateY(50%);
    }
    
    .page-btn {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        font-size: 12px;
    }
    
    .page-indicator {
        font-size: 9px;
        min-width: 25px;
    }
    
    /* Keep game board fixed and centered on mobile */
    .game-board {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        overflow: hidden;
    }
    
    /* Ensure body doesn't scroll on mobile */
    body {
        overflow: hidden;
        min-height: 100vh;
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .corner-header {
        width: 80px;
        height: 80px;
    }
    
    .corner-icon {
        width: 40px;
        height: 40px;
    }
    
    .corner-header .element-name {
        font-size: 10px;
    }
}

/* Extra mobile optimizations for very small screens */
@media (max-width: 480px) {
    .element-corner {
        width: 70px;
    }
    
    .element-corner.top-left {
        top: calc(60px + env(safe-area-inset-top, 0px));
        left: 15px;
    }
    
    .element-corner.top-right {
        top: calc(60px + env(safe-area-inset-top, 0px));
        right: 12px;  /* Slightly more inset for pagination */
    }
    
    .element-corner.bottom-left {
        bottom: 12px;  /* Slightly more inset for pagination */
        left: 12px;
    }
    
    .element-corner.bottom-right {
        bottom: 15px;
        right: 15px;
    }
    
    .corner-header {
        width: 70px;
        height: 70px;
        padding: 8px;
    }
    
    .corner-icon {
        width: 35px;
        height: 35px;
    }
    
    /* Extra small mobile pagination */
    .pagination-controls {
        padding: 1px 3px;
        gap: 3px;
        border-radius: 10px;
    }
    
    /* Fire - vertical */
    .element-corner.top-left .pagination-controls {
        top: 35px;
        left: 73px;
        flex-direction: column;
        transform: translateY(-50%);
    }
    
    /* Water - horizontal */
    .element-corner.top-right .pagination-controls {
        top: 73px;
        right: 20px;
        transform: none;
    }
    
    /* Earth - on top of master button */
    .element-corner.bottom-left .pagination-controls {
        bottom: 55px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }
    
    /* Air - vertical */
    .element-corner.bottom-right .pagination-controls {
        bottom: 35px;
        right: 73px;
        flex-direction: column;
        transform: translateY(50%);
    }
    
    .page-btn {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        font-size: 11px;
    }
    
    .page-indicator {
        font-size: 8px;
        min-width: 22px;
    }
    
    .corner-header .element-name {
        font-size: 9px;
    }
}

/* Large screens - expand workshop area */
@media (min-width: 1400px) {
    .workshop-area {
        width: 85vw;
        max-width: 1400px;
        height: 70vh;
        max-height: 700px;
    }
    
    .combination-zone {
        gap: 30px;  /* Reduced from 60px to bring slots closer to pot */
    }
    
    .drop-slot {
        width: 180px;
        height: 220px;
    }
}

/* Extra large screens */
@media (min-width: 1920px) {
    .workshop-area {
        width: 90vw;
        max-width: 1600px;
        height: 75vh;
        max-height: 800px;
    }
    
    .combination-zone {
        gap: 40px;  /* Reduced from 80px to bring slots closer to pot */
    }
    
    .drop-slot {
        width: 200px;
        height: 240px;
    }
}

/* Mobile workshop table scaling */
@media (max-width: 768px) {
    .workshop-area {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        padding: 20px;
        margin: 0;
        border-radius: 0;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-size: cover;
        background-position: center center;
    }
    
    .workshop-title {
        display: none;  /* Hide on tablet/mobile */
    }
    
    .combination-zone {
        gap: 0px;  /* No gap - slots touching for mobile */
        height: auto;
        min-height: 140px;
        flex-direction: column;
        padding: 0 80px;  /* More horizontal padding to center the vertical layout */
    }
    
    .drop-slot {
        width: 100px;
        height: 110px;
    }
    
    .slot-placeholder {
        font-size: 11px;
    }
    
    .slot-top-text {
        font-size: 12px;
    }
    
    .slot-bottom-text {
        font-size: 9px;
    }
    
    .slot-element img {
        width: 80px;
        height: 80px;
    }
    
    .slot-element .element-icon {
        font-size: 60px;
    }
    
    .slot-element .element-name {
        font-size: 12px;
        max-width: 90px;
    }
    
    .dropped-element img {
        width: 80px;
        height: 80px;
    }
    
    .combine-pot {
        width: 140px !important;
        height: 140px !important;
        margin: 5px 0;
    }
    
    .pot-image {
        max-width: 100%;
        height: auto;
    }
    
    .create-image {
        height: 140px;
    }
    
    .create-text {
        font-size: 16px;
        letter-spacing: 1px;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {
    .workshop-area {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        padding: 15px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-size: cover;
        border-radius: 0;
    }
    
    .workshop-title {
        display: none;  /* Hide on small mobile too */
    }
    
    .combination-zone {
        gap: 0px;  /* No gap - slots touching for very small screens */
        min-height: 120px;
        padding: 0 60px;  /* Center the vertical layout */
    }
    
    .drop-slot {
        width: 85px;
        height: 95px;
    }
    
    .slot-element img {
        width: 70px;
        height: 70px;
    }
    
    .slot-element .element-icon {
        font-size: 50px;
    }
    
    .slot-element .element-name {
        font-size: 10px;
        max-width: 80px;
    }
    
    .dropped-element img {
        width: 70px;
        height: 70px;
    }
    
    .combine-pot {
        width: 120px !important;
        height: 120px !important;
    }
    
    .create-image {
        height: 120px;
    }
    
    .create-text {
        font-size: 14px;
    }
}

/* Desktop/Mobile visibility helpers */
.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

/* Mobile header controls - base styles */
.mobile-header-controls {
    display: none;
    gap: 8px;
    align-items: center;
}

.mobile-header-button {
    background: rgba(139,69,19,0.2);
    border: 2px solid rgba(139,69,19,0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
    backdrop-filter: blur(10px);
}

.mobile-header-button:hover {
    background: rgba(139,69,19,0.4);
    border-color: rgba(139,69,19,0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.mobile-header-button:active {
    transform: translateY(0);
}

/* Mobile hamburger menu */
.mobile-menu-button {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    gap: 4px;
    padding: 8px;
}

.mobile-menu-button:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,215,0,0.5);
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background: #ffd700;
    transition: all 0.3s;
    border-radius: 1px;
}

.mobile-menu-button.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-button.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile menu overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    z-index: 2147483647 !important; /* Maximum z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-content {
    background: linear-gradient(135deg, rgba(20,20,20,0.98) 0%, rgba(40,40,40,0.98) 100%);
    border: 3px solid rgba(255,215,0,0.5);
    border-radius: 20px;
    padding: 30px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.9);
    position: relative;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255,215,0,0.3);
    padding-bottom: 15px;
}

.mobile-menu-header h3 {
    color: #ffd700;
    font-size: 24px;
    margin: 0;
    font-family: 'Cinzel', serif;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.close-mobile-menu {
    background: transparent;
    border: none;
    color: #ffd700;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.close-mobile-menu:hover {
    transform: scale(1.2);
}

.mobile-game-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.mobile-game-stats .stat-item {
    background: rgba(0,0,0,0.5);
    padding: 15px 20px;
    border-radius: 15px;
    border: 2px solid rgba(255,215,0,0.3);
    text-align: center;
    min-width: 120px;
}

.mobile-game-stats .stat-label {
    font-size: 12px;
    margin-bottom: 8px;
}

.mobile-game-stats .stat-value {
    font-size: 22px;
}

.mobile-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.mobile-control-button {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 15px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
}

.mobile-control-button:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,215,0,0.5);
    box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

.mobile-control-button span:first-child {
    font-size: 24px;
    min-width: 30px;
    text-align: center;
}

.control-label {
    font-weight: bold;
    font-size: 16px;
}

.mobile-audio-dropdown {
    position: fixed;
    top: 58px;
    right: 10px;
    background: linear-gradient(135deg, rgba(20,20,20,0.98) 0%, rgba(30,30,30,0.98) 100%);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    max-width: 220px;
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.8),
        0 0 10px rgba(255,215,0,0.1);
    backdrop-filter: blur(10px);
    z-index: 2000;
    animation: mobileDropdownSlide 0.3s ease-out forwards;
}

@keyframes mobileDropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-audio-dropdown .dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    background: rgba(255,255,255,0.02);
}

.mobile-audio-dropdown .dropdown-item:active {
    background: rgba(255,215,0,0.15);
    transform: scale(0.98);
}

.mobile-audio-dropdown .dropdown-item:last-child {
    margin-bottom: 0;
}

.mobile-audio-dropdown .dropdown-divider {
    height: 1px;
    background: rgba(255,215,0,0.1);
    margin: 8px 0;
}

.mobile-audio-dropdown .song-name {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

.mobile-audio-dropdown .playing-icon {
    font-size: 16px;
    color: #ffd700;
    animation: pulse 2s ease-in-out infinite;
}

.mobile-audio-dropdown .playing-icon.hidden {
    display: none;
}

.mobile-audio-dropdown .mute-option {
    background: rgba(255,0,0,0.05);
}

/* Mobile responsive rules */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: flex !important;
    }
    
    /* Hide desktop rank dropdown on mobile */
    .rank-dropdown {
        display: none !important;
    }
    
    /* On mobile, hide the desktop dropdown since we use mobile-audio-dropdown */
    /* But don't hide it globally - only on mobile */
    
    /* Mobile header controls */
    .mobile-header-controls {
        display: flex !important;
    }
    
    .mobile-menu-button {
        display: flex !important;
    }
    
    .mobile-menu-button:not(.hidden) {
        display: flex !important;
    }
    
    .header-right {
        justify-content: flex-end;
    }
    
    /* Mobile discovery notification adjustments */
    .discovered-element img {
        width: 60px;
        height: 60px;
    }
    
    .discovered-element .element-icon {
        font-size: 45px;
    }
    
    /* Mystic/Legendary tier elements - 200% larger on mobile */
    .discovered-element.mystic-tier img {
        width: 180px;  /* 60px * 3 = 180px (200% increase) */
        height: 180px;
    }
    
    .discovered-element.mystic-tier .element-icon {
        font-size: 135px;  /* 45px * 3 = 135px (200% increase) */
    }
    
    .discovered-element .element-name {
        font-size: 20px;
        padding: 6px 12px;
        margin-top: 10px;
        letter-spacing: 1px;
    }
    
    .discovery-title {
        font-size: 20px;
    }
    
    .discovery-element-name {
        font-size: 24px;
    }
    
    .discovery-tier-label {
        font-size: 14px;
    }
    
    /* Mobile tier achievement modal adjustments */
    .tier-achievement-modal {
        max-width: 90vw;
        padding: 35px 20px;
        margin: 0 5vw;
    }
    
    .achievement-icon {
        font-size: 60px;
        margin-bottom: 15px;
    }
    
    .achievement-title {
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    .achievement-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .achievement-stats {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .achievement-stat .stat-number,
    .achievement-progress .progress-text {
        font-size: 26px;
    }
    
    .achievement-stat .stat-label,
    .achievement-progress .stat-label {
        font-size: 12px;
    }
    
    .achievement-message {
        font-size: 15px;
        margin: 15px 0 25px;
    }
    
    .achievement-continue-btn {
        padding: 12px 40px;
        font-size: 16px;
    }
    
    /* Mobile mythical modal adjustments */
    .mythical-modal {
        padding: 10px;
    }
    
    .mythical-content {
        max-width: 85vw;
        max-height: 70vh;
        min-height: auto;
        padding: 20px 15px;
        margin: 0 auto;
        overflow-y: auto;
    }
    
    .mythical-title {
        font-size: 20px;
        margin-bottom: 5px;
    }
    
    .mythical-subtitle {
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .mythical-element-display {
        width: 140px;
        height: 140px;
        margin: 10px auto;
    }
    
    .mythical-element-display img {
        width: 120px;
        height: 120px;
    }
    
    #mythical-icon {
        font-size: 100px;
    }
    
    .mythical-name {
        font-size: 18px;
        margin-top: 10px;
    }
    
    .mythical-rarity {
        font-size: 12px;
        margin-top: 5px;
    }
    
    .mythical-close {
        top: 10px;
        right: 10px;
        font-size: 24px;
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .mobile-menu-content {
        padding: 20px;
        margin: 20px;
    }
    
    .mobile-game-stats {
        gap: 15px;
    }
    
    .mobile-game-stats .stat-item {
        min-width: 100px;
        padding: 12px 15px;
    }
    
    .mobile-control-button {
        padding: 12px 15px;
        font-size: 16px;
    }
    
    .mobile-control-button span:first-child {
        font-size: 20px;
    }
    
    .control-label {
        font-size: 14px;
    }
    
    /* Extra small mobile discovery adjustments */
    .discovery-notification {
        min-width: 280px;
        max-width: 95vw;
        padding: 20px 15px;
        margin: 0 2.5vw;
    }
    
    .discovery-title {
        font-size: 18px;
    }
    
    .discovery-element-name {
        font-size: 20px;
    }
    
    .discovery-tier-label {
        font-size: 12px;
    }
    
    /* Extra small mobile mythical modal adjustments */
    .mythical-modal {
        padding: 5px;
    }
    
    .mythical-content {
        max-width: 90vw;
        max-height: 60vh;
        min-height: auto;
        padding: 15px;
        margin: 0 auto;
        overflow-y: auto;
    }
    
    .mythical-title {
        font-size: 18px;
        margin-bottom: 5px;
    }
    
    .mythical-subtitle {
        font-size: 11px;
        margin-bottom: 8px;
    }
    
    .mythical-element-display {
        width: 120px;
        height: 120px;
        margin: 8px auto;
    }
    
    .mythical-element-display img {
        width: 100px;
        height: 100px;
    }
    
    .mythical-glow {
        width: 130px;
        height: 130px;
    }
    
    .mythical-glow::before {
        width: 115px;
        height: 115px;
    }
    
    #mythical-icon {
        font-size: 80px;
    }
    
    .mythical-name {
        font-size: 16px;
        margin-top: 8px;
    }
    
    .mythical-rarity {
        font-size: 11px;
        margin-top: 4px;
    }
    
    .mythical-close {
        top: 8px;
        right: 8px;
        font-size: 20px;
        width: 25px;
        height: 25px;
    }
}



/* Hint window mobile adjustments */
@media (max-width: 480px) {
    .hint-window {
        min-width: 320px;
        max-width: 95vw;
        width: calc(100vw - 20px);
        padding: 25px 20px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 10px;
        box-sizing: border-box;
        border-radius: 15px;
        max-height: 85vh;
    }
    
    .hint-title {
        font-size: 18px;
        margin-bottom: 12px;
        text-align: center;
    }
    
    .hint-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 20px 0;
        flex-wrap: nowrap;
        padding: 15px 10px;
        min-height: 60px;
        background: none;
        border: none;
        border-radius: 0;
    }
    
    .hint-element-1, .hint-element-2, .hint-mystery {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        min-width: auto;
        max-width: none;
        flex-shrink: 0;
    }
    
    .hint-element-1 img, .hint-element-2 img {
        width: 48px;
        height: 48px;
        margin-bottom: 4px;
    }
    
    .hint-element-1 .element-icon, .hint-element-2 .element-icon {
        font-size: 36px;
        margin-bottom: 4px;
    }
    
    .hint-element-1 .element-name, .hint-element-2 .element-name {
        font-size: 12px;
        line-height: 1.2;
        margin-top: 0;
        max-width: 80px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
    }
    
    .hint-plus, .hint-equals {
        font-size: 18px;
        margin: 0 8px;
        flex-shrink: 0;
        min-width: 20px;
        text-align: center;
        color: rgba(255, 215, 0, 0.8);
        font-weight: bold;
    }
    
    .hint-mystery {
        font-size: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 215, 0, 0.9);
        font-weight: bold;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    
    .hint-description {
        font-size: 12px;
        text-align: center;
        line-height: 1.3;
        margin-top: 10px;
    }
}

/* Extra small mobile screens */
@media (max-width: 320px) {
    .hint-window {
        min-width: 300px;
        width: calc(100vw - 10px);
        padding: 20px 12px;
        margin: 5px;
        border-radius: 12px;
    }
    
    .hint-content {
        gap: 6px;
        padding: 10px 4px;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 10px;
        border: 1px solid rgba(255, 215, 0, 0.1);
    }
    
    .hint-element-1, .hint-element-2, .hint-mystery {
        width: 60px;
        height: 60px;
        min-width: 60px;
        max-width: 60px;
        padding: 4px;
        border-radius: 10px;
        border-width: 2px;
    }
    
    .hint-element-1 img, .hint-element-2 img {
        width: 32px;
        height: 32px;
    }
    
    .hint-element-1 .element-icon, .hint-element-2 .element-icon {
        font-size: 24px;
    }
    
    .hint-element-1 .element-name, .hint-element-2 .element-name {
        font-size: 10px;
        max-width: 56px;
        margin-top: 2px;
        font-weight: 500;
    }
    
    .hint-plus, .hint-equals {
        font-size: 12px;
        min-width: 15px;
    }
    
    .hint-mystery {
        font-size: 20px;
    }
}

/* Element Details Flyout */
.element-details-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2147483647; /* Maximum z-index value */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.element-details-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.element-details-modal {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100vh;
    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
    border-left: 3px solid rgba(255, 215, 0, 0.3);
    padding: 30px;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.2);
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2147483647; /* Maximum z-index value */
}

.element-details-overlay:not(.hidden) .element-details-modal {
    right: 0;
}

@keyframes slideIn {
    from {
        right: -500px;
    }
    to {
        right: 0;
    }
}

.details-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.details-close-btn:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: scale(1.1);
}

/* Standardized modal close button */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: scale(1.1);
}

.details-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}

.details-element-display {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    animation: elementPulse 2s ease-in-out infinite;
}

@keyframes elementPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); }
}

.details-element-display img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

#details-element-icon {
    font-size: 50px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.details-element-info {
    flex: 1;
}

#details-element-name {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    color: #ffd700;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.tier-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.tier-badge[data-tier="0"] { background: linear-gradient(135deg, #87ceeb, #5f9fc7); }
.tier-badge[data-tier="1"] { background: linear-gradient(135deg, #98d8c8, #6bbfa8); }
.tier-badge[data-tier="2"] { background: linear-gradient(135deg, #ffd700, #ffb347); }
.tier-badge[data-tier="3"] { background: linear-gradient(135deg, #ff9f40, #ff7f20); }
.tier-badge[data-tier="4"] { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.tier-badge[data-tier="5"] { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.tier-badge[data-tier="6"] { 
    background: linear-gradient(135deg, #ff00ff, #00ffff);
    animation: mysticalShine 2s ease-in-out infinite;
}

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

.details-recipe-section {
    margin-bottom: 25px;
}

.recipe-title, .description-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: #ffed4e;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.recipe-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    flex-wrap: wrap;
}

.recipe-element, .recipe-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.recipe-element img, .recipe-result img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.recipe-icon, #recipe-result-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.recipe-name, #recipe-result-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.recipe-plus, .recipe-equals {
    font-size: 24px;
    color: #ffd700;
    font-weight: bold;
}

.no-recipe, .mystical-recipe {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.base-element-badge, .mystical-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.base-element-badge {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.mystical-badge {
    background: linear-gradient(135deg, #ff00ff, #00ffff);
    color: white;
    animation: mysticalShine 2s ease-in-out infinite;
}

.no-recipe p, .mystical-recipe p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.details-description-section {
    margin-bottom: 25px;
}

.element-description {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-left: 3px solid rgba(255, 215, 0, 0.3);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 60vh;
    overflow-y: auto;
}

/* Special styling for mythical element descriptions */
[data-tier="6"] .element-description {
    background: linear-gradient(135deg, rgba(155,89,182,0.1) 0%, rgba(0,0,0,0.2) 100%);
    border-left: 3px solid rgba(155, 89, 182, 0.5);
    font-size: 14px;
    padding: 20px;
    box-shadow: inset 0 0 20px rgba(155, 89, 182, 0.1);
}

/* Mobile Responsive for Element Details Flyout */
@media (max-width: 768px) {
    .element-details-modal {
        width: 85%;
        right: -85%;
        padding: 20px;
    }
    
    .element-details-overlay:not(.hidden) .element-details-modal {
        right: 0;
    }
    
    .details-header {
        flex-direction: column;
        text-align: center;
        margin-top: 40px; /* Space for close button */
    }
    
    #details-element-name {
        font-size: 24px;
    }
    
    .recipe-display {
        gap: 10px;
        padding: 15px;
    }
    
    .recipe-element img, .recipe-result img {
        width: 50px;
        height: 50px;
    }
    
    .recipe-icon, #recipe-result-icon {
        font-size: 35px;
        width: 50px;
        height: 50px;
    }
    
    .recipe-plus, .recipe-equals {
        font-size: 20px;
    }
    
    .element-description {
        font-size: 14px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .element-details-modal {
        width: 100%;
        right: -100%;
        padding: 15px;
        border-left: none;
        border-top: 3px solid rgba(255, 215, 0, 0.3);
    }
    
    .element-details-overlay:not(.hidden) .element-details-modal {
        right: 0;
    }
    
    .details-close-btn {
        width: 35px;
        height: 35px;
        font-size: 24px;
        top: 10px;
        right: 10px;
    }
    
    .details-header {
        margin-top: 50px;
    }
    
    .details-element-display {
        width: 80px;
        height: 80px;
    }
    
    .details-element-display img {
        width: 60px;
        height: 60px;
    }
    
    #details-element-icon {
        font-size: 40px;
    }
    
    #details-element-name {
        font-size: 20px;
    }
    
    .recipe-title, .description-title {
        font-size: 16px;
    }
    
    .recipe-display {
        flex-direction: row;
        gap: 5px;
        padding: 10px;
        overflow-x: auto;
    }
    
    .recipe-element img, .recipe-result img {
        width: 40px;
        height: 40px;
        padding: 5px;
    }
    
    .recipe-icon, #recipe-result-icon {
        font-size: 30px;
        width: 40px;
        height: 40px;
    }
    
    .recipe-plus, .recipe-equals {
        font-size: 14px;
        margin: 0 2px;
    }
    
    .recipe-name {
        font-size: 10px;
    }
}

/* 100% Completion Celebration Modal */
.completion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.2) 0%, rgba(0,0,0,0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647 !important; /* Maximum z-index */
    animation: fadeIn 0.5s ease;
}

.completion-modal {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    border: 3px solid;
    border-image: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700) 1;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 50px rgba(255,215,0,0.5), 0 0 100px rgba(255,215,0,0.2);
    animation: celebrationPulse 2s ease-in-out infinite;
    overflow: hidden;
}

@keyframes celebrationPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 50px rgba(255,215,0,0.5); }
    50% { transform: scale(1.02); box-shadow: 0 0 70px rgba(255,215,0,0.7); }
}

.completion-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.star {
    position: absolute;
    font-size: 24px;
    animation: starFloat 3s ease-in-out infinite;
}

.star-1 { top: 10%; left: 10%; animation-delay: 0s; }
.star-2 { top: 15%; right: 15%; animation-delay: 0.5s; }
.star-3 { bottom: 20%; left: 12%; animation-delay: 1s; }
.star-4 { bottom: 15%; right: 10%; animation-delay: 1.5s; }
.star-5 { top: 50%; left: 5%; animation-delay: 2s; }

@keyframes starFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    50% { transform: translateY(-10px) rotate(180deg); opacity: 1; }
}

.completion-trophy {
    font-size: 80px;
    margin-bottom: 20px;
    animation: trophyBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255,215,0,0.6));
}

@keyframes trophyBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}

/* Unlearn button in element details */
.details-unlearn-section {
    padding: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    text-align: center;
}

.unlearn-element-btn {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.3) 0%, rgba(200, 50, 50, 0.3) 100%);
    border: 2px solid rgba(255, 100, 100, 0.6);
    border-radius: 25px;
    color: #ff9999;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.unlearn-element-btn:hover {
    background: linear-gradient(135deg, rgba(255, 50, 50, 0.5) 0%, rgba(200, 0, 0, 0.5) 100%);
    border-color: #ff6b6b;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 100, 100, 0.5);
}

.unlearn-element-btn .unlearn-icon {
    font-size: 20px;
    display: inline-block;
    transition: transform 0.3s;
}

.unlearn-element-btn:hover .unlearn-icon {
    transform: rotate(180deg);
}

.unlearn-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-top: 10px;
    font-style: italic;
}

/* Mobile Header Icons - Compact Design */
.mobile-header-icons {
    display: none;
    gap: 6px;
    align-items: center;
    position: relative;
    z-index: 2147483645;
    padding: 0;
    margin: 0;
}

.mobile-icon-btn {
    background: rgba(20,20,20,0.8);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    position: relative;
    z-index: 2147483646;
    pointer-events: auto;
    touch-action: manipulation;
    padding: 5px;
}

.mobile-btn-icon {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain;
}

.mobile-icon-btn:active {
    background: rgba(255,215,0,0.15);
    transform: scale(0.95);
    border-color: rgba(255,215,0,0.4);
}

/* Mobile discoveries badge */
.mobile-discoveries-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: badgePulse 2s ease-in-out infinite;
    z-index: 10;
}

.mobile-rank-icon {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(138, 43, 226, 0.5));
    transition: all 0.3s ease;
}

/* Mobile rank glow effects - matching desktop but scaled for mobile */
.mobile-rank-icon.rank-glow-1 {
    filter: drop-shadow(0 0 3px rgba(138, 43, 226, 0.3));
}

.mobile-rank-icon.rank-glow-2 {
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.4)) drop-shadow(0 0 8px rgba(138, 43, 226, 0.2));
}

.mobile-rank-icon.rank-glow-3 {
    filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.5)) drop-shadow(0 0 10px rgba(138, 43, 226, 0.3));
}

.mobile-rank-icon.rank-glow-4 {
    filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.6)) drop-shadow(0 0 12px rgba(138, 43, 226, 0.3));
}

.mobile-rank-icon.rank-glow-5 {
    filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 14px rgba(138, 43, 226, 0.4));
}

.mobile-rank-icon.rank-glow-6 {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 16px rgba(138, 43, 226, 0.4)) drop-shadow(0 0 24px rgba(255, 215, 0, 0.2));
}

.mobile-rank-icon.rank-glow-7 {
    filter: drop-shadow(0 0 9px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 18px rgba(138, 43, 226, 0.5)) drop-shadow(0 0 27px rgba(255, 215, 0, 0.3));
}

.mobile-rank-icon.rank-glow-8 {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 20px rgba(138, 43, 226, 0.6)) drop-shadow(0 0 30px rgba(255, 140, 0, 0.3));
}

.mobile-rank-icon.rank-glow-9 {
    filter: drop-shadow(0 0 11px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 22px rgba(138, 43, 226, 0.7)) drop-shadow(0 0 33px rgba(255, 140, 0, 0.4)) drop-shadow(0 0 44px rgba(255, 69, 0, 0.2));
}

.mobile-rank-icon.rank-glow-10 {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1)) drop-shadow(0 0 24px rgba(138, 43, 226, 0.8)) drop-shadow(0 0 36px rgba(255, 140, 0, 0.5)) drop-shadow(0 0 48px rgba(255, 69, 0, 0.3));
}

.mobile-rank-icon.rank-glow-11 {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 1)) drop-shadow(0 0 28px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 42px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 56px rgba(255, 69, 0, 0.4)) drop-shadow(0 0 70px rgba(255, 20, 147, 0.3));
    animation: mobileRankGlowPulse 3s ease-in-out infinite;
}

@keyframes mobileRankGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 14px rgba(255, 215, 0, 1)) drop-shadow(0 0 28px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 42px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 56px rgba(255, 69, 0, 0.4)) drop-shadow(0 0 70px rgba(255, 20, 147, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(255, 215, 0, 1)) drop-shadow(0 0 32px rgba(138, 43, 226, 1)) drop-shadow(0 0 48px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 64px rgba(255, 69, 0, 0.6)) drop-shadow(0 0 80px rgba(255, 20, 147, 0.5));
    }
}

.mobile-audio-btn .sound-off {
    position: absolute;
}

/* Mobile Rank Overlay */
.mobile-rank-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    z-index: 40;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 20px 20px; /* Top padding to avoid header overlap */
    box-sizing: border-box;
}

.mobile-rank-content {
    background: linear-gradient(135deg, rgba(30,30,30,0.98) 0%, rgba(40,40,50,0.98) 100%);
    border: 2px solid rgba(255,215,0,0.5);
    border-radius: 20px;
    padding: 25px;
    max-width: 380px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    animation: mobileRankSlideIn 0.3s ease-out;
    margin: 20px auto;
}

@keyframes mobileRankSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.mobile-rank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mobile-rank-header h3 {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: #ffd700;
    margin: 0;
}

.close-mobile-overlay {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: white;
    transition: all 0.3s;
}

.close-mobile-overlay:hover {
    background: rgba(255,0,0,0.3);
    transform: scale(1.1);
}

.mobile-current-rank {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

.mobile-rank-display-image {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.5));
    transition: all 0.3s ease;
}

/* Mobile overlay rank glow effects */
.mobile-rank-display-image.rank-glow-1 {
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.3));
}

.mobile-rank-display-image.rank-glow-2 {
    filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.4)) drop-shadow(0 0 12px rgba(138, 43, 226, 0.2));
}

.mobile-rank-display-image.rank-glow-3 {
    filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.5)) drop-shadow(0 0 16px rgba(138, 43, 226, 0.3));
}

.mobile-rank-display-image.rank-glow-4 {
    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.6)) drop-shadow(0 0 20px rgba(138, 43, 226, 0.3));
}

.mobile-rank-display-image.rank-glow-5 {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 24px rgba(138, 43, 226, 0.4));
}

.mobile-rank-display-image.rank-glow-6 {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 28px rgba(138, 43, 226, 0.4)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.2));
}

.mobile-rank-display-image.rank-glow-7 {
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 32px rgba(138, 43, 226, 0.5)) drop-shadow(0 0 48px rgba(255, 215, 0, 0.3));
}

.mobile-rank-display-image.rank-glow-8 {
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 36px rgba(138, 43, 226, 0.6)) drop-shadow(0 0 54px rgba(255, 140, 0, 0.3));
}

.mobile-rank-display-image.rank-glow-9 {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 40px rgba(138, 43, 226, 0.7)) drop-shadow(0 0 60px rgba(255, 140, 0, 0.4)) drop-shadow(0 0 80px rgba(255, 69, 0, 0.2));
}

.mobile-rank-display-image.rank-glow-10 {
    filter: drop-shadow(0 0 22px rgba(255, 215, 0, 1)) drop-shadow(0 0 44px rgba(138, 43, 226, 0.8)) drop-shadow(0 0 66px rgba(255, 140, 0, 0.5)) drop-shadow(0 0 88px rgba(255, 69, 0, 0.3));
}

.mobile-rank-display-image.rank-glow-11 {
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 50px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 75px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 100px rgba(255, 69, 0, 0.4)) drop-shadow(0 0 125px rgba(255, 20, 147, 0.3));
    animation: mobileOverlayRankGlowPulse 3s ease-in-out infinite;
}

@keyframes mobileOverlayRankGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 50px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 75px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 100px rgba(255, 69, 0, 0.4)) drop-shadow(0 0 125px rgba(255, 20, 147, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(138, 43, 226, 1)) drop-shadow(0 0 90px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 120px rgba(255, 69, 0, 0.6)) drop-shadow(0 0 150px rgba(255, 20, 147, 0.5));
    }
}

.mobile-rank-info {
    text-align: left;
}

.mobile-rank-name {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 5px;
}

.mobile-rank-score {
    display: block;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}

.mobile-progress-info {
    padding-top: 15px;
    border-top: 1px solid rgba(255,215,0,0.3);
}

.mobile-rank-list {
    margin-top: 15px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 5px;
    min-height: 0; /* Important for flex child scrolling */
    /* Custom scrollbar for mobile */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,215,0,0.6) transparent;
}

.mobile-rank-list::-webkit-scrollbar {
    width: 6px;
}

.mobile-rank-list::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-rank-list::-webkit-scrollbar-thumb {
    background: rgba(255,215,0,0.6);
    border-radius: 3px;
}

.mobile-rank-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,215,0,0.8);
}

.mobile-rank-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
    margin: 6px 0;
    border-radius: 12px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.2s ease;
    min-height: 64px; /* Better touch-friendly height */
    backdrop-filter: blur(2px);
}

.mobile-rank-item.current-rank {
    background: rgba(138, 43, 226, 0.3);
    border-color: #8a2be2;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

.mobile-rank-item.achieved {
    opacity: 1;
}

.mobile-rank-item.not-achieved {
    opacity: 0.5;
}

.mobile-rank-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(138, 43, 226, 0.3));
}

.mobile-rank-item.current-rank img {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.mobile-rank-item-info {
    flex: 1;
    text-align: left;
}

.mobile-rank-item-name {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.3;
}

.mobile-rank-item-range {
    color: #b8b8b8;
    font-size: 14px;
    margin-top: 2px;
}

.mobile-stat {
    font-size: 18px;
    color: #ffd700;
    font-weight: bold;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .game-header {
        height: 52px;
        padding: 6px 8px;
        background: linear-gradient(135deg, rgba(10,10,10,0.98) 0%, rgba(30,30,30,0.98) 100%);
        border-bottom: 1px solid rgba(255,215,0,0.2);
    }
    
    .mobile-header-icons {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 12px;
        max-width: 240px;
        margin: 0 auto;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: flex !important;
    }
    
    .header-right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .header-left, .header-center {
        display: none;
    }
    
    /* Adjust game board to account for compact header */
    .game-board {
        padding-top: 0;
    }
    
    /* Hide header toggle on mobile */
    .header-toggle {
        display: none !important;
    }
    
    .mobile-rank-icon {
        width: 28px;
        height: 28px;
    }
    
    .header-right {
        position: relative;
        z-index: 2147483645;
    }
    
    /* Mobile rank overlay improvements */
    .mobile-rank-overlay {
        padding: 70px 15px 15px 15px; /* Reduced top padding for smaller screens */
    }
    
    .mobile-rank-content {
        max-width: 350px;
        width: 100%;
        padding: 20px;
        margin: 0;
        max-height: 90vh; /* Adjusted for smaller screen padding */
    }
    
    .mobile-rank-list {
        padding: 8px 3px;
        max-height: 60vh; /* Ensure scrollable area doesn't overflow */
        overflow-y: auto;
    }
    
    .mobile-rank-item {
        padding: 12px 15px;
        margin: 4px 0;
        min-height: 56px;
        gap: 12px;
    }
    
    .mobile-rank-item img {
        width: 40px;
        height: 40px;
    }
    
    .mobile-rank-item-name {
        font-size: 15px;
    }
    
    .mobile-rank-item-range {
        font-size: 13px;
    }
    
    .game-header {
        position: relative;
        z-index: 2147483645;
        pointer-events: auto;
    }
}

.completion-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.7), 0 0 30px rgba(255,215,0,0.5);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.completion-subtitle {
    font-size: 18px;
    color: #ffed4e;
    margin-bottom: 30px;
    font-style: italic;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.completion-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
}

.stat-achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 36px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.stat-label {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin-top: 5px;
}

.completion-message {
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.completion-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.completion-btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Cinzel', serif;
}

.primary-btn {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(255,215,0,0.4);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,215,0,0.6);
}

.secondary-btn {
    background: rgba(255,255,255,0.1);
    color: #ffd700;
    border: 2px solid #ffd700;
}

.secondary-btn:hover {
    background: rgba(255,215,0,0.2);
    transform: translateY(-2px);
}

/* Confetti Animation */
.completion-confetti {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd700;
    animation: confettiFall 3s linear infinite;
}

.confetti:nth-child(even) { background: #ffed4e; }
.confetti:nth-child(3n) { background: #ff9f40; }

.confetti-1 { left: 10%; animation-delay: 0s; }
.confetti-2 { left: 20%; animation-delay: 0.3s; }
.confetti-3 { left: 30%; animation-delay: 0.6s; }
.confetti-4 { left: 40%; animation-delay: 0.9s; }
.confetti-5 { left: 50%; animation-delay: 1.2s; }
.confetti-6 { left: 60%; animation-delay: 1.5s; }
.confetti-7 { left: 70%; animation-delay: 1.8s; }
.confetti-8 { left: 80%; animation-delay: 2.1s; }

@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Mobile Responsive for Completion Modal */
@media (max-width: 768px) {
    .completion-modal {
        padding: 30px 20px;
        width: 95%;
    }
    
    .completion-trophy {
        font-size: 60px;
    }
    
    .completion-title {
        font-size: 24px;
    }
    
    .completion-subtitle {
        font-size: 16px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .completion-message {
        font-size: 14px;
    }
    
    .completion-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .star {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .completion-modal {
        padding: 25px 15px;
    }
    
    .completion-trophy {
        font-size: 50px;
        margin-bottom: 15px;
    }
    
    .completion-title {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .completion-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .completion-stats {
        gap: 30px;
        margin-bottom: 20px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    .completion-message {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    .completion-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .completion-btn {
        width: 100%;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Unlearn Modal */

/* Drop Slot Spinning Animation */
@keyframes slotSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1080deg); }  /* 3 full rotations (360deg × 3) */
}

.drop-slot.spinning {
    animation: slotSpin 1s ease-in-out;
}

/* Discovery OK Button */
.discovery-ok-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border: 2px solid #ffd700;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 10000;
    pointer-events: auto;
}

.discovery-ok-btn:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.discovery-ok-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}

/* Electric flash animations for discovery */
@keyframes flashFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(20%);
    }
}

@keyframes flashFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%) scaleX(-1);
    }
    50% {
        opacity: 1;
        transform: translateX(0) scaleX(-1);
    }
    100% {
        opacity: 0;
        transform: translateX(-20%) scaleX(-1);
    }
}

/* Corner flash animations for second set */
@keyframes flashFromTopLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%) translateY(-100%) rotate(-45deg);
    }
    50% {
        opacity: 1;
        transform: translateX(-25%) translateY(-25%) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translateX(10%) translateY(10%) rotate(-45deg);
    }
}

@keyframes flashFromBottomRight {
    0% {
        opacity: 0;
        transform: translateX(100%) translateY(100%) rotate(135deg) scaleX(-1);
    }
    50% {
        opacity: 1;
        transform: translateX(25%) translateY(25%) rotate(135deg) scaleX(-1);
    }
    100% {
        opacity: 0;
        transform: translateX(-10%) translateY(-10%) rotate(135deg) scaleX(-1);
    }
}