/* =========================================================================
   Thunder WoW — Mobile Responsive CSS
   thunder-wow-mobile.css | v1.1.0

   Estrutura HTML:
   .sticky-navigation (.sticky-left | .sticky-center | .sticky-right)
   .main_container
     .row.row-1 › .col-mid › #header (.logo_holder | #main_menu)
     .row.row-2 › .col-mid › #right.mainside + #slider_container
                › .col-right › #left.sidebar
     .row.row-3 › .col-mid › #footer

   Navegação mobile: sticky-navigation (já existente no topo fixo)
   O #main_menu do header fica oculto no mobile.
   ========================================================================= */

/* =========================================================================
   0. Previne overflow horizontal global
   ========================================================================= */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Live popup tem width: 1900px — fixed elements ignoram overflow do body
       no Safari/iOS, então contemos o overflow aqui */
    .live_popup {
        overflow: hidden;
        max-width: 100vw;
    }

    /* Sticky nav: box-sizing garante que padding não some à width: 100% */
    .sticky-navigation {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
    }
}

/* =========================================================================
   1. Container fluido a partir de 1220px
   ========================================================================= */
@media screen and (max-width: 1220px) {
    .main_container {
        width: 100% !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
}

/* =========================================================================
   2. Tablet — 992px: empilha colunas, esconde decorativas
   ========================================================================= */
@media screen and (max-width: 992px) {
    .main_container {
        width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .row .col {
        width: 100% !important;
        float: none !important;
        clear: both;
        display: block !important;  /* anula inline-block do col-mid */
        margin: 0 !important;       /* anula margin-left: 9px */
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .row .col.col-left {
        display: none !important;
    }

    /* Sidebar vai abaixo do conteúdo principal */
    .row.row-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .row.row-2 .col.col-mid  { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
    .row.row-2 .col.col-right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }

    #right.mainside,
    #left.sidebar {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
}

/* =========================================================================
   3. Mobile — 768px
   ========================================================================= */
@media screen and (max-width: 768px) {

    /* -----------------------------------------------------------------
       Header: logo + nav empilhados, menu visível
    ----------------------------------------------------------------- */
    #header {
        margin: 0 !important;
    }

    #header .holder {
        width: 100%;
        height: auto !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 0 0 0;
    }

    /* Logo centralizado */
    #header .holder .logo_holder {
        float: none !important;
        margin: 0 0 6px 0 !important;
    }

    /* Nav: remove altura/posição fixas, itens numa linha só */
    #header .holder .navigation {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        top: auto !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-position: center top;
        padding: 4px 0;
        overflow: visible;
    }

    #header .holder .navigation > li {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
        white-space: nowrap;
    }

    /* Dropdown: desabilita hover (não tem mouse no mobile) e abre via .open (JS) */
    #header .holder .navigation > li.dropdown {
        position: relative;
    }

    /* Cancela o hover do desktop */
    #header .holder .navigation > li:hover .dropdown-holder {
        height: 0 !important;
        opacity: 0 !important;
    }

    #header .holder .navigation > li.dropdown .dropdown-holder {
        width: max-content;
        min-width: 120px;
        max-width: 90vw;
        top: 100%;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 0;
        opacity: 0;
        overflow: hidden;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
        -moz-transition: none;
        transition: none;
        z-index: 10;
        box-sizing: border-box;
    }

    /* Alinhamento especial injetado pelo JS via classes */
    #header .holder .navigation > li.dropdown.drop-left .dropdown-holder {
        left: 0;
        right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    #header .holder .navigation > li.dropdown.drop-right .dropdown-holder {
        left: auto;
        right: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    /* Abre apenas quando o JS adiciona .open */
    #header .holder .navigation > li.dropdown.open .dropdown-holder {
        height: auto !important;
        opacity: 1 !important;
        overflow: visible;
    }

    /* Texto interno do dropdown não quebra */
    #header .holder .navigation .dropdown-holder .navi-dropdown li a {
        white-space: nowrap;
        font-size: clamp(7pt, 2.2vw, 9pt) !important;
        padding: 6px 12px !important;
    }

    /* Font dinâmico: encolhe com a tela, nunca passa de 11pt */
    #header .holder .navigation > li > a {
        line-height: normal !important;
        padding: 10px 4px !important;
        font-size: clamp(7pt, 2.5vw, 11pt) !important;
        letter-spacing: 0 !important;
        display: block;
    }

    /* -----------------------------------------------------------------
       Sticky navigation: todos os itens visíveis, font dinâmico
    ----------------------------------------------------------------- */
    .sticky-navigation {
        height: auto !important;
        min-height: 36px;
        padding: 4px 8px !important;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 4px;
        line-height: 1;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .sticky-left {
        gap: 6px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    .sticky-center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 4px;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .sticky-right {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    /* Botões: font dinâmico com clamp */
    .sticky-navigation .nice_button {
        height: auto !important;
        line-height: normal !important;
        padding: 4px 6px !important;
        font-size: clamp(6.5pt, 2vw, 8.5pt) !important;
        white-space: nowrap;
    }

    /* Language picker: compacto */
    .language-picker-container {
        height: auto !important;
    }

    .language-picker-container select {
        font-size: clamp(6.5pt, 2vw, 9pt) !important;
        padding: 2px 4px !important;
        max-width: 80px;
    }

    /* -----------------------------------------------------------------
       Slider: oculto no mobile
    ----------------------------------------------------------------- */
    #slider_container {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       Layout
    ----------------------------------------------------------------- */
    .main_container {
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .row {
        display: block;
        width: 100%;
    }

    .row .col {
        width: 100% !important;
        float: none !important;
        clear: both;
        display: block !important;  /* anula inline-block do col-mid */
        margin: 0 !important;       /* anula margin-left: 9px */
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .row .col.col-left {
        display: none !important;
    }

    #right.mainside {
        width: 100% !important;
        float: none !important;
        padding: 0 8px !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    #left.sidebar {
        width: 100% !important;
        float: none !important;
        padding: 0 8px !important;
        margin-top: 12px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    /* -----------------------------------------------------------------
       News: substitui frames decorativos (right_mid/top/bottom.jpg)
       por bordas CSS que funcionam em qualquer largura
    ----------------------------------------------------------------- */
    .mainside .page_content {
        background-image: none !important;
        padding: 0 !important;
        border-left: 2px solid rgba(164, 96, 10, 0.5) !important;
        border-right: 2px solid rgba(164, 96, 10, 0.5) !important;
        margin-bottom: 2px;
    }

    /* Remove pseudo-elementos de imagem de fundo (top/bottom) */
    .mainside .page_content.news .page_title,
    .mainside .page_content.page .page_title {
        background-image: none !important;
        border-bottom: 1px solid rgba(164, 96, 10, 0.35) !important;
    }

    .mainside .page_content.news.last-row:after,
    .mainside .page_content.page:after,
    .mainside .page_content.page:before {
        background-image: none !important;
        height: 0 !important;
        display: none !important;
    }

    .mainside .page_content .page_body {
        padding: 8px 10px !important;
    }

    /* -----------------------------------------------------------------
       Conteúdo de página
    ----------------------------------------------------------------- */
    .mainside .page_content.page .page_title h3 {
        font-size: 18px !important;
        letter-spacing: 1px !important;
    }

    .mainside .page_content .page_body {
        padding: 8px !important;
    }

    /* Fix: news_content tem width: 702px fixo no desktop */
    .mainside .page_content.news .page_body .news_content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-break: break-word;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    /* Título da news: height fixo e h2 inline-block quebram no mobile */
    .mainside .page_content.news .page_title {
        height: auto !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 2px 8px;
        padding: 4px 5px !important;
    }

    .mainside .page_content.news .page_title h2 {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .mainside .page_content.news .page_title h2 a {
        font-size: clamp(8.5pt, 3vw, 11pt) !important;
        line-height: 1.3 !important;
        white-space: normal;
        display: block;
    }

    /* Data + comentários: vai para baixo do título */
    .mainside .page_content.news .page_title .author_comment_holder {
        float: none !important;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        font-size: 8pt !important;
        line-height: 1.4 !important;
    }

    /* Previne qualquer filho do page_body de transbordar */
    .mainside .page_content .page_body * {
        max-width: 100%;
    }

    /* Imagens dentro de news não transbordam */
    .mainside .page_content .page_body img {
        width: auto;
        max-width: 100%;
        height: auto;
    }

    /* -----------------------------------------------------------------
       Footer
    ----------------------------------------------------------------- */
    #footer .holder {
        text-align: center;
        padding: 14px 12px;
    }

    #footer .useful-links {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 6px 12px;
        margin-bottom: 8px;
    }

    #footer .useful-links a {
        font-size: 9pt;
    }

    .copyright {
        display: block;
        font-size: 8pt;
        margin-top: 6px;
    }

    /* -----------------------------------------------------------------
       Formulários
    ----------------------------------------------------------------- */
    textarea,
    select,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="file"] {
        width: 100% !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    /* -----------------------------------------------------------------
       Tabelas: scroll horizontal
    ----------------------------------------------------------------- */
    .nice_table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .globalcloser {
        display: none;
    }
}

/* =========================================================================
   4. UCP Dashboard — 768px
   ========================================================================= */
@media screen and (max-width: 768px) {

    /* -----------------------------------------------------------------
       UCP Top: empilha avatar + info verticalmente
    ----------------------------------------------------------------- */
    #ucp_top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 8px !important;
    }

    #ucp_avatar {
        float: none !important;
        margin: 0 auto 12px auto !important;
    }

    #ucp_info {
        float: none !important;
        height: auto !important;
        width: 100% !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #ucp_info aside {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #30220A;
        margin-right: 0 !important;
        padding-bottom: 6px;
        margin-bottom: 6px;
    }

    #ucp_info aside:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #ucp_info aside table {
        width: 100%;
    }

    /* UCP buttons: centraliza e quebra linha */
    #ucp_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-left: 0 !important;
    }

    #ucp_buttons a {
        float: none !important;
        width: 100px !important;
        height: 80px !important;
        margin: 4px !important;
    }

    /* -----------------------------------------------------------------
       Store: remove min-width, reordena items acima do cart
    ----------------------------------------------------------------- */
    #store {
        min-width: 0 !important;
    }

    #store #store_content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0 !important;
    }

    /* Items aparecem primeiro, cart/checkout abaixo */
    #store #store_realms {
        width: 100% !important;
        float: none !important;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    #store #cart {
        width: 100% !important;
        float: none !important;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-top: 10px;
    }

    /* Filter fields: empilha verticalmente */
    #store form .filter_field {
        float: none !important;
        border-right: none !important;
        border-bottom: 1px solid #30220A !important;
        height: auto !important;
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    #store form .filter_field:last-of-type {
        border-bottom: none !important;
    }

    #store form .filter_field select,
    #store form .filter_field input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
}

/* =========================================================================
   5. Smartphones pequenos — 480px
   ========================================================================= */
@media screen and (max-width: 480px) {

    .mainside .page_content.page .page_title h3 {
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
    }

    #footer .useful-links {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    /* Donate: 2 colunas em telas bem pequenas */
    .donate-packages {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Donate: tabs empilhadas */
    #donate_select {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #donate_select .nice_button,
    #donate_select .nice_active {
        min-width: auto !important;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    /* =========================================================================
       Módulo Character — Mobile
       ========================================================================= */

    /* --- Card wrapper --- */
    .char-card {
        border-radius: 0;
    }

    .char-card__header {
        font-size: 10px;
        padding: 8px 12px;
        flex-wrap: wrap;
    }

    .char-card__header > span {
        width: 100%;
        margin-top: 2px;
    }

    /* --- Character header --- */
    #armory_top {
        text-align: center;
        padding: 8px;
    }

    #armory_bars {
        float: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 10px;
    }

    #armory_bars div {
        width: 140px;
        margin-bottom: 0;
    }

    #armory_top img.avatar {
        float: none;
        display: inline-block;
        margin-right: 0;
        margin-bottom: 6px;
    }

    #armory_name {
        float: none;
        margin-top: 4px;
    }

    #armory_top h1 {
        width: auto;
        height: auto;
        font-size: 24px;
    }

    #armory_top h2 {
        font-size: 13px;
    }

    /* --- Armory: equipment grid --- */
    #armory {
        width: 100%;
        background-image: none !important;
        min-height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-bottom: 10px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    #armory_left {
        float: none;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        margin: 10px 4px 0 0;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 70px;
    }

    #armory_right {
        float: none;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin: 10px 0 0 4px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 70px;
    }

    #armory_bottom {
        margin-left: 80px !important;
        margin-right: 40px !important;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 6px 0 0 0;
    }

    #armory_bottom .item {
        float: none;
    }

    .armory-stats-wrap {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 4px 0 0 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid #40220a;
        border-radius: 3px;
        padding: 8px 0;
    }

    #armory_stats {
        float: none !important;
        width: 367px;
        height: auto !important;
        margin-top: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }

    /* Stat tabs: disable JS margin-left sliding, use hide/show instead */
    #attributes_wrapper {
        width: 367px !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    #tab_armory_1,
    #tab_armory_2,
    #tab_armory_3 {
        float: none !important;
        width: 367px !important;
        opacity: 1 !important;
    }

    /* Only show first tab by default; JS toggles via hide/show */
    #tab_armory_2,
    #tab_armory_3 {
        display: none;
    }

    /* --- Achievements + Professions: stacked --- */
    #armory_mid_info {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .char-card--profs {
        width: 100%;
    }

    #armory_mid_info .recent-activity {
        float: none;
        width: 100%;
        margin-left: 0;
    }

    .achievement #info {
        width: calc(100% - 30px);
    }

    #armory_mid_info .professions {
        float: none;
        margin-left: 0;
        margin-top: 10px;
    }

    .profile-progress {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .professions .profession-details {
        width: 100%;
    }

    #armory_mid_info .professions .profession-empty {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    /* --- Talents: specs wrap, trees horizontal scroll --- */
    .talents-specs {
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 6px;
    }

    .talents-spec {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        margin: 0;
        height: auto;
        padding: 8px;
    }

    .talents-spec-info {
        min-width: 70px;
    }

    .talents-spec-info #title {
        font-size: 13px;
    }

    .talents-spec-char-selected {
        margin-left: 10px;
    }

    .talents-body {
        overflow-x: auto;
        overflow-y: visible;
        height: auto !important;
        -webkit-overflow-scrolling: touch;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 4px;
        padding-bottom: 10px;
    }

    .talents-tree {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 204px;
        flex: 0 0 204px;
        margin-left: 10px;
    }

    .talents h3 {
        padding: 14px 0 8px 14px;
        font-size: 14px;
    }

    .talents-glyphs {
        padding: 10px;
        margin: 0 10px;
    }

    .talents-glyphs-column {
        float: none;
        width: 100%;
        margin-bottom: 10px;
    }

    .talents-glyphs-column:last-child {
        margin-bottom: 0;
    }

    .talents-glyphs-list {
        width: 100%;
    }

    /* --- Arena: stacked --- */
    #armory_arena_teams {
        margin-top: 10px;
    }

    .armory_arena_box {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .armory_arena_box:nth-child(3) {
        margin: 0 0 10px 0;
    }

    .arena_box_head {
        height: auto;
        padding: 10px 15px;
    }

    .arena_box_body {
        height: auto;
        padding: 10px 15px;
    }
}

/* ── GoURL Payment - Mobile ───────────────────────────────── */
@media screen and (max-width: 768px) {
    #gourl_container {
        padding: 8px;
    }

    .gourl_header h2 {
        font-size: 20px;
    }

    .payment_table tr td:first-child {
        width: 120px;
        font-size: 14px;
    }

    .payment_table tr td {
        padding: 8px;
        font-size: 13px;
    }

    #gourl_iframe {
        min-height: 280px;
        max-height: 70vh;
        min-width: unset;
    }

    .gourl_iframe_container {
        padding: 0 5px;
    }

    .gourl_check_payment_btn {
        min-height: 44px;
        font-size: 15px;
        padding: 8px 24px;
        min-width: 200px;
    }

    .payment_instructions {
        padding: 15px;
        margin: 15px auto;
    }

    .payment_instructions h3 {
        font-size: 15px;
    }

    .payment_instructions ol {
        padding-left: 18px;
    }

    .payment_instructions li {
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    #gourl_container {
        padding: 5px;
    }

    .gourl_header h2 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .gourl_header p {
        font-size: 12px;
    }

    .gourl_section {
        margin-bottom: 15px;
    }

    .payment_table {
        max-width: 100%;
    }

    .payment_table tr {
        display: block;
        margin-bottom: 8px;
    }

    .payment_table tr td {
        display: block;
        width: 100% !important;
        padding: 4px 6px;
        font-size: 13px;
        border-bottom: none;
    }

    .payment_table tr td:first-child {
        width: 100% !important;
        font-size: 11px;
        color: #999;
        padding-bottom: 2px;
        font-weight: bold;
    }

    .payment_table tr:not(:last-child) td:last-child {
        border-bottom: 1px solid #ddd;
        padding-bottom: 8px;
    }

    #gourl_iframe {
        min-height: 250px;
        max-height: 65vh;
        min-width: unset;
    }

    .gourl_iframe_container {
        max-width: 100%;
        padding: 0;
    }

    .gourl_check_payment_btn {
        width: 90%;
        max-width: 320px;
        min-height: 48px;
        font-size: 15px;
        padding: 10px 16px;
    }

    .payment_status {
        padding: 15px;
        margin: 15px auto;
    }

    .payment_instructions {
        padding: 12px;
        margin: 12px auto;
        max-width: 100%;
    }

    .payment_instructions h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .payment_instructions ol {
        padding-left: 16px;
    }

    .payment_instructions li {
        font-size: 12px;
        margin-bottom: 8px;
    }
}