/* Basic styles for chess.html */

/* Force dark theme for all pages */
html, body {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

a, a:visited {
    color: #1abc9c !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
}

.container, .article-content, nav, footer, section {
    background: rgba(26,42,58,0.95) !important;
    color: #f1f5f9 !important;
}

/* Remove or hide dark mode toggle if present */
.dark-mode-toggle {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Add any additional styles you need here */

/* ========== MOBILE ZOOM OPTIMIZATION ========== */
/* Ensure smooth zooming without breaking layout */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Prevent horizontal scroll on zoom */
    overflow-x: hidden;
    word-wrap: break-word;
}

/* Ensure all containers are zoom-friendly */
.container, .article-content, nav, footer, section, main {
    max-width: 100%;
    box-sizing: border-box;
    /* Prevent content from breaking on zoom */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Make images responsive to zoom */
img {
    max-width: 100%;
    height: auto;
    /* Prevent images from breaking layout on zoom */
    display: block;
}

/* Ensure text remains readable at all zoom levels */
p, div, span, a, li, td, th {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Mobile-specific zoom improvements */
@media (max-width: 768px) {
    body {
        /* Allow pinch-to-zoom */
        touch-action: manipulation;
        /* Prevent double-tap zoom on buttons */
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Ensure navigation remains functional on zoom */
    nav {
        position: relative;
        z-index: 1000;
    }
    
    /* Make sure content doesn't get cut off */
    .container, .article-content {
        padding: 1rem;
        margin: 0 auto;
    }
}