/* CSS Variables for fonts - matching the original CSS */
:root {
    --supercell-font: "__supercellFont_ff1c38", "__supercellFont_Fallback_ff1c38", Arial, sans-serif;
    --game-font: "__gameFont_635e75", "__gameFont_Fallback_635e75", Arial, sans-serif;
    --font-inter: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Ensure body and html use the game font */
body.__variable_ff1c38.__variable_635e75 {
    font-family: var(--game-font);
}

/* Main content uses game font (Clash Royale font) - exclude footer and language dropdown */
.styles_main__H_BuV {
    font-family: var(--game-font) !important;
}

/* Ensure all text in main uses game font - but exclude footer and language dropdown */
.styles_contents__ElCjD,
.styles_contents__ElCjD p,
.styles_contents__ElCjD .lead-wrapper,
.styles_contents__ElCjD .lead-wrapper p,
.styles_nested-content__d5lEy,
.styles_nested-content__d5lEy p,
.styles_nested-content__d5lEy .lead-wrapper,
.styles_nested-content__d5lEy .lead-wrapper p,
.styles_download-links-wrapper__Y_api,
.styles_download-links-heading__XV9JX,
.styles_deco-section__LmdbE {
    font-family: var(--game-font) !important;
}

/* Button uses game font with bold weight - Clash Royale font */
button.button,
button.button.styles_button__DNJ4N,
.styles_button__DNJ4N,
#open-game-button,
.styles_qr-button-wrapper__50IJE button,
.styles_qr-button-wrapper__50IJE button.button {
    font-family: var(--game-font) !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

/* Button text/span uses game font */
button.button span,
.styles_button__DNJ4N span,
#open-game-button span {
    font-family: var(--game-font) !important;
    font-weight: 700 !important;
}

/* Download links heading uses game font */
.styles_download-links-heading__XV9JX {
    font-family: var(--game-font) !important;
}

/* Footer uses Supercell font - keep separate */
.styles_footer__1cZ8q,
.styles_footer__1cZ8q * {
    font-family: var(--supercell-font) !important;
}

/* Language dropdown uses Supercell font - keep separate */
.styles_language-dropdown-wrapper__z8_b8,
.styles_language-dropdown__tj_as {
    font-family: var(--supercell-font) !important;
}

/* Additional styling to ensure proper layout */
.lead-wrapper,
.lead-wrapper p {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 30px;
    text-align: center;
    font-family: var(--game-font) !important;
    font-weight: 400 !important;
}

/* Ensure all headings use game font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--game-font) !important;
}

/* Ensure all paragraphs in main use game font (but not in footer) */
.styles_main__H_BuV .styles_contents__ElCjD p,
.styles_main__H_BuV .styles_nested-content__d5lEy p,
.styles_main__H_BuV .lead-wrapper p,
.styles_main__H_BuV p:not(.styles_footer__1cZ8q p) {
    font-family: var(--game-font) !important;
}

/* Ensure images are not draggable */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Override pointer-events for clickable images */
a img {
    pointer-events: auto;
    cursor: pointer;
}

/* Ensure social links are clickable */
.social a,
.social svg {
    pointer-events: auto;
    cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 575px) {
    .styles_container__VE43u {
        display: none !important;
    }
}

/* Ensure proper button styling from original CSS */
button.button.styles_button__DNJ4N {
    color: #fff;
}

/* Ensure contents container centers its children */
.styles_contents__ElCjD {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

/* Ensure nested-content centers its children */
.styles_nested-content__d5lEy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Center the button wrapper and button on all screen sizes */
.styles_qr-button-wrapper__50IJE {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Center the open-game-button on all screen sizes - preserve button styling */
#open-game-button,
#open-game-button.styles_button__DNJ4N,
#open-game-button.button,
.styles_qr-button-wrapper__50IJE button.button,
.styles_qr-button-wrapper__50IJE button.styles_button__DNJ4N {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: auto !important;
    max-width: 100% !important;
}

/* Ensure button text is centered */
#open-game-button span,
.styles_qr-button-wrapper__50IJE button.button span,
.styles_qr-button-wrapper__50IJE button.styles_button__DNJ4N span {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
}

/* Language dropdown styling adjustments */
.language-dropdown {
    color: #fff !important;
    -webkit-text-stroke-width: 0;
    text-shadow: none !important;
    background-color: rgba(0,0,0,.2) !important;
    background-image: url(../images/language-globe-white.svg),
                      url(../images/language-caret-white.svg) !important;
    background-position: 10px center, right 11px center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 18px, 12px 18px !important;
    padding: 11px 25px 11px 33px !important;
    border: 0 !important;
    border-radius: 25px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Ensure footer links are clickable */
footer a {
    pointer-events: auto;
    cursor: pointer;
}

/* Footer Responsive Styles */
.styles_footer__1cZ8q {
    padding: 20px 15px 0 !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q {
        padding: 30px 10vw 0 !important;
        min-height: 200px !important;
    }
}

@media (min-width: 992px) {
    .styles_footer__1cZ8q {
        padding: 30px 15vw 0 !important;
    }
}

/* Footer Links Section - Responsive */
.styles_footer__1cZ8q .styles_links__PIaVg {
    padding: 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_links__PIaVg {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 28px 0 !important;
    }
}

/* Links Wrapper - Responsive */
.styles_footer__1cZ8q .styles_links-wrapper__BmrYJ {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_links-wrapper__BmrYJ {
        flex-direction: row !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
        width: auto !important;
    }
}

@media (min-width: 768px) {
    .styles_footer__1cZ8q .styles_links-wrapper__BmrYJ {
        gap: 20px !important;
    }
}

/* Footer Links - Responsive Text */
.styles_footer__1cZ8q .styles_links-wrapper__BmrYJ a {
    font-size: 0.75rem !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_links-wrapper__BmrYJ a {
        font-size: 0.85rem !important;
        padding: 0 !important;
    }
}

/* Footer Bottom Section - Responsive */
.styles_footer__1cZ8q .styles_footer-bottom__4Uy_G {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    border-top: 1px solid #262626 !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_footer-bottom__4Uy_G {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 28px 0 !important;
        gap: 0 !important;
    }
}

/* Bottom Links - Responsive */
.styles_footer__1cZ8q .styles_bottom-links__RK3oy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_bottom-links__RK3oy {
        flex-direction: row !important;
        align-items: center !important;
        gap: 20px !important;
        width: auto !important;
    }
}

.styles_footer__1cZ8q .styles_bottom-links__RK3oy a {
    margin: 0 !important;
    font-size: 0.75rem !important;
    color: #999 !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_bottom-links__RK3oy a {
        margin-left: 20px !important;
        font-size: 0.85rem !important;
    }
    
    .styles_footer__1cZ8q .styles_bottom-links__RK3oy a:first-of-type {
        margin-left: 0 !important;
    }
}

/* Supercell Logo - Responsive */
.styles_footer__1cZ8q .styles_bottom-links__RK3oy img {
    height: 35px !important;
    width: auto !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_bottom-links__RK3oy img {
        height: 42px !important;
    }
}

/* Social Icons - Responsive */
.styles_footer__1cZ8q .styles_social__J7f1N {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 20px !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_social__J7f1N {
        padding-bottom: 0 !important;
        gap: 12px !important;
        width: auto !important;
    }
}

@media (min-width: 768px) {
    .styles_footer__1cZ8q .styles_social__J7f1N {
        gap: 15px !important;
    }
}

.styles_footer__1cZ8q .styles_social__J7f1N a {
    opacity: 0.5 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    transition: opacity 0.2s ease !important;
}

.styles_footer__1cZ8q .styles_social__J7f1N a:hover {
    opacity: 1 !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q .styles_social__J7f1N a {
        width: 25px !important;
        height: 25px !important;
        margin: 0 8px !important;
    }
}

@media (min-width: 768px) {
    .styles_footer__1cZ8q .styles_social__J7f1N a {
        margin: 0 12px !important;
    }
}

.styles_footer__1cZ8q .styles_social__J7f1N a svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Footer General Links - Responsive */
.styles_footer__1cZ8q a {
    font-size: 0.75rem !important;
    transition: color 0.2s ease !important;
}

@media (min-width: 576px) {
    .styles_footer__1cZ8q a {
        font-size: 0.85rem !important;
    }
}

.styles_footer__1cZ8q a:hover {
    color: #fff !important;
    opacity: 1 !important;
}

/* Extra Small Screens (phones in portrait) */
@media (max-width: 375px) {
    .styles_footer__1cZ8q {
        padding: 15px 10px 0 !important;
    }
    
    .styles_footer__1cZ8q .styles_links-wrapper__BmrYJ {
        gap: 8px !important;
    }
    
    .styles_footer__1cZ8q .styles_links-wrapper__BmrYJ a {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
    }
    
    .styles_footer__1cZ8q .styles_social__J7f1N {
        gap: 10px !important;
    }
    
    .styles_footer__1cZ8q .styles_social__J7f1N a {
        width: 28px !important;
        height: 28px !important;
    }
    
    .styles_footer__1cZ8q .styles_bottom-links__RK3oy img {
        height: 30px !important;
    }
}

/* Large Screens */
@media (min-width: 1200px) {
    .styles_footer__1cZ8q {
        padding: 40px 20vw 0 !important;
    }
    
    .styles_footer__1cZ8q .styles_links-wrapper__BmrYJ a {
        font-size: 0.9rem !important;
    }
    
    .styles_footer__1cZ8q .styles_bottom-links__RK3oy a {
        font-size: 0.9rem !important;
    }
}

/* Very Large Screens */
@media (min-width: 1400px) {
    .styles_footer__1cZ8q {
        padding: 40px 25vw 0 !important;
    }
}