/**
 * PKM-Universe Mobile Styles
 * Prevent horizontal overflow on mobile devices
 * Nav is handled by index.html inline styles — do NOT override nav here
 */

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

/* Ensure media doesn't overflow */
img, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Contain wide sections within viewport */
@media (max-width: 768px) {
    .hero-banner {
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero-title {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .live-counter {
        max-width: 100%;
        box-sizing: border-box;
    }

    .stats-section {
        max-width: 100%;
        box-sizing: border-box;
    }

    .leaderboard {
        max-width: 100%;
    }

    .command-box {
        max-width: calc(100vw - 30px);
    }
}

@media (max-width: 480px) {
    .hero-title {
        letter-spacing: 1px !important;
    }

    .hero-banner {
        max-width: calc(100vw - 20px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 360px) {
    .hero-banner {
        max-width: calc(100vw - 16px);
    }
}