@charset "utf-8";
@import "validation.css";
@import "notice.css";
@import "ui.css";
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   MuOnline Emberion – Phase 1 Design System
   Fire / Dragon / Amber – dark apocalyptic theme
   ============================================================ */

:root {
    /* ── Backgrounds – dark near-black, faint green tint ── */
    --bg-deep:       #080e0a;
    --bg-surface:    rgb(6, 12, 8);
    --bg-card:       #070d08;
    --bg-card-hover: #0d1a10;

    /* ── Emerald palette (primary interactive) ── */
    --amber-200: rgb(167, 243, 208);
    --amber-300: rgb(110, 231, 183);
    --amber-400: rgb( 16, 185, 129);   /* PRIMARY */
    --amber-500: rgb(  5, 150, 105);
    --amber-600: rgb(  4, 120,  87);   /* SECONDARY */
    --amber-700: rgb(  2, 100,  72);
    --amber-800: rgb(  1,  80,  58);
    --amber-900: rgb(  1,  64,  46);

    /* ── Fire/Ember accent – kept for atmosphere ── */
    --orange-400: rgb(251, 146, 60);
    --orange-500: rgb(249, 115, 22);
    --orange-600: rgb(234,  88, 12);

    /* ── Status ── */
    --green-400:  rgb( 74, 222, 128);
    --red-500:    rgb(239,  68,  68);

    /* ── Text ── */
    --text-main:  rgb(220, 240, 230);
    --text-muted: rgb(100, 140, 120);
    --text-nav:   rgb(220, 240, 230);

    /* ── Borders – emerald tinted ── */
    --border-gold:   rgba(16, 185, 129, 0.30);
    --border-gold-h: rgba(52, 211, 153, 0.60);

    /* ── Legacy aliases ── */
    --gold:        rgb( 16, 185, 129);
    --gold-bright: rgb( 52, 211, 153);
    --red:         rgb(  2, 100,  72);
    --red-bright:  rgb(  4, 120,  87);

    /* ── Premium gold – kept as fire accent for VIP/rank#1 ── */
    --gold-premium:        rgb(249, 115, 22);
    --gold-premium-bright: rgb(251, 146, 60);

    /* ── Typography ── */
    --font-heading: 'Outfit', 'Inter', 'Segoe UI', sans-serif;
    --font-body:    'Inter', 'Segoe UI', sans-serif;
    --font-main:    'Inter', 'Segoe UI', sans-serif;

    /* ── Misc ── */
    --radius:    6px;
    --glow-gold: 0 0 20px rgba(16, 185, 129, 0.35), 0 0 35px rgba(249, 115, 22, 0.22);
    --glow-red:  0 0 20px rgba(249, 115, 22, 0.4);
    --container: 1000px;
}

/* ───────────────────────────────────────────────
   BASE
─────────────────────────────────────────────── */
html {
    height: 100%;
    background-color: #080e0a;  /* prevent white flash before body renders */
}

body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    /* Spec: solid dark base, image overlaid at 25 % opacity via ::before */
    background-color: var(--bg-deep);   /* #0a0a0f */
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-main);
    min-width: 1000px;
}

/* Fixed background layers:
   ::before  = dragon/castle image at 25% opacity (per spec)
   ::after   = subtle fire-tone radial vignette for atmosphere        */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('../images/aetherion.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    /* Atmospheric fire-tone vignette – keeps edges moody */
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(1,64,46,0.08) 75%,
        rgba(10, 10, 15, 0.20) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Bottom fade — background image dissolves to page black */
#bg-fade {
    position: fixed;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 45%,
        rgba(8, 14, 10, 0.60) 70%,
        rgba(8, 14, 10, 0.92) 88%,
        #080e0a 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Ensure all page content sits above the overlay.
   overflow must NOT be hidden – sticky nav requires it. */
#wrapper {
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Banner slider hidden – layout handled by Figma Phase 2 nav */
#banner { display: none !important; }

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--gold);
}

h3 {
    padding: 0 0 20px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--gold);
}

ul {
    padding-top: 10px;
    padding-left: 20px;
    line-height: 140%;
}

p, ol, ul { margin-top: 0; }
p, ol     { line-height: 180%; }

a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--gold-bright);
    text-decoration: underline;
}

a img { border: none; }

img.alignleft   { float: left; }
img.alignright  { float: right; }
img.aligncenter { margin: 0 auto; }

hr { display: none; }

select {
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-gold);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: var(--radius);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: var(--bg-surface);
    border: 1px solid var(--border-gold);
    color: var(--text-main);
    border-radius: var(--radius);
    /* Readable font – never Cinzel for data entry */
    font-family: 'Exo 2', 'Segoe UI', Arial, sans-serif;
    text-transform: none;
    font-variant: normal;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(16,185,129,0.25);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder { color: var(--text-muted); }

/* Style native selects to match the dark theme */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2310b981'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}

select option {
    background: #060c08;
    color: var(--text-main);
    font-family: 'Exo 2', 'Segoe UI', Arial, sans-serif;
}

/* ───────────────────────────────────────────────
   WRAPPER
─────────────────────────────────────────────── */
#wrapper {
    overflow: visible; /* must be visible for sticky nav to work */
    background: transparent; /* body::before handles the dark overlay */
}

/* strip old image-based bg layers – not needed, body handles background */
#wrapper-bgtop { background: none; }
#wrapper-bgbtm { background: none; }

.container {
    width: var(--container);
    margin: 0 auto;
}

.clearfix { clear: both; }

/* ───────────────────────────────────────────────
   LOGO AREA
─────────────────────────────────────────────── */
#logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    background: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(10,10,15,0.40) 100%);
    border-bottom: 1px solid rgba(2,100,72,0.25);
}

#logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#site-logo {
    height: 72px;       /* matches spec h-16 ≈ 64 px, slightly larger for impact */
    width: auto;
    display: block;
    cursor: pointer;
    transition: filter 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 0 0px rgba(16,185,129,0));
}

#site-logo:hover {
    filter: drop-shadow(0 0 18px rgba(16,185,129,0.55));
    transform: scale(1.03);
}

#logo h1, #logo p {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 100px;
    padding-top: 30px;
    padding-left: 300px;
    font-size: 12px;
    color: var(--text-muted);
}

#logo h1 a {
    display: block;
    letter-spacing: 1px;
    font-size: 12px;
    color: var(--gold);
}

#logo p {
    padding: 5px 0 0 300px;
    letter-spacing: 1px;
    font-family: var(--font-heading);
    font-size: 12px;
    color: var(--text-muted);
}

/* ───────────────────────────────────────────────
   NAVIGATION  – Figma Phase 2 layout
─────────────────────────────────────────────── */

/* Sticky wrapper – colours from Figma spec */
#menu-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: visible;
    background: linear-gradient(180deg,
        rgba(15, 15, 28, 0.45) 0%,
        rgba(12, 14, 24, 0.45) 55%,
        rgba(10, 10, 20, 0.45) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(51, 65, 85, 0.30);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* Inner row – 3-column grid keeps left/right equidistant from centre */
#menu {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: visible;
    background: none;
}

/* ── Ember particles ── */
.nav-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
/* Hide by default; show only when animation is running */
.ep {
    position: absolute;
    bottom: -4px;          /* start below the nav so they're invisible at rest */
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--amber-400);
    opacity: 0;            /* invisible until animation moves them */
    animation: ember-float 4s ease-in infinite;
    /* prevent the tiny dot from showing before animation delay elapses */
    visibility: hidden;
    animation-fill-mode: forwards;
}
.ep1  { left: 10%;  animation-delay: 0s;    animation-duration: 3.8s; visibility: visible; }
.ep2  { left: 25%;  animation-delay: 0.7s;  animation-duration: 4.2s; visibility: visible; }
.ep3  { left: 42%;  animation-delay: 1.4s;  animation-duration: 3.5s; visibility: visible; }
.ep4  { left: 58%;  animation-delay: 2.1s;  animation-duration: 4.5s; visibility: visible; }
.ep5  { left: 75%;  animation-delay: 0.4s;  animation-duration: 3.9s; visibility: visible; }
.ep6  { left: 90%;  animation-delay: 1.8s;  animation-duration: 4.1s; visibility: visible; }

/* ── LEFT: language selector + logo ── */
.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding-right: 16px;
    position: relative;
    z-index: 1;
}

.nav-lang {
    display: flex;
    gap: 2px;
    align-items: center;
}

.nav-lang-btn {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(180,140,60,0.65);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-lang-btn:hover,
.nav-lang-btn.active {
    color: var(--amber-400);
    border-color: rgba(16,185,129,0.45);
    background: rgba(16,185,129,0.08);
    text-decoration: none;
}

.nav-logo-link { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img  { height: 70px; width: auto; object-fit: contain; }

/* ── CENTER: nav links ── */
.nav-center {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.nav-list > li { position: relative; }

.nav-list > li > a {
    display: block;
    padding: 10px 14px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(220,180,80,0.85);
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s, text-shadow 0.2s;
}
.nav-list > li > a:hover {
    color: var(--amber-300);
    background: rgba(249,115,22,0.07);
    text-shadow: 0 0 12px rgba(249,115,22,0.45), 0 0 22px rgba(16,185,129,0.30);
    text-decoration: none;
}

.nav-chevron { font-size: 8px; margin-left: 4px; opacity: 0.7; }

/* Dropdown */
.nav-dropdown {
    display: none;
    position: absolute;
    /* No gap — flush against the nav link so hover isn't lost crossing a gap */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    list-style: none;
    margin: 0;
    /* Top padding acts as the visual gap without breaking hover */
    padding: 8px 0 6px;
    background: rgba(6,12,8,0.97);
    border: 1px solid rgba(16,185,129,0.35);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.85);
    z-index: 9999;
    overflow: hidden;
    /* Small delay before hiding so a slow mouse crossing doesn't close it */
    transition: opacity 0.15s ease;
}
.nav-dropdown::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--orange-500), var(--amber-400), transparent);
    margin-bottom: 6px;
}
.nav-dropdown li a {
    display: block;
    padding: 9px 18px;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(220,180,80,0.80);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.nav-dropdown li a:hover {
    color: var(--amber-400);
    background: rgba(16,185,129,0.10);
    text-decoration: none;
}

/* Keep dropdown open while hovering parent OR the dropdown itself */
.has-dropdown:hover .nav-dropdown,
.has-dropdown .nav-dropdown:hover { display: block; }

/* ── RIGHT: realm status boxes ── */
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-right: 0;
    position: relative;
    z-index: 1;
}

/* ── Website Activity widget ── */
.nav-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px 5px 8px;
    background: linear-gradient(135deg, rgba(10,20,14,0.92) 0%, rgba(5,14,8,0.96) 100%);
    border: 1px solid rgba(34,197,94,0.28);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.nav-activity::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(34,197,94,0.05) 50%, transparent 70%);
    animation: nav-activity-shimmer 3.5s linear infinite;
}
@keyframes nav-activity-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Dot + rings */
.nav-activity-dot-wrap {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.nav-activity-dot {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #6ee868 0%, #22c55e 60%, #15803d 100%);
    box-shadow: 0 0 6px 2px rgba(34,197,94,0.7);
    animation: nav-dot-pulse 2s ease-in-out infinite;
}
@keyframes nav-dot-pulse {
    0%, 100% { box-shadow: 0 0 5px 2px rgba(34,197,94,0.65); }
    50%       { box-shadow: 0 0 10px 4px rgba(34,197,94,0.95), 0 0 18px 6px rgba(34,197,94,0.3); }
}
.nav-activity-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(34,197,94,0.5);
    animation: nav-ring-expand 2s ease-out infinite;
}
.nav-activity-ring.r2 {
    animation-delay: 1s;
}
@keyframes nav-ring-expand {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Text block */
.nav-activity-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 3px;
}
.nav-activity-label {
    font-family: var(--font-heading);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(34,197,94,0.55);
    text-transform: uppercase;
}
.nav-activity-count {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--orange-400);
    text-shadow: 0 0 10px rgba(251,146,60,0.6);
}
.nav-activity-unit {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(251,146,60,0.75);
    vertical-align: middle;
    margin-left: 2px;
}

.nav-activity-divider {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, transparent, rgba(16,185,129,0.35), transparent);
    flex-shrink: 0;
}

/* Divider between activity and lang */

.realm-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 16px;
    border-radius: 4px;
    background: linear-gradient(160deg, rgba(20,18,32,0.94) 0%, rgba(10,9,20,0.97) 100%);
    border: 1px solid rgba(16,185,129,0.18);
    min-width: 96px;
    font-family: var(--font-heading);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

/* Glowing top accent line */
.realm-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.65), transparent);
    transition: opacity 0.3s;
    opacity: 0.7;
}
.realm-box.realm-vip::before {
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.75), transparent);
}

/* Main realm */
.realm-box.realm-main {
    border-color: rgba(16,185,129,0.28);
    box-shadow: 0 0 12px rgba(16,185,129,0.07), inset 0 0 20px rgba(16,185,129,0.03);
}
.realm-box.realm-main:hover {
    border-color: rgba(16,185,129,0.60);
    box-shadow: 0 0 22px rgba(16,185,129,0.18), inset 0 0 20px rgba(16,185,129,0.05);
    background: linear-gradient(160deg, rgba(28,24,38,0.96) 0%, rgba(16,13,26,0.98) 100%);
}

/* VIP realm */
.realm-box.realm-vip {
    border-color: rgba(139,92,246,0.28);
    box-shadow: 0 0 12px rgba(139,92,246,0.07), inset 0 0 20px rgba(139,92,246,0.03);
}
.realm-box.realm-vip:hover {
    border-color: rgba(139,92,246,0.60);
    box-shadow: 0 0 22px rgba(139,92,246,0.20), inset 0 0 20px rgba(139,92,246,0.06);
    background: linear-gradient(160deg, rgba(22,16,42,0.96) 0%, rgba(12,8,28,0.98) 100%);
}

.realm-head {
    display: flex;
    align-items: center;
    gap: 5px;
}
.realm-icon { font-size: 18px; line-height: 1; }

.realm-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(225,188,90,0.95);
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(16,185,129,0.40);
}
.realm-box.realm-vip .realm-name {
    color: rgba(190,160,255,0.95);
    text-shadow: 0 0 10px rgba(139,92,246,0.45);
}

.realm-status {
    font-size: 11px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.realm-dot { font-size: 9px; }
.status-online  { color: #4ade80; }
.status-offline { color: #f87171; }

/* Pulsing glow for online indicator */
.realm-dot.status-online {
    animation: realm-pulse 2.2s ease-in-out infinite;
}
@keyframes realm-pulse {
    0%, 100% { opacity: 1;   text-shadow: 0 0 4px #4ade80; }
    50%       { opacity: 0.5; text-shadow: 0 0 10px #4ade80; }
}

.realm-count {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(205,178,110,0.82);
}
.realm-box.realm-vip .realm-count {
    color: rgba(178,152,235,0.82);
}

/* ── Sidebar realm row: two boxes side-by-side ── */
.sidebar-realm-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 4px 0 8px;
}
.sidebar-realm-row .realm-box-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}
.sidebar-realm-row .realm-box {
    width: 100%;
    padding: 10px 8px;
    box-sizing: border-box;
}
.sidebar-realm-row .realm-name   { font-size: 10px; }
.sidebar-realm-row .realm-status { font-size: 10px; }
.sidebar-realm-row .realm-count  { font-size: 11px; }

/* ── Realm EXP hover tooltip ── */
@keyframes realm-tip-in {
    0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes realm-tip-glow {
    0%,100% { text-shadow: 0 0 10px rgba(16,185,129,0.45), 0 0 22px rgba(16,185,129,0.18); }
    50%      { text-shadow: 0 0 18px rgba(16,185,129,0.90), 0 0 38px rgba(16,185,129,0.40); }
}
@keyframes realm-tip-glow-vip {
    0%,100% { text-shadow: 0 0 10px rgba(139,92,246,0.45), 0 0 22px rgba(139,92,246,0.18); }
    50%      { text-shadow: 0 0 18px rgba(139,92,246,0.90), 0 0 38px rgba(139,92,246,0.40); }
}
#realm-exp-tip {
    display: none;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    text-align: center;
    padding: 6px 12px 8px;
    border-radius: 5px;
    min-width: 80px;
    background: linear-gradient(170deg, rgba(18,13,30,0.99) 0%, rgba(8,6,16,1) 100%);
    border: 1px solid rgba(16,185,129,0.55);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.80),
        0 0 18px rgba(16,185,129,0.15),
        inset 0 1px 0 rgba(16,185,129,0.08);
    font-family: var(--font-heading);
    animation: realm-tip-in 0.18s ease forwards;
}
/* downward arrow (tooltip is above the box) */
#realm-exp-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: rgba(16,185,129,0.55);
}
#realm-exp-tip.vip {
    border-color: rgba(139,92,246,0.55);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.80),
        0 0 18px rgba(139,92,246,0.18),
        inset 0 1px 0 rgba(139,92,246,0.08);
}
#realm-exp-tip.vip::after {
    border-top-color: rgba(139,92,246,0.55);
}
.realm-tip-label {
    display: block;
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(180,150,80,0.60);
    margin-bottom: 4px;
}
#realm-exp-tip.vip .realm-tip-label {
    color: rgba(160,130,220,0.60);
}
.realm-tip-rate {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    color: rgba(225,188,90,1);
    animation: realm-tip-glow 2s ease-in-out infinite;
}
#realm-exp-tip.vip .realm-tip-rate {
    color: rgba(200,170,255,1);
    animation: realm-tip-glow-vip 2s ease-in-out infinite;
}
.realm-tip-type {
    display: block;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(180,150,80,0.50);
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(16,185,129,0.15);
}
#realm-exp-tip.vip .realm-tip-type {
    color: rgba(160,130,220,0.50);
    border-top-color: rgba(139,92,246,0.15);
}

/* ── Legacy alias – keeps old .nav selectors from breaking anything ── */
.nav li { position: relative; }
.nav ul {
    position: absolute;
    left: -99999em;
}
.nav > li:hover > ul { left: auto; }
.nav > li li:hover > ul { left: 100%; }

/* ───────────────────────────────────────────────
   PAGE WRAPPER  – glowing glass content panel
─────────────────────────────────────────────── */
#page-wrapper {
    position: relative;
    overflow: hidden;

    /* 1000 px centred, with breathing room below the nav */
    max-width: var(--container);
    margin: 0 auto 24px;           /* top margin removed – banner above provides spacing */

    /* Gloss: bright sheen fades from the top edge downward */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.01) 90px,
            transparent 160px),
        rgba(20, 20, 32, 0.52);

    /* Rounded corners all around */
    border-radius: 8px;

    /* Gold frame: slightly brighter on top, quieter on sides/bottom */
    border: 1px solid rgba(16,185,129,0.22);
    border-top: 1px solid rgba(16,185,129,0.50);

    /* Depth shadow + ambient gold glow */
    box-shadow:
        0 12px 60px rgba(0, 0, 0, 0.72),
        0 0 40px rgba(16,185,129,0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 80px rgba(0, 0, 0, 0.18);

    /* Glass-panel blur */
    backdrop-filter: blur(3px) saturate(1.3);
    -webkit-backdrop-filter: blur(3px) saturate(1.3);
}


#page-bgtop { background: none; }

#page-bgbtm {
    overflow: hidden;
    padding: 0;
    background: none;
}

/* two-column variants – inherit panel styling from #page-wrapper */
.two-column1 #page-bgtop,
.two-column2 #page-bgtop   { background: none; }
.two-column1 #page-bgbtm,
.two-column2 #page-bgbtm   { background: none; }

/* ───────────────────────────────────────────────
   CONTENT & SIDEBAR LAYOUT
─────────────────────────────────────────────── */
#content {
    min-height: 600px;
    float: left;
    width: 660px;
    padding: 16px 12px 16px 16px;
    box-sizing: border-box;
}

.two-column2 #content { float: right; }

#wide-content { min-height: 600px; }

#wide-content .entry {
    background: none;
    padding: 20px 30px;
}

#sidebar {
    float: right;
    width: 340px;
    padding: 16px 16px 16px 12px;
    box-sizing: border-box;
}

.two-column2 #sidebar { float: left; }

/* ───────────────────────────────────────────────
   EVENT TICKER
─────────────────────────────────────────────── */
#event-ticker {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    background: linear-gradient(90deg,
        #05080f 0%,
        #070b14 40%,
        #060a12 100%);
    border-top: 1px solid rgba(249,115,22,0.50);
    border-bottom: 1px solid rgba(16,185,129,0.35);
    box-shadow: 0 2px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(249,115,22,0.08);
    overflow: hidden;
    position: relative;
    z-index: 99;
}

.ticker-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px 0 18px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #fff;
    border-right: 1px solid rgba(249,115,22,0.30);
    height: 100%;
    background: linear-gradient(90deg, rgba(249,115,22,0.18) 0%, rgba(249,115,22,0.06) 100%);
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(249,115,22,0.60);
}

.ticker-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 8px rgba(249,115,22,1), 0 0 16px rgba(249,115,22,0.50);
    animation: ticker-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ticker-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 8px rgba(249,115,22,1), 0 0 16px rgba(249,115,22,0.50); }
    50%       { opacity: 0.55; box-shadow: 0 0 4px rgba(249,115,22,0.60); }
}

.ticker-track {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: rgba(200,215,235,0.75);
    animation: ticker-scroll 110s linear infinite;
}

.ticker-content:hover {
    animation-play-state: paused;
}

/* ── divider diamond between items ── */
.tk-div {
    color: rgba(249,115,22,0.35);
    margin: 0 14px;
    font-size: 8px;
    vertical-align: middle;
}

/* ── small pill tags ── */
.tk-tag {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.tk-tag--live {
    background: rgba(249,115,22,0.18);
    border: 1px solid rgba(249,115,22,0.45);
    color: #fb923c;
}
.tk-tag--online {
    background: rgba(249,115,22,0.18);
    border: 1px solid rgba(249,115,22,0.40);
    color: #fb923c;
}
.tk-tag--top {
    background: rgba(16,185,129,0.14);
    border: 1px solid rgba(16,185,129,0.40);
    color: #34d399;
}
.tk-tag--realm {
    background: rgba(16,185,129,0.14);
    border: 1px solid rgba(16,185,129,0.35);
    color: #34d399;
}
.tk-tag--vip {
    background: rgba(249,115,22,0.18);
    border: 1px solid rgba(249,115,22,0.40);
    color: #fb923c;
}
.tk-tag--discord {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    color: #e2e8f0;
}
.tk-tag--reset {
    background: rgba(16,185,129,0.14);
    border: 1px solid rgba(16,185,129,0.35);
    color: #34d399;
}

/* ── value highlights ── */
.tk-val--orange  { color: #fb923c; font-weight: 700; }
.tk-val--emerald { color: #34d399; font-weight: 700; }
.tk-val--gold    { color: #34d399; font-weight: 700; }
.tk-val--blue    { color: #34d399; font-weight: 600; }
.tk-val--purple  { color: #fb923c; font-weight: 600; }
.tk-val--white   { color: #e2e8f0; font-weight: 600; }

/* ── icon ── */
.tk-icon {
    margin-right: 5px;
    font-size: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ── live pulse dot ── */
.ticker-dot-live {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 5px rgba(249,115,22,0.80);
    margin-right: 5px;
    vertical-align: middle;
    animation: ticker-pulse 1.4s ease-in-out infinite;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* keep old class working if used elsewhere */
.ticker-event-name { color: #34d399; font-weight: 600; }
.ticker-sep { color: rgba(249,115,22,0.55); margin: 0 4px; }

/* ───────────────────────────────────────────────
   FOOTER
─────────────────────────────────────────────── */
#footer {
    overflow: hidden;
    padding: 28px 0 0;
    background: linear-gradient(180deg,
        rgba(10,10,20,0.60) 0%,
        rgba(5,5,12,0.90) 100%);
    border-top: 1px solid rgba(16,185,129,0.30);
    margin-top: 10px;
    position: relative;
    z-index: 1;
}

/* Subtle amber line at very top of footer */
#footer::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16,185,129,0.50) 30%,
        rgba(16,185,129,0.70) 50%,
        rgba(16,185,129,0.50) 70%,
        transparent 100%);
    margin-bottom: 28px;
}

#footer p {
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.5px;
}

#footer a { color: rgba(16,185,129,0.80); transition: color 0.2s; }
#footer a:hover { color: var(--amber-400); text-decoration: none; }

#copyright {
    overflow: hidden;
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    padding: 16px 20px;
    border-top: 1px solid rgba(16,185,129,0.12);
    box-sizing: border-box;
    text-align: center;
}

#copyright p {
    color: var(--text-muted);
    font-size: 11px;
    text-shadow: none;
    letter-spacing: 0.5px;
}

#footer-content {
    overflow: hidden;
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 24px;
    box-sizing: border-box;
}

#footer-content h2 {
    padding: 0 0 14px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--amber-400);
    border-bottom: 1px solid rgba(16,185,129,0.18);
    margin-bottom: 10px;
}

#footer-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer-content ul li {
    padding: 4px 0;
    font-size: 11px;
    color: var(--text-muted);
}

#footer-content ul li a {
    color: var(--text-muted);
    transition: color 0.2s;
}

#footer-content ul li a:hover {
    color: var(--amber-400);
    text-decoration: none;
}

#footer-content #column1 { float: left;  width: 30%; margin-right: 5%; }
#footer-content #column2 { float: left;  width: 30%; }
#footer-content #column3 { float: right; width: 30%; }

/* ───────────────────────────────────────────────
   LOADING INDICATOR
─────────────────────────────────────────────── */
#loading {
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: 0 0 var(--radius) var(--radius);
    color: var(--gold);
    display: none;
    position: fixed;
    top: 0;
    left: 48%;
    z-index: 1000;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 12px;
}

/* ───────────────────────────────────────────────
   LIST STYLES
─────────────────────────────────────────────── */
ul.style2, ul.style3 {
    margin: 0;
    padding: 0;
    list-style: square;
}

ul.style2 li, ul.style3 li {
    padding: 10px 0 15px 0;
    border-top: 1px solid rgba(16,185,129,0.15);
    line-height: 100%;
    color: var(--text-main);
}

ul.style2 a, ul.style3 a {
    color: var(--text-main);
    text-decoration: none;
}

ul.style2 a:hover, ul.style3 a:hover { color: var(--gold); }

ul.style2 .first, ul.style3 .first {
    padding-top: 0;
    border-top: none;
}

/* LIST STYLE 4 – sidebar links */
ul.style4 {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.style4 li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(16,185,129,0.1);
    color: var(--text-main);
    font-size: 12px;
    transition: background 0.15s;
}

ul.style4 li:hover { background: rgba(16,185,129,0.04); }

ul.style4 a {
    color: var(--text-main);
    transition: color 0.2s;
}

ul.style4 a:hover {
    color: var(--gold);
    text-decoration: none;
}

ul.style4 .first {
    padding-top: 0;
    border-top: none;
}

ul.style4 span { float: right; }

/* ───────────────────────────────────────────────
   TITLE BANDS  (replace image-based backgrounds)
─────────────────────────────────────────────── */
.title1 {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 48px;
    background: rgba(16,185,129,0.05);
    border-left: 5px solid var(--amber-400);
    border-bottom: none;
    left: 0;
    margin-bottom: 8px;
    padding: 12px 0 12px 18px;
    box-sizing: border-box;
    box-shadow: inset 0 0 30px rgba(16,185,129,0.04),
                -1px 0 0 rgba(52,211,153,0.15);
}

.title1 h1, .title1 h2 {
    padding: 0;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: rgba(230, 245, 238, 0.95);
    text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 25px rgba(16,185,129,0.20);
}

.title2 {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 38px;
    background: rgba(16,185,129,0.05);
    border-left: 5px solid var(--amber-400);
    border-bottom: none;
    margin-top: 0;
    padding: 10px 0 10px 14px;
    box-sizing: border-box;
    box-shadow: inset 0 0 20px rgba(16,185,129,0.04),
                -1px 0 0 rgba(52,211,153,0.12);
}

.title2 h2 {
    padding: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: rgba(230, 245, 238, 0.92);
    text-shadow: 0 1px 6px rgba(0,0,0,0.80);
}

.title2 h2 {
    padding: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--amber-400);
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

/* ───────────────────────────────────────────────
   LOGO BAR  – hidden; logo lives in nav-left
─────────────────────────────────────────────── */
#logo-wrapper {
    display: none !important;
}

/* ───────────────────────────────────────────────
   HERO BUTTONS (flanking the logo)
─────────────────────────────────────────────── */
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    min-width: 130px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
    animation: hero-float 3.5s ease-in-out infinite;
}

.hero-btn--download {
    background: linear-gradient(180deg, rgba(4,120,87,0.90) 0%, rgba(2,100,72,0.95) 100%);
    border: 1px solid rgba(16,185,129,0.55);
    border-top-color: rgba(52,211,153,0.75);
    color: rgba(220,248,235,0.95);
    box-shadow: 0 0 18px rgba(16,185,129,0.30), 0 4px 16px rgba(0,0,0,0.50);
    animation: hero-float 3.5s ease-in-out infinite,
               hero-flash-green 2.5s ease-in-out infinite;
}

.hero-btn--download:hover {
    transform: scale(1.07);
    box-shadow: 0 0 32px rgba(16,185,129,0.65), 0 6px 24px rgba(0,0,0,0.55);
    color: #fff;
    text-decoration: none;
    animation-play-state: paused;
}

.hero-btn--register {
    background: linear-gradient(180deg, rgba(200,80,12,0.90) 0%, rgba(160,55,8,0.95) 100%);
    border: 1px solid rgba(249,115,22,0.55);
    border-top-color: rgba(251,146,60,0.75);
    color: rgba(255,235,210,0.95);
    box-shadow: 0 0 18px rgba(249,115,22,0.30), 0 4px 16px rgba(0,0,0,0.50);
    animation: hero-float 3.5s ease-in-out infinite 0.6s,
               hero-flash-orange 2.5s ease-in-out infinite 0.6s;
}

.hero-btn--register:hover {
    transform: scale(1.07);
    box-shadow: 0 0 32px rgba(249,115,22,0.65), 0 6px 24px rgba(0,0,0,0.55);
    color: #fff;
    text-decoration: none;
    animation-play-state: paused;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-6px); }
}

@keyframes hero-flash-green {
    0%, 100% { box-shadow: 0 0 18px rgba(16,185,129,0.30), 0 4px 16px rgba(0,0,0,0.50); }
    50%       { box-shadow: 0 0 38px rgba(16,185,129,0.75), 0 4px 16px rgba(0,0,0,0.50); }
}

@keyframes hero-flash-orange {
    0%, 100% { box-shadow: 0 0 18px rgba(249,115,22,0.30), 0 4px 16px rgba(0,0,0,0.50); }
    50%       { box-shadow: 0 0 38px rgba(249,115,22,0.75), 0 4px 16px rgba(0,0,0,0.50); }
}

/* ───────────────────────────────────────────────
   FLOATING LOGO
─────────────────────────────────────────────── */
#floating-logo-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
    padding: 18px 0 10px;
    z-index: 10;
}

/* Light bloom behind the logo */
#floating-logo-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at center,
        rgba(249, 115, 22, 0.22) 0%,
        rgba(16, 185, 129, 0.14) 45%,
        transparent 72%);
    filter: blur(18px);
    pointer-events: none;
    animation: logo-bloom 4s ease-in-out infinite;
}

.floating-logo-link {
    display: inline-block;
    position: relative;
    animation: logo-float 4s ease-in-out infinite;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.35s ease;
    filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.35))
            drop-shadow(0 0 28px rgba(16, 185, 129, 0.20));
}

.floating-logo-link:hover {
    transform: scale(1.10);
    animation-play-state: paused;
    filter: drop-shadow(0 0 22px rgba(249, 115, 22, 0.65))
            drop-shadow(0 0 40px rgba(16, 185, 129, 0.35))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.70));
}

.floating-logo-link img {
    display: block;
    max-height: 270px;
    width: auto;
}

@keyframes logo-float {
    0%, 100% { transform: translateY(0px);   }
    50%       { transform: translateY(-7px);  }
}

@keyframes logo-bloom {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.00); }
    50%       { opacity: 1.00; transform: translate(-50%, -50%) scale(1.12); }
}

/* ───────────────────────────────────────────────
   BOX STYLES  – glassmorphism content cards
─────────────────────────────────────────────── */

/* Shared glass base */
.box-style1,
.box-style2,
.box-style4 {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    /* glass fill */
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.04) 0%,
            rgba(255,255,255,0.01) 60px,
            transparent 120px),
        rgba(8,14,10,0.58);
    backdrop-filter: blur(6px) saturate(1.4);
    -webkit-backdrop-filter: blur(6px) saturate(1.4);
    /* ember top, emerald sides */
    border: 1px solid rgba(16,185,129,0.18);
    border-top: 1px solid rgba(249,115,22,0.45);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 8px 32px rgba(0,0,0,0.80),
        0 0 20px rgba(249,115,22,0.07),
        0 0 20px rgba(16,185,129,0.06),
        inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.box-style1 { margin-bottom: 16px; }
.box-style2 { margin-bottom: 10px; }
.box-style4 { margin-bottom: 16px; }

.box-style1:hover,
.box-style2:hover,
.box-style4:hover {
    border-color: rgba(16,185,129,0.28);
    border-top-color: rgba(249,115,22,0.70);
    box-shadow:
        0 8px 40px rgba(0,0,0,0.70),
        0 0 28px rgba(249,115,22,0.10),
        0 0 28px rgba(16,185,129,0.08),
        inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Title bars inside boxes ── */
.box-style1 .title,
.box-style4 .title {
    padding: 12px 20px 12px 16px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(230, 245, 238, 0.92);
    text-transform: uppercase;
    background: rgba(16,185,129,0.05);
    border-left: 5px solid var(--amber-400);
    box-shadow: inset 0 0 20px rgba(16,185,129,0.04),
                -1px 0 0 rgba(52,211,153,0.12);
}

/* ── Entry (body) areas ── */
.box-style1 .entry {
    padding: 16px 20px;
    background: none;
    color: var(--text-main);
}

.box-style2 .entry {
    padding: 10px 16px 12px 16px;
    color: var(--text-main);
}

.box-style4 .entry {
    padding: 16px 20px;
    background: none;
    color: var(--text-main);
}

.box-style2 h3 {
    padding: 0 0 12px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--gold);
}

.box-style3 .entry {
    margin-top: -20px;
    padding: 0 20px;
    color: var(--text-main);
}

/* ── Login Panel (logged-out state) ─────────────── */
#account-panel-box {
    border-color: rgba(251,146,60,0.35);
    border-top-color: rgba(251,146,60,0.65);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 8px 32px rgba(0,0,0,0.80),
        0 0 24px rgba(251,146,60,0.10),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 18px 20px;
}

/* Avatar circle */
.lp-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.lp-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(16,185,129,0.55);
    box-shadow: 0 0 16px rgba(16,185,129,0.25), 0 0 32px rgba(16,185,129,0.10);
    animation: lp-ring-pulse 3s ease-in-out infinite;
}

@keyframes lp-ring-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(16,185,129,0.22), 0 0 28px rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.50); }
    50%       { box-shadow: 0 0 22px rgba(16,185,129,0.45), 0 0 44px rgba(16,185,129,0.18); border-color: rgba(52,211,153,0.80); }
}

.lp-avatar-inner {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(1,64,46,0.60) 0%,
        rgba(4,10,6,0.85) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-heading {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--orange-400);
    text-shadow: 0 0 18px rgba(249,115,22,0.50);
    margin-bottom: 4px;
}

.lp-subheading {
    font-family: var(--font-main);
    font-size: 11px;
    color: rgba(180,160,140,0.55);
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.lp-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.lp-field {
    margin-bottom: 12px;
}

.lp-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(200,170,130,0.70);
    margin-bottom: 5px;
}

.lp-input-wrap {
    position: relative;
}

.lp-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: rgba(249,115,22,0.45);
    pointer-events: none;
    z-index: 1;
}

.lp-input {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    height: 40px !important;
    font-size: 12px !important;
    background: rgba(4,3,2,0.85) !important;
    border-color: rgba(249,115,22,0.18) !important;
    border-top-color: rgba(249,115,22,0.10) !important;
}

.login-panel .lp-input-wrap .lp-input {
    padding: 8px 12px 8px 34px !important;
}

.lp-input::placeholder { color: rgba(160,130,100,0.40) !important; }

.lp-input:focus {
    border-color: rgba(249,115,22,0.45) !important;
    box-shadow: 0 0 12px rgba(249,115,22,0.14) !important;
}

.lp-captcha {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 10px;
    opacity: 0.85;
}

.lp-btn {
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: 6px !important;
    min-width: unset !important;
    height: 42px !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    position: relative !important;
    overflow: hidden !important;
}
.lp-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.18) 50%, transparent 75%);
    animation: nav-activity-shimmer 2.5s linear infinite;
    pointer-events: none;
}

.lp-links {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-link {
    color: rgba(180,150,110,0.55);
    text-decoration: none;
    transition: color 0.2s;
    font-family: var(--font-heading);
    letter-spacing: 1.5px;
    font-size: 10px;
    text-transform: uppercase;
}

.lp-link:hover { color: var(--orange-400); text-decoration: none; }

.lp-link-sep {
    color: rgba(180,150,110,0.30);
    margin: 0 10px;
    font-size: 12px;
}

/* ── Avatar frame & upload UI ── */
/* ── Sidebar Account Panel ─────────────────────── */
.sb-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px 12px;
    border-bottom: 1px solid rgba(16,185,129,0.12);
    margin-bottom: 10px;
}
.sb-user-header .avatar-upload-wrap { flex-shrink: 0; }
.sb-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.sb-welcome {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(16,185,129,0.5);
}
.sb-username {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #34d399;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-coins {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}
.sb-coin-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(240,230,200,0.85);
}
.sb-coin-item i { font-size: 11px; }

/* Nav links */
.sb-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sb-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.sb-nav-item i { width: 14px; text-align: center; font-size: 12px; flex-shrink: 0; }
.sb-nav-item:hover { transform: translateX(3px); text-decoration: none; }

.sb-nav--gold  { color: #10b981; }
.sb-nav--gold:hover  { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); color: #34d399; }
.sb-nav--gold  i { color: #f97316; }

.sb-nav--blue  { color: #93c5fd; }
.sb-nav--blue:hover  { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); color: #bfdbfe; }
.sb-nav--blue  i { color: #60a5fa; }

.sb-nav--cyan  { color: #67e8f9; }
.sb-nav--cyan:hover  { background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.25); color: #a5f3fc; }
.sb-nav--cyan  i { color: #22d3ee; }

.sb-nav--purple{ color: #c4b5fd; }
.sb-nav--purple:hover{ background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.25); color: #ddd6fe; }
.sb-nav--purple i { color: #a78bfa; }

.sb-nav--default { color: rgba(200,180,140,0.75); }
.sb-nav--default:hover { background: rgba(180,140,60,0.08); border-color: rgba(180,140,60,0.2); color: rgba(220,200,160,0.95); }
.sb-nav--default i { color: rgba(16,185,129,0.6); }

.sb-nav--danger { color: #fca5a5; margin-top: 6px; border-top: 1px solid rgba(239,68,68,0.15); padding-top: 10px; }
.sb-nav--danger:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #fecaca; transform: translateX(3px); }
.sb-nav--danger i { color: #f87171; }

/* ─────────────────────────────────────────────── */
.avatar_frame {
    display: block;
    margin: 0 auto 4px;
    width: 80px;
    height: 80px;
    object-fit: cover;
    padding: 3px;
    border: 1px solid rgba(16,185,129,0.50);
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(16,185,129,0.20), 0 4px 12px rgba(0,0,0,0.60);
}

.avatar-upload-wrap {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    margin-top: 10px;
    margin-bottom: 2px;
}

.avatar-upload-inner {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
}

/* placeholder box when no avatar uploaded yet */
.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(16,185,129,0.45);
    border-radius: 6px;
    background: rgba(20,14,6,0.55);
    box-shadow: 0 0 16px rgba(16,185,129,0.12), 0 4px 12px rgba(0,0,0,0.55);
    margin: 0 auto 4px;
}

/* hover overlay with upload icon */
.avatar-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}

.avatar-upload-overlay span {
    font-size: 10px;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
}

.avatar-upload-inner:hover .avatar-upload-overlay {
    opacity: 1;
}

/* status messages */
.avatar-status {
    font-size: 10px;
    letter-spacing: 0.5px;
    min-height: 14px;
    margin-top: 2px;
}
.avatar-status.uploading { color: rgba(16,185,129,0.85); }
.avatar-status.ok        { color: rgba(100,220,100,0.9); }
.avatar-status.err       { color: rgba(220,80,80,0.9);  }

/* ───────────────────────────────────────────────
   BUTTONS
─────────────────────────────────────────────── */
.button-style {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 160px;
    height: auto;
    left: 0;
    /* Ember fire CTA */
    background: linear-gradient(180deg,
        rgba(200,80,12,0.90) 0%,
        rgba(170,60,8,0.95) 50%,
        rgba(140,45,6,1.00) 100%);
    border: 1px solid rgba(234,88,12,0.60);
    border-top-color: rgba(249,115,22,0.85);
    line-height: normal;
    padding: 10px 24px;
    letter-spacing: 1.5px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.80);
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: #fff8e7;
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(180,60,10,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.button-style:hover {
    background: linear-gradient(180deg,
        rgba(234,88,12,1.00) 0%,
        rgba(200,70,10,1.00) 50%,
        rgba(170,55,8,1.00) 100%);
    border-color: rgba(249,115,22,0.90);
    box-shadow: 0 4px 24px rgba(249,115,22,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
    color: #ffffff;
    text-decoration: none;
}

.button-style2 {
    border: 1px solid var(--border-gold);
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 140px;
    height: auto;
    left: 0;
    background: linear-gradient(180deg, #180808 0%, #0d0404 100%);
    line-height: normal;
    padding: 10px 20px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 11px;
    color: var(--gold);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.button-style2:hover {
    background: linear-gradient(180deg, #220a0a 0%, #140505 100%);
    border-color: var(--red-bright);
    box-shadow: var(--glow-red);
    color: #ff6b6b;
    text-decoration: none;
}

/* generic .buttonn */
.buttonn {
    float: right;
    font-family: var(--font-body);
    background: linear-gradient(to right, rgba(1,64,46,0.80), rgba(2,100,72,0.70));
    border: 1px solid rgba(2,100,72,0.50);
    width: auto;
    overflow: visible;
    font-size: 1.2em;
    color: var(--amber-400);
    padding: 7px 14px;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    transition: background 0.25s, box-shadow 0.25s, transform 0.15s;
}

.buttonn:hover {
    background: linear-gradient(to right, rgba(1,80,58,0.90), rgba(4,120,87,0.80));
    box-shadow: 0 0 20px rgba(16,185,129,0.35);
    transform: scale(1.02);
}

/* ───────────────────────────────────────────────
   TWO COLUMNS
─────────────────────────────────────────────── */
.two-column {
    overflow: hidden;
    margin-top: -10px;
    padding: 0 20px 0 20px;
}

#box1 {}

/* ───────────────────────────────────────────────
   META / NEWS META
─────────────────────────────────────────────── */
.meta-bg {
    overflow: hidden;
    position: relative;
    width: auto;
    height: auto;
    padding: 8px 10px 8px 10px;
    left: 0;
    background: rgba(16,185,129,0.06);
    border-top: 1px solid var(--border-gold);
    margin-top: 12px;
}

.meta p {
    text-transform: uppercase;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

.meta .tags {
    float: left;
    padding: 0 0 3px 0;
    background: none;
    color: var(--text-muted);
}

.meta .links { float: right; }

.meta .more, .meta .comments {
    padding: 0 0 3px 24px;
    background: none;
    color: var(--text-muted);
}

.meta .divider {
    height: 22px;
    padding: 0 15px;
    background: none;
    border-left: 1px solid var(--border-gold);
    display: inline-block;
}

.meta a {
    text-decoration: underline;
    color: var(--gold);
}

/* ───────────────────────────────────────────────
   BANNER / SLIDER
─────────────────────────────────────────────── */
#banner {
    overflow: hidden;
    width: 964px;
    height: 290px;
    margin: 0 auto;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border-gold);
    text-shadow: 1px 1px 0 rgba(0,0,0,1);
    text-transform: uppercase;
    font-family: var(--font-heading);
}

#banner h2 {
    padding: 52px 0 10px 0;
    letter-spacing: 3px;
    line-height: 145%;
    font-size: 20px;
    color: #fff;
}

#banner p {
    letter-spacing: 1px;
    line-height: 70%;
    color: var(--text-muted);
}

#banner #col1 {
    width: 617px;
    height: 240px;
    overflow: hidden;
    position: relative;
    float: left;
    margin: 25px 0 0 25px;
}

#banner #col1 ol, #banner #col1 li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#banner #col1 .items       { width: 2000em; position: absolute; }
#banner #col1 .items .item { float: left; }

#banner #col1 .items .item span {
    position: absolute;
    width: 617px;
    height: 240px;
    z-index: 11;
}

#banner #col1 .promRoundBox {
    position: absolute;
    width: 617px;
    height: 240px;
    background: url('../images/misc/main_prom_bg.png') no-repeat;
    z-index: 10;
}

#banner #col1 .rollingIconWrap { position: absolute; right: 0; z-index: 12; }

#banner #col1 .rollingIconWrap .bgFirst {
    float: left;
    width: 53px;
    height: 40px;
    background: url('../images/misc/main_prom_rollTop.png') no-repeat;
}

#banner #col1 .rollingIconWrap .rollingIcon {
    float: left;
    height: 30px;
    padding: 10px 15px 0 0;
    background: url('../images/misc/main_prom_rollMiddle.png') no-repeat right top;
    overflow: hidden;
}

#banner #col1 .rollingIconWrap .rollingIcon button {
    float: left;
    width: 19px;
    height: 21px;
    margin-right: 3px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: url('../images/misc/main_prom_icon_off.gif') no-repeat;
}

#banner #col1 .rollingIconWrap .rollingIcon button.active {
    background-image: url('../images/misc/main_prom_icon_on.gif');
}

#banner #col2 {
    width: 260px;
    margin: 15px 0 0 694px;
    color: var(--text-main);
    font-size: 12px;
}

#banner #col2 p span {
    float: right;
    color: var(--text-muted);
    padding-right: 20px;
}

#banner #col2 p a span { text-decoration: underline; }

#banner #col2 img {
    opacity: 0.6;
    vertical-align: middle;
    transition: opacity 0.3s ease;
}

#banner #col2 img:hover { opacity: 1; }

#banner #col2 .info-button {
    width: 250px;
    padding-bottom: 15px;
    margin: 0;
}

#banner #col2 .info-button td {
    cursor: pointer;
    width: 65px;
    height: 100px;
    text-align: center;
    vertical-align: bottom;
    font-size: 14px;
    opacity: 0.4;
    color: var(--text-main);
    transition: opacity 0.2s, color 0.2s;
}

#banner #col2 .info-button td:hover { opacity: 1; color: var(--gold); }

#banner #col2 .info-button #sButton-0 { background: url('../images/misc/server5.png') transparent center top no-repeat; }
#banner #col2 .info-button #sButton-1 { background: url('../images/misc/server4.png') transparent center top no-repeat; }
#banner #col2 .info-button #sButton-2 { background: url('../images/misc/server3.png') transparent center top no-repeat; }
#banner #col2 .info-button #sButton-3 { background: url('../images/misc/server2.png') transparent center top no-repeat; }
#banner #col2 .info-button #sButton-4 { background: url('../images/misc/server1.png') transparent center top no-repeat; }
#banner #col2 .info-button #sButton-5 { background: url('../images/misc/server3.png') transparent center top no-repeat; }

/* ───────────────────────────────────────────────
   TOOLTIP
─────────────────────────────────────────────── */
#tooltip {
    position: absolute;
    z-index: 11001;
    border: 1px solid var(--border-gold);
    background-color: var(--bg-card);
    padding: 8px 12px;
    opacity: 0.96;
    font: normal 11px var(--font-body), sans-serif;
    text-align: center;
    color: var(--text-main);
    border-radius: var(--radius);
    box-shadow: var(--glow-gold);
}

#tooltip h3, #tooltip div { margin: 0; }

/* ───────────────────────────────────────────────
   MODAL / LEAN MODAL
─────────────────────────────────────────────── */
#lean_overlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
}

#buy_windows, #add_to_card_windows, #select_server, #auction_bet {
    width: 420px;
    padding-bottom: 2px;
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    box-shadow: 0 0 30px rgba(0,0,0,0.9), var(--glow-gold);
    z-index: 9999;
    color: var(--text-main);
}

#item_filter_overlay { position: absolute; height: 400px; width: 300px; display: none; z-index: 9999; }

#item_filter {
    width: 300px;
    height: 710px;
    padding-bottom: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.item_filter_content { height: 600px; width: 285px; margin: 15px; overflow: auto; }

.modal-header  {
    background: linear-gradient(90deg, rgba(1,64,46,0.45) 0%, rgba(1,80,58,0.20) 50%, var(--bg-card) 100%);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-gold);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal-header h2 {
    color: var(--gold);
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 3px;
    font-family: var(--font-heading);
    text-shadow: none;
}

.modal-header2 {
    background: linear-gradient(90deg, rgba(1,64,46,0.45) 0%, rgba(1,80,58,0.20) 50%, var(--bg-card) 100%);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-gold);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: move;
}

.modal-header2 h2 { color: var(--gold); font-size: 1.4em; font-weight: 600; margin-bottom: 3px; font-family: var(--font-heading); }

.close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: block;
    width: 14px;
    height: 14px;
    background: url('../images/close.png');
    z-index: 2;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.close:hover { opacity: 1; }

/* ───────────────────────────────────────────────
   FORMS
─────────────────────────────────────────────── */
.form { margin: 0 auto; }

.form input:not([type="checkbox"]):not([type="number"]),
.form select,
.form textarea {
    padding: 8px 12px;
    margin: 4px 0;
    border: 1px solid rgba(16,185,129,0.28);
    border-radius: var(--radius);
    background: rgba(5,5,12,0.75);
    color: var(--text-main);
    box-shadow: none;
    width: 200px;
    /* Use a legible mixed-case font – NOT Cinzel */
    font-family: 'Exo 2', 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    text-transform: none;
    font-variant: normal;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    background: rgba(8,8,18,0.85);
    border-color: rgba(16,185,129,0.60);
    box-shadow: 0 0 10px rgba(16,185,129,0.20);
}

.form select { width: 216px; }

.right { float: right; }
.left  { float: left; }

.fixed { position: fixed; top: 50px; left: 50px; }

/* ───────────────────────────────────────────────
   CAPTCHA SLIDER (QapTcha)
─────────────────────────────────────────────── */
.QapTcha { width: 215px; }
.QapTcha .clr { clear: both; }

.QapTcha .bgSlider {
    width: 215px;
    height: 30px;
    float: left;
    border: 1px solid var(--border-gold);
    background-color: var(--bg-surface);
    box-shadow: none;
}

.QapTcha .slider {
    width: 30px;
    height: 30px;
    background: transparent url('../images/bg_draggable_qaptcha.jpg') no-repeat;
    background-size: 30px 30px;
    cursor: e-resize;
    position: relative;
    top: 0;
    left: 0;
}

.QapTcha .txtStatus {
    width: 215px;
    margin-top: 7px;
    text-align: left;
    color: var(--red-bright);
    font-family: var(--font-body);
    font-size: 10px;
    clear: both;
    padding-bottom: 10px;
}

.QapTcha .dropSuccess { color: #4e8b37; }
.QapTcha .dropError   { color: var(--red-bright); }

/* ───────────────────────────────────────────────
   RANKING TABLE
─────────────────────────────────────────────── */
.ranking-table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    line-height: 28px;
    background: none;
    font-size: 12px;
    color: var(--text-main);
}

.ranking-table th {
    background: linear-gradient(180deg, rgba(1,64,46,0.55) 0%, rgba(92,40,8,0.30) 100%);
    border-bottom: 1px solid var(--border-gold);
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 8px;
}

.ranking-table th.end  { border-right: 0; }

.ranking-table td {
    border-bottom: 1px solid rgba(16,185,129,0.08);
    padding: 5px 8px;
    color: var(--text-main);
}

.ranking-table td.end  { border-right: 0; }

.ranking-table tbody tr:hover {
    background: rgba(16,185,129,0.06);
    color: var(--gold-bright);
}

/* ═══════════════════════════════════════════════
   PREMIUM LEADERBOARD  (rank_players.ejs)
   Flex-based, no <table> — full control over layout
═══════════════════════════════════════════════ */

/* Class filter row */
.rk-class-filter { text-align: center; margin-bottom: 18px; line-height: 2; }

/* Leaderboard container */
.rk-leaderboard {
    border-radius: 10px;
    overflow-x: auto;
    border: 1px solid rgba(16,185,129,0.14);
    background: rgba(8,5,1,0.60);
    -webkit-overflow-scrolling: touch;
}
.rk-header, .rk-row { min-width: 480px; }

/* ── Header ── */
.rk-header {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient(90deg, rgba(100,42,8,0.80) 0%, rgba(50,20,4,0.65) 100%);
    border-bottom: 1px solid rgba(16,185,129,0.22);
}
.rk-hcell {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 10px 8px;
    white-space: nowrap;
}
.rk-hcell--rank   { width: 50px;  text-align: center; flex-shrink: 0; }
.rk-hcell--player { flex: 1;      text-align: left; min-width: 120px; }
.rk-hcell--class  { width: 58px;  text-align: center; flex-shrink: 0; }
.rk-hcell--level  { width: 62px;  text-align: center; flex-shrink: 0; }
.rk-hcell--resets { width: 62px;  text-align: center; flex-shrink: 0; }
.rk-hcell--loc    { width: 110px; text-align: center; flex-shrink: 0; }

/* ── Rows ── */
.rk-row {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.18s;
    position: relative;
}
.rk-row:last-child { border-bottom: 0; }
.rk-row:hover { background: rgba(16,185,129,0.05); }

/* Top 3 left-accent bar */
.rk-row--1st::before,
.rk-row--2nd::before,
.rk-row--3rd::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.rk-row--1st { background: linear-gradient(90deg, rgba(249,115,22,0.13) 0%, transparent 60%); border-bottom-color: rgba(249,115,22,0.14); }
.rk-row--2nd { background: linear-gradient(90deg, rgba(150,165,185,0.10) 0%, transparent 60%); border-bottom-color: rgba(150,165,185,0.12); }
.rk-row--3rd { background: linear-gradient(90deg, rgba(160,90,35,0.10) 0%, transparent 60%); border-bottom-color: rgba(160,90,35,0.12); }
.rk-row--1st::before { background: linear-gradient(180deg,#fb923c,#f97316); box-shadow: 2px 0 8px rgba(249,115,22,0.5); }
.rk-row--2nd::before { background: linear-gradient(180deg,#c8d4e8,#8a9bb5); }
.rk-row--3rd::before { background: linear-gradient(180deg,#d4895a,#a0572a); }

/* ── Cells ── */
.rk-cell { padding: 11px 8px; }
.rk-cell--rank   { width: 50px;  text-align: center; flex-shrink: 0; }
.rk-cell--player { flex: 1;      display: flex; align-items: center; gap: 10px; min-width: 120px; }
.rk-cell--class  { width: 58px;  text-align: center; flex-shrink: 0; }
.rk-cell--level  { width: 62px;  text-align: center; flex-shrink: 0; }
.rk-cell--resets { width: 62px;  text-align: center; flex-shrink: 0; }
.rk-cell--loc    { width: 110px; text-align: center; flex-shrink: 0; }

/* ── Rank badge ── */
.rk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
}
.rk-badge--1st {
    background: linear-gradient(135deg,#7c2d12,#fb923c,#f97316);
    border-color: #fb923c;
    color: #fff7ed;
    font-size: 15px;
    box-shadow: 0 0 14px rgba(249,115,22,0.55), 0 2px 6px rgba(0,0,0,0.5);
}
.rk-badge--2nd {
    background: linear-gradient(135deg,#6a7a90,#c8d4e8,#9aafc8);
    border-color: #b0c0d8;
    color: #1a1f2a;
    box-shadow: 0 0 10px rgba(160,185,215,0.35);
}
.rk-badge--3rd {
    background: linear-gradient(135deg,#7a3f18,#d4895a,#a05828);
    border-color: #c07040;
    color: #1a0800;
    box-shadow: 0 0 10px rgba(180,100,40,0.35);
}
.rk-badge--default { font-size: 11px; }

/* ── Class avatar circle ── */
.rk-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cls-color, #10b981) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cls-color, #10b981) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--cls-color, #10b981);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cls-color, #10b981) 20%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .rk-avatar { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.35); color: var(--cls-color, #10b981); }
}

/* ── Name block ── */
.rk-nameblock { min-width: 0; }
.rk-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.rk-name:hover { color: var(--gold); text-decoration: none; }
.rk-row--1st .rk-name { color: #fb923c; }
.rk-row--2nd .rk-name { color: #c8d4e8; }
.rk-row--3rd .rk-name { color: #d4895a; }

.rk-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.rk-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rk-dot--on  { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.8); }
.rk-dot--off { background: rgba(255,255,255,0.18); }
.rk-dot-label { font-size: 9px; color: rgba(255,255,255,0.35); letter-spacing: 0.5px; }

/* ── Class badge ── */
.rk-cls {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--cls-color, #10b981) 30%, transparent);
    background: color-mix(in srgb, var(--cls-color, #10b981) 12%, transparent);
    color: var(--cls-color, #10b981);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .rk-cls { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.12); }
}

/* ── Stat pills ── */
.rk-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.rk-pill--lvl { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.28); color: #93c5fd; }
.rk-pill--rst { background: rgba(249,115,22,0.10); border: 1px solid rgba(249,115,22,0.28); color: #fb923c; }
.rk-ml { font-size: 10px; color: #f87171; margin-left: 1px; }

/* ── Location ── */
.rk-loc { font-size: 11px; color: rgba(255,255,255,0.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-loc--hidden { color: rgba(255,255,255,0.18); }

/* ── Pagination / cache ── */
.rk-pagination { text-align: center; padding: 12px 0 4px; font-size: 10px; color: rgba(16,185,129,0.7); }
.rk-cache { text-align: right; padding: 6px 4px 0; font-size: 9px; color: rgba(16,185,129,0.35); }

/* ── Search ── */
.rk-search { margin-top: 22px; }
.rk-search-title { font-family: var(--font-heading); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .rk-hcell--loc, .rk-cell--loc { display: none; }
    .rk-hcell--resets, .rk-cell--resets { display: none; }
    .rk-avatar { width: 32px; height: 32px; font-size: 13px; }
    .rk-name { font-size: 12px; }
}

/* ───────────────────────────────────────────────
   ALERT NOTES
─────────────────────────────────────────────── */
/* ── Sidebar ranking tables ── */
table.sidebar_rank {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: var(--font-main);
}
table.sidebar_rank th {
    padding: 5px 6px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(16,185,129,0.75);
    border-bottom: 1px solid rgba(16,185,129,0.20);
}
table.sidebar_rank td {
    padding: 5px 6px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    white-space: nowrap;
}
table.sidebar_rank tr:last-child td { border-bottom: none; }
table.sidebar_rank tbody tr:hover td {
    background: rgba(16,185,129,0.07);
    color: rgba(16,185,129,0.9);
}
table.sidebar_rank a {
    color: rgba(220,160,20,0.85);
    text-decoration: none;
    transition: color 0.15s;
}
table.sidebar_rank a:hover { color: rgba(16,185,129,1); }
/* column widths */
table.sidebar_rank th:nth-child(1),
table.sidebar_rank td:nth-child(1) { width: 28px; color: rgba(160,130,70,0.6); text-align: right; padding-right: 4px; }
table.sidebar_rank th:nth-child(2),
table.sidebar_rank td:nth-child(2) { width: auto; }
table.sidebar_rank th:nth-child(3),
table.sidebar_rank td:nth-child(3) { width: 36px; text-align: center; color: rgba(180,140,50,0.8); font-size: 10px; }
table.sidebar_rank th:nth-child(4),
table.sidebar_rank td:nth-child(4) { width: 30px; text-align: right; }
table.sidebar_rank th:nth-child(5),
table.sidebar_rank td:nth-child(5) { width: 28px; text-align: right; color: rgba(220,160,20,0.7); }
/* online table: 4 columns — last column is online time */
table.sidebar_rank_online th:nth-child(4),
table.sidebar_rank_online td:nth-child(4) { width: 60px; text-align: right; color: rgba(180,140,50,0.8); }

.i_note, .s_note, .w_note, .e_note {
    border: 1px solid;
    margin: 10px 0;
    padding: 12px 14px 12px 40px;
    background-repeat: no-repeat;
    border-radius: var(--radius);
    text-align: left;
    font-size: 12px;
}

.i_note {
    color: #90cdf4;
    background-color: rgba(10,30,60,0.7);
    border-color: rgba(66,153,225,0.4);
    background-image: url('../images/info.png');
    background-position: left center;
}

.s_note {
    color: #9ae6b4;
    background-color: rgba(10,40,20,0.7);
    border-color: rgba(72,187,120,0.4);
    background-image: url('../images/success.png');
    background-position: left center;
}

.w_note {
    color: #fbd38d;
    background-color: rgba(50,30,0,0.7);
    border-color: rgba(237,137,54,0.4);
    background-image: url('../images/warning.png');
    background-position: left center;
}

.e_note {
    color: #fc8181;
    background-color: rgba(60,10,10,0.7);
    border-color: rgba(197,48,48,0.5);
    background-image: url('../images/error.png');
    background-position: left center;
}

/* ───────────────────────────────────────────────
   TABS
─────────────────────────────────────────────── */
.tabrow {
    text-align: center;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    line-height: 26px;
    height: 28px;
    overflow: hidden;
    font-size: 12px;
    font-family: var(--font-body);
    position: relative;
}

.tabrow li {
    background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-surface) 100%);
    display: inline-block;
    position: relative;
    z-index: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    text-shadow: 0 1px #000;
    margin: 0 -5px;
    padding: 0 18px;
    border: 1px solid var(--border-gold);
    border-bottom: none;
    color: var(--text-muted);
}

.tabrow a {
    color: var(--text-main);
    text-decoration: none;
}

.tabrow a:hover { color: var(--gold); }

.tabrow li.selected {
    background: linear-gradient(180deg, rgba(1,64,46,0.55) 0%, var(--bg-card) 100%);
    color: var(--gold);
    z-index: 2;
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(16,185,129,0.3);
}

.tabrow li.selected a { color: var(--gold); }

/* ───────────────────────────────────────────────
   GRAND OPENING BANNER + TIMER
─────────────────────────────────────────────── */
#grand-opening-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(1, 30, 18, 0.92) 0%,
            rgba(2, 18, 12, 0.98) 50%,
            rgba(1, 10, 7, 1.00) 100%);
    border-bottom: 1px solid rgba(16,185,129,0.30);
    box-shadow: 0 4px 40px rgba(0,0,0,0.60), inset 0 -1px 0 rgba(16,185,129,0.15);
    padding: 10px 0 12px;
    text-align: center;
    z-index: 2;
}

/* Animated ember particles */
#grand-opening-banner .go-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.go-p {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: go-float 6s ease-in infinite;
}
.go-p1 { width:4px; height:4px; background:rgba(16,185,129,0.70); left:8%;  animation-delay:0s;    animation-duration:7s; }
.go-p2 { width:3px; height:3px; background:rgba(249,115,22,0.60); left:22%; animation-delay:1.2s; animation-duration:5.5s; }
.go-p3 { width:5px; height:5px; background:rgba(52,211,153,0.50); left:45%; animation-delay:2.4s; animation-duration:8s; }
.go-p4 { width:3px; height:3px; background:rgba(249,115,22,0.55); left:63%; animation-delay:0.8s; animation-duration:6.5s; }
.go-p5 { width:4px; height:4px; background:rgba(16,185,129,0.65); left:78%; animation-delay:3.0s; animation-duration:7.5s; }
.go-p6 { width:3px; height:3px; background:rgba(52,211,153,0.45); left:90%; animation-delay:1.8s; animation-duration:5s; }

@keyframes go-float {
    0%   { transform: translateY(80px) scale(0.5); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 0.6; }
    100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}

/* Content wrapper */
.go-content {
    position: relative;
    z-index: 1;
}

/* Kicker line */
.go-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

.go-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgb(249,115,22), rgb(234,88,12));
    color: #fff;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(249,115,22,0.45);
}

.go-kicker-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgb(100,140,120);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Main title */
#timer_div_title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: rgb(52, 211, 153);
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 4px;
    text-shadow:
        0 0 20px rgba(16,185,129,0.50),
        0 0 50px rgba(16,185,129,0.20);
}

/* "Before Opening" label */
.go-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    color: rgb(249,115,22);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Countdown row */
#timer_div_time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

/* Colon separators */
.go-sep {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: rgba(16,185,129,0.40);
    line-height: 1;
    padding-bottom: 12px;
    user-select: none;
}

/* Individual digit block */
.timmer_inner_block {
    text-align: center;
    background: linear-gradient(180deg, rgba(1,40,28,0.80) 0%, rgba(1,20,14,0.95) 100%);
    border: 1px solid rgba(16,185,129,0.28);
    border-radius: 6px;
    padding: 6px 0 5px;
    min-width: 56px;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(52,211,153,0.10);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.timmer_inner_block:hover {
    border-color: rgba(16,185,129,0.50);
    box-shadow: 0 4px 20px rgba(0,0,0,0.50), 0 0 14px rgba(16,185,129,0.15);
}

.timmer_inner_block .count {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: rgb(52, 211, 153);
    line-height: 1;
    text-shadow: 0 0 16px rgba(16,185,129,0.55);
    display: block;
    padding: 0 12px;
    min-width: 56px;
}

.timmer_inner_block .title {
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 600;
    color: rgb(100,140,120);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
    display: block;
}

/* CTA button */
.go-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(1,64,46,0.30) 100%);
    border: 1px solid rgba(16,185,129,0.45);
    color: rgb(52, 211, 153);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
    box-shadow: 0 2px 14px rgba(16,185,129,0.15);
}

.go-cta-btn:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.30) 0%, rgba(1,80,58,0.45) 100%);
    border-color: rgba(52,211,153,0.70);
    color: rgb(110, 231, 183);
    box-shadow: 0 4px 22px rgba(16,185,129,0.30);
    text-decoration: none;
}

.go-cta-btn i {
    font-size: 13px;
    color: rgb(249,115,22);
}

/* ───────────────────────────────────────────────
   ACCOUNT PANEL – SIDEBAR LOGIN FORM
─────────────────────────────────────────────── */
.input-main {
    background: rgba(5,5,12,0.75) !important;
    border: 1px solid rgba(16,185,129,0.28) !important;
    border-top-color: rgba(16,185,129,0.18) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius) !important;
    padding: 8px 12px !important;
    font-family: 'Exo 2', 'Segoe UI', Arial, sans-serif !important;
    font-size: 12px !important;
    text-transform: none !important;
    font-variant: normal !important;
    display: block;
    margin-bottom: 8px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    backdrop-filter: blur(4px);
}

.input-main::placeholder {
    color: rgba(160,130,70,0.50) !important;
    font-size: 11px !important;
}

.input-main:focus {
    outline: none !important;
    background: rgba(8,8,18,0.85) !important;
    border-color: rgba(16,185,129,0.60) !important;
    border-top-color: rgba(16,185,129,0.40) !important;
    box-shadow: 0 0 10px rgba(16,185,129,0.20), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Server select / switch button */
#banner #col2 .info-button td.active-server,
#banner #col2 .info-button td.selected {
    opacity: 1;
    color: var(--gold);
}

/* Logout link in sidebar */
#sidebar a[href*="logout"] {
    color: #fc8181;
    font-size: 11px;
    transition: color 0.2s;
}

#sidebar a[href*="logout"]:hover { color: #ff4444; text-decoration: none; }

/* ───────────────────────────────────────────────
   #exception flash area
─────────────────────────────────────────────── */
#exception {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    min-width: 300px;
}

/* ───────────────────────────────────────────────
   MISC
─────────────────────────────────────────────── */
.btn-fld { width: 254px; overflow: hidden; padding: 10px 20px; }

/* Events box */
#events { color: var(--text-main); font-size: 12px; }

/* Market items */
#lattest_items { color: var(--text-main); font-size: 12px; }

/* Breadcrumbs area */
#breadcrumbs, .breadcrumbs {
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(16,185,129,0.1);
    margin-bottom: 8px;
}

#breadcrumbs a, .breadcrumbs a { color: var(--gold); }

/* ───────────────────────────────────────────────
   SCROLLBAR (WebKit)
─────────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: var(--bg-deep); }
::-webkit-scrollbar-thumb         { background: rgba(16,185,129,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--gold); }

/* ───────────────────────────────────────────────
   APOC HOME / NEWS page classes (Phase 3 view)
─────────────────────────────────────────────── */
.apoc-home               { margin-top: 22px; }
.apoc-home-title         { position: static !important; width: auto; margin-bottom: 20px !important; }
/* Also target #box1 .title1 directly in case apoc-home-title class is absent */
#box1 .title1            { position: relative !important; margin-bottom: 20px !important; }
.apoc-home-kicker        { font-size: 11px; color: var(--text-muted); padding-top: 2px; font-family: var(--font-body); }
.apoc-home-kicker-label  { text-transform: uppercase; letter-spacing: 1px; }
.apoc-home-kicker-sep    { padding: 0 6px; color: var(--border-gold-h); }
.apoc-home-kicker-value  { color: var(--gold); }
.apoc-home-center        { padding: 10px 10px 10px !important; }
/* Also target #content_center directly */
#content_center          { padding-top: 10px !important; }
.apoc-news-card          { margin-bottom: 18px; }
/* ── Push article body well clear of the title bar ── */
#box1 .box-style1 .title       { padding-top: 14px !important; padding-bottom: 14px !important; }
#box1 .box-style1 .entry       { padding-top: 24px !important; }
.apoc-home .box-style1 .title  { padding-top: 14px !important; padding-bottom: 14px !important; }
.apoc-home .box-style1 .entry  { padding-top: 24px !important; }
.apoc-news-title         { font-size: 15px !important; }
.apoc-news-title a       { color: var(--gold); }
.apoc-news-title a:hover { color: var(--gold-bright); }
.apoc-news-body          { color: var(--text-main); line-height: 1.7; }
.apoc-news-meta-bg       { width: auto; left: 0; }
.apoc-news-meta          {}
.apoc-empty-wrap         { padding: 40px 20px; text-align: center; }
.apoc-empty-note         { display: inline-block; background: rgba(1,64,46,0.20); border-color: rgba(2,100,72,0.40); color: var(--text-muted); }
.apoc-empty-sub          { color: var(--text-muted); font-size: 12px; padding-top: 8px; }
.apoc-facebook-news      { padding: 10px; }
.apoc-pagination-wrap    { padding: 16px 0; text-align: center; }

/* ── Read-news full article ── */
.rn-card  { margin-bottom: 20px; }
.rn-body  { width: 100%; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; line-height: 1.75; color: var(--text-main); }
.rn-meta  { overflow: hidden; }
.rn-meta .tags { float: none; padding: 0; }

/* ───────────────────────────────────────────────
   PAGINATION
─────────────────────────────────────────────── */
.pagination, .pager {
    display: flex;
    gap: 4px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.pagination a, .pager a,
.pagination span, .pager span {
    display: inline-block;
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 12px;
    transition: background 0.2s, color 0.2s;
}

.pagination a:hover, .pager a:hover {
    background: var(--bg-card-hover);
    color: var(--gold);
    text-decoration: none;
}

.pagination .active a, .pagination .current {
    background: linear-gradient(180deg, rgba(1,64,46,0.55) 0%, rgba(92,40,8,0.30) 100%);
    color: var(--gold);
    border-color: var(--gold);
}


/* ============================================================
   PHASE 1 ANIMATIONS & SCROLLBAR
   MuOnline Emberion – fire / ember / ui transitions
   ============================================================ */

/* ── Flame slide (dropdown top/bottom edges) ── */
@keyframes flame-slide {
    0%, 100% { transform: translateX(-100%); opacity: 0.4; }
    50%       { transform: translateX( 100%); opacity: 0.8; }
}

@keyframes flame-slide-delayed {
    0%, 100% { transform: translateX( 100%); opacity: 0.3; }
    50%       { transform: translateX(-100%); opacity: 0.6; }
}

/* ── Flame flicker (side glow on dropdowns) ── */
@keyframes flame-flicker {
    0%,  100% { opacity: 0.4; transform: scaleY(0.95); }
    25%        { opacity: 0.7; transform: scaleY(1.05); }
    50%        { opacity: 0.5; transform: scaleY(0.90); }
    75%        { opacity: 0.8; transform: scaleY(1.10); }
}

@keyframes flame-flicker-delayed {
    0%,  100% { opacity: 0.5; transform: scaleY(1.05); }
    25%        { opacity: 0.3; transform: scaleY(0.90); }
    50%        { opacity: 0.7; transform: scaleY(1.15); }
    75%        { opacity: 0.4; transform: scaleY(0.95); }
}

/* ── Ember float (navbar particles) ── */
@keyframes ember-float {
    0%   { transform: translateY(  0)    translateX(0);    opacity: 0;   }
    10%  { transform: translateY( -6px)  translateX( 2px); opacity: 0.5; }
    40%  { transform: translateY(-28px)  translateX(-3px); opacity: 0.7; }
    70%  { transform: translateY(-55px)  translateX( 6px); opacity: 0.3; }
    100% { transform: translateY(-80px)  translateX(0);    opacity: 0;   }
}

@keyframes ember-float-delayed {
    0%   { transform: translateY(  0) translateX(0);   opacity: 0.5; }
    25%  { transform: translateY(-25px) translateX(-8px); opacity: 0.7; }
    50%  { transform: translateY(-50px) translateX( 5px); opacity: 0.3; }
    75%  { transform: translateY(-70px) translateX(-5px); opacity: 0.15; }
    100% { transform: translateY(-90px) translateX(0);   opacity: 0;   }
}

/* ── General UI transitions ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes pulse-subtle {
    0%,  100% { opacity: 1;    transform: scale(1);    }
    50%        { opacity: 0.95; transform: scale(0.98); }
}

@keyframes glow-pulse {
    0%,  100% { box-shadow: 0 0 20px rgba(16,185,129,0.2); }
    50%        { box-shadow: 0 0 35px rgba(16,185,129,0.45); }
}

/* ── Animation utility classes ── */
.animate-ember-float          { animation: ember-float          3s ease-in-out infinite; }
.animate-ember-float-delayed  { animation: ember-float-delayed  4s ease-in-out infinite 1.5s; }
.animate-flame-slide          { animation: flame-slide          2s ease-in-out infinite; }
.animate-flame-slide-delayed  { animation: flame-slide-delayed  2.5s ease-in-out infinite 0.5s; }
.animate-flame-flicker        { animation: flame-flicker        1.5s ease-in-out infinite; }
.animate-flame-flicker-delayed{ animation: flame-flicker-delayed 1.8s ease-in-out infinite 0.3s; }
.animate-fade-in              { animation: fadeIn               0.3s ease-out forwards; }
.animate-slide-down           { animation: slideDown            0.25s ease-out forwards; }
.animate-glow-pulse           { animation: glow-pulse           2s ease-in-out infinite; }

/* ── Custom amber scrollbar ── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(16,185,129,0.30) rgba(17,24,39,0.50);
}

::-webkit-scrollbar       { width: 8px; height: 8px; }

::-webkit-scrollbar-track {
    background:    rgba(17,24,39,0.50);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(16,185,129,0.40) 0%,
        rgba(4,120,87,0.40) 100%);
    border-radius: 8px;
    border: 2px solid rgba(17,24,39,0.50);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(16,185,129,0.65) 0%,
        rgba(4,120,87,0.65) 100%);
    box-shadow: 0 0 8px rgba(16,185,129,0.30);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE / MOBILE
═══════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.30);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    flex-shrink: 0;
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(220,180,80,0.90);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animated X when open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu panel ── */
.nav-mobile-menu {
    display: none;
    flex-direction: column;
    background: rgba(3, 5, 14, 0.97);
    border-top: 1px solid rgba(16,185,129,0.20);
    padding: 16px 20px 20px;
    gap: 0;
    backdrop-filter: blur(12px);
}
.nav-mobile-menu.is-open { display: flex; }

.mob-lang {
    display: flex;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(16,185,129,0.12);
    margin-bottom: 4px;
}

.mob-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mob-nav-list li a {
    display: block;
    padding: 12px 4px;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(220,180,80,0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(16,185,129,0.08);
    transition: color 0.2s, padding-left 0.2s;
}
.mob-nav-list li a:hover {
    color: var(--amber-400);
    padding-left: 10px;
    text-decoration: none;
}

.mob-realm-row {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(16,185,129,0.12);
    margin-top: 4px;
}

/* ── Tablet: 1024px and below ── */
@media (max-width: 1024px) {
    #menu {
        padding: 0 16px;
    }
    .nav-list > li > a {
        padding: 8px 10px;
        font-size: 11px;
        letter-spacing: 1px;
    }
    .nav-right { gap: 8px; }
    .realm-box { min-width: 80px; padding: 6px 10px; }
    .nav-activity { padding: 4px 8px 4px 7px; gap: 6px; }
    .nav-activity-count { font-size: 12px; }
    .nav-activity-label { font-size: 7px; }
}

/* ── Mobile: 768px and below ── */
@media (max-width: 768px) {

    /* Nav switches to logo-left + hamburger-right */
    #menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding: 0 16px;
    }

    /* Show hamburger, hide desktop sections */
    .nav-hamburger { display: flex; }
    .nav-center    { display: none; }
    .nav-right     { display: none; }

    /* Logo left, no right-padding offset */
    .nav-left {
        justify-content: flex-start;
        padding-right: 0;
        gap: 10px;
    }
    .nav-logo-img { height: 48px; }

    /* Language buttons are in nav-right (hidden with nav-right on mobile; duplicated in mobile menu) */

    /* Page wrapper full width */
    #page-wrapper {
        margin: 8px 8px 16px;
        border-radius: 6px;
    }

    /* Stack content and sidebar */
    #page, .container {
        width: 100%;
    }

    #content {
        float: none;
        width: 100%;
        padding: 12px 12px;
        min-height: auto;
    }

    #wide-content {
        width: 100%;
        min-height: auto;
    }

    #sidebar {
        float: none;
        width: 100%;
        padding: 0 12px 16px;
    }

    /* Title bands full width */
    .title1 { width: 100%; }

    /* Ranking tables scroll horizontally */
    .ranking-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Form inputs full width */
    .form input:not([type="checkbox"]):not([type="number"]),
    .form select,
    .form textarea {
        width: 100%;
        box-sizing: border-box;
    }
    .form select { width: 100%; }

    /* Buttons full width on mobile */
    .button-style {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Input-main full width */
    .input-main {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Footer columns stack */
    #footer-content #column1,
    #footer-content #column2,
    #footer-content #column3 {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
    }

    /* Box panels fill width */
    .box-style1,
    .box-style2,
    .box-style4 {
        margin-bottom: 10px;
    }

    /* Dropdown closes flush on mobile */
    .nav-dropdown { display: none !important; }
}

/* ── Small phones: 480px and below ── */
@media (max-width: 480px) {
    #menu { height: 60px; }
    .nav-logo-img { height: 38px; }

    #page-wrapper { margin: 4px 4px 12px; }

    .title1 h1, .title1 h2 { font-size: 13px; }
    .title2 h2 { font-size: 10px; }

    .mob-nav-list li a { font-size: 12px; padding: 11px 4px; }

    .realm-box { min-width: 70px; padding: 6px 8px; }
    .realm-name { font-size: 9px; }
    .realm-status { font-size: 9px; }
}

::-webkit-scrollbar-corner { background: rgba(17,24,39,0.50); }

/* ============================================================
   PHASE 10 – Cross-Page Consistency
   Missing component styles ported + restyled to Emberion theme
   ============================================================ */

/* ── Rankings display fix ── */
.rankings { display: block; }

/* ── Custom Button (rankings tabs, etc.) ── */
.custom_button {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 14px;
    margin: 3px 2px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-main);
    text-decoration: none;
    text-align: center;
    background: linear-gradient(180deg, rgba(1,64,46,0.45) 0%, rgba(92,40,8,0.30) 100%);
    border: 1px solid rgba(2,100,72,0.40);
    border-radius: var(--radius);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
}
.custom_button:hover {
    background: linear-gradient(180deg, rgba(1,80,58,0.60) 0%, rgba(1,64,46,0.45) 100%);
    border-color: rgba(5,150,105,0.55);
    color: var(--gold);
    text-decoration: none;
}
.custom_button:active { position: relative; top: 1px; }

/* ── Shop item grid ── */
/* ── Account info grid ── */
#ucp_info { width: 100%; margin-bottom: 8px; }
.ucp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 4px 2px;
}
.ucp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 5px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(16,185,129,0.10);
    transition: background 0.15s, border-color 0.15s;
}
.ucp-row:hover {
    background: rgba(16,185,129,0.07);
    border-color: rgba(16,185,129,0.22);
}
.ucp-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: rgba(220,180,60,0.85);
    display: flex;
    align-items: center;
}
.ucp-icon svg { width: 18px; height: 18px; stroke: rgba(220,180,60,0.85); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ucp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ucp-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(160,130,60,0.65);
    line-height: 1;
}
.ucp-value {
    font-size: 12px;
    color: rgba(230,205,140,0.92);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ucp-value a { color: rgba(16,185,129,0.85); text-decoration: none; }
.ucp-value a:hover { color: rgba(16,185,129,1); text-decoration: underline; }

.item_table { width: auto; border: 0; margin: auto; border-collapse: separate; border-spacing: 0; }
.item_table td { padding: 8px 6px; vertical-align: top; }

.each_item {
    /* border-collapse:separate is required for border-radius + overflow:hidden to
       actually work on <table> elements — collapse disables both in all browsers */
    border: 1px solid rgba(2,100,72,0.42);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 140px;
}
.each_item td { padding: 0; }

.each_item .item_name {
    background: linear-gradient(90deg, rgba(1,64,46,0.70) 0%, rgba(1,80,58,0.40) 100%);
    border-bottom: 1px solid rgba(16,185,129,0.25);
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.each_item .item_bg {
    background: rgba(8,14,10,0.65);
    /* no individual side borders — the outer .each_item border handles the card edge */
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    box-sizing: border-box;
}
.each_item .item_footer {
    background: linear-gradient(90deg, rgba(1,64,46,0.50) 0%, rgba(92,40,8,0.30) 100%);
    border-top: 1px solid rgba(16,185,129,0.20);
    height: 6px;
}

.item_image {
    text-align: center;
    height: 120px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item_image img {
    width: 100px;
    height: 100px;
    object-fit: contain;   /* scales to fit — never distorts, never crops */
    display: block;
    margin: 0 auto;
}

.items { text-align: center; }
.items a {
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: block;
    padding: 4px 2px;
}
.items a:hover { color: var(--gold); }

/* ── Shop purchase modal ── */
#item_buy { margin: 0 5px; width: 100%; }
#item_buy_left { float: left; padding-right: 8px; }
#item_buy_right {
    float: left;
    width: 492px;
    padding: 2px;
    background: rgba(8,14,10,0.65);
    border: 1px solid rgba(2,100,72,0.35);
    border-radius: var(--radius);
}
#item_buy_right .full {
    margin: 2px;
    padding: 4px 8px;
    width: calc(100% - 20px);
    background: linear-gradient(90deg, rgba(1,64,46,0.55) 0%, rgba(92,40,8,0.30) 100%);
    font-family: var(--font-heading);
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(16,185,129,0.20);
}
#item_buy_right .opt_title {
    float: left;
    width: 250px;
    margin: 2px;
    padding: 3px 8px;
    background: rgba(1,64,46,0.25);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-main);
    height: 22px;
    line-height: 22px;
}
#item_buy_right .opt {
    float: left;
    width: 236px;
    margin: 2px;
    padding: 3px 8px;
    background: rgba(1,64,46,0.15);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-main);
    height: 22px;
    line-height: 22px;
}
#item_buy_right .opt select {
    border: 1px solid rgba(2,100,72,0.40);
    border-radius: 3px;
    background: rgba(8,8,16,0.85);
    color: var(--text-main);
    font-size: 12px;
    width: 60%;
    padding: 1px 4px;
}
#item_buy_right .opt input[type="number"] {
    width: 42px;
    border: 1px solid rgba(2,100,72,0.40);
    border-radius: 3px;
    background: rgba(8,8,16,0.85);
    color: var(--text-main);
    font-size: 12px;
    padding: 1px 4px;
}

#item_image_bg {
    position: relative;
    background: rgba(8,14,10,0.65) url(../images/item_bg.png) no-repeat center;
    width: 129px;
    height: 184px;
    border: 1px solid rgba(2,100,72,0.30);
    border-radius: 4px;
}
#item_image_bg img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.item_info {
    margin-top: 4px;
    background: rgba(8,14,10,0.65);
    border: 1px solid rgba(2,100,72,0.30);
    border-radius: 4px;
    width: 129px;
    min-height: 36px;
    line-height: 1.4;
    padding: 4px 6px;
}
.item_info .info { font-family: var(--font-body); font-size: 11px; color: var(--text-main); }
.item_info .info .btimes { color: #ed7876; }
.item_info .info .goldcr  { color: var(--gold); }
.item_info .info .normalcr { color: var(--text-sub); }
/* Live stats panel inside buy popup */
#item_live_stats { padding: 6px 8px !important; }
.stat-section-title { font-size: 9px; color: #7a6a50; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid rgba(200,146,42,0.25); padding-bottom: 3px; margin-bottom: 4px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; line-height: 1.7; gap: 6px; }
.stat-lbl { color: #8a7a60; }
.stat-val { font-weight: bold; }
.stat-dmg { color: #ff8c42; }
.stat-def { color: #7ec8e3; }
.stat-wiz { color: #c084fc; }
.stat-spd { color: #86efac; }
.stat-lvl { color: #fbbf24; }
.stat-str { color: #f87171; }
.stat-agi { color: #34d399; }
.stat-ene { color: #a78bfa; }
.stat-vit { color: #fb923c; }
.stat-com { color: #e2e8f0; }

#buy_buttons { width: 99%; margin: 6px 0; }
#buy_buttons button { margin: 3px; }

.buy_button {
    display: inline-block;
    width: auto;
    min-width: 120px;
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    float: right;
    font-family: var(--font-heading);
    font-size: 12px;
    color: #fff;
    background: linear-gradient(90deg, rgb(4, 120, 87), rgb(5, 150, 105));
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
}
.buy_button:hover {
    background: linear-gradient(90deg, rgb(5, 150, 105), rgb(16, 185, 129));
}

.auction_bet_button {
    display: block;
    width: 220px;
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 12px;
    background: linear-gradient(90deg, rgba(1,64,46,0.70), rgba(1,80,58,0.50));
    border: 1px solid rgba(16,185,129,0.40);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
}
.auction_bet_button:hover {
    background: linear-gradient(90deg, rgba(1,80,58,0.80), rgba(2,100,72,0.60));
}

.span_red { background: rgba(180,30,30,0.60); color: #ffa0a0; border-radius: 3px; padding: 1px 5px; }

#sell_item { border-radius: var(--radius); }

/* ── Payment methods / Donation ── */
.payment-method-button {
    margin: 6px;
    background: rgba(8,14,10,0.65);
    border: 1px solid rgba(2,100,72,0.35);
    border-radius: var(--radius);
    overflow: auto;
    float: left;
    transition: border-color 0.2s;
}
.payment-method-button:hover { border-color: rgba(5,150,105,0.55); }
.payment-method-button label { float: left; cursor: pointer; }
.payment-method-button label span {
    text-align: center;
    padding: 3px 0;
    display: block;
    width: 120px;
    height: 50px;
    line-height: 50px;
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
}
.payment-method-button label input { position: absolute; top: -20px; }

/* ── Donation plans ── */
.plans { list-style: none; margin: 0; padding: 10px 20px; }

.plan {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%),
                rgba(8,8,16,0.72);
    border: 1px solid rgba(16,185,129,0.18);
    border-top-color: rgba(16,185,129,0.35);
    border-radius: var(--radius);
    height: auto;
    min-height: 68px;
    margin: 10px 0;
    padding: 10px 20px;
    transition: border-color 0.2s;
}
.plan:hover { border-color: rgba(16,185,129,0.35); border-top-color: rgba(16,185,129,0.60); }

.price {
    border-radius: 50%;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin-right: 14px;
    font-weight: bold;
    font-family: var(--font-heading);
    font-size: 14px;
}
.price-green { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.30); }
.price-red   { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.30); }

.details { display: block; flex: 1; }

.plan-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin: 0 0 4px;
    padding: 0;
}
.plan-description {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-sub);
    margin: 0;
    padding: 0;
}

.select {
    display: inline-block;
    padding: 7px 18px;
    float: right;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, rgb(4, 120, 87), rgb(5, 150, 105));
    border: none;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    align-self: center;
    margin-left: 14px;
}
.select:hover { background: linear-gradient(90deg, rgb(5, 150, 105), rgb(16, 185, 129)); text-decoration: none; cursor: pointer; }

/* ── Support tickets ── */
.ticket {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(2,100,72,0.30);
}
.ticket th {
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(1,64,46,0.55) 0%, rgba(1,80,58,0.18) 100%);
    border-bottom: 1px solid rgba(16,185,129,0.22);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--amber-400);
    text-transform: uppercase;
    text-align: left;
}
.ticket th:first-child { padding-left: 16px; }
.ticket tr:first-child th:first-child { border-radius: var(--radius) 0 0 0; }
.ticket tr:first-child th:last-child  { border-radius: 0 var(--radius) 0 0; }
.ticket tr { text-align: center; }
.ticket td {
    padding: 9px 12px;
    border-top: 1px solid rgba(2,100,72,0.15);
    background: rgba(8,8,16,0.40);
    color: var(--text-main);
    font-size: 12px;
}
.ticket td:first-child { text-align: left; padding-left: 16px; border-left: 0; }
.ticket tr.even td { background: rgba(8,8,16,0.55); }
.ticket tr:last-child td { border-bottom: 0; }
.ticket tr:last-child td:first-child { border-radius: 0 0 0 var(--radius); }
.ticket tr:last-child td:last-child  { border-radius: 0 0 var(--radius) 0; }
.ticket tr:hover td { background: rgba(1,64,46,0.20); }

/* ── Shop discount banner ── */
.discount_notice {
    margin: 12px auto 16px;
    max-width: 320px;
    background: linear-gradient(90deg, rgba(1,64,46,0.50), rgba(1,80,58,0.30));
    border: 1px solid rgba(16,185,129,0.40);
    border-radius: var(--radius);
    padding: 10px 16px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.discount_notice .content {
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
}
.ribbon-discount-green { display: inline-block; vertical-align: middle; margin-right: 8px; }
.ribbon-green {
    display: inline-block;
    background: linear-gradient(90deg, rgb(4, 120, 87), rgb(5, 150, 105));
    color: #fff;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 3px;
}
.ribbon-green:before, .ribbon-green:after { display: none; }

/* ── Warehouse ── */
.waretitle {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--amber-400);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(16,185,129,0.20);
}
.wh_items {
    width: 256px;
    height: 480px;
    margin: 4px 6px;
    padding: 0;
    position: relative;
    background-size: 256px 480px !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(2,100,72,0.55);
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(1,64,46,0.25), inset 0 0 8px rgba(0,0,0,0.6);
}
.square {
    cursor: pointer;
    position: absolute;
    opacity: 0.85;
    transition: opacity 0.15s, box-shadow 0.2s, outline 0.2s;
    border-radius: 2px;
}
.square:hover {
    opacity: 1;
    box-shadow: 0 0 8px 2px rgba(16,185,129,0.55), 0 0 2px 1px rgba(2,100,72,0.6);
    outline: 1px solid rgba(16,185,129,0.45);
    z-index: 10;
}
.square.selected {
    opacity: 1;
    box-shadow: 0 0 12px 3px rgba(16,185,129,0.75), 0 0 4px 2px rgba(2,100,72,0.8);
    outline: 1px solid rgba(16,185,129,0.85);
    z-index: 10;
}
.square img { width: 100%; height: 100%; object-fit: contain; }

/* ══════════════════════════════════════════════════════════
   CHARACTER EQUIPMENT — EMBERION REDESIGN v5
   Container: 560 × 345px
   ┌──────────────────────────────────────────────────────┐
   │ [P]  [Pet  ] [Helm               ] [Wings..........] │
   │ [R1] [Weap ] [Armor              ] [Shield][E1][E2] │
   │ [R2] [Glvs ] [Pants              ] [Boots ][Penta ] │
   └──────────────────────────────────────────────────────┘
   Left jewellery col (P=Pendant, R1/R2=Rings) at left:14
   Cols: 58(Pet/Weapon/Gloves) | 158(Helm/Armor/Pants) | 258(Wings/Shield/Boots)
   ══════════════════════════════════════════════════════════ */

/* ── Glowing character name above the grid ── */
.equip-char-name {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(16,185,129,0.95);
    text-shadow:
        0 0 8px  rgba(16,185,129,0.70),
        0 0 20px rgba(2,100,72,0.60),
        0 0 40px rgba(2,100,72,0.35);
    margin-bottom: 14px;
    line-height: 1.2;
}
.equip-char-name span {
    display: block;
    font-size: 10px;
    letter-spacing: 5px;
    color: rgba(2,100,72,0.80);
    text-shadow: 0 0 8px rgba(2,100,72,0.45);
    margin-top: 5px;
    font-weight: 400;
}

/* ── Container ── */
#inventoryc {
    background-image: none !important;
    background: linear-gradient(160deg, rgba(14,10,26,0.98) 0%, rgba(6,5,14,0.99) 100%) !important;
    border: 1px solid rgba(2,100,72,0.50);
    border-radius: 10px;
    width: 400px !important;
    height: 400px !important;
    display: inline-block;
    position: relative;
    box-shadow:
        0 0 60px rgba(2,100,72,0.22),
        0 0 120px rgba(2,100,72,0.10),
        inset 0 0 80px rgba(0,0,0,0.50);
    overflow: visible;
}

/* Vertical divider removed */
#inventoryc::before {
    display: none;
}

/* Sheen sweep — slow diagonal light moving across the panel */
@keyframes inventorySweep {
    0%   { background-position: 250% center; }
    100% { background-position: -50% center; }
}
#inventoryc::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(16,185,129,0.04) 50%,
        transparent 65%
    );
    background-size: 300% 100%;
    animation: inventorySweep 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* hide the class portrait — replaced by text heading */
#inventoryc > img { display: none !important; }

/* ── All slots — base ── */
#inventoryc > div {
    position: absolute;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    background-color: rgba(16,12,28,0.62) !important;
    border: 1px solid rgba(16,185,129,0.38) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.55), 0 0 3px rgba(2,100,72,0.06) !important;
    transition: border-color 0.22s, box-shadow 0.22s, transform 0.15s;
    overflow: visible;
    z-index: 3;
}

/* hover glow */
#inventoryc > div:hover {
    border-color: rgba(16,185,129,0.88) !important;
    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.3),
        0 0 16px rgba(16,185,129,0.32),
        0 0 30px rgba(2,100,72,0.20) !important;
    transform: scale(1.07);
    z-index: 10;
    cursor: pointer;
}

/* Equipped slot subtle border pulse — only fires on slots with an item */
@keyframes equippedPulse {
    0%, 100% { border-color: rgba(16,185,129,0.38) !important; box-shadow: inset 0 0 14px rgba(0,0,0,0.55), 0 0 4px rgba(2,100,72,0.08) !important; }
    50%       { border-color: rgba(16,185,129,0.72) !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.35), 0 0 14px rgba(16,185,129,0.22), 0 0 4px rgba(2,100,72,0.18) !important; }
}
#inventoryc > div[data-info] {
    animation: equippedPulse 3s ease-in-out infinite;
}
/* pause the pulse while hovering so the hover glow takes over cleanly */
#inventoryc > div[data-info]:hover {
    animation-play-state: paused;
}

/* ── Slot labels ── */
#inventoryc > div::after {
    display: block;
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(220,160,20,0.95);
    text-shadow: 0 0 8px rgba(2,100,72,0.85), 0 1px 3px rgba(0,0,0,1);
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
}
#in_zoo::after       { content: 'Pet'; }
#in_pendant::after   { content: 'Pendant'; }
#in_helm::after      { content: 'Helm'; }
#in_wings::after     { content: 'Wings'; }
#in_weapon::after    { content: 'Weapon'; }
#in_ear1::after      { content: 'Earring'; }
#in_armor::after     { content: 'Armor'; }
#in_shield::after    { content: 'Shield'; }
#in_ear2::after      { content: 'Earring'; }
#in_pentagram::after { content: 'Penta'; }
#in_boots::after     { content: 'Boots'; }
#in_ring1::after     { content: 'Ring'; }
#in_pants::after     { content: 'Pants'; }
#in_ring2::after     { content: 'Ring'; }
#in_gloves::after    { content: 'Gloves'; }

/* ══ JEWELLERY COLUMN  left:14  width:32
     Pendant / Ring1 / Ring2 — vertically centred in their row
   ═══════════════════════════════════════════════════════ */
#in_pendant { top:37px;  left:7px; width:44px; height:44px; }   /* centred in row-1 (top:14 h:90, centre=59, 59-22=37) */
#in_ring1   { top:171px; left:7px; width:44px; height:44px; }   /* centred in row-2 (top:140 h:106, centre=193, 193-22=171) */
#in_ring2   { top:298px; left:7px; width:44px; height:44px; }   /* centred in row-3 (top:275 h:90, centre=320, 320-22=298) */

/* ══ ROW 1  top:14  (tallest slot: 90px)
     [Pet 72px] [Helm 90px] [Wings 290px → right edge]
   ═══════════════════════════════════════════════════════ */
#in_zoo   { top:23px; left:58px;  width:72px;  height:72px;  }  /* pet — vertically centred in row    */
#in_helm  { top:14px; left:158px; width:90px;  height:90px;  }
#in_wings { top:14px; left:258px; width:130px; height:90px;  }  /* sized to fit 400px container after ear/penta removal */

/* ══ ROW 2  top:116  (tallest slot: 106px)
     [Weapon] [Armor — directly under Helm] [Shield] [Ear×2][Penta]
   ═══════════════════════════════════════════════════════ */
#in_weapon    { top:140px; left:58px;  width:90px; height:106px; }
#in_armor     { top:140px; left:158px; width:90px; height:106px; }  /* under Helm ✓              */
#in_shield    { top:140px; left:258px; width:90px; height:106px; }  /* matches weapon/armor height */
#in_ear1      { top:116px; left:358px; width:44px; height:44px;  }
#in_ear2      { top:166px; left:358px; width:44px; height:44px;  }
#in_pentagram { top:141px; left:408px; width:44px; height:44px;  }

/* Ear slots and Pentagram hidden — not used in current layout */
#in_ear1, #in_ear2, #in_pentagram { display: none !important; }

/* ══ ROW 3  top:234  (tallest slot: 90px)
     [Gloves] [Pants — under Armor] [Boots — under Shield, next to Pants]
   ═══════════════════════════════════════════════════════ */
#in_gloves { top:275px; left:58px;  width:90px; height:90px; }
#in_pants  { top:275px; left:158px; width:90px; height:90px; }  /* under Armor ✓             */
#in_boots  { top:275px; left:258px; width:90px; height:90px; }  /* under Shield, next to Pants ✓ */

/* ── Workshop (craft) ── */
.cworkshop { display: table; margin: 40px auto; }
.cworkshop .inventoryy {
    background-image: url("../../default_assets/images/inv.png");
    height: 610px; width: 311px; display: block;
}
.cworkshop .item { position: absolute; margin-top: 10px; margin-left: 3px; }
.cworkshop .item > div { cursor: pointer; border: solid 2px transparent; }
div[id*="item-slot-occupied-"] img { background-color: rgba(31,31,31,0.73); }
div[id*="item-slot-occupied-"] img:hover { background-color: rgba(2,100,72,0.43); }
.cworkshop .item > div.selected {
    background-color: rgba(2,100,72,0.43);
    border: solid 2px rgba(16,185,129,0.44);
}
.cworkshop .item .hover_inv:hover {
    background-color: rgba(2,100,72,0.43);
    border: solid 2px rgba(16,185,129,0.44);
}
.cworkshop .title { margin-top: 13px; text-align: center; margin-bottom: 30px; }

/* ── MU Online item rarity colours (game standard – kept as-is) ── */
.item_light_blue   { color: #80B2FF; }
.item_light_blue_2 { color: #3366FF; }
.item_blue         { color: #0066FF; }
.item_pink         { color: #FF1493; }
.item_yellow       { color: #FADE09; }
.item_yellow_2     { color: #FFCC00; }
.item_red          { color: #FF0000; }
.item_dark_red     { color: #800000; }
.item_dark_red_background { background-color: #800000; }
.item_purple       { color: #800080; }
.item_socket       { color: #B266FF; }
.item_grey         { color: #9ca3af; }
.item_white        { color: #ffffff; }
.item_font_family  { font-family: var(--font-body); }
.item_size_12      { font-size: 12px; }
.item_luck         { color: #80B2FF; }
.item_exe_title    { color: #22c55e; }
.item_socket_title { color: #B266FF; }
.item_socket_exe_title { color: #a855f7; }
.item_ancient_title    { color: #4ade80; }
.item_ancient_background { background-color: rgba(0,0,255,0.35); }
.item_yellow_title { color: #FFCC19; }

/* ── Live server popup ── */
.live_popup {
    background-image: url("../../default_assets/images/OxlwMBp.png");
    height: 86px;
    position: fixed;
    bottom: 10px;
    z-index: 99999;
}
.live-110 { right: 110px; }
.live-840 { right: 840px; }
#live_btn      { cursor: pointer; }
#live_popup_ch { display: none; }

/* ── Referral reward dropdown ── */
.ref-reward-dropdown { position: relative; display: inline-block; }
.ref-reward-dropdown-content {
    display: none;
    position: absolute;
    background: rgba(8,8,16,0.95);
    border: 1px solid rgba(2,100,72,0.40);
    border-radius: var(--radius);
    min-width: 180px;
    z-index: 9999;
    padding: 6px 0;
}
.ref-reward-dropdown:hover .ref-reward-dropdown-content { display: block; }

/* ── VIP / plan priority colours ── */
.PriorityZero  { color: var(--text-sub); }
.PriorityOne   { color: var(--gold); }
.PriorityTwo   { color: rgb(192,192,192); }
.PriorityThree { color: rgb(255,215,0); }

/* ── W-Coins / ZZ-Coins ── */
.w-coins, .zz-coins {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 11px;
    color: var(--gold);
    font-weight: 600;
}

/* ── Background image wrapper (legacy, hidden via display:none above on logo-wrapper) ── */
#wrapper-bgimg { display: none; }


/* ── Character info page ── */
#character-info { width: 100%; height: auto; margin: 0 auto; padding: 0; }
#character-info ul { list-style-type: none; display: inline; margin: 0; padding: 0; }
#character-info ul li { float: left; padding: 0; margin: 0; }
#character-info tbody tr { background: none; border: none; }
#character-info tbody tr td {
    width: 50%;
    margin: 0 auto;
    padding: 8px;
    border-radius: var(--radius);
    background: rgba(1,64,46,0.15);
    border: 1px solid rgba(2,100,72,0.25);
}
#character-info tbody tr td a {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--gold);
}
#character-info div { padding-left: 10px; }

/* ── Character equipment slots (guild/char info page) ── */
#armor   { position: absolute; left: 40px;  top: 138px; width: 82px;  height: 98px; }
#shield  { position: absolute; left: 330px; top: 242px; width: 69px;  height: 129px; }
#gloves  { position: absolute; left: 271px; top: 178px; width: 85px;  height: 55px; }
#pants   { position: absolute; left: 89px;  top: 297px; width: 58px;  height: 74px; }
#boots   { position: absolute; left: 258px; top: 297px; width: 58px;  height: 74px; }
#helm    { position: absolute; left: 152px; top: 40px;  width: 80px;  height: 80px; }
#sword   { position: absolute; left: -6px;  top: 148px; width: 90px;  height: 136px; }
#wings   { position: absolute; right: -2px; top: 8px;   width: 138px; height: 102px; }
#pendant { position: absolute; right: 136px; top: 20px; width: 38px;  height: 38px; }
#ring_left  { position: absolute; left: 102px;  top: 252px; width: 29px; height: 29px; }
#ring_right { position: absolute; left: 272px; top: 252px; width: 29px; height: 29px; }

/* ── Auction / Market inventory grid ── */
.inv {
    table-layout: fixed;
    background: rgba(8,14,10,0.65);
    border: 1px solid rgba(2,100,72,0.30);
    border-radius: var(--radius);
    margin: 0;
    padding: 0;
}

/* ── Pagination (ID-based, legacy) ── */
#pagination {
    color: var(--text-sub);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 17px;
    margin: 0;
    padding: 12px 8px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
#pagination a {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(8,8,16,0.60);
    border: 1px solid rgba(2,100,72,0.30);
    color: var(--text-sub);
    font-family: var(--font-body);
    font-size: 12px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#pagination a.on {
    background: linear-gradient(180deg, rgba(1,64,46,0.55) 0%, rgba(92,40,8,0.30) 100%);
    border-color: var(--gold);
    color: var(--gold);
}
#pagination a:hover { border-color: rgba(5,150,105,0.55); color: var(--gold); }
#pagination ul { height: auto; display: flex; gap: 4px; margin: 0; padding: 0; }
#pagination li { list-style-type: none; float: left; }

/* ── Vote options / Paypal options (donate page) ── */
ul#vote-options, ul#paypal-options { list-style: none; margin: 0; padding: 0; }
ul#vote-options h5, ul#paypal-options h4 { margin: 0; padding: 0; }

#vote-options, #paypal-options {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#vote-options li, #paypal-options li {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius);
    min-height: 50px;
    border: 1px solid rgba(2,100,72,0.25);
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%),
                rgba(8,8,16,0.60);
    transition: border-color 0.2s;
}
#vote-options li:hover, #paypal-options li:hover { border-color: rgba(16,185,129,0.40); }
#vote-options li img, #paypal-options li img { width: 75px; height: 45px; object-fit: contain; }
#vote-options li button, #paypal-options li button {
    border: 1px solid rgba(2,100,72,0.50);
    border-radius: var(--radius);
    background: linear-gradient(90deg, rgba(1,64,46,0.55), rgba(92,40,8,0.35));
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 11px;
    line-height: 28px;
    padding: 0 12px;
    cursor: pointer;
    transition: background 0.2s;
}
#vote-options li button:hover, #paypal-options li button:hover {
    background: linear-gradient(90deg, rgba(1,80,58,0.65), rgba(1,64,46,0.50));
    color: var(--gold);
}
#vote-options li h5, #paypal-options li h4 {
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    border-left: 2px solid rgba(16,185,129,0.40);
    padding-left: 10px;
    margin-left: 4px;
}
#paypal-options li h3 {
    color: var(--text-sub);
    font-family: var(--font-body);
    font-size: 12px;
    margin: 0;
    padding: 0;
}

/* ── Small menu ── */
#small_menu ul { margin: 0; padding: 0; }
#small_menu li { list-style: none; }

/* ── Main table row highlight ── */
.main-tr {
    font-weight: 600;
    background: rgba(1,64,46,0.20) !important;
    color: var(--gold) !important;
}

/* ── Server online/offline status ── */
.offline { color: rgb(239,68,68); }
.online  { color: rgb(74,222,128); }

/* ── Language flag states ── */
.f16 .active    { opacity: 1; }
.f16 .nonactive { opacity: 0.45; }
.active:hover   { opacity: 1; cursor: pointer; }

/* ── Add to cart table ── */
.add_to_card {
    font-size: 12px;
    background: rgba(8,8,16,0.72);
    border: 1px solid rgba(2,100,72,0.30);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.40);
    width: 100%;
}

/* ── Item light green (rarity color) ── */
.item_light_green { color: #86efac; }

/* ── Tab row decoration ── */
.tabrow:before { display: none; }

/* ── ZZ-coins colour override ── */
.zz-coins, .zzcoins { color: #60a5fa; font-weight: 600; }


/* ================================================
   BUY ITEM MODAL (buy_item.ejs / jQuery UI dialog)
   ================================================ */

/* ── Override jQuery UI dialog chrome ── */
.ui-dialog {
    background: linear-gradient(160deg,#12101a 0%,#0d0b14 100%) !important;
    border: 1px solid rgba(2,100,72,0.50) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 0 44px rgba(1,64,46,0.42), 0 6px 36px rgba(0,0,0,0.75) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.ui-dialog .ui-dialog-titlebar {
    background: linear-gradient(180deg,rgba(1,64,46,0.58) 0%,rgba(75,30,6,0.42) 100%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(2,100,72,0.42) !important;
    border-radius: 0 !important;
    padding: 9px 16px !important;
}
.ui-dialog .ui-dialog-title {
    color: var(--gold) !important;
    font-family: var(--font-heading) !important;
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
}
.ui-dialog .ui-dialog-titlebar-close {
    background: transparent !important;
    border: 1px solid rgba(2,100,72,0.40) !important;
    border-radius: 50% !important;
    top: 50% !important;
    margin-top: -11px !important;
    right: 10px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 20px !important;
    text-align: center !important;
    padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(1,64,46,0.35) !important;
    border-color: rgba(5,150,105,0.55) !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    filter: brightness(0) invert(0.65) !important;
    margin: 3px !important;
}
.ui-dialog .ui-dialog-content {
    background: transparent !important;
    color: var(--text-main) !important;
    padding: 14px 16px !important;
}

/* ── Item buy container ── */
#item_buy {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* ── Left panel: image + item info ── */
#item_buy_left {
    width: 162px;
    min-width: 162px;
    flex-shrink: 0;
    background: linear-gradient(175deg, rgba(10,6,2,0.97) 0%, rgba(28,14,4,0.95) 100%);
    border: 1px solid rgba(16,185,129,0.28);
    border-radius: 6px;
    padding: 10px 10px 8px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(16,185,129,0.08);
}
#item_image_bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    background: radial-gradient(ellipse at center, rgba(16,185,129,0.06) 0%, rgba(0,0,0,0.55) 100%);
    border: 1px solid rgba(16,185,129,0.30);
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(16,185,129,0.15), inset 0 0 10px rgba(0,0,0,0.4);
}
#item_image_bg img {
    max-width: 88px;
    max-height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(16,185,129,0.20));
}
.item_info {
    margin-bottom: 4px;
    padding: 5px 7px;
    background: linear-gradient(135deg, rgba(16,185,129,0.07) 0%, rgba(0,0,0,0.35) 100%);
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(16,185,129,0.06);
}
.item_info:last-child { margin-bottom: 0; }
.item_info .info {
    font-size: 11px;
    font-family: var(--font-body);
    color: #d4b896;
    line-height: 1.5;
    word-break: break-word;
    white-space: normal;
    text-align: center;
}
.btimes  { color: #f0a030; font-weight: 700; }
.normalcr { color: #10b981; font-weight: 700; font-size: 11px; }
.goldcr   { color: #fbbf24; font-weight: 700; font-size: 11px; }

/* ── Right panel: options in 2-column grid ── */
#item_buy_right {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(128px, auto) minmax(100px, 1fr);
    align-items: center;
    gap: 3px 10px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    background: linear-gradient(160deg, rgba(10,5,2,0.95) 0%, rgba(22,10,3,0.92) 100%);
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
}
#item_buy_right::-webkit-scrollbar { width: 4px; }
#item_buy_right::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); }
#item_buy_right::-webkit-scrollbar-thumb { background: rgba(16,185,129,0.35); border-radius: 2px; }

.opt_title {
    font-family: var(--font-body);
    font-size: 11px;
    color: #10b981;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 6px 4px 8px;
    border-left: 2px solid rgba(16,185,129,0.55);
    background: linear-gradient(90deg, rgba(16,185,129,0.08) 0%, transparent 100%);
    border-radius: 0 3px 3px 0;
    line-height: 1.4;
    text-shadow: 0 0 8px rgba(16,185,129,0.3);
}
.opt {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-main);
    padding: 2px 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.opt select,
.opt input[type="number"],
.opt input[type="text"] {
    background: rgba(4,2,0,0.88);
    border: 1px solid rgba(16,185,129,0.28);
    color: #e0c890;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 11px;
    font-family: var(--font-body);
    max-width: 180px;
    height: 26px;
    transition: border-color 0.2s;
}
.opt select:focus,
.opt input[type="number"]:focus,
.opt input[type="text"]:focus { outline: none; border-color: rgba(16,185,129,0.65); box-shadow: 0 0 6px rgba(16,185,129,0.18); }
.opt select option { background: #0d0802; color: #e0c890; }
.opt input[type="checkbox"],
.opt input[type="radio"] {
    accent-color: var(--gold);
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.opt span[id^="credits_"] {
    color: #10b981;
    font-weight: 700;
    min-width: 20px;
    text-align: right;
    text-shadow: 0 0 6px rgba(16,185,129,0.3);
}

/* "no options available" message spans both grid cols */
#item_buy_right > .full {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 16px 8px;
    border: 1px dashed rgba(16,185,129,0.20);
    border-radius: var(--radius);
    margin: 4px 0;
}

/* harmony sub-section: spans both cols, has its own 2-col grid inside */
#harmonyoption {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(128px, auto) minmax(100px, 1fr);
    align-items: center;
    gap: 3px 10px;
    border-top: 1px solid rgba(16,185,129,0.18);
    padding-top: 6px;
    margin-top: 4px;
}

/* ── Buy buttons row ── */
#buy_buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
    border-top: 1px solid rgba(16,185,129,0.18);
    padding-top: 14px;
}
.buy_button {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 28px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e8d090;
    background: linear-gradient(180deg, rgba(70,35,5,0.85) 0%, rgba(40,18,2,0.90) 100%);
    border: 1px solid rgba(16,185,129,0.45);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(16,185,129,0.12);
    text-shadow: 0 0 8px rgba(16,185,129,0.25);
}
.buy_button:hover {
    background: linear-gradient(180deg, rgba(130,65,8,0.90) 0%, rgba(80,38,4,0.90) 100%);
    border-color: rgba(16,185,129,0.80);
    color: #fde68a;
    box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 10px rgba(16,185,129,0.18), inset 0 1px 0 rgba(16,185,129,0.20);
    text-shadow: 0 0 10px rgba(16,185,129,0.50);
}

/* ── Floating ember particles ── */
#item_form {
    position: relative;
}
.ember-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 6px;
    z-index: 0;
}
#item_buy, #buy_buttons {
    position: relative;
    z-index: 1;
}
.ember {
    position: absolute;
    bottom: -8px;
    border-radius: 50%;
    pointer-events: none;
    animation: ember-rise linear forwards;
    opacity: 0;
}
@keyframes ember-rise {
    0%   { transform: translateY(0)      translateX(0)            scale(1);   opacity: 0;   }
    8%   { opacity: 1; }
    50%  { transform: translateY(-140px) translateX(var(--drift)) scale(0.7); opacity: 0.7; }
    100% { transform: translateY(-300px) translateX(var(--drift2)) scale(0.1); opacity: 0; }
}

/* ── Payment method sub-modals ── */
#buy_windows, #add_to_card_windows {
    background: rgba(8,8,14,0.96);
    border: 1px solid rgba(2,100,72,0.45);
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 10px;
    text-align: center;
}
#buy_windows .modal-header h2,
#add_to_card_windows .modal-header h2 {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 12px;
}

/* ================================================
   BUY ITEM MODAL — CORRECTIONS (v2)
   ================================================ */

/* Fix 1 — dialog overflow was clipping select dropdowns;
   let the titlebar handle its own corner clipping instead */
.ui-dialog {
    overflow: visible !important;
}
.ui-dialog .ui-dialog-titlebar {
    overflow: hidden !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* #buy_windows / #add_to_card_windows — default hidden state is
   already set earlier in the file (display:none, no !important).
   leanModal shows them via jQuery .show(); !important here would
   permanently override that call and break the Buy button. */

/* Fix 3 — make select / number-inputs clearly look interactive:
   lighter inset panel, amber border at rest, gold on hover */
.opt select,
.opt input[type="number"],
.opt input[type="text"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background: rgba(22,17,32,0.98) !important;
    border: 1px solid rgba(2,100,72,0.65) !important;
    color: var(--text-main) !important;
    min-width: 115px !important;
    padding: 0 8px !important;
    height: 26px !important;
    cursor: pointer !important;
}
.opt select:hover,
.opt input[type="number"]:hover,
.opt input[type="text"]:hover {
    border-color: rgba(5,150,105,0.70) !important;
    background: rgba(28,22,40,0.98) !important;
}
.opt select:focus,
.opt input[type="number"]:focus,
.opt input[type="text"]:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 1px rgba(16,185,129,0.25) !important;
}
.opt select option { background: #1a1228; color: var(--text-main); }

/* Fix 4 — remove overflow from the options grid so dropdowns
   are never clipped; dialog itself is scrollable if needed */
#item_buy_right {
    overflow: visible !important;
    max-height: none !important;
}

/* Fix 5 — "Exe Price" / "Socket Price" labels that sit alone
   should span both grid columns */
#item_buy_right > .opt_title + .opt + .opt_title:last-of-type,
#item_buy_right > .opt:last-child {
    /* no extra rules needed — just ensure grid flows naturally */
}

/* Fix 6 — number inputs inside exe/socket/wing rows need a
   narrow fixed width so they don't push out of the grid cell */
.opt input[type="number"] {
    min-width: 52px !important;
    max-width: 64px !important;
    text-align: center !important;
}

/* ================================================
   BUY ITEM MODAL — CORRECTIONS v3
   ================================================ */

/* ── Fix 1: Close button alignment ──────────────
   Convert titlebar to flex so the X button sits
   naturally at the right end — no absolute drift */
.ui-dialog .ui-dialog-titlebar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px 0 16px !important; /* right pad for the X button */
    min-height: 38px !important;
}
.ui-dialog .ui-dialog-title {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-right: 8px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
    position: static !important;  /* flow inside flex, no absolute drift */
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    background: rgba(8,8,16,0.60) !important;
    border: 1px solid rgba(2,100,72,0.55) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(1,64,46,0.50) !important;
    border-color: rgba(5,150,105,0.70) !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    filter: brightness(0) invert(0.70) !important;
    margin: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* ── Fix 2: Shop item cards — fluid sizing ───────
   Remove fixed min-width that caused 4 cards to
   overflow the ~375 px container. Make item_image
   fill its cell instead of demanding a fixed 120px */
.each_item {
    min-width: 0 !important;  /* was 140px — must be removed */
    width: 100% !important;
}
.each_item .item_bg {
    height: 120px !important;   /* slightly shorter so 4 cards breathe */
}
.item_image {
    width: 100% !important;     /* fluid: fills td cell width */
    height: 80px !important;
    max-width: 100% !important;
}
.item_image img {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
}
/* ── Fix 3: Option rows — aligned wrapping ───────
   When an opt_title wraps to 2 lines the checkbox
   must align to the TOP of the row so it's clearly
   on the SAME line as the label's first word.
   We also widen the title column and add a subtle
   row separator so pairs are visually grouped. */
#item_buy_right {
    grid-template-columns: 1fr auto !important;
    /* 1fr = label gets all remaining space → less wrapping
       auto = control column only as wide as its content   */
    align-items: start !important;  /* top-align so checkbox hugs label top */
    row-gap: 0 !important;
    column-gap: 12px !important;
}
.opt_title {
    padding: 5px 4px 5px 2px !important;
    border-bottom: 1px solid rgba(2,100,72,0.10) !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
}
.opt {
    padding: 5px 4px !important;
    border-bottom: 1px solid rgba(2,100,72,0.10) !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
/* remove separator from the very last row */
#item_buy_right > .opt:last-child,
#item_buy_right > .opt_title:last-of-type {
    border-bottom: none !important;
}
/* make selects fill the auto column properly */
.opt select {
    min-width: 100px !important;
    max-width: 170px !important;
}
.opt input[type="number"] {
    min-width: 50px !important;
    max-width: 60px !important;
}

/* ================================================
   CLOSE BUTTON — DEFINITIVE FINAL FIX (v4)
   Overrides every previous titlebar / close rule.
   ================================================ */

/* 1. Titlebar: back to simple block layout,
      room on the right for the absolute button */
.ui-dialog .ui-dialog-titlebar {
    display: block !important;
    position: relative !important;
    padding: 10px 46px 10px 16px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* 2. Title text: single line, truncate if too long */
.ui-dialog .ui-dialog-title {
    display: block !important;
    flex: none !important;
    margin: 0 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 3. Close button: circle, absolutely anchored top-right */
.ui-dialog .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    /* remove all inherited / previous overrides */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    background: rgba(10,8,18,0.80) !important;
    border: 1px solid rgba(2,100,72,0.65) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    overflow: visible !important;
    line-height: 0 !important;
    font-size: 0 !important;
    /* no flex here — pseudo-elements use absolute positioning */
}
.ui-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(80,35,5,0.85) !important;
    border-color: rgba(5,150,105,0.80) !important;
}

/* 4. Kill every child element jQuery UI injects
      (ui-icon-closethick span, button text, etc.) */
.ui-dialog .ui-dialog-titlebar-close * {
    display: none !important;
}

/* 5. Draw the × with two rotated bars via pseudo-elements */
.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 11px !important;
    height: 1.5px !important;
    background: rgba(220,185,120,0.92) !important;
    border-radius: 1px !important;
}
.ui-dialog .ui-dialog-titlebar-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}
.ui-dialog .ui-dialog-titlebar-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover::before,
.ui-dialog .ui-dialog-titlebar-close:hover::after {
    background: var(--gold) !important;
}

/* ══════════════════════════════════════════════
   SERVER STATUS — LOAD BARS
   ══════════════════════════════════════════════ */
.srv-status-wrap { display: flex; flex-direction: column; gap: 14px; }

.srv-realm { display: flex; flex-direction: column; gap: 5px; }

.srv-realm-header {
    display: flex;
    align-items: center;
    gap: 7px;
}
.srv-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.srv-dot--main {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,0.8);
    animation: srv-pulse-green 1.4s ease-in-out infinite;
}
.srv-dot--vip {
    background: #60a5fa;
    box-shadow: 0 0 6px rgba(96,165,250,0.8);
    animation: srv-pulse-blue 1.4s ease-in-out infinite;
}
.srv-dot--off {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239,68,68,0.7);
    animation: srv-pulse-red 1.4s ease-in-out infinite;
}
@keyframes srv-pulse-green {
    0%, 100% { box-shadow: 0 0 4px rgba(74,222,128,0.6); opacity: 1; }
    50%       { box-shadow: 0 0 10px rgba(74,222,128,1); opacity: 0.6; }
}
@keyframes srv-pulse-blue {
    0%, 100% { box-shadow: 0 0 4px rgba(96,165,250,0.6); opacity: 1; }
    50%       { box-shadow: 0 0 10px rgba(96,165,250,1); opacity: 0.6; }
}
@keyframes srv-pulse-red {
    0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,0.6); opacity: 1; }
    50%       { box-shadow: 0 0 10px rgba(239,68,68,1); opacity: 0.6; }
}

.srv-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.80);
    text-shadow: 0 0 10px rgba(16,185,129,0.30), 0 0 3px rgba(16,185,129,0.12);
}
.srv-tag {
    font-family: var(--font-heading);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
}
.srv-tag--rate  { background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.35); color: #fb923c; }
.srv-tag--boost { background: rgba(167,139,250,0.15); border: 1px solid rgba(167,139,250,0.35); color: #c4b5fd; }

.srv-count {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: var(--orange-400);
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(251,146,60,0.5);
}

.srv-sep {
    color: rgba(16,185,129,0.35);
    font-size: 11px;
    margin-left: auto;
}

/* ── Load bar ── */
.srv-bar-track {
    position: relative;
    height: 14px;
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.srv-bar-fill {
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg,
        #22c55e 0%,
        #84cc16 20%,
        #eab308 45%,
        #f97316 70%,
        #ef4444 100%
    );
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(234,179,8,0.3);
    position: relative;
}
/* subtle gloss sheen */
.srv-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 60%);
}
/* repeating tick marks every ~10% */
.srv-bar-markers {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent calc(10% - 1px),
        rgba(0,0,0,0.30) calc(10% - 1px),
        rgba(0,0,0,0.30) 10%
    );
    pointer-events: none;
    border-radius: 7px;
}
.srv-bar-markers span { display: none; }

/* ── Online Players CTA row ── */
.srv-cta-row {
    display: flex;
    gap: 8px;
    padding: 12px 14px 6px;
}
.srv-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.srv-cta i { font-size: 13px; }
.srv-cta--vote {
    background: linear-gradient(135deg, rgba(249,115,22,0.18) 0%, rgba(234,88,12,0.10) 100%);
    border: 1px solid rgba(249,115,22,0.40);
    color: #fb923c;
}
.srv-cta--vote:hover {
    background: linear-gradient(135deg, rgba(249,115,22,0.30) 0%, rgba(234,88,12,0.20) 100%);
    border-color: rgba(249,115,22,0.70);
    color: #fdba74;
    box-shadow: 0 0 12px rgba(249,115,22,0.25);
    text-decoration: none;
    transform: translateY(-1px);
}
.srv-cta--discord {
    background: linear-gradient(135deg, rgba(88,101,242,0.18) 0%, rgba(71,82,196,0.10) 100%);
    border: 1px solid rgba(88,101,242,0.40);
    color: #a5b4fc;
}
.srv-cta--discord:hover {
    background: linear-gradient(135deg, rgba(88,101,242,0.30) 0%, rgba(71,82,196,0.20) 100%);
    border-color: rgba(88,101,242,0.70);
    color: #c7d2fe;
    box-shadow: 0 0 12px rgba(88,101,242,0.25);
    text-decoration: none;
    transform: translateY(-1px);
}

.srv-bar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.srv-load-label {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.srv-load-low    { color: #4ade80; }
.srv-load-medium { color: #eab308; }
.srv-load-high   { color: #f97316; }
.srv-load-full   { color: #ef4444; }

.srv-pct {
    font-family: var(--font-heading);
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════
   CHARACTER OPTIONS — PREMIUM CARD GRID
   ══════════════════════════════════════════════ */
.char-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 0;
}

/* ── Base card ── */
.char-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    min-height: 90px;
    background: linear-gradient(150deg, rgba(22,15,4,0.82) 0%, rgba(14,10,3,0.92) 100%);
    border: 1px solid rgba(180,140,60,0.15);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s, background 0.25s;
}
.char-option-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-accent, rgba(16,185,129,0.5)), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.char-option-card:hover {
    border-color: var(--card-accent, rgba(16,185,129,0.45));
    box-shadow: 0 6px 28px var(--card-glow, rgba(160,120,20,0.2));
    transform: translateY(-2px);
    background: linear-gradient(150deg, rgba(32,22,6,0.9) 0%, rgba(20,14,4,0.97) 100%);
    text-decoration: none;
    color: inherit;
}
.char-option-card:hover::before { opacity: 1; }
.char-option-card--full { grid-column: span 2; }

/* ── Colour variants ── */
.char-option-card--gold  { --card-accent: rgba(249,115,22,0.55);  --card-glow: rgba(234,88,12,0.22);   --card-icon-bg: rgba(249,115,22,0.12);  --card-icon-color: #fb923c; --card-title: #f97316; }
.char-option-card--blue  { --card-accent: rgba(59,130,246,0.55);  --card-glow: rgba(37,99,235,0.22);   --card-icon-bg: rgba(59,130,246,0.12);  --card-icon-color: #60a5fa; --card-title: #60a5fa; }
.char-option-card--cyan  { --card-accent: rgba(34,211,238,0.55);  --card-glow: rgba(6,182,212,0.22);   --card-icon-bg: rgba(34,211,238,0.12);  --card-icon-color: #22d3ee; --card-title: #22d3ee; }
.char-option-card--green { --card-accent: rgba(74,222,128,0.55);  --card-glow: rgba(34,197,94,0.22);   --card-icon-bg: rgba(74,222,128,0.12);  --card-icon-color: #4ade80; --card-title: #4ade80; }
.char-option-card--purple{ --card-accent: rgba(167,139,250,0.55); --card-glow: rgba(139,92,246,0.22);  --card-icon-bg: rgba(167,139,250,0.12); --card-icon-color: #a78bfa; --card-title: #a78bfa; }
.char-option-card--orange{ --card-accent: rgba(251,146,60,0.55);  --card-glow: rgba(234,88,12,0.22);   --card-icon-bg: rgba(251,146,60,0.12);  --card-icon-color: #fb923c; --card-title: #fb923c; }
.char-option-card--danger{ --card-accent: rgba(239,68,68,0.5);    --card-glow: rgba(185,28,28,0.2);    --card-icon-bg: rgba(239,68,68,0.12);   --card-icon-color: #f87171; --card-title: #f87171;
    border-color: rgba(160,55,55,0.2);
    background: linear-gradient(150deg, rgba(28,10,10,0.82) 0%, rgba(16,6,6,0.92) 100%);
}

/* ── Icon badge ── */
.char-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--card-icon-bg, rgba(16,185,129,0.12));
    color: var(--card-icon-color, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.char-option-card:hover .char-option-icon { transform: scale(1.1); }

/* ── Title ── */
.char-option-title {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--card-title, #10b981);
    margin: 0;
    text-align: center;
    transition: color 0.2s;
    line-height: 1.4;
}

/* ── Description ── */
.char-option-desc {
    font-size: 9px;
    color: rgba(255,255,255,0.75);
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

/* ── Arrow ── */
.char-option-arrow { display: none; }

@media (max-width: 480px) {
    .char-options-grid { grid-template-columns: 1fr; }
    .char-option-card--full { grid-column: span 1; }
}

/* ───────────────────────────────────────────────
   SITE BANNER  – outside #page-wrapper, centred
   Sits between the nav and the content panel.
   Width: 1000 px. Height: natural 354 px × 0.85 = 301 px.
─────────────────────────────────────────────── */
#site-banner {
    max-width: var(--container);   /* 1000 px – matches the panel */
    margin: 0 auto 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;            /* needed to contain ember particles */
    overflow: hidden;              /* clip embers within rounded corners */
}

/* ── Banner ember particles ── */
.banner-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.be {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    opacity: 0;
    animation: ember-float 4s ease-in infinite;
}

/* Varied positions, sizes, delays and colours across the banner */
.be1  { left:  5%; width: 3px; height: 3px; background: var(--amber-400);  animation-duration: 3.6s; animation-delay: 0.0s; }
.be2  { left: 12%; width: 2px; height: 2px; background: var(--orange-500); animation-duration: 4.8s; animation-delay: 1.2s; }
.be3  { left: 20%; width: 4px; height: 4px; background: var(--amber-300);  animation-duration: 3.2s; animation-delay: 0.5s; }
.be4  { left: 30%; width: 2px; height: 2px; background: var(--amber-500);  animation-duration: 5.0s; animation-delay: 2.1s; }
.be5  { left: 38%; width: 3px; height: 3px; background: var(--orange-400); animation-duration: 3.8s; animation-delay: 0.9s; }
.be6  { left: 48%; width: 2px; height: 2px; background: var(--amber-400);  animation-duration: 4.4s; animation-delay: 1.7s; }
.be7  { left: 55%; width: 4px; height: 4px; background: var(--amber-300);  animation-duration: 3.5s; animation-delay: 0.3s; }
.be8  { left: 63%; width: 2px; height: 2px; background: var(--orange-500); animation-duration: 4.9s; animation-delay: 2.6s; }
.be9  { left: 72%; width: 3px; height: 3px; background: var(--amber-400);  animation-duration: 3.3s; animation-delay: 1.4s; }
.be10 { left: 80%; width: 2px; height: 2px; background: var(--amber-500);  animation-duration: 4.1s; animation-delay: 0.7s; }
.be11 { left: 88%; width: 3px; height: 3px; background: var(--orange-400); animation-duration: 3.9s; animation-delay: 2.0s; }
.be12 { left: 95%; width: 2px; height: 2px; background: var(--amber-300);  animation-duration: 4.6s; animation-delay: 1.1s; }

#site-banner-img {
    display: block;
    width: 100%;
    height: auto;                  /* natural proportions – full image, no crop */
    border-radius: 8px;
    border: 1px solid rgba(16,185,129,0.30);
    border-top-color: rgba(16,185,129,0.55);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.65),
        0 0 24px rgba(16,185,129,0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* --- Spin Wheel --- */
.spin-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
}
.spin-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(8,14,10,0.82);
    border: 1px solid rgba(16,185,129,0.22);
    border-top: 1px solid rgba(249,115,22,0.4);
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.9), 0 12px 40px rgba(0,0,0,0.8);
    padding: 28px 28px 24px;
    width: fit-content;
    max-width: 560px;
}
.spin-heading {
    font-size: 2rem;
    color: var(--gold-bright);
    letter-spacing: 3px;
    margin-bottom: 6px;
    text-align: center;
}
.spin-subheading {
    color: var(--text-muted);
    margin-bottom: 10px;
    text-align: center;
    font-size: 0.95rem;
}
.spin-grid {
    display: grid;
    grid-template-columns: repeat(4, 120px);
    gap: 12px;
    width: fit-content;
    margin: 20px auto;
}
.spin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 10px;
    background: rgba(8,14,10,0.75);
    backdrop-filter: blur(6px);
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.spin-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.spin-card img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 0 5px rgba(16,185,129,0.3));
    transition: filter 0.15s;
}
.spin-card-name {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}
.spin-card.active {
    border-color: var(--orange-400);
    background: rgba(249,115,22,0.12);
    box-shadow: 0 0 22px rgba(251,146,60,0.65), inset 0 0 12px rgba(251,146,60,0.08);
    transform: scale(1.08);
}
.spin-card.active img {
    filter: drop-shadow(0 0 10px rgba(251,146,60,0.8));
}
.spin-card.winner {
    border-color: var(--gold-bright);
    background: rgba(16,185,129,0.12);
    box-shadow: 0 0 35px rgba(52,211,153,0.8), inset 0 0 18px rgba(52,211,153,0.10);
    transform: scale(1.14);
    animation: spin-winner-pulse 0.8s ease forwards;
}
.spin-card.winner img {
    filter: drop-shadow(0 0 14px rgba(52,211,153,0.9));
}
@keyframes spin-winner-pulse {
    0%   { transform: scale(1.06); box-shadow: 0 0 20px rgba(251,146,60,0.5); }
    40%  { transform: scale(1.18); box-shadow: 0 0 50px rgba(52,211,153,1.0), 0 0 80px rgba(16,185,129,0.5); }
    70%  { transform: scale(1.12); box-shadow: 0 0 35px rgba(52,211,153,0.85); }
    100% { transform: scale(1.14); box-shadow: 0 0 35px rgba(52,211,153,0.8); }
}
.spin-result {
    text-align: center;
    padding: 30px;
    margin-top: 20px;
}
.spin-result-prize {
    font-size: 1.4rem;
    color: var(--orange-400);
    margin: 15px 0;
    letter-spacing: 1px;
}
.spin-result-notice {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 14px auto 0;
    max-width: 460px;
}
.spin-result-notice a {
    color: var(--gold);
    text-decoration: underline;
}
.spin-result img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}
#spinBtn {
    min-width: 200px;
    font-size: 14px;
    letter-spacing: 3px;
    margin-top: 10px;
}
#spinBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (max-width: 600px) {
    .spin-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .spin-card {
        width: 130px;
        height: 130px;
    }
}

/* ── WELCOME SPIN MODAL ── */
#spinModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#spinModal.is-open { display: flex; }
.spin-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}
.spin-modal-close:hover { color: var(--gold-bright); }
#smBtn { min-width: 200px; font-size: 14px; letter-spacing: 3px; margin-top: 10px; }
#smBtn:disabled { opacity: 0.5; cursor: not-allowed; }