/* ==========================================================================
   Silkroad-style CMS clone — layout & function clone only.
   No copied logos, artwork, or text content — palette + structure only.
   Swap the CSS variables below for your own brand colors at any time.
   ========================================================================== */

:root {
    --topbar-bg: #2b2b2b;
    --topbar-text: #cfcfcf;
    --topbar-accent: #e07b1f;   /* "Charge" button orange */

    --hero-bg: #101010;

    --panel-bg: #17140f;       /* account panel dark box */
    --panel-border: #4a4536;
    --panel-accent: #d99a2b;   /* gold link color */

    --sidebar-bg: #2a2115;
    --sidebar-bg-alt: #241b11;
    --sidebar-text: #d9cdb0;
    --sidebar-active-bg: #6b4a20;
    --sidebar-active-text: #ffcf6b;
    --sidebar-flyout-bg: #1c150c;

    --content-header-bg: #47502c;   /* olive banner-plate look */
    --content-bg: #ece3c6;          /* parchment */
    --content-bg-alt: #e4d9b8;
    --content-border: #c9bb8e;
    --content-text: #3b3323;
    --content-heading: #2d2717;
    --content-link: #4060a0;

    --table-header-bg: #a9895a;
    --table-row-border: #d8cba0;

    --button-bg: #8a6a34;
    --button-bg-hover: #9c7a3e;
    --button-text: #fff6e0;

    --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-heading: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: #000;
    color: var(--content-text);
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-wrap { max-width: 1000px; margin: 0 auto; background: #000; }

/* ---------- Top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--topbar-bg) url('../img/theme/Hero_top_bg_bar.png') no-repeat center center / cover;
    color: var(--topbar-text);
    font-size: 12px;
    padding: 6px 16px;
}
.topbar-left a { margin-right: 14px; color: var(--topbar-text); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-clock { opacity: .85; }
.btn-charge {
    background: var(--topbar-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 2px;
    font-weight: bold;
}
.btn-plain {
    background: #3d3d3d;
    color: #eee;
    padding: 4px 10px;
    border-radius: 2px;
}

/* Guest-state Charge/Sign in/Sign up buttons: baked-text images (per-language
   recreations under img/theme/lang/{locale}/, see partials/topbar.blade.php). */
.topbar-img-btn { display: inline-flex; line-height: 0; }
.topbar-img-btn img { display: block; height: 20px; width: auto; }

/* ---- Language switcher (flag + native name dropdown) ---- */
.lang-switch { position: relative; }
.lang-switch-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #3d3d3d;
    color: #eee;
    border: 1px solid #555;
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.lang-switch-toggle:hover { background: #484848; }
.lang-switch-chevron { font-size: 9px; opacity: .8; }
.lang-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 1px; flex: none; }

.lang-switch-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 130px;
    background: #333;
    border: 1px solid #555;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,.4);
    z-index: 50;
    overflow: hidden;
}
.lang-switch-menu.open { display: block; }
.lang-switch-option-form { margin: 0; }
.lang-switch-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: #eee;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    padding: 7px 10px;
    cursor: pointer;
}
.lang-switch-option:hover { background: #454545; }
.lang-switch-option.is-active { background: #4a3a1f; color: #ffcf6b; }

/* ---------- Hero banner ---------- */
/* Base/legacy rule — kept only as a fallback if .hero-custom-banner is
   ever missing for some reason; partials/hero.blade.php now always adds
   that class on every page (Home included), so this fixed-height crop
   path is not actually used in normal operation any more. */
.hero {
    display: block;
    position: relative;
    height: 235px;
    background: var(--hero-bg) url('../img/hero-bg.png') top center / cover no-repeat;
    overflow: hidden;
}
/* Dead leftover from before the admin Site Design hero banner feature —
   nothing adds this class any more (see partials/hero.blade.php), kept
   only so removing it isn't bundled into unrelated work. */
.hero-item-mall {
    background-image: url('../img/hero-item-mall.png');
}
/* Every page's banner (Home included, admin-uploaded or the theme's own
   default artwork) shows the photo as-is: full width, natural height, no
   cropping and no letterbox bars/frame. .hero's height simply becomes
   whatever the image needs. */
.hero.hero-custom-banner {
    height: auto;
    background: var(--hero-bg);
    overflow: visible;
}
.hero-custom-img {
    display: block;
    width: 100%;
    height: auto;
}
/* A short fade to black over the image's own last ~90px (~64px on mobile)
   so the transition into the page below reads as intentional rather than
   a hard cut. */
.hero.hero-custom-banner::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--hero-bg) 100%);
    pointer-events: none;
}

/* ---------- Body columns ---------- */
.body-columns {
    display: flex;
    align-items: flex-start;
    background: #000;
    /* Pulls the columns up to overlap the bottom edge of the hero banner
       above, on every page including Home, so the banner and the page
       content read as one continuous surface instead of two stacked
       blocks with a hard seam between them. --hero-overlap (set by
       partials/hero.blade.php, a %) scales with each page's own banner
       image so every page gets the same proportion covered rather than a
       fixed px amount tuned for only one image's aspect ratio — that also
       makes this naturally scale down on narrower/mobile viewports with
       no separate override needed. */
    position: relative;
    margin-top: calc(var(--hero-overlap, 16%) * -1);
}
/* Every page's columns sit flush under the hero banner, no dead gap above them. */
.col-left { width: 220px; flex-shrink: 0; padding: 0 12px 40px; }
.col-right { flex: 1; padding: 0 16px 40px 0; min-width: 0; }

/* ---------- Account panel ---------- */
.account-panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: #cfc4a0;
    font-size: 12px;
    margin-bottom: 12px;
}
.account-panel .tabs {
    display: flex;
    border-bottom: 1px solid var(--panel-border);
}
.account-panel .tabs span {
    padding: 8px 10px;
    cursor: pointer;
}
.account-panel .tabs span.active { color: var(--panel-accent); font-weight: bold; }
.account-panel table { width: 100%; border-collapse: collapse; }
.account-panel td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.account-panel td.val { text-align: right; color: var(--panel-accent); }
.account-panel .links { padding: 8px 10px; list-style: none; margin: 0; }
.account-panel .links li { padding: 2px 0; }
.account-panel .links a { color: #b7ac8e; }

/* ---------- Logged-in VIP/silk panel (replaces .account-panel above) ---------- */
.vip-panel {
    position: relative;
    width: 100%;
    background-image: url('../img/theme/panel_texture_tile.png');
    background-repeat: repeat;
    box-sizing: border-box;
    padding: 16px 18px 14px;
    /* Matches .login-widget's effective 0 margin-bottom, so the gap down
       to .client-download-box (margin:4px 0) is the same 4px whether the
       visitor is logged in (this panel) or logged out (.login-widget). */
    margin-bottom: 0;
    font-size: 12px;
    color: #cfc4a0;
}
/* Frame is built from real pixels cropped straight out of login_bg.gif —
   the exact same frame .login-widget (the "Before Log in" box) uses and
   that renders correctly — instead of the old separate corner-PNG +
   CSS-border composite (whose straight-line border was invisible in
   production). The 4 bands below are real slices of the plain part of
   that same border, tiled to fit; the 4 corners are real 26x26 crops of
   its actual corner art. Panel height is variable (content-driven) so a
   single fixed-size background image (like login_bg.gif itself) can't be
   reused as-is — this reproduces it edge-by-edge instead. */
.vip-panel-frame-top,
.vip-panel-frame-bottom { position: absolute; left: 26px; right: 26px; height: 10px; background-repeat: repeat-x; pointer-events: none; }
.vip-panel-frame-top { top: 0; background-image: url('../img/theme/vip_frame_top.png'); }
.vip-panel-frame-bottom { bottom: 0; background-image: url('../img/theme/vip_frame_bottom.png'); }
.vip-panel-frame-left,
.vip-panel-frame-right { position: absolute; top: 26px; bottom: 26px; width: 10px; background-repeat: repeat-y; pointer-events: none; }
.vip-panel-frame-left { left: 0; background-image: url('../img/theme/vip_frame_left.png'); }
.vip-panel-frame-right { right: 0; background-image: url('../img/theme/vip_frame_right.png'); }

.vip-panel-corner { position: absolute; width: 26px; height: 26px; background-repeat: no-repeat; pointer-events: none; }
.vip-panel-corner-tl { top: 0; left: 0; background-image: url('../img/theme/vip_frame_corner_tl.png'); }
.vip-panel-corner-tr { top: 0; right: 0; background-image: url('../img/theme/vip_frame_corner_tr.png'); }
.vip-panel-corner-bl { bottom: 0; left: 0; background-image: url('../img/theme/vip_frame_corner_bl.png'); }
.vip-panel-corner-br { bottom: 0; right: 0; background-image: url('../img/theme/vip_frame_corner_br.png'); }

.vip-panel-header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 8px; position: relative; }
.vip-charname { color: #f5a045; text-decoration: underline; font-weight: bold; font-size: 14px; }
.vip-tier-wrap { display: flex; align-items: center; gap: 4px; }
.vip-tier { color: #fbff47; font-weight: bold; font-size: 13px; }
.vip-tier-icon { width: 16px; height: 16px; display: block; border-radius: 50%; }

.vip-panel-table { width: 100%; margin: 0 0 8px; border-collapse: collapse; position: relative; }
.vip-panel-table td { border: 1px solid rgba(255,255,255,.15); padding: 4px 8px; font-size: 11px; color: #c4c9bd; vertical-align: middle; line-height: 1.3; }
.vip-panel-table td.val { text-align: right; color: #c4c9bd; white-space: nowrap; }
.vip-panel-table td:not(.val) { font-size: 10px; white-space: nowrap; }
.vip-panel-table td.val img { width: 14px; height: 14px; vertical-align: middle; margin-right: 3px; }

.vip-panel-links { list-style: none; margin: 0; padding: 0; position: relative; }
.vip-panel-links li { padding: 2px 0; }
.vip-panel-links li::before { content: "\2022  "; color: #7a7260; }
.vip-panel-links a { color: #93959b; text-decoration: underline; }

/* ---------- Referral program widget (account panel sidebar) ---------- */
/* v2: a self-contained modern glowing card (visible rounded border,
   breathing glow, animated top light sweep) instead of reusing the
   vip-panel frame images, which weren't reading as a distinct box.
   Same gold/amber palette as v1 and the rest of the site. */
.referral-panel {
    position: relative;
    width: 100%;
    background: linear-gradient(160deg, rgba(46, 36, 20, 0.97), rgba(18, 14, 8, 0.98));
    border: 1px solid rgba(241, 196, 110, 0.4);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 14px 16px 12px;
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 12px;
    color: #cfc4a0;
    overflow: hidden;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.65), inset 0 0 24px rgba(241, 196, 110, 0.05);
    animation: referralBoxBreathe 4s ease-in-out infinite;
}
.referral-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #ffd27f, transparent);
    background-size: 200% 100%;
    animation: referralEdgeSweep 3.2s linear infinite;
}
.referral-panel-header { display: flex; align-items: center; gap: 6px; padding: 0 0 10px; position: relative; }
.referral-panel-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #ffe6a8, #f1c46e); box-shadow: 0 0 8px rgba(241, 196, 110, 0.9); animation: referralPulse 1.8s ease-in-out infinite; }
.referral-panel-title { color: #f5a045; font-weight: bold; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; }
.referral-link-row { display: flex; gap: 6px; margin-bottom: 10px; position: relative; }
.referral-link-input { flex: 1 1 auto; min-width: 0; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(241, 196, 110, 0.3); border-radius: 6px; color: #f2e6c8; font-size: 10px; padding: 7px 9px; font-family: 'Courier New', monospace; }
.referral-copy-btn { flex: none; background: linear-gradient(180deg, #dba64a, #a8721f); border: 1px solid rgba(255, 224, 168, 0.7); border-radius: 6px; color: #2a1a04; font-size: 10px; font-weight: 800; padding: 0 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 0 10px rgba(241, 196, 110, 0.35); }
.referral-copy-btn:active { transform: translateY(1px); }
.referral-stats-row { display: flex; gap: 6px; margin-bottom: 10px; position: relative; }
.referral-stat { flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(241, 196, 110, 0.15); }
.referral-stat-num { font-family: 'Courier New', monospace; font-weight: 700; font-size: 16px; color: #ffd27f; text-shadow: 0 0 8px rgba(255, 210, 127, 0.45); animation: referralGlow 2.6s ease-in-out infinite; }
.referral-stat-label { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: #9c8e6c; margin-top: 2px; }
.referral-track { position: relative; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-bottom: 4px; }
.referral-track-fill { position: relative; height: 100%; background: linear-gradient(90deg, #a8792f, #ffd27f); border-radius: 999px; overflow: hidden; }
.referral-track-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: referralShimmer 2.4s linear infinite; }
.referral-track-caption { font-size: 9px; color: #9c8e6c; text-align: right; }

@keyframes referralBoxBreathe {
    0%, 100% { box-shadow: 0 8px 24px -10px rgba(0,0,0,0.65), inset 0 0 24px rgba(241,196,110,0.05), 0 0 10px rgba(241,196,110,0.12); border-color: rgba(241,196,110,0.4); }
    50%      { box-shadow: 0 8px 24px -10px rgba(0,0,0,0.65), inset 0 0 30px rgba(241,196,110,0.1), 0 0 22px rgba(241,196,110,0.32); border-color: rgba(241,196,110,0.7); }
}
@keyframes referralEdgeSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes referralPulse { 0%, 100% { box-shadow: 0 0 6px rgba(241,196,110,0.6); } 50% { box-shadow: 0 0 12px rgba(241,196,110,1); } }
@keyframes referralGlow { 0%, 100% { text-shadow: 0 0 6px rgba(255,210,127,0.35); } 50% { text-shadow: 0 0 14px rgba(255,210,127,0.8); } }
@keyframes referralShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
    .referral-panel, .referral-panel::before, .referral-panel-dot, .referral-stat-num, .referral-track-fill::after { animation: none !important; }
}

/* ---------- Referral program widget (account panel sidebar) ---------- */
/* v2: a self-contained modern glowing card (visible rounded border,
   breathing glow, animated top light sweep) instead of reusing the
   vip-panel frame images, which weren't reading as a distinct box.
   Same gold/amber palette as v1 and the rest of the site. */
.referral-panel {
    position: relative;
    width: 100%;
    background: linear-gradient(160deg, rgba(46, 36, 20, 0.97), rgba(18, 14, 8, 0.98));
    border: 1px solid rgba(241, 196, 110, 0.4);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 14px 16px 12px;
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 12px;
    color: #cfc4a0;
    overflow: hidden;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.65), inset 0 0 24px rgba(241, 196, 110, 0.05);
    animation: referralBoxBreathe 4s ease-in-out infinite;
}
.referral-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #ffd27f, transparent);
    background-size: 200% 100%;
    animation: referralEdgeSweep 3.2s linear infinite;
}
.referral-panel-header { display: flex; align-items: center; gap: 6px; padding: 0 0 10px; position: relative; }
.referral-panel-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #ffe6a8, #f1c46e); box-shadow: 0 0 8px rgba(241, 196, 110, 0.9); animation: referralPulse 1.8s ease-in-out infinite; }
.referral-panel-title { color: #f5a045; font-weight: bold; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; }
.referral-link-row { display: flex; gap: 6px; margin-bottom: 10px; position: relative; }
.referral-link-input { flex: 1 1 auto; min-width: 0; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(241, 196, 110, 0.3); border-radius: 6px; color: #f2e6c8; font-size: 10px; padding: 7px 9px; font-family: 'Courier New', monospace; }
.referral-copy-btn { flex: none; background: linear-gradient(180deg, #dba64a, #a8721f); border: 1px solid rgba(255, 224, 168, 0.7); border-radius: 6px; color: #2a1a04; font-size: 10px; font-weight: 800; padding: 0 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 0 10px rgba(241, 196, 110, 0.35); }
.referral-copy-btn:active { transform: translateY(1px); }
.referral-stats-row { display: flex; gap: 6px; margin-bottom: 10px; position: relative; }
.referral-stat { flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(241, 196, 110, 0.15); }
.referral-stat-num { font-family: 'Courier New', monospace; font-weight: 700; font-size: 16px; color: #ffd27f; text-shadow: 0 0 8px rgba(255, 210, 127, 0.45); animation: referralGlow 2.6s ease-in-out infinite; }
.referral-stat-label { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: #9c8e6c; margin-top: 2px; }
.referral-track { position: relative; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-bottom: 4px; }
.referral-track-fill { position: relative; height: 100%; background: linear-gradient(90deg, #a8792f, #ffd27f); border-radius: 999px; overflow: hidden; }
.referral-track-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: referralShimmer 2.4s linear infinite; }
.referral-track-caption { font-size: 9px; color: #9c8e6c; text-align: right; }

@keyframes referralBoxBreathe {
    0%, 100% { box-shadow: 0 8px 24px -10px rgba(0,0,0,0.65), inset 0 0 24px rgba(241,196,110,0.05), 0 0 10px rgba(241,196,110,0.12); border-color: rgba(241,196,110,0.4); }
    50%      { box-shadow: 0 8px 24px -10px rgba(0,0,0,0.65), inset 0 0 30px rgba(241,196,110,0.1), 0 0 22px rgba(241,196,110,0.32); border-color: rgba(241,196,110,0.7); }
}
@keyframes referralEdgeSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes referralPulse { 0%, 100% { box-shadow: 0 0 6px rgba(241,196,110,0.6); } 50% { box-shadow: 0 0 12px rgba(241,196,110,1); } }
@keyframes referralGlow { 0%, 100% { text-shadow: 0 0 6px rgba(255,210,127,0.35); } 50% { text-shadow: 0 0 14px rgba(255,210,127,0.8); } }
@keyframes referralShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
    .referral-panel, .referral-panel::before, .referral-panel-dot, .referral-stat-num, .referral-track-fill::after { animation: none !important; }
}

.banner-slot {
    display: block;
    background: repeating-linear-gradient(45deg,#3a2f1c,#3a2f1c 10px,#332813 10px,#332813 20px);
    color: #d9cdb0;
    text-align: center;
    font-size: 12px;
    padding: 18px 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    border: 1px dashed #6b5a34;
}

/* ---------- Sidebar nav (nested flyout) ---------- */
.sidenav { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.sidenav > li {
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,.4);
}
.sidenav > li > a,
.sidenav > li > span.cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .5px;
}
.sidenav > li:nth-child(even) > a,
.sidenav > li:nth-child(even) > span.cat { background: var(--sidebar-bg-alt); }
.sidenav > li.active > a,
.sidenav > li.active > span.cat,
.sidenav > li:hover > a,
.sidenav > li:hover > span.cat {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}
.sidenav .sub {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: #241b11;
}
.sidenav .sub li a {
    display: block;
    padding: 5px 20px;
    color: var(--sidebar-text);
    font-size: 12px;
}
.sidenav .sub li a:hover,
.sidenav .sub li a.active { color: var(--sidebar-active-text); }

/* flyout (hover) submenu, used when a category is collapsed but still
   needs to expose its children on hover — mirrors the "Trade > Jobs
   conflict > ..." style cascading menus seen on the live site */
.sidenav .flyout {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 170px;
    background: var(--sidebar-flyout-bg);
    border: 1px solid #4a3a20;
    display: none;
    z-index: 20;
}
.sidenav li:hover > .flyout { display: block; }
.sidenav .flyout li { position: relative; }
.sidenav .flyout > li > a {
    display: flex;
    justify-content: space-between;
    padding: 7px 14px;
    color: var(--sidebar-text);
    font-size: 12px;
    white-space: nowrap;
}
.sidenav .flyout > li:hover > a { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }
.sidenav .flyout .flyout { top: -1px; }

/* ---------- Content panel ---------- */
.content-panel {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 2px;
}
.content-header {
    background: var(--content-header-bg);
    padding: 14px 20px;
}
.content-header .title-plate {
    display: inline-block;
    color: #f2e6b8;
    font-family: var(--font-heading);
    font-size: 20px;
    letter-spacing: 1px;
    padding: 4px 18px;
    border: 1px solid #6b7048;
    background: rgba(0,0,0,.15);
}
.breadcrumb {
    font-size: 11px;
    color: #8a7f5e;
    padding: 8px 20px 0;
}
.breadcrumb strong { color: var(--content-heading); }

.content-body { padding: 16px 20px 26px; font-size: 13px; line-height: 1.6; }
.content-body h2 {
    font-size: 15px;
    color: var(--content-heading);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 8px;
}
.content-body h2:first-child { margin-top: 0; }
.content-body .bullet { width: 9px; height: 9px; border-radius: 50%; background: #6b6448; display: inline-block; }

/* ---------- Framed content panel (same frame/bg material as the
   Upcoming Events widget: content_frame_top.png is the same blank
   frame-bar art, news_frame2.gif the same footer cap, news_bg1_2.gif the
   same tiled parchment). Opt-in via .content-panel-framed so any page
   that still uses plain .content-panel (admin back-office) is untouched. */
.content-panel-framed {
    background-image: url('../img/theme/news_bg1_2.gif');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-color: var(--content-bg);
    border: none;
    border-left: 1px solid #4a4536;
    border-right: 1px solid #4a4536;
    border-radius: 0;
}
.content-panel-framed .content-header {
    background: none;
    padding: 0;
    position: relative;
}
.content-panel-framed .content-header-frame-img { width: 100%; display: block; }
.content-panel-framed .content-header .title-plate {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    padding: 0;
    border: none;
    background: none;
    color: #efdaa4;
    font-family: var(--font-heading);
    font-size: 18px;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px #000;
}
.content-panel-framed .breadcrumb { padding: 8px 20px 0; }
.content-panel-framed .content-footer-frame-img { width: 100%; display: block; }

/* ================= Framed panel header art =================
   Every .content-panel-framed header and footer share the same
   news_frame2.gif art; the header instance is flipped vertically so its
   metallic edge sits against the panel's outer top border (mirroring the
   footer, where that same edge already sits against the outer bottom
   border) instead of landing right next to the title. Applies to every
   framed panel: pages/show, Support, Tickets, Download, Item Mall, etc. */
.content-panel-framed .content-header-frame-img { transform: scaleY(-1); }
.page-detail .content-body { padding-top: 9px; }

.category-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    aspect-ratio: 1780 / 460;
    margin: 0 0 14px;
    background-image: url('../img/theme/category_scroll.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.category-banner span {
    font-family: Georgia, "Times New Roman", Times, "Liberation Serif", serif;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 25px;
    letter-spacing: .5px;
    color: #2e2015;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    white-space: nowrap;
    padding: 0 26px;
    text-align: center;
}

/* Wider variant of the same scroll banner, same font stack/weight/case/
   color as above -- just sized to comfortably hold the longer section
   titles used on Support, Tickets, Download and Item Mall (e.g. "Premium
   Support", "Premium Silk Gift"). Used together with .category-banner. */
.category-banner.category-banner-wide {
    width: 260px;
}
.category-banner.category-banner-wide span {
    font-size: 20px;
    padding: 0 24px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 6px;
}
.page-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    color: #082e54;
}
.page-title .icon-bullet { flex: none; }

.page-detail .breadcrumb {
    padding: 0;
    font-size: 11px;
    color: #464646;
    white-space: nowrap;
}
.page-detail .breadcrumb a { color: #464646; text-decoration: none; }
.page-detail .breadcrumb a:hover { text-decoration: underline; }
.page-detail .breadcrumb .crumb-sep { margin: 0 5px; color: #8a7f5e; }
.page-detail .breadcrumb strong { color: #000; }

/* Optional secondary sub-heading (second/"doc" icon) — available for a
   future page that needs a more specific subtitle under a generic title;
   not used by any of the 34 seeded pages today. */
.page-subtitle {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 10px;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 16px;
    color: #1c4c7c;
}
.page-subtitle .icon-doc { flex: none; }

.page-detail .content-body p.page-tagline {
    font-weight: bold;
    color: #1c4c7c;
    margin: 0 0 14px;
}
.page-detail .content-body p { margin: 0 0 12px; }

/* Rich (Quill-authored) page content — see Page::isRichContent(). Reuses
   the same base type as the plain-text paragraph path above, plus the
   handful of block types the editor can actually produce (headings,
   lists, blockquote, link, image, inline code). */
.page-rich-content p { margin: 0 0 12px; }
.page-rich-content h1, .page-rich-content h2, .page-rich-content h3 {
    font-family: var(--font-heading); color: #1c4c7c; margin: 18px 0 10px;
}
.page-rich-content h1:first-child, .page-rich-content h2:first-child, .page-rich-content h3:first-child { margin-top: 0; }
.page-rich-content ul, .page-rich-content ol { margin: 0 0 12px 22px; padding: 0; }
.page-rich-content li { margin: 0 0 4px; }
.page-rich-content blockquote {
    margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid #8a7f5e; color: #55503f; font-style: italic;
}
.page-rich-content a { color: #1c4c7c; text-decoration: underline; }
.page-rich-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 6px 0; display: block; }
.page-rich-content code, .page-rich-content pre {
    background: rgba(0,0,0,0.06); border-radius: 4px; font-family: 'Courier New', monospace; font-size: 12px;
}
.page-rich-content pre { padding: 10px 12px; margin: 0 0 12px; overflow-x: auto; }
.page-rich-content code { padding: 1px 4px; }
.page-rich-content hr { border: none; border-top: 1px solid #8a7f5e; margin: 16px 0; }
.page-rich-content iframe { max-width: 100%; }

/* Optional collapsible-style section label ("> Setting"); available for a
   future page with a distinct labeled sub-section, not forced on any page
   today. */
.section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 16px 0 8px;
    font-weight: bold;
    font-size: 13px;
    color: #1c4c7c;
    cursor: pointer;
    user-select: none;
}
.section-toggle .chevron { display: inline-block; transition: transform .15s ease; }
.section-toggle.collapsed .chevron { transform: rotate(0deg); }
.section-toggle:not(.collapsed) .chevron { transform: rotate(90deg); }
.section-body.collapsed { display: none; }

.media-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg,#d8cba0,#d8cba0 10px,#cabf94 10px,#cabf94 20px);
    border: 1px dashed #9c8f66;
    color: #6b6448;
    font-size: 12px;
    text-align: center;
    min-height: 140px;
    margin: 10px 0;
}

/* horizontal tabs, e.g. Fortress NPC management / administrator / ... */
.h-tabs { display: flex; gap: 2px; margin: 14px 0; }
.h-tabs span {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    background: var(--table-header-bg);
    color: #3a2e12;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
}
.h-tabs span.active { background: #3a2e12; color: #f2e6b8; }

/* process-diagram row, e.g. Alchemy: [Item] + [Stone] > [Result] */
.flow-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.flow-box {
    background: var(--button-bg);
    color: var(--button-text);
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    min-width: 110px;
}
.flow-op { font-size: 16px; color: var(--content-heading); }

/* banner-grid, e.g. Cartoon Guide 3-across grid of clickable panels */
.banner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.banner-grid .cell {
    background: var(--content-bg-alt);
    border: 1px solid var(--content-border);
    aspect-ratio: 3/2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b6448;
    font-size: 12px;
    text-align: center;
    padding: 8px;
}

/* ---------- Data table (News / Forum) ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.data-table thead th {
    background: var(--table-header-bg);
    color: #fff;
    text-align: left;
    padding: 8px 10px;
}
.data-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--table-row-border);
}
.data-table .cat-row td {
    background: #cabf94;
    font-weight: bold;
    color: var(--content-heading);
}
.tag {
    background: #5a7fa6;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-right: 6px;
}

.pagination-nav { margin: 16px 0 6px; }
.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; font-size: 12px; }
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--content-border);
    border-radius: 2px;
    line-height: 1;
    text-decoration: none;
}
.pagination a:hover { background: var(--table-header-bg); color: #fff; }
.pagination .current { background: var(--table-header-bg); color: #fff; }
.pagination .pg-dots { border-color: transparent; cursor: default; }
.pagination .pg-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
/* Prev/Next are tiny icon-only buttons, not full-width like the page numbers */
.pagination a[rel="prev"], .pagination a[rel="next"],
.pagination span.pg-disabled {
    min-width: 22px;
    width: 22px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
}
.pagination-meta { text-align: center; font-size: 11px; color: #8892a6; margin-top: 8px; }
.pagination-meta strong { color: inherit; font-weight: 600; }

.search-row { display: flex; gap: 8px; justify-content: center; margin: 10px 0 0; }
.search-row input {
    padding: 6px 10px;
    border: 1px solid var(--content-border);
    width: 220px;
}
.search-row button {
    background: var(--button-bg);
    color: var(--button-text);
    border: none;
    padding: 6px 14px;
    cursor: pointer;
}

/* ---------- Downloads page ---------- */
.download-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--content-border);
    padding: 14px;
    margin: 10px 0;
    background: var(--content-bg-alt);
}
.download-box-label { display: flex; align-items: center; gap: 10px; }
.download-box-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.download-btn {
    background: var(--button-bg);
    color: var(--button-text);
    padding: 14px 30px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
}
.spec-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.spec-table th, .spec-table td {
    border: 1px solid var(--content-border);
    padding: 8px;
    text-align: center;
}
.spec-table th { background: var(--table-header-bg); color: #fff; }

/* ---------- Submenu-stub pages (Item Mall / Support) ---------- */
.stub-list { list-style: none; margin: 0; padding: 0; }
.stub-list li a {
    display: block;
    padding: 14px 18px;
    margin-bottom: 8px;
    background: var(--content-bg-alt);
    border: 1px solid var(--content-border);
    font-weight: bold;
    color: var(--content-heading);
}
.stub-list li a:hover { background: #d8cba0; text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer {
    text-align: center;
    color: #777;
    font-size: 11px;
    padding: 18px 0;
    background: #000;
}

/* ---------- Register form ---------- */
.form-grid { display: grid; grid-template-columns: 160px 1fr; gap: 10px 14px; max-width: 480px; align-items: center; }
.form-grid label { font-size: 12px; font-weight: bold; color: var(--content-heading); }
.form-grid input, .form-grid select, .form-grid textarea {
    padding: 7px 9px;
    border: 1px solid var(--content-border);
    background: #fff;
    font-size: 12px;
    font-family: inherit;
}
.form-grid textarea { resize: vertical; align-self: start; }
.form-grid .full-row { grid-column: 1 / -1; font-size: 11px; }

/* ---------- Admin News editor: per-language translation panels ---------- */
.admin-translations {
    border: 1px solid var(--content-border);
    background: #fbf9f2;
    padding: 10px 14px;
    max-width: 640px;
}
.admin-translations > summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--content-heading);
    font-size: 13px;
}
.admin-translations .field-hint { font-size: 11px; color: #7a7360; margin: 4px 0 12px; }
.admin-translation-fieldset {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 14px;
    align-items: center;
    border: 1px solid var(--content-border);
    padding: 12px 14px 14px;
    margin: 0 0 14px;
}
.admin-translation-fieldset:last-child { margin-bottom: 0; }
.admin-translation-fieldset legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: bold;
    color: var(--content-heading);
    padding: 0 4px;
}
.translation-badge {
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.3px;
}
.translation-badge-manual { background: #d7ead1; color: #2f6b2f; }
.translation-badge-auto { background: #e8e2c8; color: #7a6a2a; }
.admin-translation-fieldset label { font-size: 12px; font-weight: bold; color: var(--content-heading); }
.admin-translation-fieldset input {
    padding: 7px 9px;
    border: 1px solid var(--content-border);
    background: #fff;
    font-size: 12px;
    font-family: inherit;
}

/* ---------- Support tickets ("My Q&A") ---------- */
.ticket-list { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.ticket-list th, .ticket-list td { padding: 7px 8px; border-bottom: 1px solid var(--content-border); text-align: left; }
.ticket-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.ticket-status-open { background: #e8e2c8; color: #7a6a2a; }
.ticket-status-answered { background: #d7ead1; color: #2f6b2f; }
.ticket-status-closed { background: #e2e2e2; color: #666; }
.ticket-thread { max-width: 640px; margin-top: 10px; }
.ticket-message {
    border: 1px solid var(--content-border);
    background: #fff;
    border-radius: 2px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.ticket-message-staff { background: #fbf3df; border-color: #c9a24a; }
.ticket-message-meta { font-size: 11px; color: #7a7360; margin-bottom: 5px; }
.ticket-message-meta strong { color: var(--content-heading); }
.ticket-message-body { font-size: 13px; white-space: pre-line; }

/* ---------- Rich text editor (News post body) ---------- */
.rte-wrap { max-width: 640px; }
.rte-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    background: var(--content-bg-alt);
    border: 1px solid var(--content-border);
    border-bottom: none;
}
.rte-toolbar button {
    background: #fff;
    border: 1px solid var(--content-border);
    border-radius: 2px;
    padding: 4px 9px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
}
.rte-toolbar button:hover { background: var(--content-bg); }
.rte-toolbar button[data-cmd="bold"] { font-weight: bold; }
.rte-toolbar button[data-cmd="italic"] { font-style: italic; }
.rte-toolbar button[data-cmd="underline"] { text-decoration: underline; }
.rte-sep { width: 1px; align-self: stretch; background: var(--content-border); margin: 0 4px; }
.rte-color-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: normal;
    color: var(--content-text);
}
.rte-color-label input[type="color"] {
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--content-border);
    cursor: pointer;
}
.rte-editor {
    min-height: 160px;
    padding: 9px;
    border: 1px solid var(--content-border);
    background: #fff;
    font-size: 12px;
    line-height: 1.5;
    overflow-y: auto;
}
.rte-editor:focus { outline: 2px solid var(--panel-accent); outline-offset: -2px; }
.form-submit {
    grid-column: 1 / -1;
    background: var(--button-bg);
    color: var(--button-text);
    border: none;
    padding: 10px 26px;
    font-weight: bold;
    cursor: pointer;
    width: fit-content;
}
.form-note { font-size: 11px; color: #7a7050; margin-top: 6px; }

.form-submit-green {
    background: #3f7d3f;
    color: #f2fbf2;
}
.form-submit-green:disabled {
    background: #8fa88f;
    color: #e6efe6;
    cursor: not-allowed;
}

.terms-row { display: flex; }
.terms-check { display: flex; align-items: center; gap: 6px; font-weight: normal !important; cursor: pointer; }
.terms-check input { width: auto; padding: 0; }

/* ---------- Terms & Conditions popup ---------- */
.terms-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.terms-modal-overlay[hidden] { display: none; }
.terms-modal {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 3px;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.terms-modal-header {
    background: var(--content-header-bg);
    color: #f2e6b8;
    font-family: var(--font-heading);
    font-size: 16px;
    padding: 12px 16px;
}
.terms-modal-body { padding: 14px 18px; font-size: 12px; line-height: 1.6; overflow-y: auto; }
.terms-modal-body ul { padding-left: 18px; margin: 8px 0; }
.terms-modal-body li { margin-bottom: 6px; }
.terms-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--content-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ---------- No-content state ---------- */
.empty-state {
    text-align: center;
    padding: 30px 10px;
    color: #7a7050;
    font-size: 13px;
    border: 1px dashed var(--content-border);
    margin-top: 10px;
}

/* ---------- Icon grid (social media) ---------- */
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.icon-grid .cell { flex-direction: column; gap: 6px; aspect-ratio: auto; padding: 20px 10px; }
.icon-grid .glyph { font-size: 22px; }

@media (max-width: 760px) {
    .body-columns { flex-direction: column; }
    .col-left, .col-right, .col-right-rail { width: 100%; padding-right: 12px; }
    .banner-grid { grid-template-columns: repeat(2, 1fr); }
    .sidenav .flyout { position: static; display: none; border: none; }
    .sidenav li:hover > .flyout { display: block; }
}

/* =====================================================================
   Theme redesign additions (joymax-style asset pack)
   ===================================================================== */

/* ---------- Right rail (Buy Item / Standard Time / Premium Support) ---------- */
.col-right-rail { width: 220px; flex-shrink: 0; padding: 14px 12px 40px 0; }
.right-rail { display: flex; flex-direction: column; gap: 3px; }
.rail-box { display: block; line-height: 0; }
.rail-box img { width: 100%; display: block; }

/* ---------- Clock panel: chamfered-corner frame, live-rendered (no baked
   background image) — colors/sizes/layout match the reference mockup:
   plain header title, big gold primary time beside a stacked date, a
   divider, then a cyan zone label above a compact white secondary row. */
.clock-frame {
    position: relative;
    background: #0a0a0a;
    border: 1px solid #8a7a4a;
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
    padding: 8px 12px 10px;
    font-family: 'Courier New', monospace;
    text-align: center;
}
.clock-title {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #e8dfc8;
    text-transform: uppercase;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(138, 122, 74, .45);
}
.clock-primary-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.clock-primary-date { display: flex; flex-direction: column; font-size: 10px; line-height: 1.25; color: #e5e0d0; text-align: left; }
.clock-primary-time { font-size: 20px; font-weight: bold; color: #f5c518; line-height: 1; }
.clock-primary-time .clock-meridiem { font-size: 13px; margin-left: 2px; }
.clock-divider { border-bottom: 1px solid rgba(138, 122, 74, .35); margin: 8px 0 6px; }
.clock-zone-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #52d6e2; margin-bottom: 4px; }
.clock-secondary-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 11px; color: #e5e0d0; }
.clock-secondary-time { font-weight: bold; color: #ffffff; font-size: 13px; }
.clock-secondary-row .clock-meridiem { color: #f5c518; font-size: 11px; }

/* ---------- Client download box (left column) ---------- */
.client-download-box { display: block; line-height: 0; margin: 4px 0; }
.client-download-box img { width: 100%; display: block; }

/* ---------- Image-based left menu tabs ---------- */
.sidenav-image { list-style: none; margin: 0 0 10px; padding: 0; }
.sidenav-image li { margin: 0; padding: 0; }
.sidenav-image a { display: block; line-height: 0; }
.sidenav-image img { width: 100%; display: block; }
.sidenav-image li.active a,
.sidenav-image li:hover a { filter: brightness(1.15); }

/* Expandable game-menu categories (Introduction/Game Guide/Game System/
   Game Info/Community/Item Mall/Support) — real left_menu*.gif assets are
   untouched; when a category is expanded its own tab image gets a warm
   "light brown" filter effect (matched to the user's reference screenshot,
   no new asset). Sub-item list below reuses the same visual language but
   is its own scoped block so it never affects .sidenav .sub (Rankings/
   Logs & History) elsewhere. */
.sidenav-image li.open > a.cat-toggle img {
    filter: sepia(1) saturate(4) brightness(1.0);
}
.sidenav-image .sub {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: #241b11;
    display: none;
}
.sidenav-image li.open > .sub { display: block; }
.sidenav-image .sub li a {
    display: block;
    padding: 3px 8px;
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.sidenav-image .sub li a:hover,
.sidenav-image .sub li a.active {
    background: rgb(90, 82, 69);
    color: #e0a342;
    text-decoration: none;
}

/* ---------- Login widget (guest state, joymax asset) ---------- */
.login-widget {
    width: 100%;
    height: 168px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 14px 16px 0;
    box-sizing: border-box;
    position: relative;
}
.login-widget-form { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.login-widget-fields { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.login-widget-form input {
    width: 100%;
    background: rgba(0,0,0,.55);
    border: 1px solid #4a4536;
    color: #e8dfc0;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 2px;
    box-sizing: border-box;
}
/* Keep the same dark-gray field background before AND after the browser
   autofills/remembers a value — without this, Chrome/Edge force their own
   yellow "remembered field" highlight that no plain background-color can
   override. */
.login-widget-form input:-webkit-autofill,
.login-widget-form input:-webkit-autofill:hover,
.login-widget-form input:-webkit-autofill:focus,
.login-widget-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #e8dfc0;
    caret-color: #e8dfc0;
    -webkit-box-shadow: 0 0 0px 1000px rgba(20,18,12,.85) inset;
    box-shadow: 0 0 0px 1000px rgba(20,18,12,.85) inset;
    transition: background-color 5000s ease-in-out 0s;
}
.login-widget-submit {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
}
.login-widget-submit img { display: block; height: 38px; width: auto; }
.login-widget-error { color: #e08a8a; font-size: 10px; text-align: center; margin-top: 4px; }
.login-widget-search { display: flex; gap: 0; margin-top: 6px; }
.login-widget-search a { display: block; line-height: 0; }
.login-widget-search a:first-child { flex: 55 1 0; }
.login-widget-search a:last-child { flex: 95 1 0; }
.login-widget-search img { display: block; width: 100%; height: 18px; }
.login-widget-signup { display: block; text-align: center; margin-top: 6px; line-height: 0; }
.login-widget-signup img { display: inline-block; width: 100%; }

/* ---------- Sider banner (homepage news slider) ---------- */
.sider-banner { display: block; line-height: 0; margin-bottom: 4px; }
.sider-banner img { width: 100%; display: block; }

/* ---------- Latest News widget (joymax asset) ---------- */
.news-widget { margin-top: 4px; }

/* ---------- Homepage-only "Upcoming Events" panel ---------- */
.home-events-panel { margin-top: 8px; }

/* ---------- Upcoming Events widget (same frame/news_bg as Latest News) ----------
   events_frame_top.png is the real "Upcoming Events" header art (same frame
   and corner ornaments as news_frame1_1.gif, with "Upcoming Events" baked
   into it instead of "Latest News") — no separate title overlay needed. */
.events-widget { margin-top: 8px; }
.news-widget-header-row { position: relative; }
.news-widget-header { width: 100%; display: block; }
.news-widget-footer { width: 100%; display: block; }
.news-widget-body {
    background-repeat: repeat-y;
    background-size: 100% auto;
    padding: 8px 12px;
    border-left: 1px solid #4a4536;
    border-right: 1px solid #4a4536;
    font-family: Tahoma, Verdana, Geneva, sans-serif;
}
.news-widget-item {
    border-bottom: 1px dotted #a89f7c;
    padding: 2px 0;
}
.news-widget-item:last-child { border-bottom: none; }
.news-widget-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
}
.news-widget-row a { color: #4a3f26; flex: 1; font-weight: bold; }
.news-widget-date { color: #8a7f5c; font-size: 11px; }
.news-toggle { cursor: pointer; }
.news-widget-excerpt {
    font-size: 11px;
    line-height: 1.5;
    color: #6b6142;
    padding: 2px 0 4px 68px;
}
.news-widget-item.is-collapsed .news-widget-excerpt { display: none; }
.news-widget-more {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    line-height: 0;
}
.news-widget-more img { display: block; }

/* ---------- Item Mall widget (homepage preview + full page) ---------- */
.im-silk-balance { margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.im-silk-balance img { display: inline-block; }

/* The whole widget's art (texture + both frame caps) is drawn at a fixed
   550px design width — constrain the widget itself to that width so every
   piece lines up edge-to-edge instead of being stretched/tiled to fit
   whatever the surrounding column happens to be. */
.im-widget { margin: 0 auto 4px; max-width: 550px; }
.im-frame-piece { display: block; width: 100%; height: auto; }

/* item_bar1_1 + Charge/Buy Item are scaled down to sit INSIDE the ornate
   item_frame1 strip (overlaid on top of it), not stacked above it as a
   separate row — matches the reference design. */
.im-frame-top-wrap { position: relative; }
.im-widget-header {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 8px;
}
.im-bar-link { flex: 1; min-width: 0; margin-right: 8px; }
.im-bar-img { height: 16px; width: 100%; display: block; }
.im-header-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.im-header-actions img { display: block; height: 16px; width: auto; }

.im-columns {
    display: flex;
    background: url('../img/theme/item_bg1_2.gif') no-repeat;
    background-size: 100% 100%;
    background-position: top center;
    min-height: 141px;
    box-sizing: border-box;
    padding: 6px 0 10px;
    gap: 0;
}
.im-section { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
/* New Items / Best Items badges both centered at the top of their column,
   at a slightly reduced width rather than stretched full-width. */
.im-section > img { display: block; margin: 0 auto 6px; max-width: 82%; height: auto; flex-shrink: 0; }
.im-section-items { display: flex; gap: 4px; flex: 1; align-items: center; align-self: stretch; width: 100%; }
.im-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 2px 3px;
    font-size: 10px;
}
.im-card-icon { width: 36px; height: 36px; border-radius: 2px; }
.im-card-name {
    color: #2c260f;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4em;
}
.im-card-price { display: flex; align-items: center; gap: 3px; white-space: nowrap; color: #6a4c00; }
.im-card-price img { width: 12px; height: 12px; }
.im-card a img,
.im-card > img.im-item-purchase-disabled { display: block; }
.im-item-purchase-disabled { opacity: .45; }

/* ---------- Item Mall "Pay with" chooser (purchase confirmation page) ---------- */
.im-pay-with { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.im-pay-with-option { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; }
.im-pay-with-option img { width: 14px; height: 14px; }

/* ---------- Item Mall "Buy Item" confirmation page (real row-table layout,
   modeled after the original Silkroad Item Mall buy page) ---------- */
.im-buy-table { border-top: 1px solid var(--content-border); max-width: 640px; }
.im-buy-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--content-border);
}
.im-buy-label { flex: 0 0 170px; font-weight: bold; color: var(--content-heading); font-size: 13px; }
.im-buy-value { flex: 1; font-size: 13px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.im-buy-value img { width: 14px; height: 14px; }
.im-buy-row-item .im-buy-value { align-items: flex-start; }
.im-buy-item-icon { width: 40px; height: 40px; border-radius: 2px; flex-shrink: 0; }
.im-buy-item-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.im-buy-item-bullets li { display: flex; align-items: center; gap: 5px; }
.im-buy-item-bullets li img { width: 12px; height: 12px; }
.im-buy-qty-hint { opacity: .65; font-size: .85em; }
.im-buy-value #quantity { width: 56px; text-align: center; }
.im-buy-row-remaining { font-weight: bold; }
.im-buy-row-remaining .im-buy-label { color: var(--panel-accent); }
.im-buy-insufficient-note {
    padding: 8px 6px 14px;
    font-size: 12px;
    color: #a33;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.im-buy-insufficient-note[hidden] { display: none; }
.im-silk-charge-btn {
    background: var(--topbar-accent);
    color: #fff6e0;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.im-silk-charge-btn:hover { opacity: .9; }
.im-buy-error { padding: 8px 6px; color: #a33; font-size: 12px; }
.im-buy-actions { display: flex; justify-content: center; gap: 10px; padding: 18px 0 6px; }
.im-buy-confirm-btn,
.im-buy-cancel-btn {
    background: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    padding: 7px 26px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.im-buy-confirm-btn:hover,
.im-buy-cancel-btn:hover { background: var(--button-bg-hover); }
.im-buy-confirm-btn:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- Full Item Mall catalog (all categories, wrapping grid) ---------- */
.im-catalog-category { margin: 18px 0; }
.im-catalog-category-title {
    font-size: 13px;
    font-weight: bold;
    color: #6a4c00;
    background: #f1e6c4;
    border: 1px solid #d8c690;
    padding: 5px 10px;
    margin-bottom: 8px;
}
.im-full-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.im-full-grid .im-card {
    flex: 0 0 100px;
    background: #faf3de;
    border: 1px solid #e2d3a0;
    border-radius: 3px;
    padding: 6px 4px 8px;
}
.im-catalog-name-auto { font-style: italic; opacity: .8; }

/* ---------- Full Item Mall redesign (catalog page only) ----------
   The homepage teaser deliberately retains its original compact widget. */
.item-mall-page .content-body { padding-top: 12px; }
.item-mall-page .im-silk-balance { margin-bottom: 12px; }
.mall-payment-directory { margin: 0 0 16px; font-size: 12px; line-height: 1.35; }
.mall-payment-tabs { position: relative; width: 331px; height: 27px; }
.mall-payment-tabs-art { display: block; width: 331px; height: 27px; }
.mall-payment-tab {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: transparent;
    background: transparent;
    font-size: 0;
    cursor: pointer;
}
.mall-payment-tab-premium { left: 0; }
.mall-payment-tab-silk { right: 0; }
.mall-payment-note { margin: 6px 0 8px; color: #312f27; }
.mall-payment-note strong { color: #075080; }
.mall-guide-link {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 12px;
    color: #fff2df;
    background: #a85168;
    font: bold 11px Georgia, serif;
    letter-spacing: .4px;
    text-decoration: none;
    text-transform: uppercase;
}
.mall-guide-link:hover { background: #843d52; }
.mall-directory-table { border: 1px solid #dac89e; border-bottom: 0; }
.mall-directory-row { display: grid; grid-template-columns: 126px 1fr; min-height: 25px; border-bottom: 1px solid #dac89e; }
.mall-directory-row strong { padding: 4px 12px; color: #70450d; background: rgba(212, 187, 139, .62); }
.mall-directory-row span { padding: 4px 12px; color: #362c1d; }
.mall-directory-vip strong { color: #dcdf00; text-align: center; }
.item-mall-page .im-catalog-category { margin: 16px 0 20px; }
.item-mall-page .im-catalog-category-title {
    margin: 0 0 6px;
    padding: 4px 10px;
    color: #684210;
    background: #eadcb7;
    border-color: #d4bf8d;
    font-size: 13px;
}
.item-mall-page .im-full-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.item-mall-page .im-catalog-card {
    box-sizing: border-box;
    min-height: 150px;
    padding: 9px 10px 10px;
    color: #fff4d3;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(174, 166, 118, .42), rgba(83, 81, 60, .22) 65%),
        #625f47;
    border: 1px solid #202018;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(218, 207, 160, .46), 0 1px 1px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    /* NOT overflow:hidden — this card now hosts the item-info popup
       (.im-tooltip-anchor > .item-tooltip), which is deliberately wider
       than the card and renders below it; overflow:hidden here clipped
       that popup to the card's own tiny box (confirmed via a real
       screenshot: the popup text was truncated at the card edge). The
       card doesn't actually need clipping — its background is a
       self-contained gradient and the 1px border-radius is negligible,
       nothing else here relied on it. */
}
.item-mall-page .im-card-product { display: flex; min-width: 0; align-items: flex-start; gap: 8px; }
.item-mall-page .im-card-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #17170f;
    border-radius: 0;
    box-shadow: 0 0 0 1px #c6b36b;
}
.item-mall-page .im-card-name {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    max-height: 3.84em;
    color: #fff4d3;
    font-weight: bold;
    line-height: 1.28;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-line-clamp: 3;
    text-shadow: 0 1px 1px #262319;
}
.item-mall-page .im-card-bottom { padding-top: 6px; border-top: 1px dotted #c4b471; }
.item-mall-page .im-card-price { margin: 0 0 8px; color: #ff7a00; font-size: 12px; font-weight: bold; }
.item-mall-page .im-card-price img { width: 14px; height: 14px; }
.item-mall-page .im-card-bottom > a { display: block; width: max-content; margin: 0 auto; }
.item-mall-page .im-card-bottom > a img { display: block; }
@media (max-width: 620px) {
    .item-mall-page .im-full-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mall-directory-row { grid-template-columns: 110px 1fr; }
    .mall-payment-tab { min-width: 0; flex: 1; }
}

/* ---------- Right rail captions ---------- */
.rail-caption {
    display: block;
    font-size: 12px;
    color: #6fa8dc;
    text-decoration: underline;
    margin-bottom: 2px;
}
.rail-caption-plain { color: #b7ac8e; text-decoration: none; }

/* ---------- Sidenav plain-text tab (no matching gif asset) ---------- */
.sidenav-text-tab {
    display: block;
    background: #241c10;
    border: 1px solid #4a4536;
    color: #b7ac8e;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .5px;
    padding: 4px 10px;
    text-transform: uppercase;
}
.sidenav-image li.active .sidenav-text-tab,
.sidenav-image li:hover .sidenav-text-tab { color: var(--panel-accent); }


/* ---------- My Account: character mini-info (portrait + HP/MP) ---------- */
/* Real game HUD widget (pmi_window.png) — coordinates below are measured
   pixel bands from that frame at 2x scale (frame is native 220x76), same
   process used for the equip-panel art. HP/MP are real live values from
   _Char (no separate Max column exists in the confirmed schema), so these
   render as full-width bars with the live number on top rather than a
   current/max fraction. */
.char-mini-info-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
/* pmi_window.png is native 220x76. Every inner piece below is positioned
   in PERCENTAGES of the box's own size (not fixed px against a hardcoded
   440x152), so the whole widget can be sized however wide .pmi-box is set
   (here 273x94 to sit beside the combat-stats box) without any transform/
   scale trick — that approach clipped part of the frame in production, so
   this replaces it entirely. Percentages: circle left 7.7% top 10.5%
   width 20% height 58%; bars left 36.8% width 54% height 17%, top 30%/51%
   — all measured from the same real pixel bands as before, just expressed
   relative to the box instead of an absolute 440px canvas. */
.pmi-box {
    position: relative;
    width: 273px;
    height: 94px;
    max-width: 100%;
    background: url('../img/theme/pmi_window.png') no-repeat;
    background-size: 100% 100%;
}
.pmi-box .pmi-portrait {
    position: absolute;
    left: 7.7%; top: 10.5%;
    width: 20%; height: 58%;
    border-radius: 50%;
    overflow: hidden;
}
.pmi-box .pmi-portrait img { width: 100%; height: 100%; object-fit: cover; }
.pmi-box .pmi-bar {
    position: absolute;
    left: 36.8%; width: 54%; height: 17%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.pmi-box .pmi-bar-hp { top: 30%; background-image: url('../img/theme/hp_bar.png'); }
.pmi-box .pmi-bar-mp { top: 51%; background-image: url('../img/theme/mp_bar.png'); }

/* Combat-stats box sits beside the mini-info; sizes tuned to fit the real
   .content-body width on this site (~466px at the desktop breakpoint) so
   they sit side by side instead of wrapping — verified by rendering the
   actual compiled layout. */
.pmi-combo-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; max-width: 466px; }

.combat-stats-box {
    background: rgba(8, 14, 26, .92);
    border: 1px solid #7a6a3a;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
    min-width: 150px;
}
.combat-stats-box .cs-row { display: flex; justify-content: space-between; gap: 10px; }
.combat-stats-box .cs-label { color: #efdaa4; }
.combat-stats-box .cs-value { color: #e8e4d8; font-weight: bold; }
.combat-stats-box .cs-sep { border-top: 1px solid rgba(122,106,58,.5); margin: 5px 0; }

/* ---------- My Account: character picker ---------- */
.char-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.char-select {
    background: #14181f;
    color: #efdaa4;
    border: 1px solid var(--content-border);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 12px;
    min-width: 200px;
}

/* ---------- My Account: character equipped-gear / avatar grids ---------- */
/* Real game/CMS backdrop (inventoryDiv_bg.png) behind the whole panel —
   confirmed by you as the actual background used behind both the equip
   grid and Accessories in the original feature, not just the equip
   artwork alone. */
.char-gear-block {
    background: #0a0e14 url('../img/theme/inventoryDiv_bg.png') center/cover no-repeat;
    border: 1px solid var(--content-border);
    border-radius: 3px;
    padding: 12px 16px 16px;
    margin: 10px 0 18px;
}
.char-gear-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.char-gear-name { font-size: 14px; font-weight: bold; color: #f2e6b8; text-shadow: 0 0 3px #000; }
.char-gear-level { font-size: 11px; color: #cbbf98; text-shadow: 0 0 3px #000; }
.char-gear-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.char-gear-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #6a4c00;
    background: #f1e6c4;
    border: 1px solid #d8c690;
    padding: 3px 8px;
    margin-bottom: 6px;
    display: inline-block;
}
.gear-grid { display: grid; gap: 6px; }
.gear-grid-avatar { grid-template-columns: repeat(4, 44px); }

/* Equip panel: real game/CMS artwork (inventory_bg.png, 178x315) with the
   12 item icons absolute-positioned over their real stone-slot cutouts.
   Row/column boxes below are measured pixel bands from that image (see
   character-gear.blade.php's comment), not estimated. */
.gear-panel-equip {
    position: relative;
    width: 178px;
    height: 315px;
    margin: 0 auto;
    background: url('../img/theme/inventory_bg.png') no-repeat;
    background-size: 178px 315px;
}
.gear-panel-equip .gear-slot-abs {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Fixed-size wrapper around the icon itself (independent of the slot box,
   which varies in width row to row) so the +N badge always sits pinned to
   the icon's own top-right corner, not the wider/narrower slot cutout. */
.gear-panel-equip .gear-slot-abs .icon-wrap {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gear-panel-equip .gear-slot-abs .icon-wrap img { max-width: 30px; max-height: 30px; }
.gear-panel-equip .gear-slot-abs .opt-level {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: bold;
    color: #f2e6b8;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
}
/* Row 1 (weapon/shield) slots are genuinely wider than the plain slots
   below — measured separately per row-group after the mismatch was
   spotted; using one averaged column width for both rows was the bug. */
.gear-panel-equip .gear-slot-abs:nth-child(1)  { left: 0px;   top: 8px;   width: 54px; height: 44px; }
.gear-panel-equip .gear-slot-abs:nth-child(2)  { left: 123px; top: 8px;   width: 54px; height: 44px; }
.gear-panel-equip .gear-slot-abs:nth-child(3)  { left: 1px;   top: 83px;  width: 38px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(4)  { left: 138px; top: 83px;  width: 39px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(5)  { left: 1px;   top: 126px; width: 38px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(6)  { left: 138px; top: 126px; width: 39px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(7)  { left: 1px;   top: 169px; width: 38px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(8)  { left: 138px; top: 169px; width: 39px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(9)  { left: 1px;   top: 212px; width: 38px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(10) { left: 138px; top: 212px; width: 39px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(11) { left: 1px;   top: 255px; width: 38px; height: 39px; }
.gear-panel-equip .gear-slot-abs:nth-child(12) { left: 138px; top: 255px; width: 39px; height: 39px; }
.gear-slot {
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.gear-slot.empty { border-style: dashed; }
.gear-slot .icon-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gear-slot .icon-wrap img { max-width: 38px; max-height: 38px; }
.gear-slot .opt-level {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: bold;
    color: #f2e6b8;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
}

/* ---------- Rare-item glow (equip + accessory grids only) ----------
   The real sparkle animation the user supplied (a 32x32 transparent GIF,
   26 frames) layered directly over the item icon — not a CSS-only
   substitute. Applied only when App\Support\CharacterGear flags the
   item's real CodeName128 as ending in "_RARE" (see CharacterGear::
   isRareCodename() for exactly which real items that covers). Reused by
   both the equip panel (.icon-wrap-rare inside .gear-panel-equip) and the
   accessories grid (.icon-wrap-rare inside .gear-grid-avatar) — same
   class, same overlay, just sized to whichever icon-wrap it's on. */
.icon-wrap-rare::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/theme/rare-glow.gif') center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
}
.icon-wrap-rare .opt-level {
    position: relative;
    z-index: 2;
}

/* ---------- Full item-info tooltip (replaces the old native title attr) ---------- */
.gear-slot-abs, .gear-slot { position: relative; }
.item-tooltip {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    z-index: 50;
    width: 250px;
    background: rgba(8, 14, 26, .96);
    border: 1px solid #7a6a3a;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: #d7cdb0;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
.gear-slot-abs:hover .item-tooltip,
.gear-slot:hover .item-tooltip {
    display: block;
}
/* Flip to the left when a slot sits in the right-hand column, so the box
   doesn't run off the edge of the page. */
.gear-panel-equip .gear-slot-abs:nth-child(even) .item-tooltip,
.gear-grid-avatar .gear-slot:nth-child(4n) .item-tooltip,
.gear-grid-avatar .gear-slot:nth-child(4n-1) .item-tooltip {
    left: auto;
    right: calc(100% + 8px);
}
.item-tooltip .tt-name {
    font-weight: bold;
    color: #50cecd;
    margin-bottom: 4px;
}
.item-tooltip .tt-sep {
    border-top: 1px solid rgba(122,106,58,.5);
    margin: 6px 0;
}
.item-tooltip .tt-line { color: #efdaa4; }
.item-tooltip .tt-white { color: #e8e4d8; }
.item-tooltip .tt-gold { color: #efdaa4; }
.item-tooltip .tt-blue { color: #6fa8dc; }

/* Item Mall storefront cards (grid of many small cards, not a fixed
   2-column equip panel) — anchor the same shared .item-tooltip box below
   and centered on the icon, so it works at any grid column position
   without per-card edge-flip rules. Deliberately anchored on the small
   icon wrapper itself rather than the outer card: the full catalog card
   (.im-catalog-card) has `overflow: hidden` for its own background/
   rounded-corner styling, which would silently clip an absolutely
   positioned child anchored to IT — anchoring one level in, on a plain
   unclipped wrapper, avoids that entirely. */
.im-tooltip-anchor { position: relative; display: inline-block; flex-shrink: 0; }
.im-tooltip-anchor .item-tooltip {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}
.im-tooltip-anchor:hover .item-tooltip {
    display: block;
}

/* ================= Discord panel (homepage right-rail only) =================
   Sits below the Premium Support banner in resources/views/partials/
   right-rail.blade.php. Modern gaming aesthetic: deep-space glass panel,
   neon blurple/cyan accents, glowing status light, animated shimmer on the
   Join CTA. Structure/behavior from the blade is untouched; only the look
   is replaced. */
.discord-panel {
    position: relative;
    background: linear-gradient(165deg, #171a21 0%, #101218 55%, #0b0d12 100%);
    border: 1px solid rgba(88, 101, 242, .28);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .6),
        0 14px 30px rgba(0, 0, 0, .55),
        0 0 26px rgba(88, 101, 242, .08);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
.discord-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5865f2, #22d3ee, transparent);
    filter: drop-shadow(0 0 6px rgba(88, 101, 242, .9));
    pointer-events: none;
}
.discord-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(88, 101, 242, .28) 0%, transparent 55%),
        linear-gradient(180deg, #1c1f27 0%, #14161c 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #eef2ff;
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    text-shadow: 0 0 12px rgba(88, 101, 242, .55);
}
.discord-icon {
    width: 22px;
    height: 22px;
    flex: none;
    display: block;
    filter: drop-shadow(0 0 7px rgba(88, 101, 242, .95));
    animation: discord-icon-float 3.5s ease-in-out infinite;
}
@keyframes discord-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.discord-panel-body { padding: 12px 14px 10px; }
.discord-server-name {
    color: #f4f7ff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discord-online-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(35, 165, 90, .12);
    border: 1px solid rgba(35, 165, 90, .5);
    color: #d7f5e2;
    font-size: 12px;
    font-weight: 500;
    box-shadow: inset 0 0 12px rgba(35, 165, 90, .12);
}
.discord-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ff277;
    display: inline-block;
    flex: none;
    box-shadow: 0 0 0 0 rgba(47, 242, 119, .6);
    animation: discord-dot-pulse 2s ease-out infinite;
}
@keyframes discord-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 242, 119, .6); }
    70% { box-shadow: 0 0 0 8px rgba(47, 242, 119, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 242, 119, 0); }
}
.discord-panel-unavailable {
    color: #8b93a7;
    font-size: 12px;
    font-style: italic;
}
.discord-join-btn {
    display: block;
    text-align: center;
    margin: 0 14px 14px;
    padding: 11px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #5865f2 0%, #7c3aed 55%, #22d3ee 130%);
    background-size: 160% 160%;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(88, 101, 242, .5);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.discord-join-btn:hover {
    transform: translateY(-1px) scale(1.01);
    filter: brightness(1.12);
    box-shadow: 0 8px 28px rgba(124, 58, 237, .65);
    background-position: 80% 50%;
}
.discord-join-btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-20deg);
    animation: discord-btn-shine 3s ease-in-out infinite;
}
@keyframes discord-btn-shine {
    0% { left: -60%; }
    55% { left: 130%; }
    100% { left: 130%; }
}
.discord-member-list {
    list-style: none;
    margin: 0;
    padding: 6px 8px 8px;
    max-height: 384px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.discord-member-list::-webkit-scrollbar { width: 6px; }
.discord-member-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5865f2, #22d3ee);
    border-radius: 3px;
}
.discord-member-list::-webkit-scrollbar-track { background: transparent; }
.discord-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 9px;
    transition: background .12s ease, box-shadow .12s ease;
    animation: discord-member-in .35s ease both;
}
@keyframes discord-member-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.discord-member:hover {
    background: rgba(88, 101, 242, .14);
    box-shadow: inset 0 0 14px rgba(88, 101, 242, .12);
}
.discord-member:nth-child(2) { animation-delay: .05s; }
.discord-member:nth-child(3) { animation-delay: .1s; }
.discord-member:nth-child(4) { animation-delay: .15s; }
.discord-member:nth-child(5) { animation-delay: .2s; }
.discord-member:nth-child(6) { animation-delay: .25s; }
.discord-member:nth-child(7) { animation-delay: .3s; }
.discord-member:nth-child(8) { animation-delay: .35s; }
.discord-member:nth-child(n+9) { animation-delay: .4s; }
.discord-member-avatar-wrap {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
}
.discord-member-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    background: #1c1f26;
    border: 1px solid rgba(88, 101, 242, .4);
    box-shadow: 0 0 8px rgba(88, 101, 242, .18);
}
.discord-member-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #0e1015;
}
.discord-status-online { background: #2ff277; box-shadow: 0 0 7px rgba(47, 242, 119, .9); }
.discord-status-idle { background: #ffcc4d; box-shadow: 0 0 7px rgba(255, 204, 77, .9); }
.discord-status-dnd { background: #ff4d5e; box-shadow: 0 0 7px rgba(255, 77, 94, .9); }
.discord-status-offline, .discord-status-invisible { background: #6b7180; }
.discord-member-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.discord-member-name {
    color: #eef2ff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discord-member-activity {
    color: #98a0b3;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discord-member-more {
    padding: 8px 10px 10px;
    color: #98a0b3;
    font-size: 11.5px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
@media (prefers-reduced-motion: reduce) {
    .discord-online-dot,
    .discord-icon,
    .discord-join-btn::after,
    .discord-member { animation: none !important; }
}

/* Jupiter Online - social links row (under the Discord panel in the right rail) */
.social-links { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: linear-gradient(180deg, #171a21, #0b0d12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.right-rail .social-links { margin-top: 14px; }
.social-links-title { display: block; padding: 11px 12px 4px; color: #cfd6e4; font-size: 11px; text-align: center; letter-spacing: 1.2px; text-transform: uppercase; }
.social-links-row { display: flex; justify-content: center; gap: 10px; padding: 10px 12px 14px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); color: #d7dbe7; background: rgba(255, 255, 255, 0.04); transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.social-link svg { width: 16px; height: 16px; fill: currentColor; }
.social-link:hover { transform: translateY(-2px); border-color: #5865f2; background: rgba(88, 101, 242, 0.15); color: #fff; }
.social-link.is-discord { border-color: rgba(88, 101, 242, 0.6); background: rgba(88, 101, 242, 0.12); color: #7289da; }
.social-link.is-discord:hover { background: rgba(88, 101, 242, 0.25); color: #fff; }

/* Jupiter Online - futuristic server-rates box, top-right of the homepage hero banner */
.hero-rates-box { position: absolute; top: 22px; right: 30px; z-index: 2; width: 198px; padding: 10px 12px; border-radius: 10px; background: rgba(20, 23, 33, 0.10); border: 1px solid rgba(88, 101, 242, 0.30); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); overflow: hidden; }
.hero-rates-box::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: linear-gradient(90deg, transparent, #5865f2 30%, #8df0a0 60%, transparent); }
.hero-rates-title { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #8fa3ff; margin-bottom: 10px; }
.hero-rates-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(180deg, #9be38a, #3ddc84); box-shadow: 0 0 8px rgba(61, 220, 132, 0.9); }
.hero-rates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hero-rates-item { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.hero-rates-label { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: #7d86a3; }
.hero-rates-value { font-size: 14px; font-weight: 700; color: #ffd27f; }
@media (prefers-reduced-motion: reduce) {
    .social-link, .hero-rates-box { transition: none !important; }
}

/* Mobile-only controls (hamburger, drawer close button, drawer backdrop):
   hidden by default so they never render on desktop/tablet even before
   the phone media query below overrides them. */
.mobile-menu-toggle,
.mobile-drawer-close,
.mobile-drawer-backdrop {
    display: none;
}

/* =====================================================================
   Phone responsiveness pass — additive only. Every rule below lives
   inside a max-width query, so nothing here changes anything above
   760px (tablet/desktop keep the exact same design/layout as before).
   Goal: reflow the existing design to fit a phone screen without
   horizontal scrolling or unusably cramped controls — no new pages, no
   new components, no removed content.
   ===================================================================== */
@media (max-width: 760px) {
    /* ---- Top bar: rebuilt as a compact mobile header ----
       Was a single no-wrap row (Charge/Support links + clock + guest
       buttons + language switcher all together) — too much for a phone
       header at any size, wrapping it just made it 3 cramped lines.
       Mobile now shows one clean row: hamburger, then the essentials
       (Charge, guest buttons, language). Charge/Support text links are
       dropped from this row — Charge already has its own big button
       right here, and Support is already a full entry in the menu the
       hamburger opens, so nothing is actually lost. The clock moves to
       its own slim centered line under that row, still visible, just
       out of the way. */
    .topbar { flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; }
    .topbar-left { display: none; }
    .topbar-right { flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; row-gap: 6px; }
    .topbar-clock {
        order: 10;
        width: 100%;
        text-align: center;
        font-size: 11px;
        padding-top: 2px;
        border-top: 1px solid rgba(255,255,255,.08);
        margin-top: 2px;
    }

    /* Hamburger button: hidden entirely on desktop/tablet (this whole
       rule block only exists under 760px), a real 44px touch target here. */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid #555;
        border-radius: 4px;
        background: #3d3d3d;
        cursor: pointer;
        flex-shrink: 0;
    }
    .mobile-menu-toggle span { display: block; width: 20px; height: 2px; background: #eee; border-radius: 1px; }

    /* Base/legacy .hero height — not actually used any more (see the
       .hero.hero-custom-banner comment in the main stylesheet block above);
       kept only as an inert fallback. */
    .hero { height: 150px; }
    .hero.hero-custom-banner::after { height: 64px; }
    /* .body-columns's overlap is a % of width (see main stylesheet block),
       so it already scales down automatically on narrower viewports —
       no separate override needed here any more. */
    .hero-rates-box {
        width: 150px;
        padding: 6px 8px;
        top: 10px;
        right: 10px;
    }
    .hero-rates-title { font-size: 8px; margin-bottom: 6px; }
    .hero-rates-grid { gap: 5px; }
    .hero-rates-item { padding: 4px 5px; }
    .hero-rates-label { font-size: 7px; }
    .hero-rates-value { font-size: 11px; }

    /* Any real <table> (news list, rankings, tickets, download specs, item
       mall directory) scrolls horizontally within its own box instead of
       squeezing every column unreadably or pushing the whole page wider. */
    .data-table, .spec-table, .ticket-list, .mall-directory-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .mall-directory-row { white-space: normal; }

    /* Homepage Item Mall preview widget: the price row's white-space:nowrap
       (fine on desktop) forced each mini-card a few px wider than the
       column had room for. Letting it wrap removes that sliver of
       horizontal overflow without changing how the card looks. */
    .im-card-price { white-space: normal; flex-wrap: wrap; justify-content: center; }

    /* Item Mall catalog page: the Premium/Silk tab strip was a fixed
       331px-wide background image, wider than the smallest phones.
       Scaling it down (same art, same aspect ratio) instead of letting it
       overflow. */
    .mall-payment-tabs { width: 100%; max-width: 331px; height: auto; aspect-ratio: 331 / 27; }
    .mall-payment-tabs-art { width: 100%; height: 100%; }

    /* Login/register/ticket forms (.form-grid, fixed 160px label column +
       1fr field column): a plain <input> has a browser-default minimum
       width of ~170-190px, and a bare "1fr" track refuses to shrink below
       its content's min-content size — so the field column silently held
       the whole form (and the whole page) ~50-90px wider than the
       smallest phone screens. minmax(0, 1fr) lets it actually shrink to
       fit; the two-column layout itself is unchanged. */
    .form-grid { grid-template-columns: 160px minmax(0, 1fr); }

    /* ---- Off-canvas menu drawer ----
       .col-left (account panel / login box, client-download banner, full
       game menu) used to sit in normal document flow ABOVE .col-right, so
       every page made you scroll past the entire menu before reaching the
       actual content. Taking it out of flow (fixed, slid off-screen) and
       opening it from the hamburger instead means .col-right (the real
       page content) is simply the next thing after the hero — no menu
       wall, and the full menu is still one tap away everywhere. */
    .col-left {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 84%;
        max-width: 320px;
        z-index: 300;
        background: var(--sidebar-bg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px 14px 40px;
        transform: translateX(-100%);
        transition: transform .28s ease;
        box-shadow: 3px 0 24px rgba(0,0,0,.55);
    }
    .col-left.drawer-open { transform: translateX(0); }
    .mobile-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 290;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }
    .mobile-drawer-backdrop.active { opacity: 1; pointer-events: auto; }
    /* Taking .col-left out of flow means .col-right (the real content)
       becomes the first thing under the hero automatically — no [order]
       trick needed. .col-right-rail (Buy Item / clock / Discord — homepage
       only, secondary/promotional) still follows the content, same as the
       existing 760px rule above already gives it. */
    body.mobile-drawer-locked { overflow: hidden; }
    .mobile-drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0 0 10px auto;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 4px;
        background: rgba(0,0,0,.25);
        color: #d9cdb0;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    /* ---- Bigger, easier-to-tap controls throughout ----
       Same components, same colors — just more breathing room and a
       ~44px minimum touch target, the standard mobile comfort size. */
    .sidenav-image .sub li a { padding: 10px 12px; font-size: 13px; line-height: 1.3; }
    .sidenav-image li > a.cat-toggle { min-height: 44px; display: flex; align-items: center; }
    .sidenav > li > a, .sidenav > li > span.cat { padding: 13px 14px; min-height: 44px; }
    .sidenav .sub li a { padding: 10px 20px; font-size: 13px; }

    .content-body { padding: 18px 16px 30px; font-size: 14px; line-height: 1.65; }
    .content-header { padding: 16px; }
    .content-header .title-plate { font-size: 17px; }
    .category-banner { width: 210px; }
    .category-banner span { font-size: 21px; }
    .category-banner.category-banner-wide { width: 220px; }
    .category-banner.category-banner-wide span { font-size: 17px; }

    .form-grid { gap: 14px; }
    .form-grid input, .form-grid select, .form-grid textarea { padding: 10px 11px; font-size: 14px; }
    .form-submit, .download-btn, .im-buy-confirm-btn, .im-buy-cancel-btn, .mall-guide-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .topbar-img-btn img { height: 26px; }
    .login-widget-form input { padding: 8px 9px; font-size: 13px; }
    .pagination a, .pagination span { min-width: 32px; height: 32px; }
    .lang-switch-toggle { padding: 8px 10px; }
    .lang-switch-option { padding: 11px 12px; }
}