/* ============================================
   Monster Theme - Mobile Interface
   Desktop: untouched (966px original)
   Mobile: clean dark gaming UI
   ============================================ */

/* === COLOR UTILITIES (replace deprecated <font> tags) === */
.color-gold { color: #d28010; }
.color-gray { color: #5b5851; }
.color-green { color: #43500d; }
.realm-online { color: #6b7528; }
.realm-offline { color: #8b4444; }

/* === HIDDEN ON DESKTOP === */
#mobile-nav { display: none; }

/* ============================================
   MOBILE (<980px)
   ============================================ */
@media (max-width: 980px) {

/* -----------------------------------------------
   MOBILE NAV BAR (sticky top)
----------------------------------------------- */
#mobile-nav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #0a0a08;
    border-bottom: 1px solid #2a2d10;
    box-shadow: 0 2px 15px rgba(0,0,0,0.9);
}

#mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 48px;
}

#mobile-logo-link {
    color: #81bd24;
    font-family: 'Aparajita', Georgia, serif;
    font-size: 20px;
    font-variant: small-caps;
    text-shadow: 0 0 10px rgba(129,189,36,0.3);
    text-decoration: none;
    letter-spacing: 1px;
}

#mobile-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* User icon */
#mobile-user-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1a1a15;
    border: 1px solid #3a3d20;
}

#mobile-user-icon {
    color: #81bd24;
    font-size: 14px;
}

/* Hamburger */
#mobile-toggle {
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin: 0 !important;
    cursor: pointer;
    width: 28px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 0;
    line-height: 0;
    text-transform: none;
}

#mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #81bd24;
    border-radius: 1px;
    transition: all 0.3s;
    position: relative;
    padding: 0;
    margin: 0;
}

#mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
#mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}
#mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* -----------------------------------------------
   MOBILE MENU (dropdown)
----------------------------------------------- */
#mobile-menu-list {
    display: none;
    background: #0d0d0b;
    border-top: 1px solid #1a1a15;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

#mobile-menu-list.open {
    display: block;
}

/* Quick action buttons */
#mobile-quick-actions {
    display: table !important;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border-spacing: 4px;
}

.mqa-btn {
    display: table-cell !important;
    width: 25%;
    vertical-align: middle;
    text-align: center;
    padding: 8px 2px;
    background: #12120f;
    border: 1px solid #2a2d10;
    border-radius: 5px;
    color: #706b62 !important;
    text-decoration: none !important;
    font-size: 9px;
    font-family: Verdana, Arial, sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    transition: all 0.2s;
}

.mqa-btn i {
    display: block;
    margin-bottom: 3px;
}

.mqa-btn:hover, .mqa-btn:active {
    background: #1a1a12;
    border-color: #4a5a10;
    color: #81bd24 !important;
}

.mqa-btn i {
    font-size: 16px;
    color: #81bd24;
    text-shadow: 0 0 6px rgba(129,189,36,0.3);
}

.mqa-btn span {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* User panel */
#mobile-user-panel {
    margin: 0 10px 8px;
    background: #12120f;
    border: 1px solid #2a2d10;
    border-radius: 4px;
    overflow: hidden;
}

#mup-info {
    padding: 10px 12px;
    border-bottom: 1px solid #1a1a15;
}

#mup-info strong {
    color: #81bd24;
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}

#mup-info span {
    color: #4d4940;
    font-size: 11px;
}

#mup-actions {
    display: flex;
    flex-wrap: wrap;
}

#mup-actions a {
    flex: 1 1 50%;
    padding: 9px 12px;
    color: #706b62;
    font-size: 12px;
    text-decoration: none;
    border-right: 1px solid #1a1a15;
    border-bottom: 1px solid #1a1a15;
    transition: all 0.2s;
    text-align: center;
    box-sizing: border-box;
}

#mup-actions a:nth-child(2n) {
    border-right: none;
}

#mup-actions a:nth-last-child(-n+2) {
    border-bottom: none;
}

#mup-actions a:hover, #mup-actions a:active {
    color: #81bd24;
    background: rgba(129,189,36,0.05);
}

#mup-logout {
    color: #8b4444 !important;
}

#mup-logout:hover {
    color: #cc5555 !important;
}

/* Nav links */
#mobile-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-nav-links li {
    border-top: 1px solid #151512;
    position: relative;
}

#mobile-nav-links li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #706b62;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

#mobile-nav-links li a i {
    width: 16px;
    text-align: center;
    color: #4a5a10;
    font-size: 12px;
    flex-shrink: 0;
}

#mobile-nav-links li a:hover,
#mobile-nav-links li a:active {
    color: #81bd24;
    background: rgba(129,189,36,0.04);
}

#mobile-nav-links li a:hover i {
    color: #81bd24;
}

/* Auth buttons (guest) */
.mobile-auth-links {
    display: flex !important;
    gap: 6px;
    padding: 10px 8px !important;
    border-top: 1px solid #1a1a15;
}

.mobile-login-btn, .mobile-register-btn {
    flex: 1;
    text-align: center !important;
    padding: 11px 8px !important;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-login-btn {
    background: #12120f;
    border: 1px solid #2a2d10;
    color: #706b62 !important;
}

.mobile-login-btn:hover {
    color: #989186 !important;
    border-color: #3a3a30;
}

.mobile-register-btn {
    background: linear-gradient(180deg, #4a5a10, #3a4a08) !important;
    border: 1px solid #5a6a15;
    color: #d4e88a !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.mobile-register-btn:hover {
    background: linear-gradient(180deg, #5a6a15, #4a5a10) !important;
}

/* Mobile realm status - first item in menu */
#mobile-realm-status {
    padding: 6px 8px;
    border-bottom: 1px solid #1a1a15;
}

#mobile-realm-status:empty {
    display: none;
}

.mrs-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #0a0a08;
    border: 1px solid rgba(42,42,37,0.3);
    border-radius: 5px;
    margin-bottom: 4px;
}

.mrs-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #989186;
    font-size: 13px;
}

.mrs-left i {
    color: #5b5851;
    font-size: 11px;
}

.mrs-wow-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 2px rgba(200,160,40,0.3));
}

.mrs-name {
    font-family: 'Aparajita', Georgia, serif;
    font-variant: small-caps;
    letter-spacing: 0.5px;
}

.mrs-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mrs-status {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mrs-on {
    color: #81bd24;
}

.mrs-off {
    color: #c84040;
}

.mrs-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-block;
}

.mrs-pulse::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #81bd24;
    box-shadow: 0 0 4px #81bd24;
}

.mrs-pulse::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #81bd24;
    animation: mobilePulse 1.5s ease-in-out infinite;
}

@keyframes mobilePulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

.mrs-dot-off {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c84040;
    display: inline-block;
    opacity: 0.6;
}

/* Realmlist bar */
#mobile-realmlist {
    padding: 8px 14px;
    text-align: center;
    color: #393833;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    border-top: 1px solid #151512;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

#mobile-realmlist strong {
    color: #43500d;
}

/* -----------------------------------------------
   HIDE DESKTOP ELEMENTS
----------------------------------------------- */
#header {
    display: none !important;
}

.quick-menu-container {
    display: none !important;
}

/* Hide sprite banners (can't scale, replaced by quick actions) */
.sidebar-container > a.banner {
    display: none !important;
}

/* Hide side menu (already in mobile nav) */
td.sidebar .sidebox:first-of-type {
    display: none;
}

/* Hide slider on mobile (large images, slow on mobile data) */
#slider_bg {
    display: none !important;
}

/* HIDE ENTIRE SIDEBAR on mobile - all info is in mobile nav menu already */
table.content td.sidebar {
    display: none !important;
}

/* Hide the empty center tag */
center:empty {
    display: none;
}

/* -----------------------------------------------
   LAYOUT: TABLE → STACKED
----------------------------------------------- */
body {
    background-size: cover !important;
    background-attachment: scroll !important;
    overflow-x: hidden;
    width: 100%;
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

div[align="center"] {
    width: 100%;
}

#container {
    width: 100% !important;
    padding: 0 6px;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Override main.css position:relative - only on layout elements, NOT icons */
#container, #content, div#content, table.content, table.content td, table.content tr, table.content tbody {
    position: static;
}

/* Content text wrapping */
#content_ajax,
#content_ajax article,
#content_ajax article .body,
.post_body_news,
.monster-content,
.section-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

div#content {
    margin-top: 0;
}

table.content,
table.content tbody,
table.content tr,
table.content td {
    display: block !important;
    width: 100% !important;
}

/* -----------------------------------------------
   CONTENT AREA
----------------------------------------------- */

/* Kill ALL fixed pixel widths from main.css */
.content,
table.content,
.post_header,
.post_body,
.post_body_news,
.post_body3,
.sub-box1,
.sub-box11,
.sub-box2,
.sub-box3,
.divider,
#slider,
#slideshow,
.quick-menu-container,
.sidebar-container,
.side-r,
.membersip_a,
.membersip_b,
.a-realm,
.a-realm #head,
.a-realm #body,
.sidebox,
.sidebox .top,
.mems-b-head,
.mem-b-cont .username-container,
.mem-b-cont .password-container,
.membersip_a hr,
#ucp_buttons,
.toppvp_realm,
.comment,
.message_box,
.nice_table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.post {
    margin: 0 0 6px;
}

.post_header {
    width: 100% !important;
    background-size: 100% 100%;
}

.post_body, .post_body_news {
    width: auto !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post_body_news img {
    max-width: 100% !important;
    height: auto !important;
}

.divider { width: 100% !important; }

/* Article pages */
article .top,
#content_ajax article .top,
h1.top {
    background-size: 100% 100% !important;
    background-image: none !important;
    background-color: #10100e;
    height: auto !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-left: 3px solid #6c860d;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

article .body,
#content_ajax article .body {
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* -----------------------------------------------
   SIDEBAR (hidden on mobile, content in hamburger)
----------------------------------------------- */
.sidebar-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 4px;
}

.side-r { width: 100% !important; }

/* Login / Member boxes */
.membersip_a, .membersip_b {
    width: 100% !important;
    height: auto !important;
}

.mems-b-head {
    width: calc(100% - 2px) !important;
}

.mem-b-cont {
    padding: 8px !important;
}

.mem-b-cont .username-container,
.mem-b-cont .password-container {
    width: 100% !important;
}

.mem-b-cont input[type='text'],
.mem-b-cont input[type='password'] {
    width: calc(100% - 100px) !important;
}

.mem-b-cont .quick-links {
    float: none !important;
    text-align: center;
    padding: 5px 0;
}

.membersip_a hr { width: 100% !important; }
.membersip_a label.label_check { width: auto !important; }

.realmlist { width: 100% !important; }

.sidebox {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 4px;
}

.sidebox .top {
    width: calc(100% - 2px) !important;
}

.a-realm { background-size: 100% 100%; }
.a-realm #head, .a-realm #body { width: 100% !important; }

/* -----------------------------------------------
   FORMS
----------------------------------------------- */
input[type="text"],
input[type="password"],
textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box;
}

select { width: 100% !important; }

.form-row {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px !important;
}

.form-row #left {
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    padding: 5px 0 !important;
}

.form-row #right {
    float: none !important;
    width: 100% !important;
}

input[type="submit"], button {
    width: 100%;
    box-sizing: border-box;
}

/* -----------------------------------------------
   SUB BOXES
----------------------------------------------- */
.sub-box1, .sub-box11, .sub-box2, .sub-box3 {
    width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box;
}

/* -----------------------------------------------
   FOOTER
----------------------------------------------- */
.footer {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 15px 10px !important;
    background: #0a0a08 !important;
    background-image: none !important;
    border-top: 1px solid #2a2d10;
    box-sizing: border-box;
    overflow: hidden;
}

.footer #left, .footer #right {
    float: none !important;
    text-align: center !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.footer #left {
    font-size: 11px;
    line-height: 1.5;
}

.footer #right {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.footer #right a {
    display: inline-block;
    padding: 4px 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
}

/* -----------------------------------------------
   CMS FIXES
----------------------------------------------- */
.nice_table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#ucp_buttons { width: 100% !important; margin-left: 0 !important; }
#store { margin-left: 0 !important; }
#armory { margin-left: 0 !important; }
.comment, .message_box { width: 100% !important; }
.toppvp_realm { width: 100% !important; }

.popup {
    width: 90% !important;
    max-width: 300px;
    left: 50% !important;
    transform: translateX(-50%);
}

#shoutbox textarea {
    width: 100% !important;
    max-width: 100% !important;
}

img { max-width: 100%; height: auto; }

/* -----------------------------------------------
   UCP (User Control Panel) - OLD TEMPLATE style
----------------------------------------------- */

/* === OLD UCP (uses #ucp_top, #ucp_info, #ucp_buttons, #ucp_avatar) === */

/* UCP top section: stack vertically */
#ucp_top {
    padding: 5px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Avatar: small centered */
#ucp_avatar {
    float: none !important;
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto 10px !important;
    display: block !important;
}

#ucp_avatar img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    border-radius: 6px;
}

#ucp_avatar div {
    width: 70px !important;
    height: 35px !important;
    padding-top: 35px !important;
    font-size: 10px !important;
}

/* Info: stack aside columns vertically */
#ucp_info {
    float: none !important;
    width: 100% !important;
    height: auto !important;
}

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

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

#ucp_info aside table {
    width: 100% !important;
}

#ucp_info td {
    padding: 5px 4px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

#ucp_info td img {
    width: 14px !important;
    height: 14px !important;
}

#ucp_info td[width] {
    width: auto !important;
}

#ucp_info td a img {
    width: 12px !important;
    height: 12px !important;
}

/* UCP divider */
.ucp_divider {
    height: 6px !important;
    background: none !important;
}

/* UCP buttons: 2-col grid with background images */
#ucp_buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px;
}

#ucp_buttons a {
    float: none !important;
    width: 100% !important;
    height: 55px !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: center top !important;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Dark overlay on button images */
#ucp_buttons a::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    pointer-events: none;
}

#ucp_buttons a:hover::after {
    background: rgba(0,0,0,0.1);
}

/* UCP Characters */
#ucp_characters {
    margin-top: 0 !important;
    padding: 6px !important;
}

#ucp_characters a {
    width: 48px !important;
    height: 48px !important;
    margin-right: 6px !important;
    margin-bottom: 6px !important;
}

#ucp_characters h1 {
    font-size: 14px !important;
    height: auto !important;
    padding: 5px !important;
}

.vertical_divider {
    display: none !important;
}

/* === NEW UCP (Bootstrap, fallback) === */
.container .row [class*="col-lg-4"],
.container .row [class*="col-lg-8"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* UCP nav sidebar: compact, no wasted space */
.col-lg-4.py-5,
.col-lg-4.py-5.pe-lg-5 {
    padding: 10px 6px !important;
}

/* Avatar: compact card style, centered */
.w-100.text-center.mb-5 {
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.user-avatar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.user-avatar img,
.user-avatar .rounded-circle,
img.rounded-circle {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: cover;
    display: block;
    border: 2px solid #2a2d10;
}

.avatar-change-text {
    font-size: 11px;
    color: #706b62;
    white-space: nowrap;
}

/* UCP section header: card style */
.section-header {
    font-size: 13px !important;
    font-weight: bold;
    padding: 8px 10px !important;
    border-left: 3px solid #81bd24;
    border-bottom: none;
    margin-bottom: 8px;
    color: #81bd24;
}

/* Nav pills: scrollable horizontal row */
.col-lg-4.py-5 .section-header {
    font-size: 13px !important;
    margin-bottom: 6px;
}

.col-lg-4.py-5 .section-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.col-lg-4.py-5 .list-group,
.col-lg-4.py-5 .list-group.mt-3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px;
    margin-bottom: 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.col-lg-4.py-5 .list-group .list-group-item,
.col-lg-4.py-5 .list-group .list-group-item-action {
    flex: 0 0 auto;
    text-align: center;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
    border-radius: 3px !important;
    border: 1px solid #1a1a15 !important;
    background: #0d0d0b !important;
    color: #706b62 !important;
    margin: 0 !important;
}

.col-lg-4.py-5 .list-group .list-group-item.active,
.col-lg-4.py-5 .list-group .list-group-item-action.active {
    background: #151a08 !important;
    border-color: #4a5a10 !important;
    color: #81bd24 !important;
}

/* UCP content area */
.col-lg-8.py-lg-5,
.col-lg-8.pb-5 {
    padding: 8px 6px !important;
}

.section-body {
    padding: 0;
}

/* ---- Account info table: card style ---- */
.user-table,
table.user-table {
    width: 100% !important;
    display: block !important;
    border-collapse: separate;
}

.user-table tbody {
    display: block !important;
    width: 100% !important;
}

.user-table tr {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    width: 100% !important;
    padding: 8px 6px !important;
    border-bottom: 1px solid #141412;
    box-sizing: border-box;
}

.user-table tr:last-child {
    border-bottom: none;
}

/* First td: icon + label */
.user-table td:first-child {
    flex: 0 0 100%;
    display: block !important;
    padding: 0 0 2px 0 !important;
    font-size: 11px !important;
    color: #5b5851;
    border: none !important;
    width: auto !important;
}

/* Second td: value */
.user-table td:nth-child(2) {
    flex: 1 1 auto;
    display: inline-block !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #989186;
    border: none !important;
    width: auto !important;
}

/* Third td: edit link - styled as small button */
.user-table td:nth-child(3),
.user-table td.text-end {
    flex: 0 0 auto;
    display: inline-block !important;
    text-align: right !important;
    padding: 0 !important;
    font-size: 11px !important;
    border: none !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-left: auto;
}

.user-table td.text-end a,
.user-table td:nth-child(3) a {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(129,189,36,0.1);
    border: 1px solid #2a2d10;
    border-radius: 3px;
    color: #81bd24;
    font-size: 10px;
    text-decoration: none;
}

.user-table td .user-table-icon {
    display: inline-block;
    width: 18px;
    margin-right: 3px;
    font-size: 11px;
}

/* Spacing row (empty td with pb-3) */
.user-table tr:has(td.pb-3) {
    padding: 0 !important;
    border: none !important;
    min-height: 0;
    height: 4px;
}

/* User points row highlight */
.user-table tr.user-points {
    background: rgba(129,189,36,0.03);
    border-radius: 3px;
}

/* ---- Characters table ---- */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -6px;
    padding: 0 6px;
}

.nice_table {
    width: 100% !important;
    font-size: 12px;
    white-space: nowrap;
}

.nice_table thead th {
    font-size: 13px !important;
    padding: 6px !important;
}

.nice_table td {
    padding: 6px 4px !important;
    font-size: 11px;
    vertical-align: middle !important;
}

.nice_table td img {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
}

.moneygold, .moneysilver, .moneycopper {
    font-size: 10px;
    padding: 0 1px;
}

/* Recent activity compact */
.nice_table .col-3 {
    width: auto !important;
    font-size: 10px;
    color: #5b5851;
}

/* ---- Avatar picker page ---- */
.avatars .row {
    justify-content: center;
}

.avatars .row .mb-4 {
    margin-bottom: 8px !important;
}

.avatars_name {
    font-size: 13px;
}

.my_avatar {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    display: block;
    border-radius: 4px;
    border: 2px solid transparent;
}

.my_avatar.avatar_current {
    border-color: #81bd24;
}

/* Fix col-xs-6 (Bootstrap 5 removed col-xs) */
.col-xs-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding: 3px !important;
    box-sizing: border-box !important;
}

/* Avatar grid: 4 columns on mobile */
.avatars .col-xs-6,
.avatars .col-sm-6,
.avatars [class*="col-xs-6"],
.avatars [class*="col-sm-6"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding: 2px !important;
}

/* ---- Settings form ---- */
.page_form,
form.page_form {
    width: 100% !important;
}

.form-group.row {
    margin-bottom: 10px !important;
    flex-direction: column !important;
}

.form-group.row label,
.form-group.row .col-form-label,
.form-group.row .col-sm-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 3px;
    padding: 0 !important;
    font-size: 12px;
}

.form-group.row .col-sm-9,
.form-group.row [class*="col-sm-9"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

.nice_button,
input.nice_button {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px !important;
}

#settings_info_ajax,
#settings_ajax {
    font-size: 12px;
}

/* UCP info table legacy */
#ucp_info {
    width: 100% !important;
}

#ucp_info aside {
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid #1a1a15;
}

/* UCP buttons */
#ucp_buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    width: 100% !important;
    margin: 0 !important;
}

#ucp_buttons a {
    flex: 1 1 45%;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

.form-group.row label[class*="col-sm"],
.form-group.row .col-sm-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.form-group.row .col-sm-9,
.form-group.row [class*="col-sm-9"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.nice_button {
    width: 100%;
    box-sizing: border-box;
}

/* Security page */
.security-form input {
    width: 100% !important;
}

/* -----------------------------------------------
   STORE
----------------------------------------------- */
.store_item {
    padding: 8px !important;
}

.store_item .item_icon {
    max-width: 40px;
    height: auto;
}

.item_group {
    width: 100% !important;
    box-sizing: border-box;
}

.item_group_title {
    margin-left: 8px !important;
}

/* Store filter */
#store form .filter_field {
    border-left: none !important;
    width: 100% !important;
    margin-bottom: 8px;
}

#store form input[type="text"] {
    width: 100% !important;
}

/* Checkout */
#cart_price_divider {
    margin: 8px 0;
}

/* Store success/failure */
div[style*="width:70%"],
div[style*="width: 70%"] {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
}

/* -----------------------------------------------
   AUTH (Login, Register)
----------------------------------------------- */
.page_form {
    width: 100% !important;
    padding: 0 8px;
    box-sizing: border-box;
}

.page_form input[type="submit"] {
    width: 100%;
    margin-top: 15px;
}

/* Auth forms - fix Bootstrap column stacking */
.col-xxl-6, .col-xl-6, .col-lg-6 {
    max-width: 100%;
}

/* Email input */
.email-input {
    width: 100% !important;
    box-sizing: border-box;
}

/* Captcha image */
.captcha img,
img[src*="captcha"] {
    max-width: 100% !important;
    height: auto !important;
}

/* Login/Register form container */
.form-control,
.form-select {
    width: 100% !important;
    box-sizing: border-box;
}

/* Auth page layout - prevent double sidebar */
.page_form .form-group,
.page_form .mb-3 {
    width: 100%;
}

/* Register page checkbox/label */
.page_form label {
    font-size: 12px;
    word-wrap: break-word;
}

/* -----------------------------------------------
   MESSAGES
----------------------------------------------- */
.message_box {
    width: 100% !important;
}

/* Message list table */
#messages_table,
.messages-table {
    width: 100% !important;
    font-size: 12px;
}

#messages_table td[width],
.messages-table td[width] {
    width: auto !important;
}

/* TinyMCE / message compose */
.mce-container,
.tox-tinymce,
iframe[id*="mce"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
}

textarea[style*="height: 400"],
textarea[style*="height:400"] {
    height: 200px !important;
}

/* -----------------------------------------------
   ARMORY
----------------------------------------------- */
#armory {
    margin-left: 0 !important;
    width: 100% !important;
}

#armory_top h1 {
    font-size: 16px;
}

#armory_stats {
    width: 100% !important;
    overflow-x: auto;
}

#armory_stats td {
    font-size: 11px !important;
    padding: 4px !important;
}

/* Armory search */
.armory-search input[type="text"] {
    width: 100% !important;
}

/* -----------------------------------------------
   VOTE
----------------------------------------------- */
.card.h-100 {
    margin-bottom: 8px;
}

/* -----------------------------------------------
   DONATE
----------------------------------------------- */
.row-cols-xs-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
}

/* -----------------------------------------------
   ONLINE PLAYERS
----------------------------------------------- */
#playersTable {
    width: 100% !important;
    font-size: 11px;
}

/* -----------------------------------------------
   PROFILE
----------------------------------------------- */
.my_avatar {
    max-width: 60px;
    height: auto;
}

/* -----------------------------------------------
   TABLES (all CMS tables)
----------------------------------------------- */
table {
    width: 100% !important;
    max-width: 100%;
}

.table-responsive,
.table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* DataTables */
.dataTables_wrapper {
    width: 100% !important;
    overflow-x: auto;
}

.dataTables_filter {
    text-align: left !important;
}

.dataTables_filter input {
    width: 100% !important;
    max-width: 200px;
}

.dataTables_length select {
    width: auto !important;
}

.dataTables_info,
.dataTables_paginate {
    text-align: center !important;
    padding: 8px 0 !important;
}

/* -----------------------------------------------
   COOKIE POPUP / CONSENT
----------------------------------------------- */
.cc-window,
.cc-banner,
[class*="cookie"],
[id*="cookie"] {
    max-width: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    font-size: 12px !important;
    padding: 12px !important;
    box-sizing: border-box;
}

.cc-btn,
[class*="cookie"] button,
[class*="cookie"] a.btn {
    display: inline-block !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    margin: 4px !important;
}

/* -----------------------------------------------
   PERMISSION DENIED / ERROR PAGES
----------------------------------------------- */
article .top,
h1.top,
.section-header {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 16px !important;
    padding: 6px 8px;
}

/* -----------------------------------------------
   BOOTSTRAP OVERRIDES (mobile)
----------------------------------------------- */

/* Cards */
.card {
    margin-bottom: 8px;
}

.card-body {
    padding: 10px !important;
}

/* Grid fix - ensure proper stacking */
.row {
    margin-left: 0;
    margin-right: 0;
}

[class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

/* Pagination */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
}

.page-link {
    padding: 6px 10px;
    font-size: 12px;
}

/* Alerts */
.alert {
    padding: 10px;
    font-size: 13px;
    margin: 8px 0;
}

/* Modal / SweetAlert */
.swal2-popup {
    width: 90% !important;
    max-width: 320px !important;
    font-size: 13px !important;
}

/* -----------------------------------------------
   SHOUTBOX
----------------------------------------------- */
#shoutbox textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 30px;
}

#shoutbox input[type="submit"] {
    width: 100%;
    margin-top: 4px;
}

.shout {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#shoutbox_view {
    text-align: center;
    padding: 8px 0;
}

/* -----------------------------------------------
   COMMENTS
----------------------------------------------- */
.comments_area .comment {
    width: 100% !important;
}

.comments_area textarea {
    width: 100% !important;
}

/* -----------------------------------------------
   VERTICAL DIVIDER (desktop only)
----------------------------------------------- */
.vertical_divider {
    display: none !important;
}

img { max-width: 100%; height: auto; }

} /* end @media 980px */

/* ============================================
   SMALL PHONE (<480px)
   ============================================ */
@media (max-width: 480px) {

    #mobile-logo-link { font-size: 17px; }

    .mqa-btn { font-size: 10px; padding: 8px 3px; }
    .mqa-icon { font-size: 15px; }

    .post_header {
        height: auto !important;
        min-height: 28px;
        padding: 6px 8px;
    }

    .post_header #title a { font-size: 12px !important; }
    .post_body_news { font-size: 12px !important; }

    .footer { font-size: 11px !important; }
    .footer #right a { font-size: 12px !important; margin: 2px 4px !important; }

    .mem-b-cont .username-container #label,
    .mem-b-cont .password-container #label {
        display: none !important;
    }

    .mem-b-cont input[type='text'],
    .mem-b-cont input[type='password'] {
        width: 100% !important;
        float: none !important;
    }

    #content_ajax article .top { font-size: 15px !important; }
}

/* ============================================
   iOS / SAFARI FIXES
   ============================================ */
@supports not (inset: 0) {
    /* Safari < 14.1 fallback */
    #ucp_buttons a::after {
        top: 0; left: 0; right: 0; bottom: 0;
    }
}

/* Fix iOS input zoom */
@media screen and (max-width: 980px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Ensure FA icons work - don't break their positioning */
.fa-solid, .fa-regular, .fa-brands, .fa-duotone,
[class*="fa-"] {
    position: relative !important;
    display: inline-block;
}

i[class*="fa-"] {
    font-style: normal;
}

/* ============================================
   TOUCH TARGETS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    #mobile-nav-links li a { min-height: 44px; display: flex; align-items: center; }
    .mqa-btn { min-height: 44px; }
    input[type="submit"], button { min-height: 44px; }
    .body li a { min-height: 44px; }
    #mup-actions a { min-height: 40px; display: flex; align-items: center; justify-content: center; }
}