/*
 =========================================================
 * MuBellum — mobile.css  (v11)
 * Loaded ONLY on screens <= 768px wide.
 * Desktop / PC view is 100% unaffected.
 =========================================================
*/

/* Hide mobile background on desktop — MUST be outside @media */
#mobile-bg-layer {
    display: none;
}

@media only screen and (max-width: 768px) {

/* =====================================================
   1. BACKGROUND
   #mobile-bg-layer is a position:fixed div injected by
   index.php. Changed to top center so the best part of
   the nebula image is always visible.
===================================================== */
html {
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #080005 !important;
}
body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    padding-bottom: 60px !important;
}
#mobile-bg-layer {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mobile-bg-layer img {
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100vw !important;
    min-height: 100% !important;
    object-fit: fill !important;
    display: block !important;
    image-rendering: auto !important;
    filter: saturate(1.6) contrast(1.1) !important;
}

/* =====================================================
   2. NAVBAR — fixed top bar, centered buttons
   Language switcher overlays the LEFT side of the
   navbar via the re-positioned .global-top-bar below.
===================================================== */
#navbar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    height: 52px !important;
    box-sizing: border-box !important;
    background: linear-gradient(to bottom, rgba(12,0,6,0.98), rgba(6,0,3,0.98)) !important;
    border-bottom: 1px solid rgba(161,18,18,0.6) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.9) !important;
}
/* Hide desktop nav links */
#navbar ul { display: none !important; }

/* Mobile action buttons — centered */
#mobile-nav-shortcuts {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 !important;
    overflow: visible !important;
    padding-left: 46px !important; /* make room for language flag on left */
    padding-right: 52px !important; /* make room for hamburger on right */
}

/* ── LANGUAGE SWITCHER — overlays left side of navbar ─ */
.global-top-bar {
    display: flex !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 8px !important;
    width: auto !important;
    height: 52px !important;
    z-index: 10001 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;
}
.global-top-bar .global-top-bar-content {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
    width: auto !important;
}
.global-top-bar-content > .row {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
/* Language column — visible on left inside navbar */
.global-top-bar-content .col-xs-6.text-left {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
/* Login/logout column — hidden here, using mobile buttons */
.global-top-bar-content .col-xs-6.text-right {
    display: none !important;
}
/* Language switcher widget */
.webengine-language-switcher {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    overflow: visible !important;
    transition: none !important;
    z-index: 10001 !important;
}
.webengine-language-switcher:hover { width: auto !important; }
/* All li hidden by default */
.webengine-language-switcher li {
    display: none !important;
    list-style: none !important;
    list-style-type: none !important;
    background: rgba(15,3,10,0.97) !important;
    border-bottom: 1px solid rgba(161,18,18,0.3) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
/* First li = trigger = always visible — CENTERED in 52px navbar */
.webengine-language-switcher li:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    height: 52px !important;
    min-height: 52px !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
.webengine-language-switcher li:first-child a {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #f5c518 !important;
    background: linear-gradient(180deg, #5a0a0a 0%, #3a0505 100%) !important;
    border: 1px solid rgba(200,60,60,0.7) !important;
    border-radius: 3px !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
    box-shadow: 0 0 5px rgba(180,0,0,0.4) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    height: auto !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.webengine-language-switcher li:first-child a:focus,
.webengine-language-switcher li:first-child a:active {
    background: linear-gradient(180deg, #5a0a0a 0%, #3a0505 100%) !important;
    border: 1px solid rgba(200,60,60,0.7) !important;
    box-shadow: 0 0 5px rgba(180,0,0,0.4) !important;
    outline: none !important;
    color: #f5c518 !important;
}
.webengine-language-switcher li:first-child a img {
    width: 18px !important; height: 12px !important;
    border: none !important; box-shadow: none !important;
    display: inline-block !important;
}
/* Hover or .open class shows dropdown — BELOW trigger, never above */
.webengine-language-switcher.open li:not(:first-child) {
    display: block !important;
}
/* Dropdown items: position absolutely BELOW the navbar (top:52px) */
.webengine-language-switcher.open li:not(:first-child),
.webengine-language-switcher:hover li:not(:first-child) {
    position: fixed !important;
    left: 8px !important;
    width: 110px !important;
    z-index: 10002 !important;
    background: rgba(15,3,10,0.97) !important;
    border: 1px solid rgba(161,18,18,0.5) !important;
    border-top: none !important;
}
/* Stack dropdown items vertically BELOW navbar */
.webengine-language-switcher.open li:nth-child(2),
.webengine-language-switcher:hover li:nth-child(2) { top: 52px !important; }
.webengine-language-switcher.open li:nth-child(3),
.webengine-language-switcher:hover li:nth-child(3) { top: 83px !important; }
.webengine-language-switcher.open li:nth-child(4),
.webengine-language-switcher:hover li:nth-child(4) { top: 114px !important; }
.webengine-language-switcher.open li:nth-child(5),
.webengine-language-switcher:hover li:nth-child(5) { top: 145px !important; }
.webengine-language-switcher.open li:nth-child(6),
.webengine-language-switcher:hover li:nth-child(6) { top: 176px !important; }
.webengine-language-switcher.open li:nth-child(7),
.webengine-language-switcher:hover li:nth-child(7) { top: 207px !important; }
.webengine-language-switcher.open li:nth-child(8),
.webengine-language-switcher:hover li:nth-child(8) { top: 238px !important; }
.webengine-language-switcher li:not(:first-child) a {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 10px !important;
    color: #c9a96e !important;
    background: rgba(15,3,10,0.98) !important;
    border-bottom: 1px solid rgba(161,18,18,0.3) !important;
    padding: 7px 8px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}
.webengine-language-switcher li a img {
    width: 18px !important;
    height: 12px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
}

/* ── REGISTER button ── */
#mobile-top-register {
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #f5c518 !important;
    text-shadow: 0 0 6px rgba(255,180,0,0.5) !important;
    background: linear-gradient(180deg, #6a0808 0%, #3d0404 100%) !important;
    border: 2px solid #c0392b !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    animation: reg-border-glow 2s ease-in-out infinite !important;
}
@keyframes reg-border-glow {
    0%,100% { box-shadow: 0 0 4px rgba(200,0,0,0.5), inset 0 0 3px rgba(200,0,0,0.2); border-color: #c0392b; }
    50%      { box-shadow: 0 0 12px rgba(255,40,40,1), 0 0 22px rgba(200,0,0,0.5), inset 0 0 6px rgba(255,0,0,0.15); border-color: #ff4444; }
}

/* ── LOGIN button ── */
#mobile-top-login {
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #f5c518 !important;
    background: linear-gradient(180deg, #7a1a1a 0%, #4a0a0a 100%) !important;
    border: 2px solid #c0392b !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 4px rgba(180,0,0,0.4) !important;
}

/* ── ONLINE PLAYERS button (logged in) ── */
#mobile-top-online {
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #00ff44 !important;
    text-shadow: 0 0 4px rgba(0,255,68,0.5) !important;
    background: linear-gradient(180deg, #7a1a1a 0%, #4a0a0a 100%) !important;
    border: 2px solid #c0392b !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: 0 0 4px rgba(180,0,0,0.4) !important;
}

/* ── LOGOUT button ── */
#mobile-top-logout {
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #f5c518 !important;
    background: linear-gradient(180deg, #7a1a1a 0%, #4a0a0a 100%) !important;
    border: 2px solid #c0392b !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 4px rgba(180,0,0,0.4) !important;
}

/* ── Hamburger — far right ── */
#mobile-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(80,0,0,0.85) !important;
    border: 1px solid #8b0000 !important;
    border-radius: 4px !important;
    padding: 7px 12px !important;
    cursor: pointer !important;
    z-index: 10005 !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    right: 8px !important;
    pointer-events: all !important;
}
#mobile-hamburger span {
    font-size: 22px !important;
    color: #c9a96e !important;
    line-height: 1 !important;
}

/* =====================================================
   3. MOBILE MENU OVERLAY (hamburger expands)
===================================================== */
#mobile-nav-menu {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    min-height: -webkit-fill-available !important;
    background: rgba(8,3,10,0.97) !important;
    z-index: 99999 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    display: none !important;
    padding: 60px 0 30px !important;
    box-sizing: border-box !important;
}
#mobile-nav-menu.open { display: flex !important; }
#mobile-nav-close {
    position: absolute !important;
    top: 15px !important; right: 20px !important;
    font-size: 28px !important; color: #c9a96e !important;
    background: none !important; border: none !important;
    cursor: pointer !important; line-height: 1 !important; padding: 5px !important;
}
#mobile-nav-links {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; width: 100% !important;
}
#mobile-nav-links a {
    font-family: 'MedievalSharp', cursive !important;
    font-size: 17px !important; letter-spacing: 3px !important;
    color: #c9a96e !important; text-decoration: none !important;
    padding: 13px 20px !important;
    border-bottom: 1px solid rgba(161,18,18,0.25) !important;
    width: 80% !important; text-align: center !important;
    text-transform: uppercase !important; display: block !important;
}
#mobile-nav-links a.navbar-register-btn {
    color: #f5c518 !important; font-weight: bold !important;
    border: 2px solid rgba(255,60,60,0.6) !important;
    border-radius: 4px !important;
    background: linear-gradient(to bottom, rgba(100,0,0,0.5), rgba(50,0,0,0.7)) !important;
    margin: 10px auto !important; width: auto !important;
    padding: 10px 30px !important; display: inline-block !important;
}
#mobile-nav-auth {
    margin-top: 20px !important; display: flex !important;
    gap: 12px !important; flex-wrap: wrap !important;
    justify-content: center !important;
}
#mobile-nav-auth a {
    font-family: 'Cinzel', serif !important; font-size: 12px !important;
    color: #f5c518 !important;
    background: linear-gradient(180deg, #7a1a1a 0%, #4a0a0a 100%) !important;
    border: 2px solid #c0392b !important; border-radius: 4px !important;
    padding: 8px 16px !important; text-transform: uppercase !important;
    text-decoration: none !important;
}

/* =====================================================
   4. HEADER / LOGO
===================================================== */
#header {
    min-height: 0 !important;
    margin-top: 52px !important;
    padding: 0 !important;
    overflow: visible !important;
}
#header > a, .webengine-mu-logo, #logo-hover-zone, .sparks {
    display: none !important;
}
#mobile-logo {
    display: block !important;
    text-align: center !important;
    padding: 4px 6px 0px !important; /* Reduced bottom gap toward header-info */
}
#mobile-logo img {
    width: 100% !important;
    max-width: 480px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* =====================================================
   5. ONLINE PLAYERS BOX
===================================================== */
.header-info-container {
    width: 100% !important; padding: 0 6px !important;
    box-sizing: border-box !important;
    margin-top: -8px !important; /* Pull closer to logo */
}
.header-info {
    width: 100% !important; max-width: 100% !important;
    margin: 1px auto 4px auto !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    min-height: 80px !important;
}
.header-info .col-xs-12[style*="display:flex"],
.header-info .col-xs-12[style*="space-between"] {
    align-items: center !important;
    min-height: 48px !important;
}
.online-users-label {
    font-size: 15px !important;
    line-height: 1 !important;
    align-self: center !important;
}
.online-count {
    font-size: 30px !important;
    line-height: 1 !important;
    align-self: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =====================================================
   6. MAIN CONTAINER & CONTENT
   KEY FIX: overflow:hidden creates a new block
   formatting context, forcing the container to
   contain all its children — making it extend fully
   to the bottom instead of collapsing short.
===================================================== */
#container {
    width: 100% !important;
    border-radius: 0 !important;
    padding: 6px 0 0 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* CRITICAL: contains floated children */
}
#container::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}
#content {
    padding: 6px 8px 16px 8px !important;
    min-height: 0 !important;
    overflow: hidden !important; /* Also clearfix */
    box-sizing: border-box !important;
}
#content::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* =====================================================
   7. PANEL BACKGROUNDS
   Covers ALL panel types: VIP, Transfer Credits,
   Support Tickets, Referral, Buy Credits, etc.
===================================================== */
body #container,
body .footer,
body .panel-news,
body .panel-general,
body .panel-sidebar,
body .panel-addstats,
body .panel-downloads,
body .myaccount-table,
body .general-table-ui,
body .panel-usercp,
body .rankings-table-wrapper,
body .panel-login,
body .login-panel,
body .account-login-panel,
body .panel,
body .panel-vip,
body .header-info,
body .alert-info,
body .alert-warning {
    background: rgba(55, 20, 40, 0.88) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2px solid rgba(161,18,18,0.55) !important;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.9), 0 0 14px rgba(100,20,50,0.3) !important;
}
/* Restore VIP panel background images — override the generic panel background above */
body .panel-vip.type1 {
    background: #000000 url('../img/vip_panel_bg_1.jpg') center/cover no-repeat !important;
    border: 2px solid rgba(255,160,108,0.5) !important;
}
body .panel-vip.type2 {
    background: #000000 url('../img/vip_panel_bg_2.jpg') center/cover no-repeat !important;
    border: 2px solid rgba(220,220,220,0.5) !important;
}
body .panel-vip.type3 {
    background: #000000 url('../img/vip_panel_bg_3.jpg') center/cover no-repeat !important;
    border: 2px solid rgba(255,187,56,0.5) !important;
}
body .panel-vip.type4 {
    background: #000000 url('../img/vip_panel_bg_4.jpg') center/cover no-repeat !important;
    border: 2px solid rgba(99,255,187,0.5) !important;
}
/* VIP panel headings - gold text matching type color */
body .panel-vip.type1 .panel-heading .panel-title { color: #ffa06c !important; }
body .panel-vip.type2 .panel-heading .panel-title { color: #dcdcdc !important; }
body .panel-vip.type3 .panel-heading .panel-title { color: #ffbb38 !important; }
body .panel-vip.type4 .panel-heading .panel-title { color: #63ffbb !important; }
body .panel-body,
body .alert-info,
body .alert-warning {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =====================================================
   8. PANEL HEADINGS — full-width purple/gold style matching News history
   Applies consistently to ALL panels everywhere on site.
===================================================== */
body .panel-heading,
body .panel-heading:has(.panel-title) {
    background: rgba(18,8,24,0.95) !important;
    border-top: 3px solid #c0392b !important;
    border-bottom: 5px solid #c9a96e !important;
    border-left: none !important;
    border-right: none !important;
    padding: 10px 14px !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
body .panel-heading h3,
body .panel-heading .panel-title {
    font-family: 'MedievalSharp', cursive !important;
    color: #c9a96e !important;
    text-shadow: 1px 1px 3px #000, 0 0 8px rgba(201,169,110,0.5) !important;
    letter-spacing: 1.5px !important;
    text-align: left !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex: 1 !important;
    margin: 0 !important;
    padding-right: 8px !important;
}
/* Downloads panel-title (sub-panel headers inside body) — same purple style */
body .panel-body .panel-title,
body .panel-downloads .panel-body .panel-title {
    font-family: 'MedievalSharp', cursive !important;
    color: #c9a96e !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    background: rgba(18,8,24,0.95) !important;
    border-top: 3px solid #c0392b !important;
    border-bottom: 5px solid #c9a96e !important;
    padding: 10px 14px !important;
    margin: 8px -15px !important;
    text-align: left !important;
    letter-spacing: 1.5px !important;
    text-shadow: 1px 1px 3px #000, 0 0 8px rgba(201,169,110,0.5) !important;
    width: calc(100% + 30px) !important;
    box-sizing: border-box !important;
    display: block !important;
}
body .panel-heading .btn.pull-right,
body .panel-heading a.pull-right,
body .panel-heading .btn-xs {
    flex-shrink: 0 !important;
    float: none !important;
    margin-left: 6px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
}

/* =====================================================
   9. HOME — stack all columns full width
===================================================== */
/* 23px gap between all panels — to change this number, edit the value below */
body .panel, body .panel-news, body .panel-general, body .panel-sidebar,
body .panel-addstats, body .panel-downloads, body .panel-usercp,
body .panel-vip, body .rankings-table-wrapper, body .header-info,
body .alert-info, body .alert-warning {
    margin-bottom: 23px !important;
}
.home-news-block.col-xs-8 {
    width: 100% !important; float: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
}
.home-news-block ~ .col-xs-4 {
    width: 100% !important; float: none !important;
    clear: both !important;
    padding-left: 0 !important; padding-right: 0 !important;
}
.home-news-block-header .col-xs-8 { width: 60% !important; float: left !important; }
.home-news-block-header .col-xs-4 { width: 40% !important; float: right !important; }

/* =====================================================
   10. HOME — Login panel & banners
===================================================== */
.panel-sidebar,
.panel-sidebar.panel-login,
.panel-login,
.login-module {
    width: 100% !important; max-width: 100% !important;
    margin-bottom: 12px !important; box-sizing: border-box !important;
}
.panel-login .panel-body, .login-panel .panel-body { padding: 12px 16px !important; }
.panel-login .form-control, .panel-login input {
    width: 100% !important; box-sizing: border-box !important;
    font-size: 16px !important; margin-bottom: 8px !important;
}
.panel-login button[type="submit"],
.panel-login .btn-primary { width: 100% !important; margin-top: 4px !important; }

/* Sidebar banners — match panel width */
.sidebar-banner {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 10px auto !important;
    box-sizing: border-box !important;
}
.sidebar-banner a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
.sidebar-banner img {
    width: 92% !important; /* Slightly inset to match panel visual weight */
    max-width: 380px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}
/* HIDE the download banner (requires sidebar.php class change — see notes) */
.sidebar-banner-dl {
    display: none !important;
}

/* =====================================================
   11. HOME — Bottom 3 panels (Top Resets/Guilds/Events)
===================================================== */
.home-panels-row { display: block !important; }
.home-panels-row > div.col-xs-4 {
    width: 100% !important; float: none !important;
    margin-bottom: 10px !important; display: block !important;
}
.home-panels-row .panel-body[style*="min-height"] { min-height: 0 !important; }

/* =====================================================
   12. USER CONTROL PANEL
   Icons on LEFT, name on RIGHT of icon — flex row on li.
   HTML structure: <li><img src="icon"><a href="...">Name</a></li>
   Icon is a SIBLING of <a>, so flex goes on <li> not <a>.
   Same full width as panels below it.
===================================================== */
.panel-sidebar.panel-usercp {
    width: 100% !important; max-width: 100% !important;
    margin-bottom: 12px !important;
    border-radius: 4px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.panel-sidebar.panel-usercp .panel-body { padding: 2px 0 !important; }
.panel-usercp ul {
    padding: 0 !important; margin: 0 !important; list-style: none !important;
}
.panel-usercp ul li {
    border-bottom: 1px solid rgba(161,18,18,0.25) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 5px 14px !important;
    min-height: 38px !important;
}
/* The <a> tag is just text — inline, no flex */
.panel-usercp ul li a {
    display: inline !important;
    text-decoration: none !important;
    color: #ffffff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.99),
                 -1px -1px 4px rgba(0,0,0,0.99),
                 0px 2px 8px rgba(0,0,0,0.99),
                 0px -2px 8px rgba(0,0,0,0.99),
                 2px 0px 8px rgba(0,0,0,0.99),
                 -2px 0px 8px rgba(0,0,0,0.99) !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
/* Vote For Credits — stays yellow, gets strong dark shadow */
.panel-usercp ul li.usercp-vote-highlight a {
    color: #f5c518 !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.99),
                 -1px -1px 4px rgba(0,0,0,0.99),
                 0px 2px 8px rgba(0,0,0,0.99),
                 0px -2px 8px rgba(0,0,0,0.99),
                 2px 0px 8px rgba(0,0,0,0.99),
                 -2px 0px 8px rgba(0,0,0,0.99),
                 0px 0px 12px rgba(0,0,0,0.99) !important;
}
/* Icon: inline with text, fixed size — img is sibling of <a> */
.panel-usercp ul li > img {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    position: static !important;
    top: auto !important;
    display: block !important;
}

/* =====================================================
   13. HIDE SIDEBAR on UserCP subpages
===================================================== */
#content > div.col-xs-4 { display: none !important; }
#content > div.col-xs-8 {
    width: 100% !important; float: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
}

/* =====================================================
   14. PAGE TITLES — Main titles LARGER than sub-titles
===================================================== */
/* Main orange page title — largest */
.page-title, .page-title span {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
}
/* Section sub-headings inside content (h2/h3 inside panels) */
h2, h3 {
    font-size: 15px !important;
}
h4 {
    font-size: 13px !important;
}
/* Panel body sub-titles (e.g. Client Downloads label) */
.panel-body .panel-title {
    font-size: 11px !important;
    color: #ffffff !important;
    padding: 5px 0 !important;
    margin-bottom: 8px !important;
}

/* =====================================================
   15. NEWS
===================================================== */
.home-news-block-article-type { font-size: 12px !important; padding: 3px 8px !important; }
.home-news-block-header { margin-bottom: 4px !important; }
.panel-news .panel-heading h3, .panel-news .panel-title { font-size: 16px !important; }
.home-news-article-title { font-size: 14px !important; }
.home-news-article-date { font-size: 11px !important; }
.home-news-article-type { font-size: 11px !important; padding: 3px 8px !important; }
.home-news-read-more {
    margin-top: -4px !important;
    display: block !important;
    font-size: 11px !important;
}
.home-news-block-link, .news-more-link { font-size: 13px !important; }

/* =====================================================
   16. GLOBAL WORD-WRAP — words only, never letters
   word-break: keep-all — only breaks at spaces
===================================================== */
td, th,
.we-chat-user, .we-chat-text,
.myaccount-character-name,
.player-profile-link {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}
.online-status-indicator {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 3px !important;
    flex-shrink: 0 !important;
}
.vip-hide-location label, label[for*="hide"], .form-group label {
    white-space: nowrap !important;
}

/* =====================================================
   17. YOUTUBE VIDEO
===================================================== */
iframe[src*="youtube"], iframe[src*="youtu.be"],
.video-container iframe, .panel-general iframe {
    width: 100% !important; max-width: 100% !important;
    height: 200px !important; display: block !important;
    margin: 0 auto !important;
}

/* =====================================================
   18. DOWNLOADS — centered single-line layout
===================================================== */
.panel-downloads .table {
    width: 100% !important;
}
.panel-downloads .table tr {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 6px 4px !important;
    border-bottom: 1px solid rgba(161,18,18,0.2) !important;
}
.panel-downloads .table td {
    font-size: 11px !important;
    padding: 4px 4px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: none !important;
    flex: 1 !important;
}
/* File name + size column: centered, compact */
.panel-downloads .table td:first-child {
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    flex: 2 !important;
}
/* Download button column: don't grow too much */
.panel-downloads .table td:last-child {
    flex: 0 0 auto !important;
}
/* Download button: compact, centered */
.panel-downloads .table td a.btn-primary,
.panel-downloads .table td a.btn {
    font-size: 12px !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    margin: 0 !important;
    text-align: center !important;
    width: auto !important;
}

/* =====================================================
   19. PAYPAL BUTTON
===================================================== */
.btn-paypal-green {
    font-size: 22px !important;
    padding: 8px 14px !important;
    gap: 8px !important;
}
.btn-paypal-icon { width: 34px !important; height: 34px !important; }

/* =====================================================
   20. USER CP GRID — icon grid, names tight to icon
===================================================== */
.usercp-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 4px !important;
}
.usercp-grid .col-xs-3 {
    width: 25% !important;
    float: none !important;
    padding: 4px 2px !important;
    margin-bottom: 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.usercp-grid .col-xs-3 a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    width: 100% !important;
}
.usercp-grid img {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
}
/* Names: tight to icon, word-wrap only at spaces */
.usercp-grid span {
    font-size: 9px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.99),
                 -1px -1px 3px rgba(0,0,0,0.99),
                 0 2px 6px rgba(0,0,0,0.99),
                 0 -2px 6px rgba(0,0,0,0.99) !important;
    display: block !important;
    margin-top: -18px !important; /* Moved 10px more up from icon */
    word-break: keep-all !important; /* Never break letters */
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: 72px !important;
    line-height: 1.2 !important;
}
.usercp-grid a[href*="votefc"] span,
.usercp-grid a[href*="vote"] span {
    color: #f5c518 !important;
    text-shadow: 0 0 6px rgba(255,180,0,0.6),
                 1px 1px 3px rgba(0,0,0,0.99) !important;
}

/* =====================================================
   21. VOTE FOR CREDITS — table
===================================================== */
.general-table-ui { table-layout: fixed !important; width: 100% !important; }
.general-table-ui th, .general-table-ui td {
    font-size: 12px !important;
    padding: 6px 4px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}
.vote-btn, .vote-btn-ready, .vote-btn-cooldown {
    font-size: 11px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.general-table-ui th:first-child, .general-table-ui td:first-child { width: 38% !important; }
.general-table-ui th:nth-child(2), .general-table-ui td:nth-child(2) { width: 22% !important; text-align: center !important; }
.general-table-ui th:nth-child(3), .general-table-ui td:nth-child(3) { width: 40% !important; text-align: center !important; }

/* =====================================================
   22. USERCP ACTION TABLES (Reset Stats, Clear PK, etc.)
   Horizontally scrollable so content never letter-wraps
===================================================== */
table.general-table-ui,
table.table.general-table-ui {
    table-layout: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
}
table.general-table-ui td:first-child img,
.character-avatar img,
.character-list-avatar img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
}
table.general-table-ui td .btn,
table.general-table-ui td button.btn,
table.general-table-ui td a.btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 100% !important;
}
table.general-table-ui td,
table.general-table-ui th {
    font-size: 11px !important;
    padding: 5px 4px !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* =====================================================
   23. ADD STATS
===================================================== */
.panel-addstats .panel-body { overflow: hidden !important; }
.panel-addstats .col-xs-3.character-avatar { width: 25% !important; padding-right: 8px !important; }
.panel-addstats .col-xs-9 { width: 75% !important; }
.panel-addstats .character-avatar img,
.panel-addstats .character-avatar { max-width: 60px !important; max-height: 80px !important; }
.panel-addstats .character-name { font-size: 14px !important; margin-bottom: 6px !important; }
.panel-addstats .form-group label { font-size: 12px !important; }
.panel-addstats .form-control { font-size: 16px !important; padding: 4px 6px !important; }
.col-sm-12.text-right { text-align: left !important; }
.col-sm-12.text-right .btn { float: none !important; }

/* =====================================================
   24. MY ACCOUNT
===================================================== */
.myaccount-table {
    width: 100% !important; table-layout: fixed !important; max-width: 100% !important;
}
.myaccount-table th {
    width: 32% !important; font-size: 11px !important;
    padding: 6px 4px !important; white-space: nowrap !important;
    vertical-align: top !important;
}
.myaccount-table td {
    width: 68% !important; font-size: 11px !important;
    padding: 6px 4px !important;
    word-break: break-word !important; /* Allows long emails to wrap */
    overflow-wrap: anywhere !important;
    vertical-align: top !important;
}
.myaccount-table td a.btn.btn-xs,
.myaccount-table td .btn-xs {
    float: none !important; display: block !important;
    margin-top: 4px !important; font-size: 10px !important;
    padding: 3px 6px !important; width: 100% !important;
    box-sizing: border-box !important; text-align: center !important;
}
/* Username / character name — don't letter-break, single line */
.myaccount-character-name {
    font-size: 12px !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
.myaccount-table td[data-type="username"],
.myaccount-table td:nth-child(2) {
    word-break: keep-all !important; /* usernames are single words */
}
.myaccount-character-block { font-size: 11px !important; }
.myaccount-character-block-level { font-size: 18px !important; }

/* =====================================================
   25. VIP MEMBERSHIP
===================================================== */
.panel-vip .vip-table { width: 100% !important; table-layout: fixed !important; }
.panel-vip .vip-table td {
    font-size: 12px !important; padding: 6px 4px !important;
    word-break: keep-all !important; vertical-align: middle !important;
}
.panel-vip .vip-table td:first-child { width: 22% !important; white-space: nowrap !important; }
.panel-vip .vip-table td:nth-child(2) { width: 48% !important; white-space: normal !important; }
.panel-vip .vip-table td:last-child { width: 30% !important; text-align: center !important; }
.btn-vip { font-size: 10px !important; padding: 4px 6px !important; white-space: nowrap !important; }
.vip-table-container { overflow-x: auto !important; }

/* =====================================================
   26. TRANSFER CREDITS
===================================================== */
.btn.pull-right[name="transfer_submit"],
button[name="transfer_submit"],
a.btn.pull-right[href*="transfercredits/send"] { float: left !important; margin-top: 8px !important; }
.form-group:has(button[name="transfer_submit"]),
.form-group:has(a[href*="transfercredits/send"]) { text-align: left !important; }

/* =====================================================
   27. RANKINGS TABLES
   KEY FIX: horizontally scrollable so content never
   breaks by letter. Location wing+HIDDEN+wing stays
   on one line. Online indicators stay next to names.
===================================================== */
/* Wrapper: horizontally scrollable */
.rankings-table-wrapper,
.rankings_menu ~ div {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
}
/* ALL rankings tables including master level and online players */
.rankings-table,
table.rankings-table {
    table-layout: auto !important;
    width: auto !important;
    min-width: 100% !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    display: block !important;           /* enables overflow-x on table */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
/* ALL cells: nowrap to prevent any letter-breaking */
.rankings-table th,
.rankings-table td {
    font-size: 10px !important;
    padding: 5px 4px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    vertical-align: middle !important;
    text-align: center !important;
}
/* Header row */
.rankings-table tr:first-child td {
    font-size: 11px !important;
    font-weight: bold !important;
    color: #f18522 !important;
    border-bottom: 2px solid #f18522 !important;
}
/* Online indicator: inline, small, doesn't push name to next line */
.rankings-table .online-status-indicator {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    vertical-align: middle !important;
    margin-left: 2px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.rankings-table-place {
    font-weight: bold !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
/* Filter icons row */
.rankings-class-filter {
    overflow-x: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 6px !important;
}
.rankings-class-filter li {
    margin: 4px !important;
}
.rankings-class-filter-selection {
    width: 55px !important;
    font-size: 9px !important;
}
.rankings-class-filter-selection img {
    width: 32px !important;
}
/* Wings on HIDDEN location — smaller, inline with HIDDEN text in one line */
.rankings-table .location-cell img[src*="wing"],
.rankings-table img[src*="wing"],
.rankings-table img[src*="left_wing"],
.rankings-table img[src*="right_wing"] {
    width: 10px !important;
    height: 10px !important;
    display: inline !important;
    vertical-align: middle !important;
    position: static !important;
    top: auto !important;
    margin: 0 1px !important;
}
/* Last Updated line:
   - #op-ranking-date-raw (hidden div with display:none) must stay hidden
   - .rankings-update-time used by guilds module — style it nicely
   - #op-last-updated used by level/resets/master/online — style it nicely
*/
#op-ranking-date-raw { display: none !important; }
.rankings-update-time {
    font-size: 10px !important;
    text-align: center !important;
    color: #c9a96e !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#op-last-updated {
    font-size: 10px !important;
    text-align: center !important;
    color: #c9a96e !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}
/* Ensure table wrappers for ALL ranking sub-pages are scrollable */
.panel-general .table,
.panel-general table {
    overflow-x: auto !important;
    display: block !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
}

/* =====================================================
   28. EVENTS SCHEDULE
===================================================== */
.panel-sidebar-events .table { table-layout: fixed !important; width: 100% !important; }
.panel-sidebar-events .table td {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    font-size: 12px !important;
}
.panel-sidebar-events .table td:first-child { width: 50% !important; }
.panel-sidebar-events .table td:last-child { width: 50% !important; text-align: right !important; }

/* =====================================================
   29. FOOTER
===================================================== */
.footer {
    width: 100% !important; padding: 20px 12px !important;
    box-sizing: border-box !important; border-radius: 0 !important;
    margin-bottom: 55px !important;
}
.footer .col-xs-8, .footer .col-sm-8 {
    width: 70% !important; float: left !important; font-size: 12px !important;
}
.footer .col-xs-4, .footer .col-sm-4 { width: 30% !important; float: right !important; }

/* =====================================================
   30. ADMIN BUTTONS
===================================================== */
.admincp-button { display: none !important; }

/* =====================================================
   31. CHAT WIDGET
===================================================== */
#we-chat-widget {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; min-width: 0 !important;
    border-radius: 8px 8px 0 0 !important; border: none !important;
    border-top: 2px solid rgba(255,60,60,0.85) !important;
    z-index: 10000 !important;
    box-shadow: 0 -2px 15px rgba(255,40,40,0.4) !important;
}
#we-chat-header { padding: 10px 14px !important; border-radius: 8px 8px 0 0 !important; }
#we-chat-body { height: 55vh !important; max-height: 55vh !important; }
.we-chat-line, .we-chat-text { font-size: 14px !important; }
.we-chat-user { font-size: 15px !important; }
.we-chat-time { font-size: 13px !important; }
#we-chat-input { font-size: 16px !important; }
#we-chat-emoji-btn { font-size: 20px !important; }
#we-chat-send { font-size: 16px !important; }
.we-chat-emoji { font-size: 20px !important; }
#we-chat-online { font-size: 16px !important; margin-left: 10px !important; }
#we-chat-online-count { font-size: 16px !important; }
#we-chat-title { font-size: 14px !important; padding: 3px 10px !important; }
#we-chat-icon {
    color: #ffffff !important; font-size: 22px !important;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)) !important;
}
#we-chat-icon.has-unread { animation: mobile-unread-pulse 3s ease-in-out infinite !important; }
@keyframes mobile-unread-pulse {
    0%,100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }
    50%      { filter: drop-shadow(0 0 10px rgba(255,255,255,1)); }
}

/* =====================================================
   32. iOS / SAFARI — prevent input auto-zoom
===================================================== */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], select, textarea { font-size: 16px !important; }

/* =====================================================
   33. FOOTER — always visible, proper position
===================================================== */
footer.footer,
.footer {
    display: block !important;
    clear: both !important;
    visibility: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 12px !important;
    margin-bottom: 65px !important;
    margin-top: 4px !important;
    border-top: 2px solid rgba(161,18,18,0.6) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* =====================================================
   34. MY TICKETS TABLE — fit in frame with scrolling
===================================================== */
.panel-tickets,
div[class*="ticket"] {
    overflow-x: hidden !important;
}
.panel-tickets table,
.tickets-table,
table.table[class*="ticket"],
.panel-tickets .panel-body table,
.panel-tickets .panel-body > table {
    width: 100% !important;
    table-layout: fixed !important;
    overflow-x: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}
.panel-tickets table td,
.panel-tickets table th,
.tickets-table td,
.tickets-table th {
    font-size: 10px !important;
    padding: 5px 4px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Column widths: date, subject, status, reply, view button */
.panel-tickets table td:nth-child(1),
.panel-tickets table th:nth-child(1) { width: 70px !important; }
.panel-tickets table td:nth-child(2),
.panel-tickets table th:nth-child(2) { width: 90px !important; }
.panel-tickets table td:nth-child(3),
.panel-tickets table th:nth-child(3) { width: 40px !important; }
.panel-tickets table td:nth-child(4),
.panel-tickets table th:nth-child(4) { width: 50px !important; }
.panel-tickets table td:nth-child(5),
.panel-tickets table th:nth-child(5) { width: 36px !important; }
/* View button */
.panel-tickets .btn,
.tickets-table .btn,
a.btn[href*="tickets/view"] {
    font-size: 10px !important;
    padding: 3px 5px !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* =====================================================
   35. RESET STATS & CLEAR SKILL-TREE — fit in frame
===================================================== */
.panel-resetstats table,
.panel-clearskilltree table,
.panel-addstats table,
.panel-clearpk table,
.panel-unstick table,
.panel-reset table {
    width: 100% !important;
    table-layout: auto !important;
    overflow-x: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.panel-resetstats table td,
.panel-resetstats table th,
.panel-clearskilltree table td,
.panel-clearskilltree table th {
    font-size: 10px !important;
    padding: 5px 3px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    text-align: center !important;
}
/* Make sure the table wrapper doesn't overflow the panel */
.panel-resetstats .panel-body,
.panel-clearskilltree .panel-body {
    overflow-x: hidden !important;
    padding: 10px 8px !important;
}
/* Avatar column: small */
.panel-resetstats table td:first-child img,
.panel-clearskilltree table td:first-child img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
}
/* GO button */
.panel-clearskilltree table .btn,
.panel-resetstats table .btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
}

/* =====================================================
   36. ENSURE BODY HAS ENOUGH PADDING FOR CHAT WIDGET
===================================================== */
body {
    padding-bottom: 80px !important;
}
#mobile-lang-wrap {
    display: none !important;
}
} /* end @media only screen and (max-width: 768px) */

/* =====================================================
   FORCE HIDE download sidebar banner on mobile
===================================================== */
.sidebar-banner-dl,
div.sidebar-banner-dl,
.sidebar-banner-dl a,
.sidebar-banner-dl img,
a[href*="downloads"] img[src*="sidebar_banner_download"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}