/* Mobile Fixes for CyberTankz */

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    /* Fix footer overlap - override the negative margin sticky footer */
    .page-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 20px;
    }
    
    .page-buffer {
        display: none;
    }
    /* Container width fix */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* Visual banner mobile */
    .visual {
        margin-bottom: 15px;
    }
    
    /* Show the wide image on mobile and crop to fit without distortion */
    .image-wide {
        display: block !important;
        object-fit: cover;
        object-position: center;
    }
    
    /* Fix download button edges being cut off */
    .main-header__fight-button {
        width: 338px !important;
        height: 88px !important;
    }
    
    .sprite_fight-button {
        width: 338px !important;
        height: 88px !important;
    }
    
    .main-header__fight-button .b-hover,
    .main-header__fight-button .b-active {
        background-position: 0 -88px !important;
    }
    
    /* News blocks mobile */
    .news-block__container {
        width: 100% !important;
        height: auto !important;
        overflow: visible;
    }
    
    .news-block__wrapper {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .news-block__blocks {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 0;
        padding: 0 15px;
    }
    
    .news-block__block {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        float: none !important;
    }
    
    .news-block__image {
        width: 100% !important;
        height: auto !important;
    }
    
    .news-block__text {
        width: 100% !important;
        position: relative;
        padding: 10px;
    }
    
    .news-block__buttons {
        display: none;
    }
    
    /* Veterans section mobile - add bottom margin to prevent footer overlap */
    .veterans-section {
        padding: 30px 15px;
        margin-bottom: 20px;
    }
    
    .veterans-title {
        font-size: 1.5em;
    }
    
    .veterans-text {
        font-size: 0.95em;
        padding: 0 10px;
    }
    
    .veterans-carousel {
        border-radius: 5px;
    }
    
    .veterans-carousel__btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .veterans-carousel__btn--prev {
        left: 5px;
    }
    
    .veterans-carousel__btn--next {
        right: 5px;
    }
    
    .veterans-carousel__dots {
        bottom: 10px;
    }
    
    .veterans-carousel__dot {
        width: 10px;
        height: 10px;
    }
    
    /* Footer mobile */
    .main-footer__container {
        width: 100% !important;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .main-footer__info {
        font-size: 12px;
        padding: 15px 10px 0;
    }
    
    .main-footer__nav {
        padding: 10px;
    }
    
    .main-footer__nav .elems {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 0;
    }
    
    .main-footer__nav .elems .elem {
        margin: 0;
        float: none;
    }
    
    .main-footer__nav .elems .elem a {
        font-size: 12px;
    }
    
    .main-footer__socials {
        position: static !important;
        padding: 10px;
        text-align: center;
    }
    
    .main-footer__socials .elems {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
    }
    
    .main-footer__socials .elems .elem {
        float: none;
        margin: 0;
    }
    
    /* Content pages (news, rules, etc) */
    .news-content,
    .rules-content {
        padding: 20px 15px;
    }
    
    .news-content h1,
    .rules-content h1 {
        font-size: 1.5em;
    }
    
    .news-content h2,
    .rules-content h2 {
        font-size: 1.2em;
    }
    
    .news-content .welcome-text {
        padding: 15px;
        font-size: 1em;
    }
    
    .news-content .cta-text {
        padding: 15px;
        font-size: 1em;
    }
    
    .rules-content .rule {
        padding-left: 0;
    }
    
    .rules-content .punishment {
        padding-left: 10px;
    }
    
    /* Materials page mobile */
    .materials__wrap {
        padding: 20px 15px;
    }
    
    .materials__title {
        font-size: 1.5em;
    }
    
    .materials-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 0;
    }
    
    .materials-grid__item {
        width: 100%;
        height: 180px;
        margin: 0;
    }
    
    .materials-gallery__grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 0;
    }
    
    .materials-gallery__cell {
        width: 100%;
        height: 180px;
        margin: 0;
    }
    
    .materials-gallery__back {
        font-size: 0.85em;
        padding: 6px 10px;
    }
    
    .materials-gallery__heading {
        font-size: 1.1em;
    }
    
    /* Modal mobile */
    .materials-modal__inner {
        max-width: 95vw;
    }
    
    .materials-modal__inner img {
        max-width: 95vw;
        max-height: 80vh;
    }
    
    .materials-modal__close {
        top: -35px;
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
    
}

/* Extra small devices */
@media only screen and (max-width: 480px) {
    .veterans-title {
        font-size: 1.3em;
    }
    
    .veterans-text {
        font-size: 0.9em;
    }
    
    .news-content h1,
    .rules-content h1 {
        font-size: 1.3em;
    }
}