/* Play button overlay - restored as floating element */
.nav-play-button {
    position: fixed;
    right: calc(8% - clamp(18px, 3vw, 35px));
    top: 42.5px;
    z-index: 1001;
    display: inline-block;
    transition: all 0.4s ease;
    filter: 
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.nav-play-button img {
    height: clamp(65px, 6.5vw, 87px);
    width: auto;
    transition: all 0.4s ease;
}

.nav-play-button:hover {
    transform: translateY(-2px) scale(1.05);
    filter: 
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
}

.play-button-container {
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.play-button {
    display: inline-block;
    transition: all 0.4s ease;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.play-button img {
    height: 90px;
    width: auto;
    transition: all 0.4s ease;
}

.play-button:hover {
    transform: translateY(-5px) scale(1.05);
    filter: 
        drop-shadow(0 15px 40px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 25px var(--gold-glow));
}

.play-button:hover img {
    filter: brightness(1.1);
}

.available-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    position: relative;
    z-index: 2;
    transform: translateY(-0.5rem);
}

.available-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--pirate-gold);
    margin-bottom: 0.2rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.platform-logos {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.platform-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-primary);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.platform-logo:hover {
    color: var(--pirate-gold);
    transform: translateY(-2px);
}

.platform-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Pirate View More Button */
.view-more-container {
    display: flex;
    justify-content: center;
    margin: 4rem 0 2rem 0;
}

.pirate-view-more {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(26, 35, 50, 0.9) 0%,
        rgba(44, 24, 16, 0.9) 50%,
        rgba(26, 35, 50, 0.9) 100%
    );
    border: 3px solid var(--pirate-gold);
    border-radius: 50px;
    padding: 1.2rem 3rem;
    font-family: 'Crimson Text', serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.button-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.button-text {
    color: var(--bright-gold);
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(212, 175, 55, 0.3);
}

.treasure-icon, .arrow-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
}

/* Animated wave background */
.button-waves {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60"><path d="M0,30 Q25,20 50,30 T100,30 T150,30 T200,30" stroke="%23d4af37" stroke-width="1" fill="none" opacity="0.15"/><path d="M0,40 Q30,35 60,40 T120,40 T180,40" stroke="%23d4af37" stroke-width="0.5" fill="none" opacity="0.1"/></svg>');
    background-size: 200px 60px;
    background-repeat: repeat-x;
    animation: button-waves 6s linear infinite;
    z-index: 1;
}

/* Hover effects */
.pirate-view-more:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: var(--bright-gold);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(212, 175, 55, 0.4),
        inset 0 0 30px rgba(212, 175, 55, 0.1);
}

.pirate-view-more:hover .button-text {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0 0 25px rgba(212, 175, 55, 0.6);
}

.pirate-view-more:hover .treasure-icon,
.pirate-view-more:hover .arrow-icon {
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.8));
    animation: treasure-glow 1.5s ease-in-out infinite alternate;
}

.pirate-view-more:active {
    transform: translateY(-1px) scale(1.02);
}

@keyframes button-waves {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes treasure-glow {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Enhanced responsive breakpoints for uniform scaling */
@media (min-width: 769px) and (max-width: 1399px) {
    .nav-play-button img {
        height: clamp(70px, 7vw, 85px) !important;
    }
    
    .nav-play-button {
        top: clamp(45px, 5vw, 55px);
    }
}

@media (max-width: 1400px) {
    .nav-play-button {
        right: calc(8% - clamp(16px, 2.8vw, 32px));
    }
    
    .nav-play-button img {
        height: clamp(60px, 5.5vw, 75px);
    }
}

@media (max-width: 1200px) {
    .nav-play-button {
        right: calc(6% - clamp(15px, 2.5vw, 30px));
    }
    
    .nav-play-button img {
        height: clamp(55px, 5vw, 70px);
    }
}

@media (max-width: 968px) {
    .nav-play-button {
        right: calc(5% - clamp(12px, 2.2vw, 28px));
    }
    
    .nav-play-button img {
        height: clamp(50px, 4.5vw, 65px);
    }
}

@media (max-width: 768px) {
    .nav-play-button {
        display: none;
    }
    
    .nav-play-button img {
        height: clamp(30px, 4vw, 50px);
    }
    
    .play-button-container {
        flex-direction: column;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .nav-play-button {
        right: calc(1% - clamp(5px, 1.5vw, 15px));
        top: 33px;
    }
    
    .nav-play-button img {
        height: clamp(25px, 3.5vw, 45px);
    }
}

/* Social icons hover effects */
.social-icons a:hover {
    transform: scale(1.25);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icons a i {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icons a:hover .fa-facebook-f {
    color: #1877f2;
    filter: drop-shadow(0 0 10px #1877f2) drop-shadow(0 0 0 2px #ffffff);
    text-shadow: 
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icons a:hover .fa-twitter {
    color: #1da1f2;
    filter: drop-shadow(0 0 10px #1da1f2) drop-shadow(0 0 0 2px #ffffff);
    text-shadow: 
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icons a:hover .fa-discord {
    color: #5865f2;
    filter: drop-shadow(0 0 10px #5865f2) drop-shadow(0 0 0 2px #ffffff);
    text-shadow: 
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icons a:hover .fa-youtube {
    color: #ff0000;
    filter: drop-shadow(0 0 10px #ff0000) drop-shadow(0 0 0 2px #ffffff);
    text-shadow: 
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}