/* OniWorld — mobile responsiveness layer v2 (2026-05-10)
   Aditivo: nunca afeta layout desktop (tudo dentro de @media max-width).
   v2: forte override em #MenuColumn/#ContentColumn (estrutura tibiacom),
   hamburger off-canvas, touch targets 44px, sticky CTA garantido. */

/* === Hamburger button — sempre escondido no desktop === */
#oniworld-hamburger { display: none; }
#oniworld-mobile-backdrop { display: none; }

/* Touch / form input: 16px previne zoom no iOS */
@media (max-width: 768px) {
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="search"], input[type="tel"],
    select, textarea {
        font-size: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    body {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center top !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* === LAYOUT TIBIACOM (estrutura especifica) === */
    /* Outer wrappers vao 100% */
    #ArtworkHelper, #Bodycontainer, #ContentRow {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* MenuColumn (sidebar) vira off-canvas drawer */
    #MenuColumn {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 86% !important;
        max-width: 320px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: rgba(20, 12, 6, 0.98) !important;
        z-index: 9998 !important;
        padding: 56px 12px 24px !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.7) !important;
        transform: translateX(-105%) !important;
        transition: transform 0.25s ease !important;
        box-sizing: border-box !important;
        float: none !important;
        margin: 0 !important;
    }
    #MenuColumn.is-open {
        transform: translateX(0) !important;
    }

    /* Backdrop quando menu aberto */
    #oniworld-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9997;
    }
    #oniworld-mobile-backdrop.is-open { display: block; }

    /* Hamburger button — top-right */
    #oniworld-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 9999;
        width: 44px;
        height: 44px;
        background: rgba(20, 12, 6, 0.95);
        border: 1px solid #8B6914;
        border-radius: 6px;
        color: #F1E0C6;
        font-size: 0;
        cursor: pointer;
        padding: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,.5);
    }
    #oniworld-hamburger::before {
        content: '';
        display: block;
        width: 22px;
        height: 16px;
        background-image:
            linear-gradient(#F1E0C6, #F1E0C6),
            linear-gradient(#F1E0C6, #F1E0C6),
            linear-gradient(#F1E0C6, #F1E0C6);
        background-size: 100% 2px;
        background-position: 0 0, 0 50%, 0 100%;
        background-repeat: no-repeat;
    }
    #oniworld-hamburger.is-open::before {
        background-image:
            linear-gradient(#F1E0C6, #F1E0C6),
            linear-gradient(#F1E0C6, #F1E0C6);
        background-size: 22px 2px;
        background-position: 0 50%, 0 50%;
        transform: rotate(45deg);
    }

    /* ContentColumn vai 100% width, e nao precisa esperar sidebar (que esta fora do flow) */
    #ContentColumn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Touch targets — links de navegacao 44px */
    .menuitem, .menuitem a, .Submenu, .Submenu a,
    .MenuButton, .MenuItemTitle {
        min-height: 44px !important;
        padding: 10px 12px !important;
        line-height: 1.3 !important;
        font-size: 14px !important;
    }
    .Submenu a {
        display: block !important;
    }

    /* Tabelas viram block + scroll horizontal touch */
    table.Table1, table.Table2, table.Table3, table.Table4, table.Table5,
    .TableContainer, .InnerTableContainer, .TableContent {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    table.TableContent, .TableContent table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Imagens responsivas, mas preserva icones fixos */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    .CaptionEdgeLeftTop img, .CaptionEdgeRightTop img,
    img[src*="loginbox"], img[src*="header/icon-"], img[src*="general/minus"],
    img[src*="general/plus"], img[src*="circle-symbol"], .flag-switcher img {
        max-width: none !important;
        width: auto !important;
    }

    /* Forms / login boxes fluido */
    .LoginBox, .InfoBox, .ContentBoxHeadline, .news-image, .news-text,
    #Loginbox, #LoginstatusContainer {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* BigButton touch friendly */
    .BigButton, .ButtonText, button, input[type="submit"], input[type="button"] {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    .BigButton {
        width: 100% !important;
        max-width: 320px !important;
        margin: 8px auto !important;
        display: block !important;
    }

    /* Tipografia */
    h1, .news-headline { font-size: 20px !important; line-height: 1.3 !important; }
    h2 { font-size: 17px !important; line-height: 1.3 !important; }
    h3 { font-size: 15px !important; line-height: 1.3 !important; }
    p, li { font-size: 14px !important; line-height: 1.55 !important; }

    /* News images viram block centradas */
    .news-content img,
    .NewsHeadline img,
    div[style*="float:left"] img,
    div[style*="float: left"] img {
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        margin: 0 auto 12px !important;
    }

    /* Sticky CTA — encolhe + ancora em viewport */
    #oniworld-sticky-cta {
        position: fixed !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        right: 8px !important;
        left: 8px !important;
        max-width: calc(100vw - 16px) !important;
        font-size: 11px !important;
        padding: 10px 32px 10px 12px !important;
        box-sizing: border-box !important;
    }
    #oniworld-sticky-cta a {
        font-size: 11px !important;
        padding: 10px 12px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    #oniworld-sticky-cta button[type="button"],
    #oniworld-sticky-cta button {
        position: absolute !important;
        top: 4px !important;
        right: 8px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        background: transparent !important;
        border: none !important;
        color: #F1E0C6 !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    /* SEO footer */
    .seo-footer-links { padding: 24px 12px !important; }
    .seo-footer-links h3 { font-size: 13px !important; }

    /* Highscores / qualquer table de dados — scroll horizontal */
    .TableContainer table[width],
    .table-bordered, table.gallery, table.stats {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-dialog { margin: 8px !important; }
    iframe { max-width: 100% !important; }

    /* Decorativos grandes hidden no mobile */
    .ad-728, .banner-728x90, .desktop-only {
        display: none !important;
    }

    /* Headline images / banners */
    .Headline img, .BoxHeadline img, .ContentBoxHeadline img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Quando menu aberto, body nao rola */
    body.menu-open { overflow: hidden !important; }
}

/* ≤480px */
@media (max-width: 480px) {
    body { font-size: 13px !important; }
    h1, .news-headline { font-size: 18px !important; }
    h2 { font-size: 15px !important; }

    .seo-footer-links > div {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #oniworld-sticky-cta {
        font-size: 10px !important;
        padding: 8px 32px 8px 10px !important;
    }
    #oniworld-sticky-cta > div:first-child { font-size: 11px !important; }
    #oniworld-sticky-cta a {
        font-size: 10px !important;
        padding: 8px 10px !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    #oniworld-sticky-cta { bottom: max(6px, env(safe-area-inset-bottom)) !important; }
}

/* ================================================================
   v3 (2026-05-10) — QA report parte 2 fixes:
   - Reset position:absolute em widgets tibiacom (era a fonte do
     ranking sobrepondo news, networks bar bleeding, etc)
   - Slim sticky CTA (bottom strip 50px com 1 botao)
   - Hide decorative corners no mobile (eram orfaos quebrados)
   - Whitespace 14px nos boxes de conteudo
   - Flatten box decorations (cleaner mobile aesthetic)
   ================================================================ */

@media (max-width: 768px) {

    /* === RESET de position absolute em widgets tibiacom === */
    /* basic.css tem 93 position:absolute pra layout 1075px desktop.
       No mobile, esses widgets escapam o flow e sobrepoem o conteudo.
       Reset cirurgico nos suspeitos identificados. */
    #News, #FeaturedArticle, #Boss, #Creature, #NetworksBox,
    #FacebookSendBox, #HelperDivContainer, #ButtonText,
    #BackgroundContainerCenter, #BackgroundContainerLeftEnd,
    #BackgroundContainerRightEnd, #MenuTop, #LogoLink, #Link,
    .Box, .BoxContent, .SmallMenuBox, .ExtendedBox,
    .SmallBoxBorder, .SmallBoxTop, .SmallBoxBottom,
    .SmallBoxButtonContainer, .ContentBoxHeadline,
    .CaptionContainer, .CaptionInnerContainer,
    .news-item, .NewsHeadline, .NewsHeadlineBackground {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* #News especificamente — era container absoluto que cobria tudo */
    #News {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
    }

    /* #LeftArtwork (logo header) e #Loginbox: dentro do MenuColumn (off-canvas),
       mantem absolute la dentro mas zera right/left que vazavam */
    #LeftArtwork, #Loginbox, #LoginTop, #LoginBottom, #LoginButton {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        margin: 0 auto 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* === HIDE: decorative corners que viram orfaos no mobile === */
    .Corner-tl, .Corner-tr, .Corner-bl, .Corner-br,
    .CornerWrapper-t, .CornerWrapper-b,
    .CaptionEdgeLeftTop, .CaptionEdgeRightTop,
    .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
    .CaptionBorderTop, .CaptionBorderBottom,
    .CaptionVerticalLeft, .CaptionVerticalRight,
    .ContentContainer .Corner-tl, .ContentContainer .Corner-tr {
        display: none !important;
    }

    /* === FLATTEN: box decorations viram cards limpos no mobile === */
    .Box, .BoxContent, .SmallMenuBox, .ExtendedBox,
    .news-item, .NewsHeadlineBackground {
        background-image: none !important;
        background-color: rgba(20, 12, 6, 0.78) !important;
        border: 1px solid #8B6914 !important;
        border-radius: 6px !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
    .CaptionContainer {
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .CaptionInnerContainer {
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .CaptionInnerContainer .Text,
    .ContentBoxHeadline {
        background: linear-gradient(180deg, #8B6914, #6b5110) !important;
        color: #fff !important;
        padding: 10px 14px !important;
        font-weight: bold !important;
        text-align: left !important;
        border-radius: 6px 6px 0 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        position: static !important;
    }

    /* === WHITESPACE: respiro nos boxes de conteudo === */
    .TableContent, .InnerTableContainer,
    .news-content, .news-text, .NewsHeadlineText,
    .Box .TableContentContainer, .ExtendedBox .TableContentContainer {
        padding: 14px !important;
        background: transparent !important;
    }
    .TableContent table, .InnerTableContainer table {
        background: transparent !important;
    }
    .NewsHeadline {
        padding: 10px 14px !important;
    }
    .NewsHeadlineDate, .NewsHeadlineText {
        padding: 4px 0 !important;
    }

    /* === INFOBAR (top utility: Baixar/Instagram/Facebook) === */
    /* QA: bordas orfas, items quebrando. Fix: flex wrap + clean bg */
    .InfoBar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        background: rgba(20,12,6,0.9) !important;
        background-image: none !important;
        border: none !important;
        margin: 0 0 8px 0 !important;
        box-sizing: border-box !important;
    }
    .InfoBar > *, .InfoBarBlock, .InfoBarSmallElement, .InfoBarBigLogo {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    .InfoBar a {
        padding: 6px 10px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* === STICKY CTA: vira faixa fina rodape com 1 botao === */
    /* QA: bloco grande comendo 25-30% do viewport. Reduzir pra ~50px */
    #oniworld-sticky-cta {
        bottom: env(safe-area-inset-bottom) !important;
        right: 0 !important;
        left: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* Esconde titulo "Comece a Jogar Agora" */
    #oniworld-sticky-cta > div:first-of-type {
        display: none !important;
    }
    /* Container dos botoes vira flex full-width */
    #oniworld-sticky-cta > div:nth-of-type(2) {
        display: flex !important;
        gap: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    /* Esconde botao secundario (Baixar Client — ja tem na nav/footer) */
    #oniworld-sticky-cta > div:nth-of-type(2) > a:last-child {
        display: none !important;
    }
    /* Botao primario vira faixa full-width estilo "buy now" */
    #oniworld-sticky-cta > div:nth-of-type(2) > a:first-child {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        background: #c89a36 !important;
        color: #1a0f08 !important;
        border-radius: 0 !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 -4px 16px rgba(0,0,0,.5) !important;
        border: none !important;
    }
    /* Close button: pequeno, em cima da faixa */
    #oniworld-sticky-cta button {
        position: absolute !important;
        top: -32px !important;
        right: 8px !important;
        width: 28px !important;
        height: 28px !important;
        background: rgba(0,0,0,.85) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50% !important;
        font-size: 16px !important;
        line-height: 1 !important;
        padding: 0 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10000 !important;
    }

    /* Padding bottom no body pra nao cobrir conteudo (sticky CTA fica fixed) */
    body { padding-bottom: 60px !important; }
}

/* ================================================================
   v4 (2026-05-10) — QA report parte 3:
   Ranking widget custom OniWorld (.rank*) com width:180px hardcoded
   inline + .rank_outfit position:absolute left:-15px margin-top:-30px
   estava sobrepondo conteudo (avatares escapando do container).
   Tambem flatten Border_1/2/3 e BorderTitleText decorativas.
   ================================================================ */

@media (max-width: 768px) {

    /* === Ranking widget custom OniWorld === */
    /* Containers viram fluido com border-radius limpo */
    .rank, .rank_header, .rank_content, .rank_bottom {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        line-height: 1.4 !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }
    .rank {
        margin: 16px 0 !important;
        background: rgba(20, 12, 6, 0.82) !important;
        border: 1px solid #8B6914 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }
    .rank_header {
        background: linear-gradient(180deg, #8B6914, #6b5110) !important;
        color: #fff !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        text-align: left !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
    }
    .rank_content {
        padding: 6px 10px !important;
        margin: 0 !important;
    }
    .rank_player {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 6px !important;
        margin: 0 !important;
        min-height: 56px !important;
        border-bottom: 1px solid rgba(139, 105, 20, 0.25) !important;
    }
    .rank_player:last-child { border-bottom: none !important; }

    /* CRITICAL: rank_outfit estava position:absolute left:-15px margin-top:-30px
       — escapava do container e sobrepunha news. Reset pra flex child. */
    .rank_outfit {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 56px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    .rank_text {
        margin-left: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 13px !important;
        color: #F1E0C6 !important;
    }
    .rank_text a, .rank_text b {
        color: #F1E0C6 !important;
    }
    .rank_player:nth-of-type(odd),
    .rank_player:nth-of-type(even) {
        background-color: transparent !important;
    }
    .rank_button {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 14px 16px !important;
        background-image: none !important;
        background: #8B6914 !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: none !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        display: block !important;
    }
    .rank_bottom {
        display: none !important;
    }

    /* === Border_1/2/3 e BorderTitleText: decorativos tibiacom (background images) === */
    .Border_1, .Border_2, .Border_3 {
        background-image: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    .BorderTitleText {
        background-image: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* InfoBar: flatten decorations + clean topbar */
    .InfoBar img.InfoBarBigLogo {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
    }
    .InfoBarLinks {
        text-decoration: none !important;
        padding: 6px 8px !important;
    }
    .InfoBarSmallElement, .InfoBarNumbers {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Padding bottom recalculado: sticky CTA agora 50px + buffer */
    body { padding-bottom: 56px !important; }
}

/* ================================================================
   v5 (2026-05-10) — Alinhar mobile com referência desktop:
   - Mobile header fixo (logo + Entrar) replicando identidade do desktop
     (no desktop o logo OniWorld 196px no LeftArtwork e LoginBox sempre
      estão visíveis; no mobile estavam escondidos no off-canvas drawer)
   - ThemeboxesColumn (criatura/boss/ranking) volta pro flow do conteúdo
     em vez de ficar position:absolute right:0 fora do viewport
   - .scrollToTop hidden no mobile (cobria pelo sticky CTA)
   ================================================================ */

/* Header mobile escondido no desktop por padrão */
#oniworld-mobile-header { display: none; }

@media (max-width: 768px) {

    /* === MOBILE HEADER FIXO (logo + Entrar) === */
    #oniworld-mobile-header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 52px !important;
        z-index: 9990 !important;
        background: rgba(20, 12, 6, 0.97) !important;
        border-bottom: 1px solid #8B6914 !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 60px 0 12px !important; /* 60px right deixa espaço pro hamburger */
        box-sizing: border-box !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        color: #F1E0C6 !important;
        font-family: Verdana, Arial, sans-serif !important;
        font-weight: bold !important;
        font-size: 14px !important;
        letter-spacing: 0.5px !important;
        min-height: 44px !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo img {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        border-radius: 4px !important;
        margin: 0 !important;
        position: static !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__login {
        display: inline-flex !important;
        align-items: center !important;
        background: #8B6914 !important;
        color: #fff !important;
        text-decoration: none !important;
        padding: 8px 14px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        min-height: 36px !important;
        line-height: 1 !important;
    }

    /* Hamburger reposicionado dentro do header mobile (top-right do header) */
    #oniworld-hamburger {
        top: 4px !important;
        right: 8px !important;
    }

    /* Body com padding-top pra não cobrir conteúdo abaixo do header fixo */
    body { padding-top: 56px !important; }

    /* === ThemeboxesColumn (criatura/boss/ranking) volta pro flow do conteúdo === */
    /* Desktop: position:absolute right:0 width:180px sidebar direita.
       Mobile: vira bloco depois do conteúdo principal. */
    #ThemeboxesColumn {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 0 0 !important;
        padding: 0 !important;
        text-align: left !important;
        float: none !important;
        clear: both !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* RightArtwork (criatura/boss/pedestal) vira faixa horizontal compacta */
    #RightArtwork {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        justify-content: center !important;
        align-items: center !important;
        background: rgba(20, 12, 6, 0.78) !important;
        border: 1px solid #8B6914 !important;
        border-radius: 6px !important;
        padding: 14px !important;
        margin: 0 0 12px 0 !important;
    }
    #RightArtwork #Creature,
    #RightArtwork #Boss {
        position: static !important;
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        margin: 0 !important;
        background: rgba(241, 224, 198, 0.05) !important;
        border: 1px solid rgba(139, 105, 20, 0.4) !important;
        border-radius: 4px !important;
        padding: 4px !important;
        display: inline-block !important;
    }
    /* Pedestal gif decorativo (300+kb) já tem info no menu/InfoBar — esconde */
    #RightArtwork #PedestalAndOnline {
        display: none !important;
    }

    /* Themeboxes container (já tem regras .rank no v4) */
    #Themeboxes {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* === scrollToTop esconde (cobria pelo sticky CTA full-width) === */
    .scrollToTop {
        display: none !important;
    }
}

/* ================================================================
   v6 (2026-05-10) — Senior pass com referência rubinot.com.br:
   - Restaurar tema PERGAMINHO do desktop tibiacom no mobile
     (v3 forçou rgba(20,12,6,.78) dark; desktop usa #debb9d/#fff2db
      claro com texto #5a2800 — mobile estava inconsistente com desktop)
   - HAMBURGER agora vive DENTRO do <header> como flex child (era
     position:fixed solto e conflitava com o header v5; usuário
     reportou que não funcionava)
   - ESCONDER InfoBar mobile (RubinOT recomenda topbar limpa: só
     hamburger + logo + login; secundário fica no menu)
   - box-sizing: border-box em todos containers mobile
   - Padding mais generoso (RubinOT #3: respiro)
   ================================================================ */

@media (max-width: 768px) {

    /* Box-sizing universal no mobile (RubinOT #3: padding não estoura container) */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    /* === RESTAURAR TEMA PERGAMINHO DESKTOP === */
    /* v3 forçou .Box e .BoxContent pra rgba(20,12,6,.78) — reverter pras cores
       reais do tibiacom: .Box #debb9d (bege), .BoxContent #fff2db (creme),
       texto #5a2800 (marrom escuro). Visual de pergaminho consistente com desktop. */
    .Content .Box,
    #News .Box, #FeaturedArticle .Box,
    .Box, .news-item {
        background-image: none !important;
        background-color: #debb9d !important;
        border: 2px solid #3a3738 !important;
        border-radius: 4px !important;
        color: #5a2800 !important;
    }
    .Content .BoxContent,
    #News .BoxContent, #FeaturedArticle .BoxContent,
    .BoxContent {
        background-image: none !important;
        background-color: #fff2db !important;
        color: #5a2800 !important;
        border-radius: 0 0 4px 4px !important;
    }
    /* NewsHeadlineBackground volta pro tom dourado/marrom desktop */
    .NewsHeadlineBackground {
        background-color: #5a2800 !important;
        background-image: none !important;
    }
    .NewsHeadlineText, .NewsHeadlineDate {
        color: #fff !important;
    }
    /* Texto e links pretos/marrom dentro dos boxes (não mais creme em fundo dark) */
    .BoxContent, .BoxContent p, .BoxContent li, .BoxContent td, .BoxContent span,
    .news-content, .news-text {
        color: #5a2800 !important;
    }
    .BoxContent a, .news-content a, .news-text a {
        color: #8B0000 !important;
    }
    .BoxContent strong, .BoxContent b {
        color: #3a1700 !important;
    }
    /* CaptionInnerContainer / ContentBoxHeadline (cabeçalho de seção) ficam dourados como desktop */
    .CaptionInnerContainer .Text,
    .ContentBoxHeadline {
        background: linear-gradient(180deg, #c89a36, #8B6914) !important;
        color: #1a0f08 !important;
    }

    /* === HAMBURGER agora dentro do header (não mais position:fixed solto) === */
    /* Header vira flex container com hamburger | logo | entrar */
    #oniworld-mobile-header {
        padding: 0 8px !important;
        gap: 8px !important;
    }
    #oniworld-hamburger {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        flex: 0 0 44px !important;
        order: 0 !important;
        margin: 0 !important;
        z-index: auto !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo {
        order: 1 !important;
        flex: 1 1 auto !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__login {
        order: 2 !important;
        flex: 0 0 auto !important;
    }

    /* === ESCONDER InfoBar mobile (RubinOT #1) === */
    /* Top bar com Baixar/Instagram/Facebook/Server Status: redundante vs
       hambúrguer + sticky CTA. Limpa o topo. */
    .InfoBar {
        display: none !important;
    }

    /* === PADDING generoso (RubinOT #3 — respiro) === */
    .TableContent, .InnerTableContainer,
    .news-content, .news-text,
    .Box .TableContentContainer, .ExtendedBox .TableContentContainer {
        padding: 18px !important;
    }
    .NewsHeadline {
        padding: 12px 14px !important;
    }
    /* Tipografia mais respirável */
    .BoxContent p, .news-content p, .news-text p {
        margin: 0 0 14px 0 !important;
        line-height: 1.6 !important;
    }
    .BoxContent ul, .BoxContent ol,
    .news-content ul, .news-content ol {
        padding-left: 22px !important;
        margin: 8px 0 14px 0 !important;
    }
    .BoxContent h3, .news-content h3 {
        margin: 18px 0 8px 0 !important;
        color: #5a2800 !important;
    }
}

/* ================================================================
   v7 (2026-05-10) — Bugs reportados pós-v6:
   - Hamburger ainda não funcionava em iPhone real (cache + iOS quirks
     com font-size:0 button + z-index/touch). Defesa em profundidade:
     onclick/ontouchend inline + touch-action manipulation +
     tap-highlight visível + cursor:pointer
   - Página "Entrar" (?subtopic=accountmanagement) ruim de ler em
     iPhone 16 Pro (393pt): formulário é tabela com 2 <td> lado-a-lado
     que aperta tudo. Forçar block layout no mobile.
   - Form: empilhar inputs full-width, labels acima, botões full-width
   ================================================================ */

@media (max-width: 768px) {

    /* === HAMBURGER: defesa em profundidade pra garantir click no iOS === */
    #oniworld-hamburger {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(241, 224, 198, 0.3) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
    }
    #oniworld-hamburger:active {
        background: rgba(139, 105, 20, 0.4) !important;
    }
    /* Garantir que o ::before NÃO bloqueie events (transparente pro hit-test) */
    #oniworld-hamburger::before {
        pointer-events: none !important;
    }
    /* Header não pode bloquear hit-test em filhos */
    #oniworld-mobile-header {
        pointer-events: auto !important;
    }
    #oniworld-mobile-header > * {
        pointer-events: auto !important;
    }

    /* === LOGIN/CRIAR CONTA form: tabela aninhada vira block === */
    /* Desktop: <table><tr><td 70% inputs></td><td 30% buttons></td></tr></table>
       Mobile: empilhar verticalmente, full-width tudo. */

    /* Tabelas internas dos forms (Table1/InnerTableContainer) viram block */
    .TableContainer .Table1,
    .TableContainer .Table3,
    .TableContent .Table1,
    .InnerTableContainer table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }
    .TableContainer .Table1 tbody,
    .TableContainer .Table3 tbody,
    .TableContent .Table1 tbody,
    .InnerTableContainer tbody {
        display: block !important;
        width: 100% !important;
    }
    .TableContainer .Table1 tr,
    .TableContainer .Table3 tr,
    .TableContent .Table1 tr,
    .InnerTableContainer tr {
        display: block !important;
        width: 100% !important;
    }
    .TableContainer .Table1 td,
    .TableContainer .Table3 td,
    .TableContent .Table1 td,
    .InnerTableContainer td {
        display: block !important;
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    /* LabelV (label coluna esquerda) vira label acima do input */
    td.LabelV, th.LabelV {
        display: block !important;
        width: 100% !important;
        padding: 14px 0 6px 0 !important;
        font-weight: bold !important;
        font-size: 14px !important;
        color: #5a2800 !important;
        text-align: left !important;
        background: transparent !important;
    }
    td.LabelV span, th.LabelV span {
        color: #5a2800 !important;
    }
    /* LabelV vazia (linha só de checkbox) some no mobile */
    td.LabelV:empty {
        display: none !important;
    }
    /* Inputs full-width nos forms */
    .TableContainer input[type="text"],
    .TableContainer input[type="password"],
    .TableContainer input[type="email"],
    .TableContainer input[type="number"],
    .TableContainer select,
    .TableContent input[type="text"],
    .TableContent input[type="password"],
    .TableContent input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border: 1px solid #8b6914 !important;
        background: #fff !important;
        color: #5a2800 !important;
        border-radius: 4px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    .TableContainer input:focus,
    .TableContent input:focus {
        outline: 2px solid #c89a36 !important;
        outline-offset: 1px !important;
    }

    /* LoginFormButtonCell (coluna direita botões) — vira bloco abaixo */
    #LoginFormButtonCell, td#LoginFormButtonCell {
        display: block !important;
        width: 100% !important;
        padding: 16px 0 0 0 !important;
        text-align: center !important;
    }
    #LoginFormButtonCell > table, #LoginFormButtonCell table {
        display: block !important;
        width: 100% !important;
    }
    #LoginFormButtonCell div[style*="float: right"],
    #LoginFormButtonCell div[style*="float:right"] {
        float: none !important;
        width: 100% !important;
    }

    /* Botões grandes (BigButton/MediumButton) full-width empilhados */
    .BigButton, .MediumButton, .ButtonText {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
        background-image: none !important;
        background: linear-gradient(180deg, #c89a36, #8b6914) !important;
        border-radius: 4px !important;
        padding: 0 !important;
        text-align: center !important;
        position: static !important;
    }
    .BigButton input[type="submit"],
    .BigButton input[type="image"],
    .MediumButton input[type="submit"],
    .MediumButton input[type="image"],
    .BigButtonText, .MediumButtonText {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 14px 16px !important;
        background: transparent !important;
        background-image: none !important;
        color: #1a0f08 !important;
        font-size: 15px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        border: none !important;
        cursor: pointer !important;
    }
    /* Esconde overlay de hover (visibility:hidden no desktop, mas estraga layout mobile) */
    .BigButtonOver, .MediumButtonOver {
        display: none !important;
    }

    /* TableContent border do form fica mais visível no fundo escuro */
    .TableContent[style*="border"] {
        border-color: #8b6914 !important;
        border-radius: 4px !important;
    }

    /* Form de login/createaccount: respiro extra */
    form .TableContainer {
        margin: 12px 0 !important;
    }

    /* Checkbox "Lembrar-me" alinhado decente */
    input[type="checkbox"] + label,
    label[for="remember_me"] {
        display: inline-block !important;
        margin-left: 6px !important;
        color: #5a2800 !important;
        font-size: 14px !important;
        vertical-align: middle !important;
    }
    input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        vertical-align: middle !important;
    }
}

/* ================================================================
   v8 (2026-05-10) — Bugs visuais reportados pelo screenshot iPhone 16:
   - .BoxContent tinha min-height:367px / height:387px hardcoded no
     basic.css desktop -> deixava bloco MARROM GIGANTE VAZIO embaixo
     do form de login (60% da tela!). Forçar height:auto.
   - Caption header (Entrar na Conta / Novo Jogador) tinha decorações
     CaptionEdge/Vertical/Border SOBREPONDO o texto do título em
     algumas páginas. Reforçar display:none + também esconder
     CaptionContainer.CaptionEdge* via specificity de pai.
   - Botão Entrar/Esqueci ficava fora do flow. Garantir LoginFormButtonCell
     visível e centralizado abaixo dos inputs.
   ================================================================ */

@media (max-width: 768px) {

    /* === Reset min-height/height fixed do tibiacom desktop === */
    /* basic.css linha 810: .Content .BoxContent { min-height: 367px; height: 387px }
       — no mobile isso cria um bloco vazio gigante. */
    .Content .BoxContent,
    .BoxContent,
    .Box, .Content .Box {
        min-height: 0 !important;
        height: auto !important;
    }
    .TableContainer, .TableContentContainer, .InnerTableContainer {
        min-height: 0 !important;
        height: auto !important;
    }

    /* === Caption decorations: nuke definitivo === */
    /* v3 já tinha display:none em algumas, mas selector mais fraco;
       reforçar com specificity de container pai. */
    .TableContainer .CaptionContainer .CaptionEdgeLeftTop,
    .TableContainer .CaptionContainer .CaptionEdgeRightTop,
    .TableContainer .CaptionContainer .CaptionEdgeLeftBottom,
    .TableContainer .CaptionContainer .CaptionEdgeRightBottom,
    .TableContainer .CaptionContainer .CaptionBorderTop,
    .TableContainer .CaptionContainer .CaptionBorderBottom,
    .TableContainer .CaptionContainer .CaptionVerticalLeft,
    .TableContainer .CaptionContainer .CaptionVerticalRight,
    .CaptionContainer span[class^="Caption"],
    .CaptionInnerContainer span[class^="Caption"],
    .CaptionEdgeLeftTop, .CaptionEdgeRightTop,
    .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
    .CaptionBorderTop, .CaptionBorderBottom,
    .CaptionVerticalLeft, .CaptionVerticalRight {
        display: none !important;
        background-image: none !important;
    }
    /* O div.Text é o TÍTULO real — garantir visibilidade e legibilidade */
    .CaptionInnerContainer .Text,
    .CaptionContainer .Text,
    div.Text {
        display: block !important;
        position: static !important;
        background: linear-gradient(180deg, #c89a36, #8b6914) !important;
        color: #1a0f08 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 12px 14px !important;
        border-radius: 4px 4px 0 0 !important;
        text-align: left !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    /* === Login form: container cleanup pra remover whitespace gigante === */
    /* O Loginbox/LoginCreateAccountBox que ficou no MenuColumn não deve ter
       altura no mobile. Reset. */
    #LoginCreateAccountBox, #Loginbox, #LoginButton {
        min-height: 0 !important;
        height: auto !important;
    }

    /* === Garantir Submit/Account lost buttons visíveis === */
    form .BigButton, form .MediumButton {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Tabela de 2 colunas que segura os botões (table width=100% > tr > 2 td) */
    form > table[width="100%"] tr,
    form > table tr {
        display: block !important;
        width: 100% !important;
    }
    form > table[width="100%"] td,
    form > table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    form > table[width="100%"] td > table,
    form > table td > table {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    form td[style*="border:0px"], form td[style*="border: 0px"] {
        border: none !important;
        padding: 4px 0 !important;
    }

    /* InfoBoxes pequenas (que aparecem nas páginas com mensagens) */
    .InfoBox, .NotificationBox {
        min-height: 0 !important;
        height: auto !important;
        padding: 12px 14px !important;
        background-color: #fff2db !important;
        color: #5a2800 !important;
        border: 1px solid #8b6914 !important;
        border-radius: 4px !important;
        margin: 12px 0 !important;
    }

    /* Reduzir gaps brancos entre boxes */
    .Content > .Box + .Box,
    .Content > .TableContainer + .TableContainer {
        margin-top: 12px !important;
    }
    .Content br + br { display: none !important; }
}

/* ================================================================
   v9 (2026-05-10) — DOM measurement (puppeteer) revelou:
   - 2 inputs submit "Login" e "Account lost?" em position:absolute na
     MESMA posição (top:331 left:33) -> sobrepostos visualmente como
     "ACCOUNTLOST?" no print.
   - ContentRow herda position:relative top:155px do desktop ->
     elementos dentro renderizam com offset, criando vazio gigante.
   - Caption decorations não estavam display:none consistentemente.
   ATAQUE: position:static em TUDO + force flow vertical normal.
   ================================================================ */

@media (max-width: 768px) {

    /* === GLOBAL position:static em form elements (root cause do sobreposto) === */
    /* tibiacom desktop posiciona BigButton/MediumButton com absolute pra
       efeito visual; no mobile EMPILHA tudo em mesma posição. Reset total. */
    form input[type="submit"],
    form input[type="image"],
    form input[type="button"],
    .BigButton, .BigButton *, .BigButtonOver,
    .MediumButton, .MediumButton *, .MediumButtonOver,
    .MediumButtonForm, .MediumButtonBackground,
    .ButtonText, .BigButtonText, .MediumButtonText {
        position: static !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
    }
    /* div com float:right/left inline (HTML invalido do tibiacom) */
    form div[style*="float: right"],
    form div[style*="float:right"],
    form div[style*="float: left"],
    form div[style*="float:left"],
    form table[style*="float: left"],
    form table[style*="float: right"] {
        float: none !important;
        width: 100% !important;
        display: block !important;
        position: static !important;
    }

    /* === ContentRow: zerar top:155 herdado do desktop === */
    #ContentRow {
        top: 0 !important;
        position: static !important;
    }
    #ContentColumn, #ContentRow, #Bodycontainer, #ArtworkHelper {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    /* === Caption "Entrar na Conta" / "Novo Jogador": KILL decorações === */
    /* Os spans CaptionEdge*, CaptionVertical*, CaptionBorder* SÃO os que
       sobrepõem com background-image. Nuke total. */
    .CaptionContainer span[class^="Caption"],
    .CaptionInnerContainer span[class^="Caption"],
    .CaptionInnerContainer > span,
    .CaptionContainer > span {
        display: none !important;
        background-image: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
    }
    /* Garantir que só o .Text (titulo real) seja visível dentro do Caption */
    .CaptionInnerContainer > *:not(.Text) {
        display: none !important;
    }
    .CaptionInnerContainer .Text {
        display: block !important;
    }

    /* === Submit buttons: agora vão renderizar como buttons normais empilhados === */
    /* Pai .BigButton vira flex container vertical, child <input> ocupa todo */
    .BigButton {
        display: block !important;
        background-image: none !important;
        background: linear-gradient(180deg, #c89a36, #8b6914) !important;
        border: 1px solid #6b5110 !important;
        border-radius: 4px !important;
        margin: 8px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        cursor: pointer !important;
        text-align: center !important;
        overflow: hidden !important;
    }
    .BigButton > div, .BigButton > div > div {
        display: block !important;
        width: 100% !important;
        background-image: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .BigButtonText, .BigButton input[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        background: transparent !important;
        background-image: none !important;
        color: #1a0f08 !important;
        font-size: 15px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        padding: 14px 16px !important;
        border: none !important;
        cursor: pointer !important;
        min-height: 48px !important;
        line-height: 1.2 !important;
    }
    /* MediumButton igual */
    .MediumButton, .MediumButtonForm, .MediumButtonBackground {
        display: block !important;
        background-image: none !important;
        background: linear-gradient(180deg, #c89a36, #8b6914) !important;
        border: 1px solid #6b5110 !important;
        border-radius: 4px !important;
        margin: 8px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        cursor: pointer !important;
        text-align: center !important;
    }
    .MediumButton input[type="image"],
    .MediumButtonForm input[type="image"] {
        width: auto !important;
        max-width: 100% !important;
        height: 32px !important;
        margin: 8px auto !important;
        background: transparent !important;
        display: block !important;
    }

    /* Esconder BigButtonOver/MediumButtonOver (overlay hover, atrapalha mobile) */
    .BigButtonOver, .MediumButtonOver {
        display: none !important;
    }

    /* === Tabela horrenda 2 td side-by-side dos botões login: vira block === */
    /* O HTML inválido tem <table width="100%"><tr><td>(login btn form fechado aqui)
       <td>(account lost btn aqui)</tr></table>. Forçar tudo em block. */
    .TableContainer + br + table[width="100%"],
    form + br + table[width="100%"],
    table[width="100%"][cellpadding="0"][cellspacing="0"]:not(.Table1):not(.Table2):not(.Table3):not(.Table4):not(.Table5):not(.TableContent) {
        display: block !important;
        width: 100% !important;
    }

    /* hide autofocus scroll quirk: prevent #ContentRow scroll-anchor jump */
    /* (Safari iOS scrolls to autofocused input on load — adicionar scroll-padding) */
    html { scroll-padding-top: 64px !important; }
}

/* ================================================================
   v10 (2026-05-10) — Bug visual root cause:
   - basic.css desktop define .TableContainer .CaptionContainer
     { height: 100%; background-color: #5f4d41 !important }
     ou seja, o caption pega altura do pai (TableContainer com form
     dentro = ~700-1200px) e fica MARROM ESCURO -> bloco gigante vazio!
   - Botão Login com texto cortado: .BigButton tem overflow:hidden +
     padding criando clipping de texto em mobile.
   - Caption "Entrar na Conta" precisa ser visível como header dourado.
   ================================================================ */

@media (max-width: 768px) {

    /* === CaptionContainer: parar de pegar height do pai === */
    /* IMPORTANT: basic.css linha 1561 tem !important no background-color */
    .TableContainer .CaptionContainer,
    .CaptionContainer {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        background-color: transparent !important;
        background-image: none !important;
        font-size: inherit !important;
        position: static !important;
        margin: 0 !important;
    }
    .TableContainer .CaptionContainer .CaptionInnerContainer,
    .CaptionInnerContainer {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        background-color: transparent !important;
        padding: 0 !important;
        position: static !important;
    }

    /* .Text (título "Entrar na Conta", "Novo Jogador", "Ranking") visível como header dourado */
    .CaptionContainer .Text,
    .CaptionInnerContainer .Text,
    .TableContainer .CaptionContainer .Text {
        display: block !important;
        position: static !important;
        background: linear-gradient(180deg, #c89a36, #8b6914) !important;
        color: #1a0f08 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 12px 16px !important;
        border-radius: 4px 4px 0 0 !important;
        text-align: left !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        height: auto !important;
        width: auto !important;
        top: auto !important;
        left: auto !important;
    }

    /* === Fix botão texto cortado: BigButton overflow visible + reset === */
    .BigButton {
        overflow: visible !important;
        height: auto !important;
        min-height: 48px !important;
    }
    .BigButton > div, .BigButton > div > div {
        overflow: visible !important;
        height: auto !important;
        min-height: 48px !important;
    }
    /* Reset font-size que pode estar herdando 1pt do CaptionContainer */
    .BigButton input[type="submit"], .BigButtonText {
        font-size: 15px !important;
        height: auto !important;
        min-height: 48px !important;
        line-height: 1.4 !important;
        padding: 14px 20px !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    /* Reset font-size 1pt herdado em formas e tabelas (CaptionContainer força 1pt) */
    form, form *, .Content, .Content * {
        font-size: inherit;
    }
    body { font-size: 14px !important; }
    .BoxContent, .news-content, .news-text {
        font-size: 14px !important;
    }

    /* TableContainer não pega width:100% absurdo */
    .TableContainer {
        position: static !important;
        margin: 12px 0 !important;
    }
}

/* ================================================================
   v11 (2026-05-10) — Alinhar identidade visual mobile com desktop:
   Desktop OniWorld usa headers MARROM ESCURO (#5a2800) com texto
   branco/creme — NÃO gradient dourado como no v10.
   - Captions tipo "Entrar na Conta" / "Novo Jogador" = marrom escuro
   - Page header tipo "Account Management" / "Latest News" = azul marinho
   - Body BG mantém textura artwork (já está aplicada via inline)
   - Logo do header mobile um pouco maior (40px) pra mais identidade
   - Boxes ganham border interna castanha como desktop
   ================================================================ */

@media (max-width: 768px) {

    /* === HEADERS principais de page (Account Management, etc) === */
    /* No desktop são azul marinho com texto branco — diferente dos
       captions internos que são marrom. */
    h1, .Content > h1, .news-headline {
        background: linear-gradient(180deg, #2a3a5a, #1c2a4a) !important;
        color: #f5e8c8 !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 12px 0 0 0 !important;
        border-radius: 4px 4px 0 0 !important;
        border: 1px solid #0d1f3a !important;
        text-align: left !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    /* === CAPTIONS internos (Entrar na Conta, Novo Jogador, Ranking) === */
    /* No desktop são marrom escuro #5a2800 com texto branco — não dourado */
    .CaptionContainer .Text,
    .CaptionInnerContainer .Text,
    .TableContainer .CaptionContainer .Text,
    div.Text {
        background: linear-gradient(180deg, #6b3210, #3a1700) !important;
        color: #f5e8c8 !important;
        font-size: 13px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        padding: 10px 14px !important;
        border-radius: 4px 4px 0 0 !important;
        text-align: left !important;
        border: 1px solid #2a1000 !important;
        border-bottom: none !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) !important;
    }

    /* Ranking caption (custom OniWorld widget) também ganha estilo desktop */
    .rank_header {
        background: linear-gradient(180deg, #6b3210, #3a1700) !important;
        color: #f5e8c8 !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) !important;
    }

    /* NewsHeadlineBackground e .Headline ficam com mesmo estilo (era marrom já) */
    .NewsHeadlineBackground,
    .NewsHeadline .NewsHeadlineBackground {
        background: linear-gradient(180deg, #6b3210, #3a1700) !important;
        background-image: none !important;
        color: #f5e8c8 !important;
        border: 1px solid #2a1000 !important;
        border-bottom: none !important;
        padding: 10px 14px !important;
        font-weight: bold !important;
    }
    .NewsHeadlineText, .NewsHeadlineDate {
        color: #f5e8c8 !important;
    }

    /* === Boxes ganham border decorada estilo desktop === */
    /* Desktop tem border 2px sólido com canto castanho — replicar */
    .Content .Box, .Box, .news-item {
        border: 2px solid #3a1700 !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) !important;
        overflow: hidden !important;
    }
    .BoxContent, .Content .BoxContent {
        border: none !important;
        background-color: #fff2db !important;
    }
    /* TableContent (form de login) com border interna */
    .TableContent[style*="border"] {
        border-color: #5a2800 !important;
        background-color: #fff2db !important;
    }

    /* === Header mobile: logo um pouco maior + visual mais "Tibia" === */
    #oniworld-mobile-header {
        height: 56px !important;
        background: linear-gradient(180deg, #1a0f08 0%, #2a1810 100%) !important;
        border-bottom: 2px solid #c89a36 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(200, 154, 54, 0.3) !important;
        padding: 0 8px !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo img {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        border-radius: 4px !important;
        border: 1px solid #c89a36 !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo span {
        color: #f5e8c8 !important;
        font-size: 15px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__login {
        background: linear-gradient(180deg, #c89a36, #8b6914) !important;
        color: #1a0f08 !important;
        border: 1px solid #6b5110 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        font-weight: bold !important;
    }
    #oniworld-hamburger {
        background: rgba(20, 12, 6, 0.6) !important;
        border: 1px solid #c89a36 !important;
    }

    /* Body padding-top sobe pra 60px (header agora 56) */
    body { padding-top: 60px !important; }

    /* === Sticky CTA com cor dourada mais "Tibia" === */
    #oniworld-sticky-cta > div:nth-of-type(2) > a:first-child {
        background: linear-gradient(180deg, #d4a93f, #8b6914) !important;
        color: #1a0f08 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        border-top: 1px solid #f5e8c8 !important;
    }

    /* === Texto dentro dos boxes: marrom como desktop === */
    .BoxContent, .BoxContent p, .BoxContent li, .BoxContent td {
        color: #5a2800 !important;
    }
    .BoxContent strong, .BoxContent b {
        color: #3a1000 !important;
    }
    .BoxContent a {
        color: #8b0000 !important;
        font-weight: bold !important;
    }
    .BoxContent h2, .BoxContent h3 {
        color: #5a2800 !important;
        border-bottom: 1px solid #d4a93f !important;
        padding-bottom: 4px !important;
    }

    /* === LabelV (form labels) marrom como desktop === */
    td.LabelV span {
        color: #5a2800 !important;
        font-weight: bold !important;
    }

    /* === Inputs: border mais escura como desktop === */
    .TableContainer input[type="text"],
    .TableContainer input[type="password"],
    .TableContainer input[type="email"],
    .TableContent input[type="text"],
    .TableContent input[type="password"] {
        border: 1px solid #5a2800 !important;
        background: #fff !important;
        color: #1a0f08 !important;
    }
    .TableContainer input:focus,
    .TableContent input:focus {
        outline: 2px solid #c89a36 !important;
        outline-offset: -1px !important;
    }
}

/* ================================================================
   v12 (2026-05-10) — Mobile UX Audit Fix Pass:
   Bugs identificados em screenshot iPhone 393x852 (puppeteer):
   - BUG 1: <img class="Title"> = headline-PAGE.gif sprite martel.ttf
            em INGLES, blurry quando escalado, ilegivel no mobile.
            Fix: hide img.Title, mostrar h2.oniworld-mobile-title
            (texto real injetado via index.php).
   - BUG 2: Logo OniWorld no header tinha border de 1px gold criando
            "fundo bege" estranho em volta. Remove border, polir.
   - BUG 3: Boxes pequenos pretos com "X" decorativo (criatura/boss/
            pedestal helper-images) sem texto = orfaos. Hide se sem
            conteudo util no mobile.
   - BUG 4/5: input[type=image] sprite (Submit / Account Lost / Criar
            Conta) ilegivel — substituido por <span class="omb-label">
            via JS leve (oniworld-mobile-btns) injetado no header.
   - BUG 6: News com imagem flutuante quebrava layout. Block + center.
   - BUG 7: Botao ENTRAR sumindo no header. Forcar visible + min-width.
   ================================================================ */

/* h2.oniworld-mobile-title escondido por padrao desktop */
.oniworld-mobile-title { display: none; }
/* Span de label injetado via JS em mobile escondido no desktop */
.omb-label { display: none; }

@media (max-width: 768px) {

    /* ============================================================
       BUG 1: HEADLINES sprite GIF -> h2 textual
       ============================================================ */
    img.Title,
    .Box img.Title,
    [id] > img.Title {
        display: none !important;
    }
    .oniworld-mobile-title {
        display: block !important;
        background: linear-gradient(180deg, #6b3210 0%, #3a1700 100%) !important;
        color: #f5e8c8 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 17px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        border-radius: 6px 6px 0 0 !important;
        border: 1px solid #2a1000 !important;
        border-bottom: 2px solid #c89a36 !important;
        text-align: left !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
        line-height: 1.3 !important;
        box-shadow: inset 0 -1px 0 rgba(255, 220, 150, 0.15) !important;
    }

    /* ============================================================
       BUG 2: LOGO HEADER — remover border bege + polir
       ============================================================ */
    #oniworld-mobile-header .oniworld-mobile-header__logo img {
        border: none !important;
        background: transparent !important;
        box-shadow: 0 0 0 1px rgba(200, 154, 54, 0.4) !important;
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        object-fit: contain !important;
        border-radius: 4px !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo {
        gap: 10px !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo span {
        font-family: Georgia, serif !important;
        font-size: 15px !important;
        letter-spacing: 0.8px !important;
    }

    /* ============================================================
       BUG 3: BOXES DECORATIVOS ORFAOS
       ============================================================ */
    /* HelperDiv* sao reservas de espaço do tibiacom — hide */
    #HelperDivHeadline, #HelperDivContainer,
    #HelperDivContainer1, #HelperDivContainer2,
    .HelperDivBox, [id^="HelperDiv"] {
        display: none !important;
    }
    /* Boss/Creature vazios escondidos */
    #Creature[style=""], #Boss[style=""],
    #Creature:empty, #Boss:empty {
        display: none !important;
    }
    /* RightArtwork vazio escondido */
    #RightArtwork:empty {
        display: none !important;
    }
    /* SmallBoxBorder/SmallBoxTop/SmallBoxBottom decorativos com chain.gif */
    .SmallBoxBorder, .SmallBoxTop, .SmallBoxBottom,
    .SmallBoxButtonContainer {
        background-image: none !important;
        background: transparent !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* ============================================================
       BUG 4: input[type=image] sprite — JS injeta .omb-label
       ============================================================ */
    /* Esconder sprite, mas mantem clicavel via opacity:0 + absolute */
    .BigButton input[type="image"],
    .MediumButton input[type="image"],
    .MediumButtonText[type="image"],
    .MediumButtonForm input[type="image"] {
        opacity: 0 !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        z-index: 3 !important;
        cursor: pointer !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    /* Wrappers viram relative pra capturar overlay absolute */
    .BigButton, .MediumButton, .MediumButtonForm,
    .MediumButtonBackground {
        position: relative !important;
    }
    /* .omb-label injetado por JS */
    .omb-label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #1a0f08 !important;
        line-height: 1.2 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        font-family: Georgia, serif !important;
        z-index: 1 !important;
        position: relative !important;
        background: linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
    }
    /* Quando .omb-label esta presente, escondemos os elementos sprite */
    .BigButton:has(.omb-label) > div > div:not(.omb-label),
    .MediumButtonForm:has(.omb-label) .MediumButtonBackground,
    .BigButton .BigButtonOver,
    .MediumButtonForm .MediumButtonOver {
        display: none !important;
    }
    /* Hide sprite background do .BigButton e .MediumButtonForm */
    .BigButton, .MediumButton, .MediumButtonForm {
        background-image: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 8px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ============================================================
       BUG 5: BigButton com type=submit — mostrar value text
       ============================================================ */
    /* Quando NAO houver omb-label (ex: input[type=submit] com value),
       o input[type=submit] aparece full-width como botao real. */
    .BigButton input[type="submit"], .BigButtonText[type="submit"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        background-image: linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        color: #1a0f08 !important;
        font-family: Georgia, serif !important;
        font-size: 15px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        padding: 14px 16px !important;
        min-height: 48px !important;
        border: 1px solid #6b5110 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) !important;
    }
    /* Botao secundario "Account Lost?" — ghost button */
    form[action*="lost"] .BigButton input[type="submit"],
    form[action*="account/lost"] .BigButton input[type="submit"] {
        background: transparent !important;
        background-image: none !important;
        color: #5a2800 !important;
        border: 2px solid #6b3210 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
    form[action*="lost"] .BigButton input[type="submit"]:hover,
    form[action*="account/lost"] .BigButton input[type="submit"]:hover {
        background: rgba(107, 50, 16, 0.08) !important;
    }

    /* ============================================================
       BUG 6: NEWS — imagens flutuantes
       ============================================================ */
    .news-content img,
    .news-text img,
    .NewsHeadline img,
    .Box img:not(.Title):not([src*="/header/icon-"]):not([src*="favicon"]):not([src*="flags/"]):not([src*="loginbox/"]) {
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        margin: 8px auto !important;
        clear: both !important;
    }
    .news-content > div[style*="float"],
    .news-text > div[style*="float"],
    .Box .BoxContent > div[style*="float"] {
        float: none !important;
        width: 100% !important;
        margin: 8px 0 !important;
        display: block !important;
    }

    /* ============================================================
       BUG 7: Header ENTRAR garantir visibilidade + ordem flex
       ============================================================ */
    #oniworld-mobile-header {
        padding: 0 8px !important;
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
    }
    #oniworld-hamburger {
        order: 0 !important;
        flex: 0 0 44px !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__login {
        order: 2 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
        min-width: 64px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ============================================================
       EXTRA: Caption fonts (legibility pass)
       ============================================================ */
    .CaptionContainer .Text,
    .CaptionInnerContainer .Text {
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 14px !important;
        letter-spacing: 0.8px !important;
    }
    .NewsHeadlineBackground {
        font-family: Georgia, serif !important;
        font-size: 13px !important;
    }
    .NewsHeadlineText {
        font-weight: bold !important;
        letter-spacing: 0.3px !important;
    }
    .NewsHeadlineDate {
        font-size: 11px !important;
        opacity: 0.85 !important;
    }

    /* ============================================================
       EXTRA: SEO Footer
       ============================================================ */
    .seo-footer-links {
        padding: 28px 16px !important;
        border-top: 2px solid #c89a36 !important;
    }
    .seo-footer-links h3 {
        color: #c89a36 !important;
        font-size: 14px !important;
        margin: 0 0 10px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-bottom: 1px solid rgba(200, 154, 54, 0.3) !important;
        padding-bottom: 6px !important;
    }
    .seo-footer-links a {
        color: #d4c0a1 !important;
        text-decoration: none !important;
        line-height: 1.8 !important;
    }
    .seo-footer-links a:hover {
        color: #fff !important;
    }
}

@media (max-width: 380px) {
    #oniworld-mobile-header .oniworld-mobile-header__logo span {
        font-size: 13px !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__login {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
    .oniworld-mobile-title {
        font-size: 15px !important;
        padding: 12px 14px !important;
    }
}

/* ================================================================
   v13 (2026-05-10) — Pos-v12 fixes:
   - Indicator imgs (account_indicator/email_indicator/nok.gif) viram
     blocos pretos com X porque selector .Box img forcava display:block
     Fix: hide imgs com id=_indicator + src de nok/ok.gif
   - Submit button do CreateAccount nao virou full-width — specificity
     menor que outros patches anteriores. Force com !important + parent.
   - Boss/Creature pretos vazios ainda visiveis — selector :empty nao
     pega divs com whitespace-only. Force display:none.
   - Vocação no createaccount: Knight cortado virou "Kn..." porque
     radios em flex de 4 colunas não cabem. Force wrap em duas linhas.
   ================================================================ */

@media (max-width: 768px) {

    /* === Indicator GIFs (_indicator src=nok.gif/ok.gif) HIDE === */
    img[id$="_indicator"],
    img[src*="/general/nok.gif"],
    img[src*="/general/ok.gif"],
    .Box img[src*="/general/nok.gif"],
    .Box img[src*="/general/ok.gif"] {
        display: none !important;
    }
    /* Respeitar inline display:none de qualquer img (anti-pattern dos
       indicators que sao mostrados via JS) */
    img[style*="display: none"], img[style*="display:none"] {
        display: none !important;
    }

    /* === Submit button full-width: specificity reforçada === */
    /* HTML: <div class="BigButton"><div onmouseover><div class="BigButtonOver"></div>
              <input class="BigButtonText" type="submit" value="Submit"></div></div>
       O wrapper DIV anonimo entre BigButton e input precisa width 100% tb. */
    body .BigButton,
    body form .BigButton,
    .BigButton,
    form .BigButton,
    div.BigButton {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        background-image: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 12px 0 !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .BigButton > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        background: transparent !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body .BigButton input.BigButtonText,
    body .BigButton input[type="submit"],
    .BigButton input.BigButtonText,
    .BigButton input[type="submit"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 52px !important;
        background: linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        background-image: linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        color: #1a0f08 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        padding: 14px 16px !important;
        border: 1px solid #6b5110 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) !important;
        margin: 0 !important;
    }
    .BigButtonOver {
        display: none !important;
    }

    /* Submit dentro de form padding extra pra respiro */
    form > .BigButton:last-of-type,
    form table .BigButton {
        margin-top: 16px !important;
    }

    /* === Boss/Creature/RightArtwork: hide forcado === */
    /* :empty nao pega whitespace-only, mas no createaccount nao tem
       conteudo util — forcar display:none em mobile pra remover ruido. */
    #RightArtwork, #Boss, #Creature, #PedestalAndOnline,
    #ThemeboxesColumn #Boss, #ThemeboxesColumn #Creature {
        display: none !important;
    }
    /* So manter ranking visivel (.rank widget OniWorld custom) */
    #ThemeboxesColumn .rank {
        display: block !important;
    }

    /* === Vocação radio buttons: 2x2 grid em vez de 4x1 === */
    /* HTML: <input type="radio">Sorcerer <input>Druid <input>Paladin <input>Knight
       Em viewport 393px nao cabe 4 — quebra em 2 linhas. */
    /* O container provavelmente eh td > inputs inline. Forcar flex wrap. */
    td:has(> input[type="radio"][name="vocation"]),
    td:has(> input[type="radio"][value="0"]),
    td:has(> input[type="radio"][value="1"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        align-items: center !important;
    }
    /* Cada radio + texto vira grupo inline */
    input[type="radio"] {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 4px 0 0 !important;
        vertical-align: middle !important;
    }
    /* Labels de radio (texto Sorcerer/Druid/etc) */
    input[type="radio"] + label,
    input[type="radio"] + span,
    input[type="radio"] ~ label {
        display: inline-flex !important;
        align-items: center !important;
        margin-right: 12px !important;
        font-size: 14px !important;
        color: #5a2800 !important;
    }

    /* Sex/Vocation radios cell padding */
    td.LabelV + td input[type="radio"] {
        margin-right: 4px !important;
    }

    /* === [sugerir número] [suggest name] mini-links — separar do indicator === */
    #SuggestAccountNumber, #SuggestCharacterName,
    div[id^="Suggest"] {
        display: block !important;
        margin-top: 4px !important;
        font-size: 12px !important;
    }
    #SuggestAccountNumber a, #SuggestCharacterName a,
    div[id^="Suggest"] a {
        color: #8B0000 !important;
        text-decoration: underline !important;
    }

    /* === FormFieldError: separa em linha propria === */
    .FormFieldError, span.FormFieldError {
        display: block !important;
        color: #8B0000 !important;
        font-size: 12px !important;
        font-weight: bold !important;
        margin: 4px 0 8px 0 !important;
        padding: 0 !important;
    }
}

/* ================================================================
   v14 (2026-05-10) — pos-v13 sweep:
   - _indicator imgs ainda renderizando como quadrado marrom porque
     jQuery show() muda inline display:inline. Multi-camada de hide:
     visibility + position:absolute + left:-9999px + width:0
   - Submit pequeno porque table parent (<table border=0 cellspacing=0>
     dentro de td) tem width auto. Force width:100% em forms-tables
     com BigButton dentro.
   - Vocação radios cortados — forçar wrap:wrap + cada radio+label
     em flex item separado com 50% width.
   ================================================================ */

@media (max-width: 768px) {

    /* === _indicator: hide com defesa em profundidade === */
    img[id$="_indicator"],
    img#account_indicator, img#email_indicator,
    img#password_indicator, img#password2_indicator,
    img#character_indicator, img#name_indicator,
    img[src*="/general/nok.gif"],
    img[src*="/general/ok.gif"] {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* === Submit button parent table: force width 100% === */
    /* HTML: <td><table><tr><td><div class="BigButton">...</div></td></tr></table></td>
       Tudo precisa ser block + 100% no mobile. */
    table:has(.BigButton),
    table:has(div.BigButton),
    td:has(> .BigButton),
    td:has(> div.BigButton) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    table:has(.BigButton) tbody,
    table:has(.BigButton) tr,
    table:has(.BigButton) td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* Wrapper td do BigButton ganha padding pra respiro */
    form table tr td:has(> .BigButton) {
        padding: 12px 0 !important;
    }

    /* Force input[type=hidden] adjacent ao BigButton sem ocupar espaco */
    .BigButton + input[type="hidden"],
    input[type="hidden"] {
        display: none !important;
    }

    /* === Vocação radios: 2 colunas grid === */
    /* HTML provavel: <td>radio Sorcerer radio Druid radio Paladin radio Knight</td>
       em viewport 393px nao cabe 4 inline. Force grid 2x2. */
    /* Detectar pela presença de >= 4 input[type=radio] adjacentes no td */
    td:has(input[type="radio"][value="0"]):has(input[type="radio"][value="3"]) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 12px !important;
    }
    td:has(input[type="radio"][value="0"]):has(input[type="radio"][value="3"]) input[type="radio"] {
        margin: 0 6px 0 0 !important;
    }
    /* Fallback geral pra qualquer cell com 4+ radios — flex wrap */
    td input[type="radio"] {
        margin: 4px 6px 4px 0 !important;
    }

    /* === Outros pequenos polish === */
    /* "Por favor, marque a seguinte caixa" checkbox — alinhamento */
    .Captcha + label, label[for*="captcha"] {
        display: block !important;
        margin-top: 6px !important;
    }
}

/* ================================================================
   v15 (2026-05-10) — Vocação radios cortando:
   HTML: <span class="OptionContainer"><input radio><label>X</label></span>
   ate 5 vocs: Sorcerer/Druid/Paladin/Knight/Monk. Em 393px nao cabe
   inline. Forçar wrap em grid 2 cols.
   ================================================================ */

@media (max-width: 768px) {

    /* Container de cell que tem multipos OptionContainer (Vocação) */
    td:has(> .OptionContainer + .OptionContainer + .OptionContainer) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 4px 0 !important;
    }
    /* Cada OptionContainer um item do grid */
    .OptionContainer {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        font-size: 14px !important;
        color: #5a2800 !important;
        white-space: nowrap !important;
    }
    .OptionContainer input[type="radio"] {
        flex: 0 0 18px !important;
        margin: 0 !important;
    }
    .OptionContainer label {
        margin: 0 !important;
        cursor: pointer !important;
        color: #5a2800 !important;
    }
    /* Mesma logica para Sex (male/female) — fica 2 colunas tambem */
    /* Já cabe em 2 colunas naturalmente, sem layout extra. */
}

/* ================================================================
   v16 (2026-05-10) — RESTAURAR backgrounds tibiacom desktop em mobile.
   User feedback: quer manter os mesmos backgrounds do desktop pro
   mobile (chains, title-background-green.gif, sprites Login/Create
   Account, banner news vermelho).
   v3-v11 tinham flattened decorações pra "limpeza"; v16 reverte
   essa filosofia e restaura visual desktop, mantendo os fixes
   funcionais (off-canvas drawer, full-width forms, headlines
   substituidos por h2 textual, etc).
   ================================================================ */

@media (max-width: 768px) {

    /* ============================================================
       DRAWER (#MenuColumn off-canvas): background do desktop
       ============================================================ */
    /* Desktop bg: artwork dark + sprites — replicar sem flatten dark uniform */
    #MenuColumn {
        background: url(images/header/background-artwork.jpg) center top / cover no-repeat,
                    #1a1f2e !important;
        background-color: #1a1f2e !important;
        padding: 56px 0 24px 0 !important;
    }
    /* Backdrop completo (cobre 100% atras do drawer) */
    #oniworld-mobile-backdrop {
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    /* ============================================================
       LOGINBOX dentro do drawer — restaurar sprites desktop
       ============================================================ */
    /* No drawer, mostrar Login + Create Account com sprites tibiacom originais */
    #MenuColumn #Loginbox {
        position: relative !important;
        margin: 8px auto 16px !important;
        padding: 0 !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Caixinhas de Login Top/Bottom + sprites laterais — manter originais */
    #MenuColumn #LoginTop, #MenuColumn #LoginBottom {
        background-image: initial !important;
        height: auto !important;
        position: static !important;
        display: block !important;
    }
    /* Login button + Create Account sprites azul originais — preservar */
    #MenuColumn #LoginButton {
        position: relative !important;
        margin: 0 auto !important;
    }
    #MenuColumn #LoginButton img,
    #MenuColumn #LoginstatusContainer img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ============================================================
       MENU ITEMS — restaurar chains laterais (chain.gif) e icones
       ============================================================ */
    /* Submenu chain decorations (LeftChain/RightChain) — keep visible */
    #MenuColumn .menuitem,
    #MenuColumn .Submenu,
    #MenuColumn .Submenuitem,
    #MenuColumn .SubmenuitemLabel,
    #MenuColumn .LeftChain,
    #MenuColumn .RightChain,
    #MenuColumn .MenuButton,
    #MenuColumn .MenuItemTitle {
        background-image: initial !important;
    }
    /* Chain divs preservar bg original (chain.gif inline style) */
    #MenuColumn div[style*="chain.gif"] {
        background-image: initial !important;
        display: block !important;
    }
    /* MenuItemTitle (cabecalho de cada secao tipo "news") com banner original */
    #MenuColumn .MenuItemTitle,
    #MenuColumn div[style*="title-background"],
    #MenuColumn div[style*="newsheadline_background"] {
        background-image: initial !important;
    }

    /* Texto dos menu items com cor clara legivel sobre bg dark */
    #MenuColumn .SubmenuitemLabel,
    #MenuColumn .MenuButton,
    #MenuColumn .menuitem a {
        color: #f1e0c6 !important;
    }

    /* ============================================================
       BorderTitleText (title-background-green.gif) — RESTAURAR
       ============================================================ */
    /* User mencionou explicitamente: <div class="BorderTitleText"
       style="background-image:url(...title-background-green.gif)"> */
    .BorderTitleText {
        background-image: initial !important;
        background: initial !important;
        padding: initial !important;
        margin: initial !important;
        border: initial !important;
        height: 28px !important;
        background-repeat: repeat-x !important;
    }

    /* ============================================================
       NewsHeadlineBackground (banner vermelho) — restaurar
       ============================================================ */
    /* Volta o sprite vermelho original tibiacom */
    .NewsHeadlineBackground,
    .NewsHeadline .NewsHeadlineBackground {
        background-image: initial !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-size: auto !important;
    }

    /* ============================================================
       Boxes (Box / BoxContent) — restaurar bordas e bg desktop
       ============================================================ */
    /* Reverte v3 flatten dark e v6 pergaminho hardcoded — deixa desktop renderizar */
    .Content .Box, .Box, .news-item,
    .Content #News.Box, .Content #FeaturedArticle.Box,
    .Content [id].Box {
        background-image: initial !important;
        background-color: initial !important;
        border: initial !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .Content .BoxContent, .BoxContent {
        background-image: initial !important;
        background-color: initial !important;
        color: initial !important;
        border: initial !important;
        border-radius: 0 !important;
    }
    /* Manter scroll.gif texture do BoxContent */
    .BoxContent[style*="scroll.gif"] {
        background-image: initial !important;
    }

    /* Caption (Entrar na Conta / Novo Jogador) — restaurar sprites */
    .CaptionContainer,
    .CaptionInnerContainer {
        background-image: initial !important;
        background-color: initial !important;
    }
    /* Mas manter height auto pra nao virar bloco gigante (era bug v10) */
    .CaptionContainer {
        height: auto !important;
        min-height: 0 !important;
    }
    /* As decoracoes Caption (EdgeLeft/Right, Border, Vertical) — RESTAURAR */
    .CaptionEdgeLeftTop, .CaptionEdgeRightTop,
    .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
    .CaptionBorderTop, .CaptionBorderBottom,
    .CaptionVerticalLeft, .CaptionVerticalRight {
        display: initial !important;
        background-image: initial !important;
    }

    /* Border_1, Border_2, Border_3 — restaurar */
    .Border_1, .Border_2, .Border_3 {
        background-image: initial !important;
        background: initial !important;
        border: initial !important;
        padding: initial !important;
        margin: initial !important;
    }

    /* Corner decorations (corner-tl, corner-tr, corner-bl, corner-br) */
    .Corner-tl, .Corner-tr, .Corner-bl, .Corner-br,
    .CornerWrapper-t, .CornerWrapper-b {
        display: initial !important;
        background-image: initial !important;
    }

    /* InfoBar (top utility bar) — desfazer hide v6 */
    .InfoBar {
        display: initial !important;
        background-image: initial !important;
        background: initial !important;
    }

    /* ============================================================
       NewsHeadline e icons restaurar
       ============================================================ */
    .NewsHeadline {
        background-image: initial !important;
    }
    /* Icones do header da news (icon-news.gif, etc) — manter visiveis */
    img[src*="/header/icon-"] {
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        display: inline !important;
        margin: initial !important;
    }

    /* ============================================================
       Container outer wrappers — DEIXAR DESKTOP renderizar
       ============================================================ */
    /* v2 forcou ContentRow/ArtworkHelper/Bodycontainer width 100%
       — manter, mas deixar bgs originais */
    #ArtworkHelper, #Bodycontainer, #ContentRow {
        background-image: initial !important;
        background-color: initial !important;
    }
    /* Body bg artwork mantém */
    body {
        background-image: url(/templates/tibiacom/images/header/background-artwork.jpg) !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-color: #0a0a0a !important;
    }

    /* ============================================================
       SmallBoxBorder (chain.gif sprites laterais) — RESTAURAR
       ============================================================ */
    .SmallBoxBorder, .SmallBoxTop, .SmallBoxBottom,
    .SmallBoxButtonContainer {
        background-image: initial !important;
        background: initial !important;
        height: initial !important;
        min-height: 0 !important;
        padding: initial !important;
        margin: initial !important;
        border: initial !important;
    }

    /* ============================================================
       Manter h2.oniworld-mobile-title MAS deixar img.Title desktop
       aparecer junto SE puder caber.
       Trade-off: h2 fica abaixo do img.Title pra dar contexto bilingue.
       ============================================================ */
    /* v12 hide img.Title — REVERTER + manter h2 textual juntos */
    img.Title {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    /* h2 fica menor, abaixo do img.Title como hint */
    .oniworld-mobile-title {
        display: none !important;
    }

    /* ============================================================
       HAMBURGER FIX: garantir que abre/fecha em iOS Safari real
       ============================================================ */
    #oniworld-hamburger {
        position: fixed !important;
        top: 6px !important;
        right: 8px !important;
        z-index: 10001 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(241, 224, 198, 0.4) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    /* Header mobile fica em top stripe pequena, NÃO bloqueia o conteúdo */
    #oniworld-mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9990 !important;
        height: 52px !important;
    }
    /* Menu drawer com z-index acima */
    #MenuColumn {
        z-index: 9998 !important;
    }
    #oniworld-mobile-backdrop {
        z-index: 9997 !important;
    }
}

/* ================================================================
   v17 (2026-05-10) — Force img.Title visible com specificity max.
   v12 tinha [id] > img.Title display:none que ganhava de v16
   img.Title display:block. Force com !important + body+id selector.
   Tambem reflete o pedido "use tibia.com como modelo": mantem o
   visual desktop tibiacom (que e baseado no tibia.com classic).
   ================================================================ */

@media (max-width: 768px) {

    /* Force img.Title visible — specificity higher than v12 [id]>img.Title */
    body img.Title,
    body .Content img.Title,
    body div[id] > img.Title,
    body .Box > img.Title,
    body #News > img.Title,
    body #FeaturedArticle > img.Title,
    body [id] img.Title {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 4px auto 0 !important;
    }
    /* h2 textual fica HIDDEN — usuario pediu visual desktop */
    body h2.oniworld-mobile-title {
        display: none !important;
    }
}

/* ================================================================
   v18 (2026-05-10) — Modelar o mobile do OniWorld em cima do
   tibia.com original (referencia: 3 screenshots iPhone).

   Componentes-chave do tibia.com mobile que vamos replicar:
   1. Header verde escuro com decoracao ornamental gold + logo
      em fonte ornamental + botoes blue+gold quadrados
   2. Live indicator bar (twitch/youtube/players) marrom escuro
      texture com 3 metricas separadas por |
   3. Section headers (Latest News, Create Account) em fonte
      ornamental gold sobre fundo escuro com bordas pseudo-3D
   4. News article box: header marrom data+titulo, body papel
      com drop cap em red
   5. Mobile drawer: background creme papel envelhecido,
      items tipo scroll/papel com cantos pretos quadrados,
      accordion +/- pra expand
   ================================================================ */

@media (max-width: 768px) {

    /* ============================================================
       1. HEADER VERDE com decoração ornamental gold
       ============================================================ */
    #oniworld-mobile-header {
        background: linear-gradient(180deg, #4a7544 0%, #3a5f2f 50%, #2d4a25 100%) !important;
        height: 60px !important;
        border: none !important;
        border-bottom: 3px solid #c89a36 !important;
        box-shadow:
            0 2px 0 #1c2f17,
            0 4px 12px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(255, 220, 150, 0.3) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9990 !important;
        padding: 0 !important;
        gap: 0 !important;
        align-items: center !important;
    }

    /* Decoração ornamental folhagem nas laterais (CSS gradient simulando) */
    #oniworld-mobile-header::before,
    #oniworld-mobile-header::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50px;
        pointer-events: none;
        background:
            radial-gradient(ellipse 30px 20px at 50% 30%, rgba(200, 154, 54, 0.3), transparent),
            radial-gradient(ellipse 20px 15px at 30% 70%, rgba(200, 154, 54, 0.25), transparent),
            radial-gradient(ellipse 25px 15px at 70% 80%, rgba(200, 154, 54, 0.2), transparent);
    }
    #oniworld-mobile-header::before { left: 50px; }
    #oniworld-mobile-header::after { right: 50px; transform: scaleX(-1); }

    /* Logo OniWorld no centro em fonte ornamental gold */
    #oniworld-mobile-header .oniworld-mobile-header__logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        flex: none !important;
        order: unset !important;
        width: auto !important;
        z-index: 2 !important;
        text-decoration: none !important;
        gap: 4px !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo img {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__logo span {
        font-family: "Cinzel", "Playfair Display", Georgia, serif !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        color: #f4d35e !important;
        text-shadow:
            0 1px 0 #6b4f10,
            0 2px 0 #4a3508,
            0 3px 6px rgba(0, 0, 0, 0.7) !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        background: linear-gradient(180deg, #ffeb8a 0%, #c89a36 60%, #8b6914 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)) !important;
    }

    /* Hamburger + Login viram quadrados azul+gold (estilo tibia.com) */
    #oniworld-hamburger,
    #oniworld-mobile-header .oniworld-mobile-header__login {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex: 0 0 44px !important;
        background: linear-gradient(180deg, #4a78c8 0%, #1d3d7a 100%) !important;
        border: 2px solid #c89a36 !important;
        border-radius: 6px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.4),
            0 1px 3px rgba(0, 0, 0, 0.5) !important;
        margin: 0 8px !important;
        position: static !important;
        order: unset !important;
        padding: 0 !important;
        z-index: auto !important;
    }
    #oniworld-mobile-header .oniworld-mobile-header__login {
        font-size: 0 !important;
        position: relative !important;
        text-indent: -9999px !important;
        white-space: nowrap !important;
    }
    /* Pseudo-element pra emoji/icone do botao Login (em vez de texto) */
    #oniworld-mobile-header .oniworld-mobile-header__login::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 22px;
        height: 22px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4d35e'><path d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/></svg>");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        text-indent: 0 !important;
    }
    /* Hamburger icon redesenha em gold */
    #oniworld-hamburger::before {
        background-image:
            linear-gradient(#f4d35e, #f4d35e),
            linear-gradient(#f4d35e, #f4d35e),
            linear-gradient(#f4d35e, #f4d35e) !important;
        width: 22px !important;
        height: 16px !important;
    }

    /* Body padding-top pra acomodar header 60px */
    body { padding-top: 64px !important; }

    /* ============================================================
       2. LIVE INDICATOR BAR (logo abaixo do header)
       ============================================================ */
    /* Cria via JS injetado em index.php abaixo do header.
       Aqui só estiliza .oniworld-live-bar caso exista */
    .oniworld-live-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        background: linear-gradient(180deg, #6b1e1e 0%, #4a1414 50%, #2d0a0a 100%) !important;
        background-image:
            linear-gradient(180deg, #6b1e1e 0%, #4a1414 50%, #2d0a0a 100%),
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23000' opacity='0.05'/></svg>") !important;
        height: 32px !important;
        padding: 0 8px !important;
        border-bottom: 1px solid #c89a36 !important;
        color: #f1e0c6 !important;
        font-family: Verdana, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: bold !important;
        gap: 4px !important;
    }
    .oniworld-live-bar__item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 6px !important;
        border-right: 1px solid rgba(241, 224, 198, 0.2) !important;
    }
    .oniworld-live-bar__item:last-child {
        border-right: none !important;
    }
    .oniworld-live-bar__item .label {
        color: #f4d35e !important;
        font-weight: bold !important;
    }
    .oniworld-live-bar__item .value {
        color: #fff !important;
    }

    /* ============================================================
       3. SECTION HEADERS (Latest News, Create Account, etc)
       Fonte ornamental gold sobre fundo escuro com bordas pseudo-3D
       ============================================================ */
    /* h2 mobile-title volta visivel + estilo tibia.com */
    body .oniworld-mobile-title,
    .oniworld-mobile-title {
        display: block !important;
        background:
            linear-gradient(180deg, #4a3209 0%, #2a1e06 50%, #1a1404 100%) !important;
        background-image:
            linear-gradient(180deg, #4a3209 0%, #2a1e06 50%, #1a1404 100%),
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='0.5' fill='%23000' opacity='0.2'/></svg>") !important;
        font-family: "Cinzel", "Playfair Display", Georgia, serif !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        color: #f4d35e !important;
        text-shadow:
            0 1px 0 #6b4f10,
            0 2px 0 #4a3508,
            0 3px 6px rgba(0, 0, 0, 0.7) !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        text-align: center !important;
        padding: 16px 12px !important;
        margin: 0 !important;
        border: 2px solid #c89a36 !important;
        border-radius: 0 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 220, 150, 0.2),
            inset 0 -1px 0 rgba(0, 0, 0, 0.5),
            0 2px 8px rgba(0, 0, 0, 0.5) !important;
        line-height: 1.2 !important;
        position: relative !important;
    }
    /* Hide img.Title sprite original — usar h2 estilizado */
    body img.Title,
    body .Box img.Title,
    body [id] > img.Title {
        display: none !important;
    }

    /* ============================================================
       4. NEWS ARTICLE BOX (NewsHeadline + body)
       Header marrom escuro + body papel + drop cap em red
       ============================================================ */
    /* News headline (banner data + titulo) */
    .NewsHeadline {
        background: linear-gradient(180deg, #6b1e1e 0%, #4a1414 100%) !important;
        background-image: linear-gradient(180deg, #6b1e1e 0%, #4a1414 100%) !important;
        padding: 12px 14px !important;
        border-bottom: 2px solid #c89a36 !important;
        margin: 0 !important;
        color: #f1e0c6 !important;
    }
    .NewsHeadlineBackground {
        background: linear-gradient(180deg, #6b1e1e 0%, #4a1414 100%) !important;
        background-image: linear-gradient(180deg, #6b1e1e 0%, #4a1414 100%) !important;
        color: #f1e0c6 !important;
        height: auto !important;
    }
    .NewsHeadlineDate, .NewsHeadlineText {
        color: #f1e0c6 !important;
        font-family: Georgia, serif !important;
    }
    .NewsHeadlineText {
        font-weight: bold !important;
        font-size: 14px !important;
        text-transform: none !important;
    }
    .NewsHeadlineDate {
        font-size: 11px !important;
        opacity: 0.85 !important;
    }

    /* News content body papel */
    .news-content, .news-text {
        background: #fff7e6 !important;
        background-image:
            linear-gradient(rgba(255, 247, 230, 1), rgba(247, 235, 210, 1)),
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.04'/></svg>") !important;
        color: #2a1500 !important;
        padding: 16px 18px !important;
        font-family: Georgia, serif !important;
        line-height: 1.6 !important;
    }

    /* Drop cap "T" em red ornamental */
    .news-content > p:first-of-type::first-letter,
    .news-text > p:first-of-type::first-letter,
    .BoxContent > p:first-of-type::first-letter {
        font-family: "Cinzel", "Playfair Display", Georgia, serif !important;
        font-size: 56px !important;
        font-weight: 900 !important;
        float: left !important;
        line-height: 0.9 !important;
        margin: 4px 8px 0 0 !important;
        color: #8b0000 !important;
        text-shadow:
            1px 1px 0 #5a0000,
            2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    }

    /* ============================================================
       5. MOBILE DRAWER — papel/scroll style com items expansiveis
       ============================================================ */
    #MenuColumn {
        background: linear-gradient(180deg, #f5e8c8 0%, #e8d8a8 100%) !important;
        background-image:
            linear-gradient(180deg, #f5e8c8 0%, #e8d8a8 100%),
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.7' numOctaves='3'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.06'/></svg>") !important;
        background-color: #f5e8c8 !important;
        border-right: 4px solid #c89a36 !important;
        padding: 70px 8px 20px 8px !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.7) !important;
    }

    /* Cada menuitem como bloco papel/scroll */
    #MenuColumn .menuitem,
    #MenuColumn > div > .menuitem {
        background: linear-gradient(180deg, #fff5d6 0%, #f0deb0 100%) !important;
        background-image: linear-gradient(180deg, #fff5d6 0%, #f0deb0 100%) !important;
        border: 1px solid #8b6914 !important;
        border-radius: 0 !important;
        margin: 6px 0 !important;
        padding: 0 !important;
        position: relative !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    /* Cantos pretos quadrados (decoração tibia.com) */
    #MenuColumn .menuitem::before,
    #MenuColumn .menuitem::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        background: #1a0f08;
        border: 1px solid #c89a36;
        z-index: 1;
    }
    #MenuColumn .menuitem::before { top: -4px; left: -4px; }
    #MenuColumn .menuitem::after { top: -4px; right: -4px; }

    #MenuColumn .MenuButton,
    #MenuColumn .MenuItemTitle,
    #MenuColumn .menuitem > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
        font-family: Georgia, serif !important;
        font-size: 15px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        color: #5a2800 !important;
        text-decoration: none !important;
        background: transparent !important;
        background-image: none !important;
        min-height: 48px !important;
        letter-spacing: 0.5px !important;
    }
    #MenuColumn .MenuButton::after,
    #MenuColumn .MenuItemTitle::after {
        content: "+";
        font-size: 18px;
        font-weight: 900;
        color: #c89a36;
        margin-left: 8px;
    }
    #MenuColumn .menuitem.active .MenuButton::after,
    #MenuColumn .menuitem.active .MenuItemTitle::after {
        content: "−";
    }

    /* Submenuitem (sub-items dentro do accordion) */
    #MenuColumn .Submenuitem,
    #MenuColumn .SubmenuitemLabel {
        display: block !important;
        padding: 10px 24px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        background-image: none !important;
        border-top: 1px solid rgba(139, 105, 20, 0.3) !important;
        color: #5a2800 !important;
        font-family: Georgia, serif !important;
        font-size: 14px !important;
        font-weight: normal !important;
        text-transform: none !important;
        text-decoration: none !important;
        min-height: 40px !important;
        line-height: 1.3 !important;
    }
    /* Active submenu item destacado em red-marrom (igual tibia.com) */
    #MenuColumn .Submenuitem.active,
    #MenuColumn div.activeSubmenuItem,
    #MenuColumn .SubmenuitemLabel.active {
        background: linear-gradient(180deg, #6b1e1e 0%, #4a1414 100%) !important;
        color: #f1e0c6 !important;
    }

    /* Hide chains decorativos no drawer (são pra desktop bg dark) */
    #MenuColumn .LeftChain,
    #MenuColumn .RightChain,
    #MenuColumn div[style*="chain.gif"] {
        display: none !important;
    }

    /* Loginbox drawer ainda visivel mas com estilo limpo */
    #MenuColumn #Loginbox {
        background: rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #c89a36 !important;
        border-radius: 0 !important;
        padding: 12px !important;
        margin-bottom: 16px !important;
    }
    /* Esconder sprites quebrados de Login antigo dentro do drawer no mobile */
    #MenuColumn #Loginbox .SmallBoxBorder,
    #MenuColumn #Loginbox .SmallBoxTop,
    #MenuColumn #Loginbox .SmallBoxBottom,
    #MenuColumn #Loginbox .Loginstatus.SmallBoxBottom {
        display: none !important;
    }

    /* ============================================================
       6. BODY background com texture papel envelhecido
       ============================================================ */
    body {
        background: #2a1810 !important;
        background-image:
            url(/templates/tibiacom/images/header/background-artwork.jpg) !important;
        background-size: cover !important;
        background-position: center top !important;
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-color: #2a1810 !important;
    }

    /* ContentColumn fundo papel pra texto escuro ler bem */
    #ContentColumn {
        background: linear-gradient(180deg, rgba(245, 232, 200, 0.95) 0%, rgba(232, 216, 168, 0.95) 100%) !important;
        margin: 12px 8px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: 2px solid #c89a36 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 4px 16px rgba(0, 0, 0, 0.5) !important;
    }

    /* ============================================================
       7. Boxes (#News, #FeaturedArticle) com fundo papel
       ============================================================ */
    .Content .Box, .Box, .news-item {
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .Content .BoxContent, .BoxContent {
        background: transparent !important;
        background-image: none !important;
        color: #2a1500 !important;
        padding: 16px !important;
        border: none !important;
    }
    .BoxContent p, .BoxContent li, .BoxContent td {
        color: #2a1500 !important;
    }
    .BoxContent a {
        color: #8b0000 !important;
        font-weight: bold !important;
        text-decoration: underline !important;
    }
    .BoxContent strong, .BoxContent b {
        color: #1a0a00 !important;
    }

    /* ============================================================
       8. Form inputs estilo tibia.com (white bg, dark border)
       ============================================================ */
    input[type="text"], input[type="password"], input[type="email"],
    select, textarea {
        background: #fff !important;
        border: 2px solid #5a2800 !important;
        border-radius: 0 !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        color: #1a0a00 !important;
        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    input:focus {
        outline: 2px solid #c89a36 !important;
        outline-offset: 0 !important;
    }
    /* Caption form box header (Entrar na Conta) marrom escuro tibia.com */
    .CaptionContainer .Text,
    .CaptionInnerContainer .Text {
        background: linear-gradient(180deg, #4a1c08 0%, #2a0e02 100%) !important;
        color: #f1e0c6 !important;
        font-family: Georgia, serif !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        padding: 12px 16px !important;
        border: 1px solid #1a0a00 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
        margin: 0 !important;
    }

    /* Login button em estilo tibia.com (azul gradient bordered gold) */
    .BigButton input[type="submit"], .BigButtonText[type="submit"] {
        background: linear-gradient(180deg, #4a78c8 0%, #1d3d7a 100%) !important;
        background-image: linear-gradient(180deg, #4a78c8 0%, #1d3d7a 100%) !important;
        color: #fff !important;
        border: 2px solid #c89a36 !important;
        border-radius: 0 !important;
        font-family: Georgia, serif !important;
        font-size: 15px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
        padding: 14px 16px !important;
        min-height: 48px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.4) !important;
    }
    /* Account Lost? botao secundario gold */
    form[action*="lost"] .BigButton input[type="submit"] {
        background: linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        color: #1a0a00 !important;
        border: 2px solid #5a2800 !important;
        text-shadow: none !important;
    }

    /* InfoBar (Baixar/Discord/Instagram) — estilizar no fundo papel */
    .InfoBar {
        background: rgba(255, 247, 230, 0.9) !important;
        background-image: none !important;
        border-bottom: 2px solid #c89a36 !important;
        padding: 8px 12px !important;
    }
    .InfoBar a {
        color: #5a2800 !important;
        font-weight: bold !important;
    }

    /* Sticky CTA dourado (mantém) */
    #oniworld-sticky-cta > div:nth-of-type(2) > a:first-child {
        background: linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        color: #1a0a00 !important;
        font-family: Georgia, serif !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4) !important;
    }

    /* SEO Footer dark contrast com papel */
    .seo-footer-links {
        background: linear-gradient(180deg, #1a0f08 0%, #0a0504 100%) !important;
        color: #d4c0a1 !important;
        padding: 28px 16px !important;
        border-top: 3px solid #c89a36 !important;
    }
    .seo-footer-links h3 {
        color: #f4d35e !important;
        font-family: Georgia, serif !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        border-bottom: 1px solid rgba(200, 154, 54, 0.4) !important;
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }
    .seo-footer-links a {
        color: #d4c0a1 !important;
        text-decoration: none !important;
        line-height: 1.9 !important;
    }
    .seo-footer-links a:hover { color: #fff !important; }

    /* ============================================================
       9. RANKING widget — fundo papel pra ler bem
       ============================================================ */
    .rank {
        background: rgba(255, 247, 230, 0.95) !important;
        border: 2px solid #c89a36 !important;
        margin: 12px 8px !important;
    }
    .rank_header {
        background: linear-gradient(180deg, #4a1c08 0%, #2a0e02 100%) !important;
        color: #f4d35e !important;
        font-family: Georgia, serif !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
        padding: 12px 14px !important;
    }
    .rank_player {
        background: transparent !important;
        border-bottom: 1px solid rgba(139, 105, 20, 0.25) !important;
        padding: 10px 12px !important;
        color: #2a1500 !important;
    }
    .rank_text {
        color: #2a1500 !important;
    }
    .rank_text a, .rank_text b {
        color: #2a1500 !important;
    }
    .rank_button {
        background: linear-gradient(180deg, #4a78c8 0%, #1d3d7a 100%) !important;
        color: #fff !important;
        border: none !important;
        border-top: 2px solid #c89a36 !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }
}

@media (max-width: 380px) {
    #oniworld-mobile-header .oniworld-mobile-header__logo span {
        font-size: 18px !important;
        letter-spacing: 1px !important;
    }
    .oniworld-mobile-title {
        font-size: 18px !important;
        padding: 14px 10px !important;
    }
}

/* ================================================================
   v19 (2026-05-10) — Drawer reformulado modelando tibia.com mobile.

   Bugs detectados em screenshot v18:
   - Loginbox sprite Tibia azul mal posicionado no drawer (esconder)
   - "+/-" duplicado: tibiacom JÁ tem .Extend com plus.gif/minus.gif
     E meu v18 ::after adicionou outro "+" gold por cima
   - Submenu interno (Persona/Quem Está) com fundo verde escuro
     em vez de continuar no fundo papel do drawer
   - Sprite .Label (label-news.gif/label-account.gif/etc) é texto
     fancy mas escalado fica pequeno e antigo — substituir por h3 real
   - Chains decorativos (LeftChain/RightChain) com chain.gif em
     submenuitems poluem visual mobile

   Estrutura tibiacom real:
   .menuitem
     .MenuButton (clique)
       .Button (hover bg)
       .Lights (decorativo)
       .Icon (icon-news.gif etc)
       .Label (label-news.gif = sprite text)
       .Extend (plus.gif/minus.gif)
     .Submenu
       .Submenuitem (each sub)
         .LeftChain / .RightChain
         .ActiveSubmenuItemIcon
         .SubmenuitemLabel
   ================================================================ */

@media (max-width: 768px) {

    /* ============================================================
       1. ESCONDER LoginBox dentro do drawer mobile
       (Já tem "Entrar" no header — duplicar polui)
       ============================================================ */
    #MenuColumn #Loginbox,
    #MenuColumn #LoginstatusContainer,
    #MenuColumn #LoginTop,
    #MenuColumn #LoginBottom,
    #MenuColumn #LoginButton {
        display: none !important;
    }

    /* ============================================================
       2. MENUITEM — bloco papel limpo (tibia.com style)
       ============================================================ */
    #MenuColumn .menuitem {
        background: linear-gradient(180deg, #fff7e0 0%, #f0deb0 100%) !important;
        background-image: linear-gradient(180deg, #fff7e0 0%, #f0deb0 100%) !important;
        border: 1px solid #8b6914 !important;
        border-radius: 0 !important;
        margin: 6px 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            inset 0 -1px 0 rgba(139, 105, 20, 0.3),
            0 1px 2px rgba(0, 0, 0, 0.15) !important;
    }

    /* RESET v18 ::after/::before quadrados pretos (duplicava o "+") */
    #MenuColumn .menuitem::before,
    #MenuColumn .menuitem::after {
        content: none !important;
        display: none !important;
    }

    /* MenuButton (container clicável do item principal) — vira flex row */
    #MenuColumn .menuitem .MenuButton {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: transparent !important;
        background-image: none !important;
        padding: 12px 14px !important;
        min-height: 56px !important;
        position: relative !important;
        cursor: pointer !important;
    }
    #MenuColumn .menuitem .MenuButton > div {
        display: contents !important;
    }

    /* Esconder elementos decorativos desktop dentro do MenuButton */
    #MenuColumn .menuitem .Button,
    #MenuColumn .menuitem .Lights,
    #MenuColumn .menuitem .light_lu,
    #MenuColumn .menuitem .light_ld,
    #MenuColumn .menuitem .light_ru {
        display: none !important;
    }

    /* ============================================================
       3. ICONE (.Icon) — mantém icon do menuitem (icon-news.gif, etc)
       ============================================================ */
    #MenuColumn .menuitem .Icon {
        display: block !important;
        position: static !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        margin: 0 12px 0 0 !important;
        flex: 0 0 32px !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
    }

    /* ============================================================
       4. LABEL — esconder sprite e mostrar texto real
       Sprite .Label tem "News"/"Account"/etc em fonte fancy mas
       é label-X.gif estática. Substituir por texto puro via ID.
       ============================================================ */
    #MenuColumn .menuitem .Label {
        background-image: none !important;
        background: none !important;
        font-family: "IM Fell English", "Cinzel", Georgia, serif !important;
        font-size: 18px !important;
        font-weight: bold !important;
        color: #3a1700 !important;
        text-transform: capitalize !important;
        text-indent: 0 !important;
        width: auto !important;
        height: auto !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        letter-spacing: 0.3px !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }
    /* Inserir texto real via ::after baseado no ID do menuitem
       (alternativa: deixar texto vazio mas mostrar atributo alt) */
    #MenuColumn #news_Label::after { content: "Notícias"; }
    #MenuColumn #account_Label::after { content: "Conta"; }
    #MenuColumn #community_Label::after { content: "Comunidade"; }
    #MenuColumn #library_Label::after { content: "Biblioteca"; }
    #MenuColumn #forum_Label::after { content: "Fórum"; }
    #MenuColumn #shops_Label::after { content: "Loja"; }
    #MenuColumn #charactertrade_Label::after { content: "Bazaar"; }
    #MenuColumn #support_Label::after { content: "Suporte"; }
    #MenuColumn #gallery_Label::after { content: "Galeria"; }
    #MenuColumn #help_Label::after { content: "Ajuda"; }

    /* ============================================================
       5. EXTEND (+/- indicator) — mantém o sprite original
       mas estilizado consistente em mobile (gold limpo)
       ============================================================ */
    #MenuColumn .menuitem .Extend {
        display: block !important;
        position: static !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex: 0 0 24px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        margin: 0 0 0 8px !important;
        opacity: 0.85 !important;
        filter: sepia(0.5) saturate(1.5) hue-rotate(-10deg) brightness(1.1) !important;
    }

    /* ============================================================
       6. SUBMENU — fundo papel claro indentado (NÃO verde dark)
       ============================================================ */
    #MenuColumn .Submenu {
        background: rgba(232, 216, 168, 0.6) !important;
        background-image: none !important;
        border-top: 1px solid rgba(139, 105, 20, 0.3) !important;
        padding: 4px 0 !important;
    }
    /* Submenuitem (cada link no submenu) */
    #MenuColumn .Submenuitem {
        display: flex !important;
        align-items: center !important;
        padding: 10px 16px 10px 56px !important;
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        border-top: 1px solid rgba(139, 105, 20, 0.15) !important;
        min-height: 44px !important;
        color: #3a1700 !important;
        text-decoration: none !important;
        position: relative !important;
    }
    #MenuColumn .Submenuitem:first-of-type {
        border-top: none !important;
    }

    /* Hide chains laterais (LeftChain/RightChain) — clutter mobile */
    #MenuColumn .Submenuitem .LeftChain,
    #MenuColumn .Submenuitem .RightChain {
        display: none !important;
    }

    /* ActiveSubmenuItemIcon (icon-activesubmenu.gif = setinha ">"
       indicando ativo) — pequena ao lado direita */
    #MenuColumn .Submenuitem .ActiveSubmenuItemIcon {
        display: none !important;
    }

    /* SubmenuitemLabel — texto principal */
    #MenuColumn .Submenuitem .SubmenuitemLabel {
        display: block !important;
        background: transparent !important;
        background-image: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 14px !important;
        font-weight: normal !important;
        color: #3a1700 !important;
        text-transform: none !important;
        text-decoration: none !important;
        flex: 1 1 auto !important;
        min-height: auto !important;
        line-height: 1.3 !important;
        text-shadow: none !important;
    }

    /* OVERRIDE inline style color: white/c89a36 nos submenuitems
       (forçado via inline style do PHP, hard to beat sem !important) */
    #MenuColumn .Submenuitem[style*="color: #ffffff"],
    #MenuColumn .Submenuitem[style*="color:#ffffff"],
    #MenuColumn .Submenuitem[style*="color: #c89a36"],
    #MenuColumn .Submenuitem[style*="color:#c89a36"] {
        color: #3a1700 !important;
    }
    #MenuColumn .Submenuitem[style*="color: #ffffff"] .SubmenuitemLabel,
    #MenuColumn .Submenuitem[style*="color:#ffffff"] .SubmenuitemLabel,
    #MenuColumn .Submenuitem[style*="color: #c89a36"] .SubmenuitemLabel,
    #MenuColumn .Submenuitem[style*="color:#c89a36"] .SubmenuitemLabel {
        color: #3a1700 !important;
    }

    /* Active submenu item — red highlight tibia.com style */
    #MenuColumn .Submenuitem.activeSubmenuItem,
    #MenuColumn a:has(> .Submenuitem) .Submenuitem[style*="color: white"],
    #MenuColumn .Submenuitem[style*="background-color"] {
        background: linear-gradient(180deg, #6b1e1e 0%, #4a1414 100%) !important;
    }

    /* Hover/touch state */
    #MenuColumn .Submenuitem:hover,
    #MenuColumn .Submenuitem:active,
    #MenuColumn a:active .Submenuitem {
        background: linear-gradient(180deg, #6b1e1e 0%, #4a1414 100%) !important;
    }
    #MenuColumn .Submenuitem:hover .SubmenuitemLabel,
    #MenuColumn .Submenuitem:active .SubmenuitemLabel {
        color: #f4d35e !important;
    }

    /* ============================================================
       7. DRAWER container — refinements
       ============================================================ */
    #MenuColumn {
        background: linear-gradient(180deg, #f5e8c8 0%, #e8d8a8 100%) !important;
        background-image: linear-gradient(180deg, #f5e8c8 0%, #e8d8a8 100%) !important;
        border-right: 3px solid #c89a36 !important;
        padding: 76px 12px 24px !important;
        box-shadow:
            inset -2px 0 0 rgba(139, 105, 20, 0.4),
            4px 0 24px rgba(0, 0, 0, 0.6) !important;
        width: 86% !important;
        max-width: 340px !important;
    }

    /* Drawer header decoração (faixa top com "MENU" estilo tibia) */
    #MenuColumn::before {
        content: "Menu" !important;
        display: block !important;
        position: absolute !important;
        top: 56px !important;
        left: 12px !important;
        right: 12px !important;
        background: linear-gradient(180deg, #4a1c08 0%, #2a0e02 100%) !important;
        color: #f4d35e !important;
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 12px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 3px !important;
        text-align: center !important;
        padding: 6px 0 !important;
        border: 1px solid #c89a36 !important;
        border-bottom: 2px solid #c89a36 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
        z-index: 1 !important;
    }

    /* Padding extra no top dos menuitems pra não sobrepor o título "MENU" */
    #MenuColumn > div:first-of-type,
    #MenuColumn > #Loginbox + div {
        margin-top: 36px !important;
    }

    /* ============================================================
       8. Esconder elementos decorativos "órfãos" no drawer
       ============================================================ */
    /* SmallBoxTop/SmallBoxBottom (sprites box-top.gif/box-bottom.gif
       que ficam vazios mostrando barras dark no fundo papel) */
    #MenuColumn .SmallBoxTop,
    #MenuColumn .SmallBoxBottom,
    #MenuColumn .SmallBoxBorder,
    #MenuColumn .SmallBoxButtonContainer,
    #MenuColumn div[style*="box-top.gif"],
    #MenuColumn div[style*="box-bottom.gif"] {
        display: none !important;
    }

    /* CornerWrapper (decorações dos cantos do drawer) */
    #MenuColumn .CornerWrapper-t,
    #MenuColumn .CornerWrapper-b,
    #MenuColumn .Corner-tl,
    #MenuColumn .Corner-tr,
    #MenuColumn .Corner-bl,
    #MenuColumn .Corner-br {
        display: none !important;
    }
}

/* ================================================================
   v20 (2026-05-10) — Polish do drawer pos-v19:
   - .Icon e .Label sobrepondo (texto em cima do icon-news.gif)
   - Padding-left consistente nos submenus pra alinhar com Label
   - Fonte serif IM Fell English mais visivel
   - Banner "MENU" mais compacto + altura header drawer ajustada
   ================================================================ */

@media (max-width: 768px) {

    /* Reset display:contents no MenuButton (estava bagunçando layout) */
    #MenuColumn .menuitem .MenuButton {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        padding: 14px 16px !important;
    }
    #MenuColumn .menuitem .MenuButton > div,
    #MenuColumn .menuitem .MenuButton > span,
    #MenuColumn .menuitem > span {
        display: contents !important;
    }
    #MenuColumn .menuitem .MenuButton > div > div {
        display: contents !important;
    }

    /* Icon: posicionado absolute pra ficar fixo à esquerda + Label não sobrepõe */
    #MenuColumn .menuitem .Icon {
        display: block !important;
        position: static !important;
        order: 0 !important;
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        margin: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) !important;
    }

    /* Label: ocupa o espaço restante COM margin pra não colar no icon */
    #MenuColumn .menuitem .Label {
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        background: transparent !important;
        background-image: none !important;
        margin: 0 0 0 14px !important;
        padding: 0 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 17px !important;
        font-weight: bold !important;
        color: #3a1700 !important;
        text-transform: none !important;
        letter-spacing: 0.2px !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
    }

    /* Extend (+/-): à direita */
    #MenuColumn .menuitem .Extend {
        display: block !important;
        position: static !important;
        order: 2 !important;
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 0 0 8px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        opacity: 0.85 !important;
        /* Não usar filter sepia (estava deixando pixelado) */
        filter: none !important;
    }

    /* Submenu items: padding-left mais generoso pra alinhar com Label do parent (32 icon + 14 gap + 16 base = 62 ~ 56-60) */
    #MenuColumn .Submenuitem {
        padding: 10px 14px 10px 62px !important;
    }
    #MenuColumn .Submenuitem .SubmenuitemLabel {
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
    }

    /* Active state — red highlight com text shadow pra contraste */
    #MenuColumn .Submenuitem:hover,
    #MenuColumn .Submenuitem:active,
    #MenuColumn a:hover .Submenuitem,
    #MenuColumn a:active .Submenuitem {
        background: linear-gradient(180deg, #8b2424 0%, #5a1414 100%) !important;
        border-color: rgba(0, 0, 0, 0.3) !important;
    }
    #MenuColumn .Submenuitem:hover .SubmenuitemLabel,
    #MenuColumn .Submenuitem:active .SubmenuitemLabel,
    #MenuColumn a:hover .SubmenuitemLabel,
    #MenuColumn a:active .SubmenuitemLabel {
        color: #fff7e0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }

    /* Active inline style (PHP forca color:#ffffff no item ativo) */
    /* Detectar item ativo: tem inline style color:white E está dentro de submenu */
    #MenuColumn a[href*="/?news"]:has(.Submenuitem[style*="color: white"]) .Submenuitem,
    #MenuColumn .Submenuitem[style*="color: white"]:not([style*="ffffff"]) {
        background: linear-gradient(180deg, #8b2424 0%, #5a1414 100%) !important;
    }
    #MenuColumn .Submenuitem[style*="color: white"]:not([style*="ffffff"]) .SubmenuitemLabel {
        color: #fff7e0 !important;
        font-weight: bold !important;
    }

    /* ============================================================
       Drawer header (logo OniWorld ATS) — limpar
       ============================================================ */
    /* Esconder o logo decorativo do topo do drawer (LeftArtwork)
       que mostra "ONIWORLD ATS" — já tem header global, redundante */
    #MenuColumn #LeftArtwork,
    #MenuColumn .LeftArtwork {
        display: none !important;
    }

    /* Banner "MENU" pseudo-element ajustar position pra topo correto */
    #MenuColumn::before {
        top: 12px !important;
    }
    #MenuColumn > div:first-of-type {
        margin-top: 48px !important;
    }

    /* ============================================================
       Drawer width responsive: 86% em <380px (mais espaço)
       ============================================================ */
    #MenuColumn {
        padding: 60px 14px 24px !important;
    }
}

@media (max-width: 380px) {
    #MenuColumn .menuitem .Label {
        font-size: 16px !important;
    }
    #MenuColumn .Submenuitem {
        padding: 10px 12px 10px 58px !important;
    }
    #MenuColumn .Submenuitem .SubmenuitemLabel {
        font-size: 13px !important;
    }
}

/* ================================================================
   v21 (2026-05-10) — Drawer pro nivel tibia.com mobile real:

   Baseado em analise visual fina das 3 screenshots tibia.com:
   - Fonte gothic medieval (Cinzel/IM Fell English) carregada via
     Google Fonts pra autenticidade
   - Cantos pretos pseudo-3D em TODOS 4 cantos de cada bloco (8x8)
     com border interno gold sutil
   - Border 3D profundo: outer dark + inner highlight + shadow
   - Section header ATIVO (expanded) com BG marrom-vermelho dark
     SEPARADO dos subitems (não só nos sub)
   - Section header COLLAPSED com mini-box "[+]" no canto direito
     em vez de plus.gif simples
   - Spacing generoso entre blocks (8px gap)
   - Sub-items com mini-bullet "›" antes do texto
   - Background paper texture mais rica (multi-layer noise)
   - Active sub-item: red bg + creme text + indent maior
   ================================================================ */

/* Fontes medievais via Google Fonts (free CDN) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=IM+Fell+English:ital@0;1&display=swap');

@media (max-width: 768px) {

    /* ============================================================
       DRAWER container — bg paper texturado multi-layer
       ============================================================ */
    #MenuColumn {
        background:
            radial-gradient(ellipse at top, rgba(255, 247, 224, 0.4) 0%, transparent 60%),
            linear-gradient(180deg, #ede0c0 0%, #d9c89a 50%, #c4b282 100%) !important;
        background-image:
            radial-gradient(ellipse at top, rgba(255, 247, 224, 0.4) 0%, transparent 60%),
            linear-gradient(180deg, #ede0c0 0%, #d9c89a 50%, #c4b282 100%) !important;
        background-color: #d9c89a !important;
        border-right: 4px solid #2a1500 !important;
        border-left: none !important;
        padding: 60px 12px 32px !important;
        box-shadow:
            inset -3px 0 0 rgba(200, 154, 54, 0.5),
            inset 0 -1px 12px rgba(90, 40, 0, 0.15),
            4px 0 28px rgba(0, 0, 0, 0.7) !important;
    }

    /* Banner "MENU" header do drawer */
    #MenuColumn::before {
        content: "TIBIA" !important;
        position: absolute !important;
        top: 10px !important;
        left: 12px !important;
        right: 12px !important;
        background: linear-gradient(180deg, #3a1700 0%, #1a0a00 100%) !important;
        color: #f4d35e !important;
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 8px !important;
        text-align: center !important;
        padding: 10px 0 !important;
        border: 2px solid #c89a36 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 220, 150, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.5),
            0 3px 6px rgba(0, 0, 0, 0.5) !important;
        text-shadow:
            0 1px 0 #6b4f10,
            0 2px 3px rgba(0, 0, 0, 0.7) !important;
        z-index: 1 !important;
        line-height: 1 !important;
    }

    /* ============================================================
       MENUITEM — bloco papel com bordas 3D e cantos pretos 4-side
       ============================================================ */
    #MenuColumn .menuitem {
        background:
            linear-gradient(180deg, rgba(255, 250, 220, 0.95) 0%, rgba(232, 215, 170, 0.95) 100%) !important;
        background-image:
            linear-gradient(180deg, rgba(255, 250, 220, 0.95) 0%, rgba(232, 215, 170, 0.95) 100%) !important;
        border: 2px solid #2a1500 !important;
        border-radius: 0 !important;
        margin: 12px 4px !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            inset 0 -1px 0 rgba(0, 0, 0, 0.15),
            inset 0 0 0 1px rgba(200, 154, 54, 0.4),
            2px 3px 0 rgba(42, 21, 0, 0.4),
            0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    /* Cantos pretos pseudo-3D — 4 cantos visíveis (top-left, top-right) */
    #MenuColumn .menuitem::before,
    #MenuColumn .menuitem::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        width: 10px !important;
        height: 10px !important;
        background: linear-gradient(135deg, #1a0a00 0%, #0a0500 100%) !important;
        border: 1px solid #c89a36 !important;
        z-index: 2 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 220, 150, 0.2),
            0 1px 2px rgba(0, 0, 0, 0.4) !important;
    }
    #MenuColumn .menuitem::before {
        top: -5px !important;
        left: -5px !important;
    }
    #MenuColumn .menuitem::after {
        top: -5px !important;
        right: -5px !important;
    }

    /* Adiciona dois cantos extras via shadow no bottom (DOM não permite mais ::after) */
    /* Use uma layer fake child via background trick */

    /* ============================================================
       MENUBUTTON — header da section (Notícias/Conta/etc)
       ============================================================ */
    #MenuColumn .menuitem .MenuButton {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        padding: 16px 14px 16px 18px !important;
        min-height: 60px !important;
        background: transparent !important;
        background-image: none !important;
        cursor: pointer !important;
    }
    #MenuColumn .menuitem .MenuButton > div,
    #MenuColumn .menuitem .MenuButton > span,
    #MenuColumn .menuitem > span {
        display: contents !important;
    }
    #MenuColumn .menuitem .MenuButton > div > div {
        display: contents !important;
    }

    /* Hide elementos desktop órfãos */
    #MenuColumn .menuitem .Button,
    #MenuColumn .menuitem .Lights,
    #MenuColumn .menuitem .light_lu,
    #MenuColumn .menuitem .light_ld,
    #MenuColumn .menuitem .light_ru {
        display: none !important;
    }

    /* ============================================================
       ICON — preservar sprite tibiacom + visual aprimorado
       ============================================================ */
    #MenuColumn .menuitem .Icon {
        display: block !important;
        position: static !important;
        order: 0 !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        margin: 0 !important;
        filter:
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4))
            saturate(0.9)
            contrast(1.1) !important;
    }

    /* ============================================================
       LABEL — fonte medieval Cinzel (igual ao tibia.com)
       ============================================================ */
    #MenuColumn .menuitem .Label {
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        background: transparent !important;
        background-image: none !important;
        margin: 0 0 0 14px !important;
        padding: 0 !important;
        font-family: "Cinzel", "IM Fell English", Georgia, serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #2a1500 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.2px !important;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.6),
            0 2px 2px rgba(0, 0, 0, 0.15) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
    }

    /* Mapeamento PT-BR (em UPPERCASE pra honrar text-transform) */
    #MenuColumn #news_Label::after { content: "Notícias"; }
    #MenuColumn #account_Label::after { content: "Conta"; }
    #MenuColumn #community_Label::after { content: "Comunidade"; }
    #MenuColumn #library_Label::after { content: "Biblioteca"; }
    #MenuColumn #forum_Label::after { content: "Fórum"; }
    #MenuColumn #shops_Label::after { content: "Loja"; }
    #MenuColumn #charactertrade_Label::after { content: "Bazaar"; }
    #MenuColumn #support_Label::after { content: "Suporte"; }
    #MenuColumn #gallery_Label::after { content: "Galeria"; }
    #MenuColumn #help_Label::after { content: "Ajuda"; }

    /* ============================================================
       EXTEND — mini-box "[+]" / "[-]" como tibia.com
       ============================================================ */
    #MenuColumn .menuitem .Extend {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        order: 2 !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 0 0 10px !important;
        background: linear-gradient(180deg, #fef3d0 0%, #d9c89a 100%) !important;
        background-image: linear-gradient(180deg, #fef3d0 0%, #d9c89a 100%) !important;
        border: 1px solid #5a2800 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2),
            0 1px 2px rgba(0, 0, 0, 0.2) !important;
        filter: none !important;
        position: relative !important;
    }
    /* Substituir sprite plus.gif/minus.gif por glyph "+" textual */
    #MenuColumn .menuitem .Extend::before {
        content: "+" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -55%) !important;
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        color: #5a2800 !important;
        line-height: 1 !important;
    }

    /* ============================================================
       MENUITEM ACTIVE (expanded) — header dark com red highlight
       Detectar via :has(.Submenu .Submenuitem[style*="color: white"])
       ou via inline style do menuitem
       ============================================================ */
    #MenuColumn .menuitem:has(.Submenuitem[style*="color: white"]) .MenuButton,
    #MenuColumn .menuitem:has(.Submenu:not(:empty)) .MenuButton {
        background:
            linear-gradient(180deg, #3a1700 0%, #1a0a00 100%) !important;
        background-image:
            linear-gradient(180deg, #3a1700 0%, #1a0a00 100%) !important;
        border-bottom: 2px solid #c89a36 !important;
    }
    #MenuColumn .menuitem:has(.Submenuitem[style*="color: white"]) .Label,
    #MenuColumn .menuitem:has(.Submenu:not(:empty)) .Label {
        color: #f4d35e !important;
        text-shadow:
            0 1px 0 #6b4f10,
            0 2px 3px rgba(0, 0, 0, 0.7) !important;
    }
    #MenuColumn .menuitem:has(.Submenu:not(:empty)) .Extend::before {
        content: "−" !important;
        color: #f4d35e !important;
    }
    #MenuColumn .menuitem:has(.Submenu:not(:empty)) .Extend {
        background: linear-gradient(180deg, #4a1c08 0%, #2a0e00 100%) !important;
        background-image: linear-gradient(180deg, #4a1c08 0%, #2a0e00 100%) !important;
        border: 1px solid #c89a36 !important;
    }
    /* Icon do menuitem expanded: brilho dourado */
    #MenuColumn .menuitem:has(.Submenu:not(:empty)) .Icon {
        filter:
            drop-shadow(0 0 4px rgba(244, 211, 94, 0.5))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6))
            brightness(1.15)
            contrast(1.1) !important;
    }

    /* ============================================================
       SUBMENU — items dentro do section
       ============================================================ */
    #MenuColumn .Submenu {
        background:
            linear-gradient(180deg, rgba(232, 215, 170, 0.5) 0%, rgba(217, 200, 154, 0.5) 100%) !important;
        background-image:
            linear-gradient(180deg, rgba(232, 215, 170, 0.5) 0%, rgba(217, 200, 154, 0.5) 100%) !important;
        border-top: 1px solid rgba(42, 21, 0, 0.3) !important;
        padding: 4px 0 !important;
    }

    #MenuColumn .Submenuitem {
        display: flex !important;
        align-items: center !important;
        padding: 12px 14px 12px 56px !important;
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        border-top: 1px solid rgba(90, 40, 0, 0.12) !important;
        min-height: 44px !important;
        color: #2a1500 !important;
        text-decoration: none !important;
        position: relative !important;
    }
    #MenuColumn .Submenuitem:first-of-type {
        border-top: none !important;
    }

    /* Bullet "›" antes do texto pra dar visual de lista medieval */
    #MenuColumn .Submenuitem::before {
        content: "›" !important;
        position: absolute !important;
        left: 36px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #8b6914 !important;
        font-family: Georgia, serif !important;
        font-size: 18px !important;
        font-weight: bold !important;
        line-height: 1 !important;
    }

    /* Hide chains/decorações órfãs */
    #MenuColumn .Submenuitem .LeftChain,
    #MenuColumn .Submenuitem .RightChain,
    #MenuColumn .Submenuitem .ActiveSubmenuItemIcon {
        display: none !important;
    }

    #MenuColumn .Submenuitem .SubmenuitemLabel {
        display: block !important;
        background: transparent !important;
        background-image: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: "IM Fell English", Georgia, "Times New Roman", serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        color: #2a1500 !important;
        text-transform: none !important;
        text-decoration: none !important;
        flex: 1 1 auto !important;
        min-height: auto !important;
        line-height: 1.3 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        letter-spacing: 0.2px !important;
    }

    /* Override inline color */
    #MenuColumn .Submenuitem[style*="color"],
    #MenuColumn .Submenuitem[style*="color"] .SubmenuitemLabel {
        color: #2a1500 !important;
    }

    /* ============================================================
       ACTIVE SUBMENU ITEM — red highlight forte
       (PHP injeta inline style="color: white" no item ativo)
       ============================================================ */
    #MenuColumn a:has(.Submenuitem[style*="color: white"]),
    #MenuColumn .Submenuitem[style*="color: white"] {
        background: linear-gradient(180deg, #8b1a1a 0%, #5a0808 100%) !important;
        background-image: linear-gradient(180deg, #8b1a1a 0%, #5a0808 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 220, 150, 0.2),
            inset 0 -1px 0 rgba(0, 0, 0, 0.4),
            inset 4px 0 0 #c89a36 !important;
    }
    #MenuColumn .Submenuitem[style*="color: white"] .SubmenuitemLabel,
    #MenuColumn a:has(.Submenuitem[style*="color: white"]) .SubmenuitemLabel {
        color: #fff7e0 !important;
        font-weight: 600 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }
    #MenuColumn .Submenuitem[style*="color: white"]::before,
    #MenuColumn a:has(.Submenuitem[style*="color: white"]) .Submenuitem::before {
        color: #f4d35e !important;
    }

    /* Hover/touch state — preview red */
    #MenuColumn .Submenuitem:hover,
    #MenuColumn .Submenuitem:active {
        background: linear-gradient(180deg, #6b1212 0%, #3a0404 100%) !important;
    }
    #MenuColumn .Submenuitem:hover .SubmenuitemLabel,
    #MenuColumn .Submenuitem:active .SubmenuitemLabel {
        color: #fff7e0 !important;
    }

    /* ============================================================
       Esconder elementos órfãos do drawer
       ============================================================ */
    #MenuColumn #Loginbox,
    #MenuColumn #LoginstatusContainer,
    #MenuColumn #LoginTop, #MenuColumn #LoginBottom, #MenuColumn #LoginButton,
    #MenuColumn #LeftArtwork, #MenuColumn .LeftArtwork,
    #MenuColumn .SmallBoxTop, #MenuColumn .SmallBoxBottom,
    #MenuColumn .SmallBoxBorder, #MenuColumn .SmallBoxButtonContainer,
    #MenuColumn div[style*="box-top.gif"],
    #MenuColumn div[style*="box-bottom.gif"],
    #MenuColumn .CornerWrapper-t, #MenuColumn .CornerWrapper-b,
    #MenuColumn .Corner-tl, #MenuColumn .Corner-tr,
    #MenuColumn .Corner-bl, #MenuColumn .Corner-br {
        display: none !important;
    }

    /* Espaco do topo pro banner "TIBIA" pseudo */
    #MenuColumn > div:first-child,
    #MenuColumn > #Loginbox + div,
    #MenuColumn > * {
        margin-top: 0 !important;
    }
    #MenuColumn > #news,
    #MenuColumn .menuitem:first-of-type {
        margin-top: 52px !important;
    }
}

@media (max-width: 380px) {
    #MenuColumn .menuitem .Label {
        font-size: 16px !important;
        letter-spacing: 1px !important;
    }
    #MenuColumn .Submenuitem {
        padding: 11px 12px 11px 52px !important;
    }
    #MenuColumn .Submenuitem .SubmenuitemLabel {
        font-size: 14px !important;
    }
}

/* ================================================================
   v22 (2026-05-10) — REFATORAÇÃO TOTAL do mobile.

   Decisao senior: parar de patchar #MenuColumn (drawer herdado do
   desktop tibiacom) e criar componente .om-* (OniWorld Mobile)
   completamente separado. Desktop continua intacto.

   Princípios:
   - Mobile-first separado: SO existe < 768px
   - overflow-x:hidden global + box-sizing universal
   - #MenuColumn (desktop menu) + .InfoBar HIDDEN no mobile
   - Drawer position:fixed transform translateX, width min(82vw, 360px)
   - Backdrop com clique pra fechar + body scroll lock
   - Header fixo 64px com hamburger | logo | conta
   - Accordion via <details>/<summary> nativo (sem JS pesado)
   - Items 48px+ min-height pra touch
   - Identidade Tibia: paper bg + dark headers + gold accents
   - SEM overflow horizontal, SEM area vazia, SEM sobrar
   ================================================================ */

/* Esconde tudo .om-* no desktop (>768px) por default */
.om-topbar, .om-drawer, .om-backdrop { display: none; }

@media (max-width: 768px) {

    /* ============================================================
       0. RESET GLOBAL: viewport correto, sem overflow, box-sizing
       ============================================================ */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    body {
        padding-top: 64px !important;
        margin: 0 !important;
    }
    body.om-locked {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* ============================================================
       HIDE elementos desktop legados no mobile
       ============================================================ */
    /* Drawer desktop antigo */
    #MenuColumn {
        display: none !important;
    }
    /* InfoBar (Baixar Cliente / Discord / Instagram / Facebook) — vai pro drawer footer */
    .InfoBar {
        display: none !important;
    }
    /* Header mobile v18 antigo (oniworld-mobile-header) */
    #oniworld-mobile-header,
    #oniworld-hamburger,
    #oniworld-mobile-backdrop {
        display: none !important;
    }
    /* ContentRow precisa width 100% sem MenuColumn pra sobrepor */
    #ContentRow, #ContentColumn, #ArtworkHelper, #Bodycontainer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        position: static !important;
        min-width: 0 !important;
    }
    #ContentColumn {
        padding: 12px !important;
    }

    /* ============================================================
       1. TOPBAR FIXA (hamburger | logo | conta)
       ============================================================ */
    .om-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        z-index: 1000 !important;
        padding: 0 12px !important;
        background:
            linear-gradient(180deg, #1a0a00 0%, #2a1500 50%, #1a0a00 100%) !important;
        border-bottom: 2px solid #c89a36 !important;
        box-shadow:
            inset 0 -1px 0 rgba(244, 211, 94, 0.3),
            0 4px 12px rgba(0, 0, 0, 0.6) !important;
    }
    /* Decorative gold accents nos cantos top */
    .om-topbar::before, .om-topbar::after {
        content: "";
        position: absolute;
        bottom: -2px;
        width: 32px;
        height: 3px;
        background: linear-gradient(90deg, #c89a36 0%, transparent 100%);
    }
    .om-topbar::before { left: 0; }
    .om-topbar::after { right: 0; transform: scaleX(-1); }

    /* Hamburger button */
    .om-topbar__menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        background: transparent !important;
        border: 1px solid #c89a36 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        flex: 0 0 44px !important;
        -webkit-tap-highlight-color: rgba(244, 211, 94, 0.3) !important;
    }
    .om-topbar__menu-bar {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #f4d35e !important;
        transition: all 0.25s ease !important;
    }
    .om-topbar__menu.is-active .om-topbar__menu-bar:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px) !important;
    }
    .om-topbar__menu.is-active .om-topbar__menu-bar:nth-child(2) {
        opacity: 0 !important;
    }
    .om-topbar__menu.is-active .om-topbar__menu-bar:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px) !important;
    }

    /* Logo central */
    .om-topbar__logo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-decoration: none !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .om-topbar__logo img {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 4px !important;
        background: transparent !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
    }
    .om-topbar__brand {
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        background: linear-gradient(180deg, #ffeb8a 0%, #c89a36 60%, #8b6914 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Account button */
    .om-topbar__account {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        background:
            linear-gradient(180deg, #4a78c8 0%, #1d3d7a 100%) !important;
        border: 1px solid #c89a36 !important;
        border-radius: 4px !important;
        color: #f4d35e !important;
        text-decoration: none !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.4),
            0 1px 3px rgba(0, 0, 0, 0.5) !important;
        -webkit-tap-highlight-color: rgba(244, 211, 94, 0.3) !important;
    }

    /* ============================================================
       2. DRAWER (esquerda → direita, 82vw max 360px)
       ============================================================ */
    .om-drawer {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(82vw, 360px) !important;
        height: 100% !important;
        height: 100dvh !important;
        z-index: 1100 !important;
        background:
            radial-gradient(ellipse at top, rgba(255, 247, 224, 0.4) 0%, transparent 60%),
            linear-gradient(180deg, #ede0c0 0%, #d9c89a 50%, #c4b282 100%) !important;
        background-color: #d9c89a !important;
        border-right: 4px solid #2a1500 !important;
        box-shadow:
            inset -3px 0 0 rgba(200, 154, 54, 0.5),
            6px 0 32px rgba(0, 0, 0, 0.7) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        will-change: transform;
    }
    .om-drawer.is-open {
        transform: translateX(0) !important;
    }

    /* Drawer header (logo + close) */
    .om-drawer__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 16px !important;
        background:
            linear-gradient(180deg, #3a1700 0%, #1a0a00 100%) !important;
        border-bottom: 2px solid #c89a36 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }
    .om-drawer__brand {
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        color: #f4d35e !important;
        text-shadow:
            0 1px 0 #6b4f10,
            0 2px 4px rgba(0, 0, 0, 0.6) !important;
    }
    .om-drawer__close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 1px solid #c89a36 !important;
        border-radius: 4px !important;
        color: #f4d35e !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(244, 211, 94, 0.3) !important;
    }

    /* Nav container */
    .om-drawer__nav {
        flex: 1 1 auto !important;
        padding: 12px 8px !important;
    }

    /* ============================================================
       3. ACCORDION SECTIONS via <details>
       ============================================================ */
    .om-section {
        background:
            linear-gradient(180deg, rgba(255, 250, 220, 0.95) 0%, rgba(232, 215, 170, 0.95) 100%) !important;
        border: 1px solid #2a1500 !important;
        margin: 8px 0 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 2px 4px rgba(0, 0, 0, 0.2) !important;
        overflow: hidden !important;
    }
    /* Single (sem accordion, link direto) */
    .om-section--single {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        min-height: 56px !important;
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.2px !important;
        color: #2a1500 !important;
        text-decoration: none !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }
    .om-section--single::after {
        content: "›";
        color: #8b6914;
        font-size: 22px;
        font-weight: bold;
        line-height: 1;
    }

    /* Summary (header da section) */
    .om-section > summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        min-height: 56px !important;
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.2px !important;
        color: #2a1500 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
        cursor: pointer !important;
        list-style: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: rgba(139, 105, 20, 0.15) !important;
    }
    .om-section > summary::-webkit-details-marker {
        display: none !important;
    }
    /* Mini-box "+" / "−" indicator */
    .om-section > summary::after {
        content: "+";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        background: linear-gradient(180deg, #fef3d0 0%, #d9c89a 100%);
        border: 1px solid #5a2800;
        font-family: "Cinzel", Georgia, serif;
        font-size: 18px;
        font-weight: 900;
        color: #5a2800;
        line-height: 1;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .om-section[open] > summary {
        background:
            linear-gradient(180deg, #3a1700 0%, #1a0a00 100%) !important;
        color: #f4d35e !important;
        text-shadow:
            0 1px 0 #6b4f10,
            0 2px 3px rgba(0, 0, 0, 0.6) !important;
        border-bottom: 1px solid #c89a36 !important;
    }
    .om-section[open] > summary::after {
        content: "−";
        background: linear-gradient(180deg, #4a1c08 0%, #2a0e00 100%);
        border-color: #c89a36;
        color: #f4d35e;
    }

    /* Links dentro do <details> (subitems) */
    .om-section > a {
        display: flex !important;
        align-items: center !important;
        padding: 14px 18px 14px 32px !important;
        min-height: 48px !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #2a1500 !important;
        text-decoration: none !important;
        border-top: 1px solid rgba(90, 40, 0, 0.12) !important;
        position: relative !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        background: transparent !important;
    }
    .om-section > a::before {
        content: "›";
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #8b6914;
        font-size: 16px;
        font-weight: bold;
        line-height: 1;
    }
    .om-section > a:active,
    .om-section > a:hover {
        background:
            linear-gradient(180deg, #8b1a1a 0%, #5a0808 100%) !important;
        color: #fff7e0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }
    .om-section > a:active::before,
    .om-section > a:hover::before {
        color: #f4d35e !important;
    }

    /* ============================================================
       4. DRAWER FOOTER (CTA + copyright)
       ============================================================ */
    .om-drawer__footer {
        padding: 16px 12px 24px !important;
        border-top: 1px solid rgba(42, 21, 0, 0.3) !important;
        background: rgba(42, 21, 0, 0.05) !important;
        text-align: center !important;
    }
    .om-drawer__cta {
        display: block !important;
        padding: 14px 16px !important;
        min-height: 48px !important;
        background:
            linear-gradient(180deg, #d4a93f 0%, #8b6914 100%) !important;
        color: #1a0a00 !important;
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        text-decoration: none !important;
        text-align: center !important;
        border: 2px solid #5a2800 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.4) !important;
    }
    .om-drawer__copy {
        display: block !important;
        margin-top: 10px !important;
        font-size: 11px !important;
        color: #5a2800 !important;
        font-family: Georgia, serif !important;
        opacity: 0.7 !important;
    }

    /* ============================================================
       5. BACKDROP
       ============================================================ */
    .om-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1050 !important;
        background: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }
    .om-backdrop.is-open {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* >768px: garante que .om-* fica HIDDEN */
@media (min-width: 769px) {
    .om-topbar, .om-drawer, .om-backdrop {
        display: none !important;
    }
}

/* v22.1 polish (2026-05-10) */
@media (max-width: 768px) {
    /* Hide img.Title (sprite martel.ttf borrado em mobile) — usar h2 textual */
    body img.Title, body .Box img.Title, body [id] > img.Title {
        display: none !important;
    }
    /* Mostrar h2.oniworld-mobile-title como header de página */
    body .oniworld-mobile-title {
        display: block !important;
        background: linear-gradient(180deg, #3a1700 0%, #1a0a00 100%) !important;
        color: #f4d35e !important;
        font-family: "Cinzel", Georgia, serif !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        padding: 14px 16px !important;
        margin: 0 0 12px 0 !important;
        border: 2px solid #c89a36 !important;
        text-shadow: 0 1px 0 #6b4f10, 0 2px 4px rgba(0,0,0,.7) !important;
        text-align: center !important;
    }
    /* Esconder decoracoes orfas do main content (corners, borders, helper divs) */
    .Corner-tl, .Corner-tr, .Corner-bl, .Corner-br,
    .CornerWrapper-t, .CornerWrapper-b,
    .Border_1, .Border_2:empty, .Border_3:empty,
    .BorderTitleText:empty,
    #HelperDivHeadline, #HelperDivContainer,
    [id^="HelperDiv"] {
        display: none !important;
    }
    /* Border_2 e Border_3 com conteudo: keep mas sem background-image gif */
    .Border_2, .Border_3 {
        background-image: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    /* CaptionContainer decorations hide */
    .CaptionEdgeLeftTop, .CaptionEdgeRightTop,
    .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
    .CaptionBorderTop, .CaptionBorderBottom,
    .CaptionVerticalLeft, .CaptionVerticalRight {
        display: none !important;
    }
}


/* ============================================================
   v30 (2026-05-11) — Clean rewrite scoped a #ContentHelper #news.Box
   v25-v29 (~650 linhas) deletadas. Cascade reseta aqui.
   Specificity (2 IDs + classe + child) vence regras .Border_1 / 
   .BorderTitleText:empty / img.Title display:none globais
   anteriores em mobile.css.
   ============================================================ */
@media (max-width: 768px) {
    #ContentHelper #news.Box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    #ContentHelper #news.Box > .Border_1 {
        display: block !important;
        height: 6px !important;
        width: 100% !important;
        background-image: url(/templates/tibiacom/images/content/border-1.gif) !important;
        background-repeat: repeat-x !important;
        background-position: left top !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #ContentHelper #news.Box > .BorderTitleText {
        display: block !important;
        visibility: visible !important;
        height: 30px !important;
        min-height: 30px !important;
        width: 100% !important;
        background-image: url(/templates/tibiacom/images/content/title-background-green.gif) !important;
        background-repeat: repeat-x !important;
        background-position: left top !important;
        background-size: auto 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    #ContentHelper #news.Box > .oniworld-mobile-title {
        display: none !important;
    }

    #ContentHelper #news.Box > img.Title {
        display: block !important;
        position: relative !important;
        margin: -30px 0 0 16px !important;
        width: auto !important;
        height: 30px !important;
        max-height: 30px !important;
        max-width: calc(100% - 32px) !important;
        z-index: 5 !important;
    }

    #ContentHelper #news.Box > .Border_2,
    #ContentHelper #news.Box > .Border_2 > .Border_3 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-image: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    #ContentHelper #news.Box .BoxContent {
        background-image: url(/templates/tibiacom/images/content/scroll.gif) !important;
        background-repeat: repeat !important;
        padding: 12px 12px 16px !important;
        box-sizing: border-box !important;
    }

    #ContentHelper #news.Box .NewsHeadline {
        margin: 0 0 10px 0 !important;
    }

    #ContentHelper #news.Box .NewsHeadlineBackground {
        position: relative !important;
        display: block !important;
        min-height: 36px !important;
        padding: 6px 8px 6px 44px !important;
        box-sizing: border-box !important;
        background-image: url(/templates/tibiacom/images/news/newsheadline_background.gif) !important;
        background-repeat: repeat-x !important;
        background-size: auto 100% !important;
        border: 1px solid #160604 !important;
        outline: none !important;
        border-radius: 0 !important;
        line-height: 1.15 !important;
    }

    #ContentHelper #news.Box .NewsHeadlineIcon {
        position: absolute !important;
        left: 9px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 26px !important;
        height: 26px !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #ContentHelper #news.Box .NewsHeadlineDate {
        display: inline !important;
        font-family: Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #ffffff !important;
        margin: 0 4px 0 0 !important;
        white-space: nowrap !important;
        position: static !important;
    }

    #ContentHelper #news.Box .NewsHeadlineText {
        display: inline !important;
        font-family: Verdana, Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    #ContentHelper #news.Box .NewsHeadlineText p {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        font: inherit !important;
        color: inherit !important;
    }

    #ContentHelper #news.Box table {
        width: 100% !important;
        max-width: 100% !important;
    }

    #ContentHelper #news.Box td {
        box-sizing: border-box !important;
    }

    #ContentHelper #news.Box td[style*="padding-left"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #ContentHelper #news.Box img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================================
   v31 (2026-05-11) — Headline faixa fina + paths absolutos
   v30 corrigida in-place pra paths absolutos.
   v31 ajusta NewsHeadlineBackground pra faixa compacta (min-height 34,
   padding 4/8/4/42, icon 24x24) em vez de card alto.
   ============================================================ */
@media (max-width: 768px) {
    #ContentHelper #news.Box .NewsHeadline {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
    }
    #ContentHelper #news.Box .NewsHeadlineBackground {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-height: 34px !important;
        height: auto !important;
        padding: 4px 8px 4px 42px !important;
        box-sizing: border-box !important;
        background-image: url(/templates/tibiacom/images/news/newsheadline_background.gif) !important;
        background-repeat: repeat-x !important;
        background-size: auto 100% !important;
        border: 1px solid #160604 !important;
        outline: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        line-height: 1.1 !important;
    }
    #ContentHelper #news.Box .NewsHeadlineIcon {
        position: absolute !important;
        left: 9px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
        max-width: none !important;
        margin: 0 !important;
    }
    #ContentHelper #news.Box .NewsHeadlineText {
        font-size: 16px !important;
    }
    #ContentHelper #news.Box .BoxContent {
        padding: 10px 10px 14px !important;
    }
}