@charset "UTF-8";

/*
 * TravianZ Responsive Stylesheet
 * Additive — does not modify desktop layout.
 * Loaded on all pages, uses @media queries for smaller screens.
 */

/* ===== Tablet (768px - 979px) ===== */
@media screen and (max-width: 979px) {
    body {
        overflow-x: hidden;
    }

    div#mid,
    .wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    div#header,
    div#footer {
        min-width: 0 !important;
        width: 100% !important;
    }

    div#mfoot {
        width: 95% !important;
    }

    div#side_navi {
        width: 130px !important;
    }

    div#side_info {
        width: 220px !important;
    }

    div#content {
        min-width: 0 !important;
    }

    table {
        font-size: 11px;
    }
}

/* ===== Mobile (< 768px) ===== */
@media screen and (max-width: 767px) {
    div#mid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 8px;
        box-sizing: border-box;
    }

    div#side_navi {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        position: relative !important;
    }

    div#side_navi p {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    div#side_navi p a {
        display: inline-block;
        padding: 6px 10px;
        min-height: 44px;
        line-height: 32px;
    }

    div#content {
        width: 100% !important;
        float: none !important;
        min-height: auto !important;
        padding: 8px 0;
    }

    div#side_info {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        padding: 0 !important;
    }

    div#header {
        min-width: 0 !important;
        height: auto !important;
    }

    div#dynamic_header {
        display: none;
    }

    div#footer {
        position: relative !important;
        height: auto !important;
        min-width: 0 !important;
        padding: 10px 0;
    }

    /* Resource bar — horizontal scroll on tiny screens */
    div#res {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tables — allow horizontal scroll (exclude map) */
    table:not(#mapn):not(.map_table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Touch targets — minimum 44x44px */
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Forms */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* Prevents iOS zoom */
    }

    /* Map — make scrollable */
    div#map_container,
    div#village_map {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Hide non-essential decorative elements on mobile */
    div.popup3 {
        left: 5% !important;
        right: 5% !important;
        margin-left: 0 !important;
        width: 90% !important;
    }
}

/* ===== Small Mobile (< 480px) ===== */
@media screen and (max-width: 479px) {
    div#side_navi a#logo img {
        width: 80px;
        height: auto;
    }

    .lang-switch-container {
        font-size: 13px;
    }

    div#res td {
        font-size: 10px;
        padding: 1px 3px;
    }
}