/* TANKISTAT responsive layer — does not replace desktop layout */

/* ===== Adaptive language selector ===== */
.language-panel-shell {
    display: none;
    width: 100%;
    box-sizing: border-box;
    background: #1C1C1E;
}
.language-panel-inner {
    width: min(1000px, calc(100% - 48px));
    margin: 0 auto;
    padding: 18px 0 22px;
    box-sizing: border-box;
    text-align: center;
}
.language-title {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
}
.language-note {
    margin-top: 3px;
    color: #7D9EA5;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
}
.language-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-top: 16px;
    text-align: left;
}
.language-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}
.language-column .language,
.language-column .language2 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    white-space: nowrap;
}
.language-column img {
    flex: 0 0 auto;
}
.desktop-language-toggle {
    display: inline-block;
    line-height: 0;
}
.desktop-language-toggle img {
    transition: opacity .18s ease;
}
.desktop-language-toggle:hover img,
.desktop-language-toggle[aria-expanded="true"] img {
    opacity: .78;
}

.mobile-only { display: none; }

@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        background-attachment: scroll !important;
        background-position: top center !important;
    }

    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    body > center {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main shell */
    .site-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    .site-shell > tbody,
    .site-shell > tbody > tr,
    .site-shell > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Large page sections become vertical stacks. */
    .site-shell table[width="1233"],
    .site-shell table[width="1200"],
    .site-shell table[width="1000"] {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    .site-shell table[width="1233"] > tbody > tr,
    .site-shell table[width="1200"] > tbody > tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .site-shell table[width="1233"] > tbody > tr > td,
    .site-shell table[width="1200"] > tbody > tr > td {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Spacer cells from legacy table layout. */
    .site-shell td[width="13"],
    .site-shell td[width="19"],
    .site-shell td[width="20"],
    .site-shell td[width="26"],
    .site-shell td[width="33"] > center > img[src*="pp.gif"] {
        display: none !important;
    }

    /* Inner ranking tables stay tables/cards. */
    .site-shell table[width="400"],
    .site-shell table[width="380"],
    .site-shell table[width="330"] {
        width: calc(100% - 24px) !important;
        max-width: 430px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Legacy separators should never force horizontal scroll. */
    img[width="1233"],
    img[width="1320"],
    img[width="1200"],
    img[width="1000"],
    img[width="400"],
    img[width="392"],
    img[width="330"] {
        max-width: 100% !important;
        height: auto;
    }

    .headertable2,
    .headertablep2,
    .hh,
    .hhp {
        font-size: 21px !important;
        line-height: 1.15;
    }
    .headertable,
    .headertablep {
        font-size: 17px !important;
        line-height: 1.2;
    }

    .tanknamew,
    .tanknamep,
    .tanknameg {
        font-size: 12px !important;
    }

    /* Header */
    .mobile-header {
        background: rgba(0,0,0,.94);
        border-bottom: 1px solid #282828;
        padding: 10px 12px 8px;
    }
    .mobile-brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .mobile-logo {
        width: auto;
        height: 58px;
        max-width: 190px;
        object-fit: contain;
    }
    .mobile-nav summary,
    .mobile-search summary {
        cursor: pointer;
        list-style: none;
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
        padding: 12px 14px;
        border: 1px solid #3b3b3b;
        background: #17191f;
        border-radius: 4px;
    }
    .mobile-nav summary::-webkit-details-marker,
    .mobile-search summary::-webkit-details-marker {
        display: none;
    }
    .mobile-nav nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        margin-top: 8px;
        background: #333;
        border: 1px solid #333;
    }
    .mobile-nav nav a {
        padding: 13px 10px;
        background: #101218;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
    }
    .mobile-nav nav .premium-link { color: #F7921E; }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-language-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 38px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid #303238;
        border-radius: 4px;
        background: #111318;
        text-decoration: none;
        transition: border-color .18s ease, background .18s ease;
    }
    .mobile-language-toggle:hover,
    .mobile-language-toggle[aria-expanded="true"] {
        border-color: #5a5d65;
        background: #191b21;
    }
    .mobile-language-logo {
        display: block;
        width: auto;
        height: 14px;
        max-width: 64px;
    }
    .mobile-language-chevron {
        width: 6px;
        height: 6px;
        border-right: 1px solid #8b8b8b;
        border-bottom: 1px solid #8b8b8b;
        transform: rotate(45deg) translateY(-2px);
        transform-origin: center;
        transition: transform .2s ease;
    }
    .mobile-language-toggle[aria-expanded="true"] .mobile-language-chevron {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    /* Language list: same concept as desktop, responsive on phones. */
    .language-panel-mobile {
        margin-top: 8px;
        border-top: 1px solid #2b2d32;
        border-bottom: 1px solid #2b2d32;
        background: #101218;
    }
    .language-panel-mobile .language-panel-inner {
        width: 100%;
        padding: 16px 6px 18px;
        text-align: center;
    }
    .language-panel-mobile .language-title {
        font-size: 16px;
        line-height: 1.2;
    }
    .language-panel-mobile .language-note {
        margin-top: 3px;
        margin-bottom: 0;
    }
    .language-panel-mobile .language-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        margin-top: 14px;
        text-align: left;
    }
    .language-panel-mobile .language-column {
        gap: 12px;
    }
    .language-panel-mobile .language-column .language,
    .language-panel-mobile .language-column .language2 {
        font-size: 12px;
        white-space: normal;
    }

    /* Statistics strip */
    .site-stats {
        width: 100% !important;
        display: block !important;
        padding: 10px 14px;
        box-sizing: border-box;
    }
    .site-stats tbody,
    .site-stats tr,
    .site-stats td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }
    .site-stats td:first-child,
    .site-stats td:nth-child(3),
    .site-stats td:nth-child(4),
    .site-stats td:nth-child(5) {
        display: none !important;
    }

    /* Mobile filter */
    .mobile-search {
        margin: 10px 12px 18px;
    }
    .mobile-search > details > summary {
        background: #311C06;
        border-color: #5a3510;
        color: #F7921E;
        font-size: 16px;
    }
    .mobile-filter-form {
        padding: 12px;
        background: #1A0F03;
        border: 1px solid #43250a;
    }
    .filter-section {
        padding: 12px 0;
        border-bottom: 1px solid #3b240b;
    }
    .filter-section:last-of-type { border-bottom: 0; }
    .filter-title {
        color: #8C8C7C;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 12px;
    }
    .filter-grid {
        display: grid;
        gap: 8px;
    }
    .filter-grid.two { grid-template-columns: 1fr 1fr; }
    .filter-grid.nations { grid-template-columns: repeat(4, 1fr); }
    .filter-grid.types { grid-template-columns: repeat(3, 1fr); }
    .filter-grid.levels { grid-template-columns: repeat(3, 1fr); }
    .filter-grid label {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: #101218;
        border: 1px solid #333;
        padding: 6px;
        box-sizing: border-box;
        color: #ddd;
        font-weight: 700;
    }
    .filter-grid input {
        width: 18px;
        height: 18px;
        accent-color: #F7921E;
    }
    .premium-option { color: #F7921E !important; }
    .mobile-search-button {
        width: 100%;
        margin-top: 14px;
        min-height: 52px;
        border: 0;
        color: #fff;
        background: linear-gradient(#fab81b, #ef4511);
        font-weight: 800;
        text-transform: uppercase;
        font-size: 15px;
        cursor: pointer;
    }

    /* Footer */
    .site-footer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .site-footer tbody,
    .site-footer tr {
        display: block !important;
        width: 100% !important;
    }
    .site-footer td {
        display: block !important;
        width: auto !important;
        padding: 0 16px !important;
        text-align: left !important;
    }
    .site-footer td:first-child,
    .site-footer td:last-child {
        display: none !important;
    }
    .site-footer td:nth-last-child(2) {
        text-align: center !important;
        padding-bottom: 18px !important;
    }

    /* Better tap targets / images */
    a { -webkit-tap-highlight-color: rgba(247,146,30,.22); }
    img { max-width: 100%; }
}

@media (max-width: 390px) {
    .mobile-nav nav { grid-template-columns: 1fr; }
    .filter-grid.nations { grid-template-columns: repeat(3, 1fr); }
    .headertable2,
    .headertablep2,
    .hh,
    .hhp { font-size: 18px !important; }
}


/* ===== ru_result.php ===== */
@media (max-width: 768px) {
    .mobile-results {
        padding: 0 12px 20px;
    }
    .result-card {
        background: #101218;
        border: 1px solid #2d3038;
        margin: 0 0 12px;
        padding: 12px;
        box-sizing: border-box;
    }
    .result-card.premium-card {
        border-color: #6b4315;
        box-shadow: inset 3px 0 0 #F7921E;
    }
    .result-card-head {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
    }
    .result-tank-image {
        width: 96px;
        max-width: 32vw;
        height: auto;
        flex: 0 0 auto;
    }
    .result-tank-meta {
        min-width: 0;
        flex: 1;
    }
    .result-icons {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 7px;
    }
    .result-tank-name {
        font-size: 16px !important;
        line-height: 1.2;
        word-break: break-word;
    }
    .result-metrics {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .result-metrics > div {
        background: #181b22;
        padding: 9px 8px;
        text-align: center;
        border: 1px solid #292d35;
    }
    .result-metrics > div.metric-active {
        background: #271E18;
        border-color: #6b4315;
    }
    .result-metrics span {
        display: block;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
    }
    .result-metrics small {
        display: block;
        margin-top: 3px;
        color: #9da0a6;
        text-transform: uppercase;
        font-size: 9px;
    }
    .mobile-empty {
        padding: 24px 16px;
        background: #101218;
        text-align: center;
        color: #aaa;
    }
}

/* ===== tank_info.php ===== */
@media (max-width: 768px) {
    .tank-info-layout,
    .tank-info-layout > tbody,
    .tank-info-layout > tbody > tr {
        display: block !important;
        width: 100% !important;
    }
    .tank-info-layout > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .tank-info-layout > tbody > tr > td[width="25"],
    .tank-info-layout > tbody > tr > td[width="10"],
    .tank-info-layout > tbody > tr > td[width="15"] {
        display: none !important;
    }
    .tank-main-image {
        width: 190px !important;
        max-width: 62vw !important;
    }
    .tank-info-layout td[width="400"] {
        padding: 14px 12px 20px !important;
    }
    .mobile-battle-list {
        padding: 10px 12px 18px;
    }
    .battle-card {
        background: #101218;
        border: 1px solid #2d3038;
        margin-bottom: 10px;
    }
    .battle-date {
        padding: 8px 10px;
        background: #1b1e25;
        color: #8e939c;
        font-size: 11px;
        text-align: right;
    }
    .battle-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: #2d3038;
    }
    .battle-grid > div {
        background: #101218;
        padding: 10px 6px;
        text-align: center;
    }
    .battle-grid > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .battle-grid span {
        display: block;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }
    .battle-grid small {
        display: block;
        margin-top: 3px;
        color: #8e939c;
        font-size: 9px;
        text-transform: uppercase;
    }
}


@media (max-width: 410px) {
    .mobile-header { padding-left: 9px; padding-right: 9px; }
    .mobile-logo { height: 52px; max-width: 165px; }
    .mobile-header-actions { gap: 6px; }
    .mobile-nav summary { padding-left: 10px; padding-right: 10px; font-size: 13px; }
    .mobile-language-toggle { padding-left: 8px; padding-right: 8px; }
    .language-panel-mobile .language-grid { gap: 18px 8px; }
}


/* ===== FIX: legacy line1.gif / line2.gif separators =====
   These GIFs are stretchable 1–2 px separators in the old desktop markup.
   Never allow responsive height:auto to restore their source aspect ratio. */
@media (max-width: 768px) {
    img[src$="/img/line1.gif"],
    img[src$="img/line1.gif"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 1px !important;
        min-height: 1px !important;
        max-height: 1px !important;
        object-fit: fill !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    img[src$="/img/line2.gif"],
    img[src$="img/line2.gif"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 2px !important;
        min-height: 2px !important;
        max-height: 2px !important;
        object-fit: fill !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Remove line-image placeholders that were used as vertical desktop spacers. */
    td[width="20"] > center > img[src$="/img/line2.gif"],
    td[width="13"] > center > img[src$="/img/line2.gif"],
    td[width="33"] > center > img[src$="/img/line1.gif"] {
        display: none !important;
    }
}

/* ===== TANKISTAT support / donation banner ===== */
.support-banner {
    width: 1233px;
    max-width: calc(100% - 0px);
    box-sizing: border-box;
    margin: 0 auto 24px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(180deg, #171717 0%, #111111 100%);
    border: 1px solid #a94f08;
    box-shadow: 0 0 16px rgba(224, 93, 0, .16), inset 0 1px 0 rgba(255,255,255,.025);
}

.support-icon {
    flex: 0 0 92px;
    width: 92px;
    text-align: center;
}
.support-icon svg {
    display: block;
    width: 76px;
    height: 88px;
    margin: 0 auto;
    filter: drop-shadow(0 0 9px rgba(255, 111, 0, .24));
}
.support-shield {
    fill: #f06a0a;
    stroke: #ff922e;
    stroke-width: 2;
}
.support-shield-inner {
    fill: #ff7c13;
    stroke: rgba(255,255,255,.16);
    stroke-width: 1;
}
.support-heart { fill: #fff; }

.support-copy {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.support-title {
    margin-bottom: 9px;
    color: #f1f1f1;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
}
.support-text {
    max-width: 670px;
    color: #b9b9b9;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
}
.support-action {
    flex: 0 0 auto;
    padding-left: 12px;
}
.support-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 302px;
    min-height: 56px;
    box-sizing: border-box;
    padding: 0 26px;
    border: 1px solid #ff7b16;
    background: linear-gradient(180deg, #ff851e 0%, #ed5f00 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 12px rgba(240, 96, 0, .20);
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .2px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.support-button:hover {
    background: linear-gradient(180deg, #ff9a36 0%, #fa7008 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(240, 96, 0, .34);
    transform: translateY(-1px);
}
.support-button-heart {
    margin-right: 9px;
    font-size: 21px;
    line-height: 1;
}

@media (max-width: 768px) {
    .support-banner {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin: 4px auto 18px !important;
        padding: 18px 16px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
    .support-icon {
        flex: none !important;
        width: 70px !important;
    }
    .support-icon svg {
        width: 58px !important;
        height: 66px !important;
    }
    .support-copy { text-align: center !important; }
    .support-title {
        margin-bottom: 8px !important;
        font-size: 20px !important;
        line-height: 1.25 !important;
    }
    .support-text {
        max-width: none !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .support-action {
        width: 100% !important;
        padding: 5px 0 0 !important;
    }
    .support-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 0 14px !important;
        font-size: 15px !important;
    }
}


/* ===== Bottom donation banner ===== */
.support-banner.support-banner-bottom {
    margin-top: 8px;
    margin-bottom: 26px;
}
.support-banner .support-rocket-icon {
    flex: 0 0 118px;
    width: 118px;
    min-width: 118px;
    text-align: center;
}
.support-banner .support-rocket-icon svg {
    display: block !important;
    width: 112px !important;
    height: 90px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    filter: drop-shadow(0 0 8px rgba(255,105,0,.28));
}
.support-rocket-icon .rocket-body {
    fill: #ff7810;
    stroke: #ff9c31;
    stroke-width: 2;
}
.support-rocket-icon .rocket-body-highlight {
    fill: #ff9b31;
    opacity: .72;
}
.support-rocket-icon .rocket-window-ring {
    fill: #1c1c1c;
    stroke: #ffb15b;
    stroke-width: 2.2;
}
.support-rocket-icon .rocket-window {
    fill: #2b2b2b;
    stroke: #080808;
    stroke-width: 1.5;
}
.support-rocket-icon .rocket-window-glint {
    fill: #f4f4f4;
    opacity: .92;
}
.support-rocket-icon .rocket-seam {
    fill: none;
    stroke: rgba(125,45,0,.58);
    stroke-width: 2;
    stroke-linecap: round;
}
.support-rocket-icon .rocket-fin {
    fill: #ea5c00;
    stroke: #ff8b20;
    stroke-width: 1.6;
}
.support-rocket-icon .rocket-flame-outer {
    fill: #ff6b00;
    filter: drop-shadow(0 0 4px rgba(255,106,0,.48));
}
.support-rocket-icon .rocket-flame-mid {
    fill: #ffad16;
}
.support-rocket-icon .rocket-flame-inner {
    fill: #ffe06b;
}
.support-rocket-icon .rocket-spark {
    fill: #f58b16;
    filter: drop-shadow(0 0 3px rgba(255,126,0,.42));
}
.support-rocket-icon .rocket-spark-b { opacity: .80; }
.support-rocket-icon .rocket-spark-c { opacity: .92; }

@media (max-width: 768px) {
    .support-banner.support-banner-bottom {
        margin-top: 4px !important;
        margin-bottom: 18px !important;
    }
    .support-banner .support-rocket-icon {
        flex: none !important;
        width: 94px !important;
        min-width: 94px !important;
    }
    .support-banner .support-rocket-icon svg {
        width: 90px !important;
        height: 74px !important;
    }
}