/* ===================================================================
   EPIC LAYOUT - MeridianOT
   Dark fantasy theme with glass, glow, particles and Meridian artwork
   =================================================================== */

/* ---------- RESET + BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: #e8dcc0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    background-color: #05070d;
    background-image: url('../background-artwork.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 54px;
}

:root {
    --gold:          #daa520;
    --gold-bright:   #ffd700;
    --gold-dark:     #8b6914;
    --crimson:       #b12d2d;
    --crimson-glow:  #ff4d4d;
    --bg-0:          #05070d;
    --bg-1:          #0b1020;
    --bg-2:          #11172b;
    --panel:         rgba(18, 22, 40, 0.78);
    --panel-border:  rgba(212, 175, 55, 0.35);
    --panel-glow:    rgba(212, 175, 55, 0.12);
    --text:          #e8dcc0;
    --text-dim:      #9a8f73;
    --success:       #4bd66b;
    --danger:        #ff4d4d;
}

a { color: var(--gold-bright); text-decoration: none; transition: color .2s, text-shadow .2s; }
a:hover { color: #fff; text-shadow: 0 0 8px var(--gold); }

img { max-width: 100%; display: block; }

/* Light tint overlay for readability without hiding the image */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: -2;
    background:
        /* subtle top/bottom darkening for topbar & footer contrast */
        linear-gradient(180deg, rgba(5,7,13,0.35) 0%, rgba(5,7,13,0.05) 25%, rgba(5,7,13,0.10) 70%, rgba(5,7,13,0.45) 100%),
        /* colored accents to match theme */
        radial-gradient(ellipse at 20% 8%,  rgba(80, 40, 120, 0.15), transparent 60%),
        radial-gradient(ellipse at 85% 92%, rgba(180, 60, 40, 0.12), transparent 60%);
    pointer-events: none;
}

/* Soft noise texture for film/grain feel */
.epic-noise-layer {
    position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.83 0 0 0 0 0.69 0 0 0 0 0.22 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: .35;
    mix-blend-mode: overlay;
}

#particles-canvas {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

/* ---------- CENTERED LOGO BANNER ---------- */
.epic-logo-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px 10px;
    position: relative;
    z-index: 2;
}
.epic-logo-banner a {
    display: inline-block;
    transition: transform .25s ease, filter .25s ease;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(255,180,43,0.25));
}
.epic-logo-banner a:hover {
    transform: scale(1.04) translateY(-2px);
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(255,180,43,0.5));
}
.epic-logo-banner img {
    max-width: 420px;
    width: 100%;
    height: auto;
    display: block;
    animation: logoFloat 4.5s ease-in-out infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ---------- LAYOUT GRID ---------- */
.epic-shell {
    display: grid;
    grid-template-columns: 208px 1fr 224px;
    gap: 22px;
    max-width: 1360px;
    margin: 20px auto 0;
    padding: 0 max(22px, 90px) 60px;
}
.epic-main { min-width: 0; }
.epic-sidebar { min-width: 0; }

@media (max-width: 1100px) {
    .epic-shell { 
        grid-template-columns: 1fr;
        padding: 0 max(22px, 40px) 60px;
    }
    .epic-topbar-inner {
        padding: 10px max(22px, 40px);
    }
    .epic-sidebar { order: 2; }
    .epic-main    { order: 1; }
}

@media (max-width: 768px) {
    .epic-logo-banner img { max-width: 280px; }
    .epic-logo-banner { padding: 20px 15px 6px; }
    .epic-shell { 
        padding: 0 22px 60px;
    }
    .epic-topbar-inner {
        padding: 10px 22px;
    }
}

/* ---------- TOP BAR ---------- */
.epic-topbar {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 40;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    background: linear-gradient(180deg, rgba(5,7,13,0.92), rgba(11,16,32,0.75));
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 6px 30px rgba(0,0,0,0.6);
}
.epic-topbar-inner {
    max-width: 1360px; margin: 0 auto;
    display: flex; align-items: center; gap: 18px;
    padding: 10px max(22px, 90px);
}
@media (max-width: 1300px) {
    .epic-topbar-inner { gap: 10px; padding: 8px 24px; }
    .epic-topnav a { padding: 7px 10px; font-size: 12px; gap: 4px; }
    .epic-stats { gap: 4px; }
    .epic-stats .btn-epic { padding: 7px 10px; font-size: 12px; }
    .epic-stat { padding: 5px 9px; font-size: 12px; }
}
.epic-logo {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    font-family: 'Cinzel', 'Trajan', serif;
    font-weight: 900; letter-spacing: 4px;
    font-size: 26px;
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(255, 216, 107, 0.5), 0 2px 0 #000;
    text-decoration: none;
}
.epic-logo .mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold) 0%, #6b4c1a 70%);
    box-shadow: 0 0 16px var(--gold), inset 0 0 8px rgba(0,0,0,0.5);
    color: #1a1206; font-size: 18px;
    animation: crestPulse 3.2s ease-in-out infinite;
}
@keyframes crestPulse {
    0%,100% { box-shadow: 0 0 16px var(--gold), inset 0 0 8px rgba(0,0,0,0.5); }
    50%     { box-shadow: 0 0 28px var(--gold-bright), inset 0 0 8px rgba(0,0,0,0.5); }
}
.epic-logo .minilogo-topbar {
    height: 32px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.epic-topnav { display: flex; gap: 4px; flex: 1; flex-wrap: nowrap; min-width: 0; }
.epic-topnav a {
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .2s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.epic-topnav a:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--panel-border);
    color: var(--gold-bright);
    text-shadow: 0 0 8px var(--gold);
    transform: translateY(-1px);
}
.epic-topnav a i { font-size: 14px; }

.epic-stats {
    display: flex; gap: 6px; align-items: center;
    flex-shrink: 0;
}
.epic-stats .btn-epic {
    padding: 8px 14px;
    font-size: 13px;
}
.epic-stat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid var(--panel-border);
    font-size: 13px; color: var(--gold-bright);
}
.epic-stat .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .55; transform: scale(1.3); }
}
@keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
a.epic-stat { text-decoration: none; cursor: pointer; transition: all .15s ease; }
a.epic-stat:hover {
    border-color: var(--gold);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(218,165,32,0.25);
}
.epic-stat-cast i { color: var(--gold); }
.epic-stat-cast.is-live {
    border-color: rgba(229,62,62,0.55);
    color: #ffb4b4;
    background: linear-gradient(180deg, rgba(229,62,62,0.18), rgba(0,0,0,0.35));
}
.epic-stat-cast.is-live i {
    color: #ff5b5b;
    animation: livePulse 1.4s ease-in-out infinite;
}
.epic-stat-cast.is-live:hover { border-color: #ff5b5b; box-shadow: 0 4px 14px rgba(229,62,62,0.35); }

/* ---------- IMAGE SLIDER ---------- */
.epic-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    max-height: 340px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,216,107,0.08);
    margin: 12px 0 20px;
    background: #0a0d18;
}
.epic-slider::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 6;
    background: linear-gradient(90deg, #f0a020, #ff6ba0, #b26bff, #4cc2ff, #4bd6a0, #f0a020);
    background-size: 300% 100%;
    animation: rainbowFlow 8s linear infinite;
}
.slider-track {
    position: relative;
    width: 100%; height: 100%;
}
.slider-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(1.12) translateX(0);
    transition: opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1s ease;
    filter: blur(6px) brightness(0.85);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.slider-slide.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    filter: blur(0) brightness(1);
    z-index: 3;
}
/* Incoming direction offset (before becoming active) */
.epic-slider.dir-next .slider-slide:not(.active):not(.leaving) { transform: scale(1.12) translateX(8%); }
.epic-slider.dir-prev .slider-slide:not(.active):not(.leaving) { transform: scale(1.12) translateX(-8%); }
/* Leaving slide animation */
.slider-slide.leaving {
    opacity: 0;
    z-index: 2;
    filter: blur(4px) brightness(0.6);
    animation: none !important;
}
.epic-slider.dir-next .slider-slide.leaving { transform: scale(1.04) translateX(-8%); }
.epic-slider.dir-prev .slider-slide.leaving { transform: scale(1.04) translateX(8%); }

a.slider-slide { cursor: pointer; text-decoration: none; }
.slider-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}
a.slider-slide.active:hover img { transform: scale(1.03); }

/* Subtle Ken Burns zoom while slide is active */
@keyframes slideKenBurns {
    0%   { transform: scale(1.0); }
    100% { transform: scale(1.06); }
}
.slider-slide.active img { animation: slideKenBurns 7s ease-out forwards; }

/* Epic shadow vignette over image */
.slider-slide::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.85) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.92) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Extra vignette layer — animated golden frame glow */
.slider-vignette {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.75),
        inset 0 0 120px rgba(0,0,0,0.45);
}
.slider-slide.active .slider-vignette::before {
    content: '';
    position: absolute; inset: 10px;
    border: 1px solid rgba(255,216,107,0.35);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(255,180,43,0.25);
    animation: sliderFrameGlow 4s ease-in-out infinite;
}
@keyframes sliderFrameGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(255,180,43,0.2); border-color: rgba(255,216,107,0.25); }
    50%      { box-shadow: 0 0 60px rgba(255,180,43,0.45); border-color: rgba(255,216,107,0.55); }
}

/* --- Slide content (epic text) --- */
.slider-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 0 40px;
    max-width: 780px;
    pointer-events: none;
}
.slider-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #ffd700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 0 12px rgba(255,180,43,0.5);
    margin-bottom: 10px;
}
.slider-eyebrow i { font-size: 12px; }
.slider-content h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(26px, 4.2vw, 46px);
    color: #fff;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 0 10px;
    text-shadow:
        0 2px 12px rgba(0,0,0,0.9),
        0 4px 20px rgba(0,0,0,0.75),
        0 0 30px rgba(255,216,107,0.35);
    font-weight: 700;
}
.slider-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 14px;
    max-width: 280px;
}
.slider-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,216,107,0.9), transparent);
    box-shadow: 0 0 6px rgba(255,180,43,0.6);
}
.slider-divider i {
    color: #ffd700;
    font-size: 12px;
    filter: drop-shadow(0 0 8px rgba(255,180,43,0.7));
}
.slider-content p {
    color: #e8dcc0;
    font-size: clamp(13px, 1.4vw, 16px);
    margin: 0 0 18px;
    letter-spacing: 1.5px;
    font-style: italic;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 4px 14px rgba(0,0,0,0.6);
    line-height: 1.5;
}
.slider-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff7d6;
    background: linear-gradient(180deg, rgba(255,180,43,0.22), rgba(120,80,20,0.3));
    border: 1px solid rgba(255,216,107,0.55);
    border-radius: 6px;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 0 22px rgba(255,180,43,0.25);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    transition: transform .25s, box-shadow .25s, background .25s;
}
.slider-cta i { font-size: 10px; }
a.slider-slide:hover .slider-cta {
    background: linear-gradient(180deg, rgba(255,200,80,0.42), rgba(160,100,30,0.45));
    border-color: #ffd700;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 40px rgba(255,180,43,0.55);
    transform: translateY(-2px);
}

/* Staggered reveal animations — trigger on the active slide */
.slider-slide.active .slider-eyebrow { animation: slideTextReveal .8s .25s cubic-bezier(.2,.7,.2,1) forwards; }
.slider-slide.active .slider-content h2 { animation: slideTextReveal 1s .45s cubic-bezier(.2,.7,.2,1) forwards; }
.slider-slide.active .slider-divider  { animation: slideDividerReveal .9s .7s cubic-bezier(.2,.7,.2,1) forwards; }
.slider-slide.active .slider-content p { animation: slideTextReveal .9s .85s cubic-bezier(.2,.7,.2,1) forwards; }
.slider-slide.active .slider-cta { animation: slideCtaReveal .8s 1.05s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes slideTextReveal {
    0%   { opacity: 0; transform: translateY(20px); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes slideDividerReveal {
    0%   { opacity: 0; transform: scaleX(0.3); }
    100% { opacity: 1; transform: scaleX(1); }
}
@keyframes slideCtaReveal {
    0%   { opacity: 0; transform: translateY(14px) scale(.9); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Arrows */
.slider-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.5);
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    z-index: 5;
    transition: background .2s, transform .2s, border-color .2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.slider-arrow:hover {
    background: rgba(255,180,43,0.45);
    border-color: rgba(255,216,107,0.7);
    transform: translateY(-50%) scale(1.08);
}
.slider-arrow.prev { left: 14px; }
.slider-arrow.next { right: 14px; }

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 14px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 8px;
    z-index: 5;
}
.slider-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: all .2s;
}
.slider-dot:hover { background: rgba(255,216,107,0.6); }
.slider-dot.active {
    width: 26px;
    border-radius: 5px;
    background: linear-gradient(90deg, #f0a020, #ff6ba0);
    border-color: transparent;
    box-shadow: 0 0 10px rgba(255,180,43,0.6);
}

/* ---------- HERO BANNER (kept for backward compat, unused) ---------- */
.epic-hero {
    position: relative;
    margin: 22px auto 0;
    max-width: 1500px;
    height: 260px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 0 40px rgba(0,0,0,0.7), inset 0 0 80px rgba(212, 175, 55, 0.05);
}
.epic-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, 0.25), transparent 60%),
        linear-gradient(135deg, #1a0e2e 0%, #3a1419 50%, #1a0e2e 100%);
    animation: heroShift 18s ease-in-out infinite alternate;
}
@keyframes heroShift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(25deg); } }
.epic-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(218,165,32,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(218,165,32,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}
.epic-hero-content {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
    padding: 0 30px;
}
.epic-hero h1 {
    font-family: 'Cinzel', serif;
    margin: 0; font-size: clamp(32px, 5vw, 60px);
    color: #fff;
    letter-spacing: 6px;
    text-shadow:
        0 0 20px rgba(255,216,107,0.7),
        0 0 40px rgba(218,165,32,0.5),
        0 4px 0 #000;
    animation: heroGlow 3s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    from { text-shadow: 0 0 20px rgba(255,216,107,0.7), 0 0 40px rgba(218,165,32,0.5), 0 4px 0 #000; }
    to   { text-shadow: 0 0 30px rgba(255,216,107,1.0), 0 0 70px rgba(218,165,32,0.8), 0 4px 0 #000; }
}
.epic-hero p {
    margin: 12px 0 0; font-size: 16px; letter-spacing: 2px;
    color: var(--text-dim); text-transform: uppercase;
}
.epic-hero .swords {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 90px; color: rgba(218,165,32,0.15);
}
.epic-hero .swords.left  { left: 8%; animation: float 4s ease-in-out infinite; }
.epic-hero .swords.right { right: 8%; animation: float 4s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{ transform: translateY(-50%); } 50%{ transform: translateY(calc(-50% - 10px)); } }

/* ---------- PANELS / CARDS ---------- */
.panel {
    background: rgba(20,20,20,0.92);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.panel:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(218,165,32,0.12);
}
.panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(218,165,32,0.10), transparent);
    border-bottom: 1px solid var(--panel-border);
    font-family: 'Cinzel', serif;
    font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-bright);
}
.panel-head i { font-size: 14px; }
.panel-body { padding: 7px 0px; font-size: 14px; line-height: 1.55; }

/* shimmer on panel top */
.panel::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    opacity: .6;
}

/* ---------- SIDEBAR MENU ---------- */
.epic-menu { padding: 8px 0; }
.epic-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    color: var(--text);
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    position: relative;
}
.epic-menu a i { width: 18px; text-align: center; color: var(--gold); font-size: 14px; }
.epic-menu a:hover {
    background: linear-gradient(90deg, rgba(218,165,32,0.14), transparent);
    border-left-color: var(--gold);
    color: var(--gold-bright);
}
.epic-menu a.active {
    background: linear-gradient(90deg, rgba(218,165,32,0.20), transparent);
    border-left-color: var(--gold-bright);
    color: #fff;
}
.epic-menu .group {
    padding: 10px 16px 6px;
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
}

/* ---------- BUTTONS ---------- */
.btn-epic {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    font-size: 13px;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(218,165,32,0.08));
    color: var(--gold-bright);
    cursor: pointer;
    position: relative; overflow: hidden;
    transition: all .2s;
    text-decoration: none;
}
.btn-epic:hover {
    background: linear-gradient(180deg, rgba(218,165,32,0.55), rgba(218,165,32,0.20));
    color: #fff;
    border-color: var(--gold-bright);
    box-shadow: 0 6px 18px rgba(218,165,32,0.35);
}
.btn-epic::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.45), transparent 60%);
    transform: translateX(-100%);
    transition: transform .7s;
}
.btn-epic:hover::before { transform: translateX(100%); }

.btn-epic.danger {
    border-color: #7a1a1a;
    background: linear-gradient(180deg, rgba(255,77,77,0.2), rgba(176,45,45,0.1));
    color: #ff9e9e;
}
.btn-epic.danger:hover {
    background: linear-gradient(180deg, rgba(255,77,77,0.5), rgba(176,45,45,0.25));
    color: #fff;
    border-color: var(--crimson-glow);
    box-shadow: 0 6px 18px rgba(255, 77, 77, 0.4);
}

/* Account button - darker golden/yellow-orange */
.btn-epic.account {
    border-color: #b86b0b;
    background: linear-gradient(180deg, rgba(218,165,32,0.35), rgba(184,134,11,0.15));
    color: #ffd966;
}
.btn-epic.account:hover {
    background: linear-gradient(180deg, rgba(218,165,32,0.6), rgba(184,134,11,0.3));
    color: #fff;
    border-color: #daa520;
    box-shadow: 0 6px 18px rgba(218, 165, 32, 0.4);
}

/* Logout button - darker red */
.btn-epic.logout {
    border-color: #8b0000;
    background: linear-gradient(180deg, rgba(139,0,0,0.4), rgba(100,0,0,0.2));
    color: #ff6b6b;
}
.btn-epic.logout:hover {
    background: linear-gradient(180deg, rgba(139,0,0,0.65), rgba(100,0,0,0.35));
    color: #fff;
    border-color: #dc143c;
    box-shadow: 0 6px 18px rgba(139, 0, 0, 0.5);
}

.btn-epic.block { display: flex; width: 100%; }

/* ---------- WIDGETS ---------- */
.widget-online {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(75,214,107,0.10), transparent);
    border-top: 1px solid rgba(75,214,107,0.3);
    font-size: 13px;
}
.widget-online .val { font-size: 22px; font-weight: 800; color: var(--success); text-shadow: 0 0 10px rgba(75,214,107,0.6); }

.widget-boosted { padding: 14px 16px; text-align: center; }
.widget-boosted .img-wrap {
    width: 100px; height: 100px; margin: 0 auto 8px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218,165,32,0.25), rgba(218,165,32,0) 70%);
    /* animation: float 4s ease-in-out infinite; */
}
.widget-boosted .name {
    font-family: 'Cinzel', serif; font-size: 16px; color: var(--gold-bright);
    letter-spacing: 1px;
}
.widget-boosted .tag {
    display: inline-block; margin-top: 6px;
    padding: 3px 10px; border-radius: 12px;
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    background: rgba(218,165,32,0.15); color: var(--gold-bright);
    border: 1px solid var(--panel-border);
}

.widget-cta {
    padding: 18px 16px;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(177, 45, 45, 0.25), transparent 60%);
}
.widget-cta h4 {
    margin: 0 0 6px; font-family: 'Cinzel', serif;
    color: #fff; letter-spacing: 2px; font-size: 18px;
}
.widget-cta p { margin: 0 0 14px; font-size: 12px; color: var(--text-dim); }

.widget-discord {
    padding: 16px; text-align: center;
    background: linear-gradient(180deg, rgba(88,101,242,0.14), transparent);
    border-top: 1px solid rgba(88,101,242,0.4);
}
.widget-discord h4 { margin: 0 0 8px; color: #c9cffc; font-family: 'Cinzel', serif; letter-spacing: 1px; }
.btn-discord {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 8px;
    background: #5865F2; color: #fff;
    font-weight: 600; font-size: 13px;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-discord:hover { background: #4752c4; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(88,101,242,0.5); }

/* ---------- NEWS LIST ---------- */
.news-item {
    display: grid; grid-template-columns: 46px 1fr auto; gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px dashed rgba(218,165,32,0.18);
    transition: background .18s;
    align-items: center;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: rgba(218,165,32,0.06); }
.news-item .icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(218,165,32,0.05));
    border: 1px solid var(--panel-border);
    color: var(--gold-bright);
    font-size: 18px;
}
.news-item .title { color: #fff; font-weight: 600; font-size: 14px; }
.news-item .meta  { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.news-item .date  { color: var(--gold); font-size: 12px; white-space: nowrap; }

/* ---------- FORMS ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
}

/* ---------- SIDEBAR TOP ARTWORK (sub-logo above login box) ---------- */
/* Overflows upward out of flow so login stays at the original top position */
.epic-sidebar.left { position: relative; }
.sidebar-top-artwork {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 140%;          /* bigger than the sidebar width */
    transform: translateX(-50%);
    margin-bottom: -22px; /* overlap the login box from above */
    line-height: 0;
    text-align: center;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}
.sidebar-top-artwork img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

/* ---------- PAGE TITLE BANNER (above main content) ---------- */
.page-title-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: calc(100% + 40px);
    margin-left: -17px;
    margin-right: -20px;
    height: 64px;
    margin-top: 4px;
    margin-bottom: 0;
    padding: 0 80px;
    background: url('../images/page-title-bg.png') center center / contain no-repeat;
    background-size: 100% 65%;
    color: #fff7d6;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow:
        0 0 12px rgba(218,165,32,0.8),
        0 0 24px rgba(218,165,32,0.4),
        0 2px 4px rgba(0,0,0,0.9);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    box-sizing: border-box;
    z-index: 1;
}
.page-title-banner::before,
.page-title-banner::after {
    content: '\2726';
    font-size: 10px;
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(218,165,32,0.9);
    opacity: 0.9;
}
.page-title-banner i {
    font-size: 15px;
    color: var(--gold-bright);
    filter: drop-shadow(0 0 8px rgba(218,165,32,0.9));
    animation: titleIconPulse 2.5s ease-in-out infinite;
}
.page-title-banner span {
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes titleIconPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(218,165,32,0.6)); }
    50% { filter: drop-shadow(0 0 14px rgba(218,165,32,1)); }
}
/* Collapse the gap between the banner and the content panel below */
.page-title-banner + .panel { margin-top: -2px; }

/* Hide the duplicate title that Myaac pages output inside the body */
.epic-main .panel-body .HeaderPagesText,
.epic-main .panel-body .BoxTitleText,
.epic-main .panel-body > .BoxLogo,
.epic-main .panel-body > h1:first-child,
.epic-main .panel-body > .title:first-child {
    display: none !important;
}

@media (max-width: 720px) {
    .page-title-banner {
        font-size: 14px;
        letter-spacing: 2px;
        min-height: 48px;
        height: 48px;
        padding: 0 50px;
        gap: 10px;
    }
    .page-title-banner::before,
    .page-title-banner::after {
        font-size: 8px;
    }
    .page-title-banner i {
        font-size: 13px;
    }
    .page-title-banner i,
    .page-title-banner span {
        position: relative;
        top: 16px;
    }
}

/* ---------- DOWNLOAD BUTTON (between login panel and menu panels) ---------- */
.download-btn {
    display: block;
    width: 100%;
    margin: 4px auto -10px;
    padding: 0;
    text-align: center;
    line-height: 0;
    transition: transform .25s ease, filter .25s ease;
    animation: downloadPulse 2.8s ease-in-out infinite;
    filter: drop-shadow(0 4px 14px rgba(255,180,43,0.35));
}
.download-btn img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}
.download-btn:hover {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 8px 22px rgba(255,180,43,0.65)) brightness(1.08);
    animation-play-state: paused;
}
.download-btn:active {
    transform: translateY(0) scale(0.99);
    transition: transform .08s;
}
@keyframes downloadPulse {
    0%, 100% { filter: drop-shadow(0 4px 14px rgba(255,180,43,0.35)); }
    50%      { filter: drop-shadow(0 6px 20px rgba(255,180,43,0.6)); }
}

/* ---------- COLORED MENU PANELS (banner image as header) ---------- */
/* The panel has NO visible outer box: the banner image is the visual frame.
   Below the banner, the menu items list flows naturally. */
.menu-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    margin-bottom: 6px !important;
}
.menu-panel::before { display: none !important; }
.menu-panel:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* HEADER = the banner image only (keep native aspect ratio) */
.menu-panel .panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px;
    padding: 0 !important;
    width: 100%;
    aspect-ratio: 3 / 1; /* banner image native proportion (2172x724) — no stretch */
    background: url('../images/menu-header.png') center center / contain no-repeat !important;
    border: none !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.85);
    color: #fff !important;
    position: relative;
    overflow: hidden;
    text-align: center;
    letter-spacing: 3px;
    font-weight: 700;
}
.menu-panel .panel-head::before { display: none !important; }
.menu-panel .panel-head i {
    color: #fff !important;
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent, #f0a020) 95%, transparent), 0 2px 4px rgba(0,0,0,0.95);
    margin-right: 8px;
}
.menu-panel[data-accordion] .panel-head-label {
    flex: 0 1 auto !important;
    text-align: center;
}
.menu-panel[data-accordion] .panel-head-chev {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(0,0,0,0.9);
    opacity: .85;
}
.menu-panel[data-accordion].is-open .panel-head-chev {
    transform: translateY(-50%) rotate(180deg);
}

/* MENU ITEMS LIST below the banner — with 3-part background
   (content-top.webp + content-center.webp repeat + content-bottom.webp)
   content-top extends up behind the banner header via negative margin. */
.menu-panel .epic-menu {
    /* Tuneable variables */
    --cap-top-h: 20px;
    --cap-bottom-h: 20px;
    --cap-overlap: 32px;   /* how much the top cap slides UNDER the banner */
    --submenu-drop: 12px;  /* push the whole submenu down from the header */

    width: 86%;
    margin: calc(var(--cap-overlap) * -1 + var(--submenu-drop)) auto 10px;
    padding: calc(var(--cap-top-h) + 6px) 0 calc(var(--cap-bottom-h) + 6px);
    background:
        url('../images/content-top.webp')    top center    / 100% auto no-repeat,
        url('../images/content-bottom.webp') bottom center / 100% auto no-repeat,
        url('../images/content-center.webp') center top    / 100% auto repeat-y;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    z-index: 3; /* above banner so first link is clickable */
}
/* Banner click area: only the VISIBLE image portion (middle band) should trigger toggle.
   Since we use aspect-ratio 3/1 + background:contain, transparent zones still capture clicks.
   Solution: put banner behind submenu and shrink its hit area with pointer-events pass-through on the bottom third. */
.menu-panel .panel-head {
    position: relative;
    z-index: 10; /* above widget dark overlay */
}
.menu-panel .epic-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #2a1a0a !important;
    text-shadow: 0 1px 0 rgba(255,240,200,0.5);
    border-left: 2px solid transparent;
    border-radius: 0;
    transition: background .15s, border-left-color .15s, color .15s, padding-left .15s, text-shadow .15s;
    text-decoration: none;
}
/* Edge-to-edge divider that ignores the <a>'s horizontal padding */
.menu-panel .epic-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(90, 50, 20, 0.35) 15%,
        rgba(90, 50, 20, 0.45) 50%,
        rgba(90, 50, 20, 0.35) 85%,
        transparent 100%);
    pointer-events: none;
}
.menu-panel .epic-menu a:last-child::after {
    display: none;
}
.menu-panel .epic-menu a i {
    width: 18px;
    text-align: center;
    color: color-mix(in srgb, var(--accent) 70%, #3a1f0a) !important;
    filter: drop-shadow(0 1px 0 rgba(255,240,200,0.4));
}
.menu-panel .epic-menu a:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, transparent), transparent);
    border-left-color: var(--accent);
    padding-left: 18px;
    color: #1a0a00 !important;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent), 0 1px 0 rgba(255,240,200,0.7);
}
.menu-panel .epic-menu a.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent), transparent);
    border-left-color: var(--accent);
    color: #1a0a00 !important;
    font-weight: 700;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent), 0 1px 0 rgba(255,240,200,0.7);
}

/* ---- Right sidebar widgets ON parchment background ---- */
.menu-panel .widget-cta,
.menu-panel .widget-online,
.menu-panel .widget-discord,
.menu-panel .widget-boosted {
    border-top: none !important;
    text-align: center;
    /* keep parchment background inherited from .epic-menu */
}
.menu-panel .widget-cta h4,
.menu-panel .widget-discord h4 {
    color: #2a1a0a !important;
    text-shadow: 0 1px 0 rgba(255,240,200,0.5);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    margin: 0 0 6px;
}
.menu-panel .widget-cta p,
.menu-panel .widget-discord-sub {
    margin: 0 0 10px;
    font-size: 11.5px;
    color: #4a2f15 !important;
    text-shadow: 0 1px 0 rgba(255,240,200,0.4);
    font-style: italic;
    line-height: 1.4;
}
/* Online widget */
.menu-panel .widget-online {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 4px 2px !important;
    font-size: 13px;
    color: #2a1a0a !important;
    text-shadow: 0 1px 0 rgba(255,240,200,0.5);
    font-weight: 600;
}
.menu-panel .widget-online .val {
    font-size: 28px;
    font-weight: 800;
    color: color-mix(in srgb, var(--accent) 75%, #1a3a5a) !important;
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent), 0 1px 0 rgba(255,240,200,0.6);
    font-family: 'Cinzel', serif;
}
.menu-panel .widget-online-sub {
    font-size: 10.5px;
    color: #5a3a1a !important;
    font-weight: 500;
    font-style: italic;
    margin-top: 2px;
}
/* Boosted widget */
.menu-panel .widget-boosted {
    padding: 6px 2px !important;
}
.menu-panel .widget-boosted .img-wrap {
    width: 84px; height: 84px;
    margin: 0 auto 6px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--accent) 40%, transparent),
        transparent 70%);
}
.menu-panel .widget-boosted .img-wrap img { max-width: 72px; max-height: 72px; }
.menu-panel .widget-boosted .name {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: #2a1a0a !important;
    text-shadow: 0 1px 0 rgba(255,240,200,0.5);
    letter-spacing: 1px;
    font-weight: 700;
}
.menu-panel .widget-boosted .tag {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 75%, #3a1f0a) !important;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,240,200,0.4);
}
.menu-panel .boosted-divider {
    margin-top: 10px;
    padding-top: 12px !important;
    border-top: 1px dashed rgba(90, 50, 20, 0.3);
}

/* ---- BOOSTED BOX (right sidebar themebox) ---- */
.widget-boosted { padding: 10px 8px 12px !important; overflow: visible !important; }
.boosted-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}
.boosted-row-two .boosted-item { width: 50%; }
.boosted-row-one .boosted-item { width: 60%; margin: 0 auto; }
.boosted-divider-v {
    width: 1px;
    background: rgba(0,0,0,0.2);
    margin: 8px 4px;
    align-self: stretch;
    flex-shrink: 0;
}
.boosted-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 4px 6px 8px !important;
    cursor: pointer;
    position: relative;
    transition: none !important;
    transform: none !important;
}
.boosted-item:hover,
.boosted-item:focus,
.boosted-item:active {
    text-decoration: none !important;
    background: none !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    color: inherit !important;
    text-shadow: none !important;
    border-left-color: transparent !important;
    padding: 4px 6px 8px !important;
    transform: none !important;
    transition: none !important;
}
/* ---- Boosted Tooltip ---- */
.boosted-tooltip {
    display: none;
    position: fixed;
    z-index: 99999;
    background: #1a120a;
    border: 1px solid #7a5c2e;
    border-radius: 6px;
    padding: 8px 12px;
    min-width: 140px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.8);
    pointer-events: none;
    flex-direction: column;
    gap: 4px;
}
.boosted-tooltip img { display: none; }
.boosted-item.bt-open .boosted-tooltip {
    display: flex;
}
.bt-info { display: flex; flex-direction: column; gap: 3px; }
.bt-name {
    font-size: 13px;
    font-weight: 700;
    color: #f0d080;
    margin-bottom: 4px;
    white-space: nowrap;
    line-height: 1.2;
}
.bt-row { display: flex; align-items: center; gap: 5px; }
.bt-label {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.bt-xp   { background: #2a6e2a; color: #7fff7f; }
.bt-loot { background: #6e5a1a; color: #ffd966; }
.bt-val  { font-size: 11px; font-weight: 700; color: #c8f0c8; }
.boosted-img-box {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/bg-boosted.png') center / 100% 100% no-repeat;
    border: none;
    border-radius: 6px;
    overflow: visible;
}
.boosted-img-box img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.boosted-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111 !important;
    text-shadow: none !important;
    margin-bottom: 3px;
}
.boosted-name {
    font-size: 11px;
    font-weight: 700;
    color: #111 !important;
    text-shadow: none !important;
    margin-top: 0;
    line-height: 1.2;
}

/* ---- SHOP CTA widget (right sidebar, with decorative images) ---- */
.menu-panel .widget-shop {
    position: relative;
    overflow: hidden;
}
.menu-panel .shop-premium-wrap {
    position: relative;
    z-index: 1;
    margin: -4px auto 8px;
    width: 100%;
    text-align: center;
}
.menu-panel .shop-premium-img {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 10px;
    display: inline-block;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
/* Decorative floating coins in the corners of the box */
.menu-panel .shop-coin-float {
    position: absolute;
    width: 40px;
    height: auto;
    opacity: .55;
    z-index: 0;
    pointer-events: none;
    animation: shopCoinFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.menu-panel .shop-coin-float-left  { top: 36px; left: 4px;  transform: rotate(-15deg); }
.menu-panel .shop-coin-float-right { top: 52px; right: 4px; transform: rotate(15deg); animation-delay: -2.5s; }
@keyframes shopCoinFloat {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-4px) rotate(var(--r, 0deg)); }
}
.menu-panel .shop-coin-float-left  { --r: -15deg; }
.menu-panel .shop-coin-float-right { --r: 15deg; }

/* Crown animated GIF at the top */
.menu-panel .shop-crown-wrap {
    position: relative;
    z-index: 1;
    margin: -4px auto 6px;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle,
        rgba(255,215,120,0.55),
        rgba(255,180,43,0.2) 55%,
        transparent 75%);
    border-radius: 50%;
    filter: drop-shadow(0 4px 10px rgba(255,180,43,0.45));
}
.menu-panel .shop-crown {
    width: 60px;
    height: auto;
    image-rendering: pixelated;
}

/* Make text sit above the floating coins */
.menu-panel .widget-shop h4,
.menu-panel .widget-shop p,
.menu-panel .widget-shop .shop-features,
.menu-panel .widget-shop .btn-shop {
    position: relative;
    z-index: 1;
}

/* ===== DONATE FEATURE CAROUSEL ===== */
.menu-panel .shop-carousel {
    position: relative;
    margin: 8px 0 10px;
}
.menu-panel .shop-features {
    position: relative;
    height: 88px;
    overflow: hidden;
}
.menu-panel .shop-feature {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 22%, transparent),
        color-mix(in srgb, var(--accent) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.menu-panel .shop-feature.shop-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.menu-panel .shop-feature.shop-exit {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
}
/* Gleam on active slide */
.menu-panel .shop-feature.shop-active::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg,
        transparent 30%,
        rgba(255,255,255,0.35) 50%,
        transparent 70%);
    transform: skewX(-20deg);
    animation: shopGleamCarousel 3s ease-in-out 0.3s 1 forwards;
    pointer-events: none;
    z-index: 2;
}
@keyframes shopGleamCarousel {
    0%   { left: -80%; }
    60%  { left: 160%; }
    100% { left: 160%; }
}
.menu-panel .shop-feature img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
    transition: transform 0.3s, filter 0.3s;
}
.menu-panel .shop-feature.shop-active img {
    animation: shopCarouselPop 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@keyframes shopCarouselPop {
    0%   { transform: scale(0.7) rotate(-8deg); opacity: 0.4; }
    100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}
.menu-panel .shop-feature span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #3a2210 !important;
    text-shadow: 0 1px 0 rgba(255,240,200,0.6);
    text-align: center;
    line-height: 1.2;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s 0.2s, transform 0.4s 0.2s;
}
.menu-panel .shop-feature.shop-active span {
    opacity: 1;
    transform: translateY(0);
}
/* Dots indicator */
.menu-panel .shop-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.menu-panel .shop-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}
.menu-panel .shop-dot.shop-active {
    background: var(--accent);
    transform: scale(1.4);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ===== TOP PLAYERS THEMEBOX ===== */
.widget-topplayers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px !important;
}
.tp-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 8px;
    text-decoration: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s ease;
}
.tp-row:hover,
.tp-row:focus,
.tp-row:active {
    background: linear-gradient(180deg, rgba(218,165,32,0.12), rgba(218,165,32,0.04)) !important;
    border-color: rgba(218,165,32,0.3) !important;
    color: var(--gold-bright) !important;
}
.tp-row.tp-rank-1 {
    background: linear-gradient(90deg, rgba(218,165,32,0.15), rgba(218,165,32,0.04));
    border-color: rgba(218,165,32,0.35);
}
.tp-row.tp-rank-2 {
    background: linear-gradient(90deg, rgba(200,200,200,0.12), rgba(200,200,200,0.03));
    border-color: rgba(200,200,200,0.25);
}
.tp-row.tp-rank-3 {
    background: linear-gradient(90deg, rgba(205,145,101,0.12), rgba(205,145,101,0.03));
    border-color: rgba(205,145,101,0.25);
}
/* Rank badge */
.tp-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-left: -4px;
    background: none;
    box-shadow: none;
    overflow: visible;
    position: relative;
    z-index: 2;
}
.tp-badge img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    /* No filter — PNG already has its own effects */
}
/* Outfit */
.tp-outfit {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: radial-gradient(circle, rgba(218,165,32,0.12), transparent 70%);
    border-radius: 50%;
}
.tp-outfit img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
/* Text info */
.tp-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.tp-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 6px rgba(218,165,32,0.3);
    line-height: 1.2;
}
.tp-meta {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.tp-meta .tp-lvl {
    color: #c4a35a;
    font-weight: 700;
}
.tp-meta .tp-voc {
    display: block;
    color: var(--text-dim);
}

/* Golden Shop/Donate button — same smooth style as login */
.menu-panel .menu-body-plain a.btn-shop {
    background: linear-gradient(180deg, #daa520 0%, #b86b0b 100%) !important;
    border: 1px solid #ffd700 !important;
    color: #1a1208 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    padding: 10px 14px !important;
    box-shadow:
        0 4px 14px rgba(218,165,32,0.4),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
    transition: all .25s ease !important;
}
.menu-panel .menu-body-plain a.btn-shop::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    animation: btnShine 3.2s ease-in-out infinite;
}
.menu-panel .menu-body-plain a.btn-shop:hover {
    background: linear-gradient(180deg, #ffd700 0%, #daa520 100%) !important;
    border-color: #fff3b0 !important;
    color: #1a1208 !important;
    box-shadow:
        0 8px 22px rgba(218,165,32,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}

/* ---- Top Players widget — elegant medallion cards ---- */
.menu-panel .widget-topplayers {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 9px !important;
    padding-right: 8px !important;
    position: relative;
    overflow: visible;
}
.menu-panel .widget-topplayers::before { display: none; }
.menu-panel .widget-topplayers > * { position: relative; z-index: 1; }

/* Card base — dark plate with rich layered gradient */
.menu-panel .widget-topplayers .tp-row {
    --c-light: #ffd97a;
    --c-mid:   #8a5a14;
    --c-dark:  #1a1006;
    --c-edge:  #0a0603;
    --c-glow:  rgba(255,210,90,0.35);
    --c-name:  #ffe9b0;
    --c-lvl:   #ffd070;

    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px 9px 10px;
    border-radius: 6px;
    text-decoration: none !important;
    position: relative;
    overflow: visible;
    isolation: isolate;
    background: center / 100% 100% no-repeat !important;
    border: none !important;
    box-shadow: none;
    transition: filter .2s ease;
}
.menu-panel .widget-topplayers .tp-row::before { display: none; }
.menu-panel .widget-topplayers .tp-row > * { position: relative; z-index: 1; }
.menu-panel .widget-topplayers .tp-row:hover,
.menu-panel .widget-topplayers .tp-row:focus,
.menu-panel .widget-topplayers .tp-row:active {
    transform: none !important;
    filter: brightness(1.15) !important;
    box-shadow: none !important;
    background: center / 100% 100% no-repeat !important;
    border: none !important;
    border-left: none !important;
    padding-left: 10px !important;
    color: inherit !important;
    text-decoration: none !important;
    text-shadow: none !important;
}
.menu-panel .widget-topplayers .tp-rank-1:hover,
.menu-panel .widget-topplayers .tp-rank-1:focus,
.menu-panel .widget-topplayers .tp-rank-1:active { background-image: url('../images/toplvl/bg1.png') !important; }
.menu-panel .widget-topplayers .tp-rank-2:hover,
.menu-panel .widget-topplayers .tp-rank-2:focus,
.menu-panel .widget-topplayers .tp-rank-2:active { background-image: url('../images/toplvl/bg2.png') !important; }
.menu-panel .widget-topplayers .tp-rank-3:hover,
.menu-panel .widget-topplayers .tp-rank-3:focus,
.menu-panel .widget-topplayers .tp-rank-3:active { background-image: url('../images/toplvl/bg3.png') !important; }
.menu-panel .widget-topplayers .tp-rank-4:hover,
.menu-panel .widget-topplayers .tp-rank-4:focus,
.menu-panel .widget-topplayers .tp-rank-4:active { background-image: url('../images/toplvl/bg4.png') !important; }
.menu-panel .widget-topplayers .tp-rank-5:hover,
.menu-panel .widget-topplayers .tp-rank-5:focus,
.menu-panel .widget-topplayers .tp-rank-5:active { background-image: url('../images/toplvl/bg5.png') !important; }

/* Per-rank palettes — --c-mid is the FLAT card tone (mid/dark) */
.menu-panel .widget-topplayers .tp-rank-1 { background-image: url('../images/toplvl/bg1.png') !important; --c-name: #ffe070; --c-lvl: #ffd700; }
.menu-panel .widget-topplayers .tp-rank-2 { background-image: url('../images/toplvl/bg2.png') !important; --c-name: #ffffff; --c-lvl: #7ec8e3; }
.menu-panel .widget-topplayers .tp-rank-3 { background-image: url('../images/toplvl/bg3.png') !important; --c-name: #ffffff; --c-lvl: #ff9840; }
.menu-panel .widget-topplayers .tp-rank-4 { background-image: url('../images/toplvl/bg4.png') !important; --c-name: #ffffff; --c-lvl: #5fb6f5; }
.menu-panel .widget-topplayers .tp-rank-5 { background-image: url('../images/toplvl/bg5.png') !important; --c-name: #ffffff; --c-lvl: #7ed650; }

/* Subtle radiance on the badge side (champion glow) */
.menu-panel .widget-topplayers .tp-rank-1::after {
    content:'';
    position:absolute;
    left:-10px; top:50%;
    width:80px; height:80px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(255,220,120,0.35), rgba(255,220,120,0) 65%);
    pointer-events:none;
    z-index:0;
}

/* Hide outfit — focus on medal + name */
.menu-panel .widget-topplayers .tp-outfit { display: none; }

/* ===== Medallion badge ===== */
.menu-panel .widget-topplayers .tp-badge {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    z-index: 2;
}
.menu-panel .widget-topplayers .tp-badge::before { display: none !important; }
.menu-panel .widget-topplayers .tp-badge img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}
.menu-panel .widget-topplayers .tp-rank-2 .tp-badge,
.menu-panel .widget-topplayers .tp-rank-3 .tp-badge,
.menu-panel .widget-topplayers .tp-rank-4 .tp-badge,
.menu-panel .widget-topplayers .tp-rank-5 .tp-badge { background: none !important; box-shadow: none !important; }

/* ===== Info column ===== */
.menu-panel .widget-topplayers .tp-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.1;
    padding: 0;
    margin-left: -4px;
}
.menu-panel .widget-topplayers .tp-name {
    font-family: 'Cinzel', 'Trajan Pro', serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.4px;
    color: var(--c-name) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7);
}
.menu-panel .widget-topplayers .tp-meta {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Cinzel', 'Trajan Pro', serif;
    letter-spacing: 0.3px;
    color: var(--c-lvl) !important;
    white-space: nowrap;
    margin-top: 2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.7);
    opacity: 0.95;
}
.menu-panel .widget-topplayers .tp-meta .tp-lvl { color: inherit; font-weight: 700; }
.menu-panel .widget-topplayers .tp-voc-line {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Cinzel', serif;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
    margin-top: 1px;
}

/* Discord specific button */
.menu-panel .menu-body-plain a.btn-discord-full {
    background: linear-gradient(180deg, #5865F2 0%, #3d48c4 100%) !important;
    border: 1px solid #7983ff !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    padding: 9px 12px !important;
    box-shadow:
        0 4px 12px rgba(88,101,242,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.menu-panel .menu-body-plain a.btn-discord-full:hover {
    background: linear-gradient(180deg, #7983ff 0%, #4d58d4 100%) !important;
    border-color: #a8b0ff !important;
    color: #fff !important;
    box-shadow:
        0 8px 20px rgba(88,101,242,0.55),
        inset 0 1px 0 rgba(255,255,255,0.35);
    transform: translateY(-1px);
}
.menu-panel .menu-body-plain a.btn-instagram {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%) !important;
    border: 1px solid #e1659a !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow:
        0 4px 14px rgba(221,42,123,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.menu-panel .menu-body-plain a.btn-instagram:hover {
    background: linear-gradient(135deg, #ff9a3c 0%, #f0448a 50%, #9b4fc9 100%) !important;
    border-color: #f080b8 !important;
    color: #fff !important;
    box-shadow:
        0 8px 20px rgba(221,42,123,0.55),
        inset 0 1px 0 rgba(255,255,255,0.35);
    transform: translateY(-1px);
}

/* ---- Login panel body (buttons instead of nav links) ---- */
.menu-panel .menu-body-plain {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 14px !important;
    padding-right: 14px !important;
}
.menu-panel .widget-topplayers {
    padding-left: 9px !important;
    padding-right: 8px !important;
    gap: 4px !important;
}
.menu-panel .menu-body-plain a.btn-epic {
    border-radius: 6px;
    text-shadow: none;
    padding: 9px 12px;
    font-size: 12px;
    letter-spacing: 1.5px;
    justify-content: center;
    /* Override the inherited parchment-text hover */
}
.menu-panel .menu-body-plain a.btn-epic:hover {
    padding-left: 12px;
    background: linear-gradient(180deg, rgba(218,165,32,0.55), rgba(218,165,32,0.20)) !important;
    color: #fff !important;
    border-color: var(--gold-bright) !important;
    border-left-color: var(--gold-bright) !important;
}
/* Blue Login button — vibrant and prominent */
.menu-panel .menu-body-plain a.btn-login {
    background: linear-gradient(180deg, #3a9cff 0%, #1e5fb8 100%) !important;
    border: 1px solid #5ab4ff !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    padding: 10px 14px !important;
    box-shadow:
        0 4px 14px rgba(58,156,255,0.4),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.menu-panel .menu-body-plain a.btn-login i {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.5));
}
.menu-panel .menu-body-plain a.btn-login::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    animation: btnShine 3.2s ease-in-out infinite;
}
@keyframes btnShine {
    0%, 70% { left: -60%; }
    100%    { left: 130%; }
}
.menu-panel .menu-body-plain a.btn-login:hover {
    background: linear-gradient(180deg, #5ab4ff 0%, #2f7fd8 100%) !important;
    border-color: #9dd4ff !important;
    color: #fff !important;
    box-shadow:
        0 8px 22px rgba(58,156,255,0.6),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -2px 0 rgba(0,0,0,0.2);
}

/* Compact version for longer labels like "Criar Conta" */
.menu-panel .menu-body-plain a.btn-compact {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    padding: 8px 10px !important;
    white-space: nowrap;
}
/* Green variant for Register button — same structure as login for smooth hover */
.menu-panel .menu-body-plain a.btn-register {
    background: linear-gradient(180deg, rgba(75,214,107,0.35), rgba(75,214,107,0.12)) !important;
    border: 1px solid #2a6b3a !important;
    color: #d6ffdf !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    padding: 10px 14px !important;
    box-shadow:
        0 4px 14px rgba(75,214,107,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    transition: all .25s ease !important;
}
.menu-panel .menu-body-plain a.btn-register::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg);
    animation: btnShine 3.2s ease-in-out infinite;
}
.menu-panel .menu-body-plain a.btn-register:hover {
    background: linear-gradient(180deg, rgba(75,214,107,0.65), rgba(75,214,107,0.25)) !important;
    border-color: #4bd66b !important;
    color: #fff !important;
    box-shadow:
        0 8px 22px rgba(75,214,107,0.5),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}

/* Golden My Account button (override btn-login blue when .account is present) */
.menu-panel .menu-body-plain a.btn-login.account {
    background: linear-gradient(180deg, #f5c453 0%, #b86b0b 100%) !important;
    border: 1px solid #ffd966 !important;
    color: #1a1208 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    padding: 10px 8px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow:
        0 4px 14px rgba(218,165,32,0.45),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -2px 0 rgba(0,0,0,0.25) !important;
}
.menu-panel .menu-body-plain a.btn-login.account::after {
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%) !important;
}
.menu-panel .menu-body-plain a.btn-login.account:hover {
    background: linear-gradient(180deg, #ffdc73 0%, #daa520 100%) !important;
    border-color: #fff3b0 !important;
    color: #1a1208 !important;
    box-shadow:
        0 8px 22px rgba(218,165,32,0.65),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -2px 0 rgba(0,0,0,0.25) !important;
}
.menu-panel .menu-body-plain a.btn-login.account i {
    filter: drop-shadow(0 0 6px rgba(255, 220, 100, 0.6)) !important;
}

/* Red Logout button in panel */
.menu-panel .menu-body-plain a.logout {
    background: linear-gradient(180deg, #c0392b 0%, #7b1a1a 100%) !important;
    border: 1px solid #e74c3c !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow:
        0 4px 12px rgba(192,57,43,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.menu-panel .menu-body-plain a.logout:hover {
    background: linear-gradient(180deg, #e74c3c 0%, #a02020 100%) !important;
    border-color: #ff6b5a !important;
    box-shadow:
        0 8px 20px rgba(231,76,60,0.55),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
/* Lost password tiny link */
.menu-panel .lost-pass-link {
    display: block;
    text-align: center;
    font-size: 10.5px !important;
    letter-spacing: 0.5px;
    color: #5a3a1a !important;
    text-shadow: 0 1px 0 rgba(255,240,200,0.6);
    padding: 4px 2px 2px !important;
    margin-top: 2px;
    border: none !important;
    border-left: none !important;
    background: none !important;
    font-style: italic;
    font-weight: 500;
    transition: color .15s, text-shadow .15s;
}
.menu-panel .lost-pass-link:hover {
    background: none !important;
    color: #8a1a1a !important;
    text-shadow: 0 0 6px rgba(255,107,107,0.5), 0 1px 0 rgba(255,240,200,0.7);
    padding-left: 2px !important;
    text-decoration: underline;
}

/* ---------- ACCORDION (collapsible sidebar menus) ---------- */
.menu-panel[data-accordion] > .panel-head {
    width: 100%;
    cursor: pointer;
    border: none;
    font-family: 'Cinzel', serif;
    text-align: center;
    user-select: none;
    justify-content: center;
    /* button reset */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}
.menu-panel[data-accordion] > .panel-head:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent);
}
.menu-panel[data-accordion] .panel-head-label { flex: 1 1 auto; }
.menu-panel[data-accordion] .panel-head-chev {
    font-size: 11px !important;
    color: var(--accent);
    opacity: .7;
    transition: transform .3s ease, opacity .2s;
    filter: none !important;
    margin-left: 6px;
}
.menu-panel[data-accordion]:hover .panel-head-chev { opacity: 1; }

/* Collapsed state — animate the <nav> max-height */
.menu-panel[data-accordion] > .epic-menu {
    max-height: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    transition: max-height .22s ease, opacity .15s ease, padding .18s ease;
    will-change: max-height;
}
.menu-panel[data-accordion].is-open > .epic-menu {
    max-height: 500px;
    opacity: 1;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
    transition: max-height .28s ease, opacity .2s ease .05s, padding .2s ease;
}

/* No-animation class for initial restore from localStorage (prevents flicker) */
.menu-panel.accordion-no-anim,
.menu-panel.accordion-no-anim > .epic-menu {
    transition: none !important;
}

/* Chevron rotates when open */
.menu-panel[data-accordion].is-open .panel-head-chev {
    transform: rotate(180deg);
    opacity: 1;
}

/* Open/hover background variants defined earlier (with menu-header image) */

/* Color accent per category */
.menu-amber   { --accent: #f0a020; --accent-soft: rgba(240,160,32,0.14); }
.menu-sky     { --accent: #4cc2ff; --accent-soft: rgba(76,194,255,0.14); }
.menu-violet  { --accent: #b26bff; --accent-soft: rgba(178,107,255,0.16); }
.menu-emerald { --accent: #4bd6a0; --accent-soft: rgba(75,214,160,0.14); }
.menu-rose    { --accent: #ff6ba0; --accent-soft: rgba(255,107,160,0.16); }
.menu-orange  { --accent: #ff8c42; --accent-soft: rgba(255,140,66,0.14); }

.menu-panel {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Hide the shimmer line at top of menu panels (the header image already has its own shine) */
.menu-panel::before { display: none !important; }
/* Note: .menu-panel .panel-head background defined earlier with menu-header.png image */
.menu-panel .epic-menu a i { color: var(--accent); }
.menu-panel .epic-menu a:hover {
    background: linear-gradient(90deg, var(--accent-soft), transparent);
    border-left-color: var(--accent);
    color: #fff;
}
.menu-panel .epic-menu a.active {
    background: linear-gradient(90deg, var(--accent-soft), transparent);
    border-left-color: var(--accent);
    color: #fff;
}
.menu-panel:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---------- COLORFUL CONTENT (center panel) ---------- */
/* Reset legacy tibiacom styles and replace with cheerful look */
.epic-main table { border-collapse: collapse; width: 100%; color: var(--text); }
.epic-main table td, .epic-main table th {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
    vertical-align: middle;
}
.epic-main table th {
    color: #fff;
    background: linear-gradient(180deg, rgba(178,107,255,0.22), rgba(76,194,255,0.15));
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.epic-main tr:hover td { background: rgba(255,255,255,0.04); }

/* Legacy tibiacom containers → glassy colorful panels */
.epic-main .TableContainer,
.epic-main .Table1, .epic-main .Table2, .epic-main .Table3, .epic-main .Table4,
.epic-main .TableContent {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
}
.epic-main .TableContainer {
    margin-bottom: 18px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}
.epic-main .CaptionContainer, .epic-main .CaptionInnerContainer {
    background: linear-gradient(180deg, rgba(218,165,32,0.18), rgba(138,107,31,0.08)) !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(218,165,32,0.3) !important;
    font-family: 'Cinzel', serif;
    color: var(--gold-bright) !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px !important;
    position: relative;
}
.epic-main .CaptionContainer::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.epic-main .CaptionContainer .Text, .epic-main .CaptionInnerContainer .Text {
    color: var(--gold-bright) !important;
    text-shadow: 0 0 10px rgba(218,165,32,0.4);
}
.epic-main .InnerTableContainer { padding: 14px 16px !important; background: transparent !important; }

/* Colorize decorative caption edges/borders (tibiacom sprites off) */
.epic-main .CaptionEdgeLeftTop, .epic-main .CaptionEdgeRightTop,
.epic-main .CaptionEdgeLeftBottom, .epic-main .CaptionEdgeRightBottom,
.epic-main .CaptionBorderTop, .epic-main .CaptionBorderBottom,
.epic-main .CaptionVerticalLeft, .epic-main .CaptionVerticalRight,
.epic-main .TableShadowContainerRightTop, .epic-main .TableShadowRightTop,
.epic-main .TableShadowContainer, .epic-main .TableBottomShadow,
.epic-main .TableBottomLeftShadow, .epic-main .TableBottomRightShadow,
.epic-main .TableContentAndRightShadow {
    background-image: none !important;
    background: transparent !important;
    display: none !important;
}

/* Content headings */
.epic-main h1, .epic-main h2, .epic-main h3, .epic-main .HeaderPagesText {
    font-family: 'Cinzel', serif;
    color: var(--gold-bright);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 4px 0 14px;
    font-size: 26px;
    display: inline-block;
    text-shadow: 0 0 15px rgba(218,165,32,0.3);
}

/* Paragraphs and text readability */
.epic-main p { color: #e8e4d8; line-height: 1.65; }
.epic-main hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); margin: 18px 0; }

/* Links in content */
.epic-main a { color: #ffd700; }
.epic-main a:hover { color: #fff; text-shadow: 0 0 10px #f0a020; }

/* News icons (tibiacom) override */
.epic-main img[src*="newsicon"], .epic-main img[src*="news-icon"] {
    filter: drop-shadow(0 0 6px rgba(255,180,43,0.6));
}

/* News feed rows (when using .news-item structure) — already defined above */
/* Colorful bordered rows for legacy news lists */
.epic-main .NewsTable, .epic-main .NewsTableContainer {
    background: transparent !important;
}
.epic-main table.news tr td, .epic-main .newsHeadline {
    border-bottom: 1px dashed rgba(255,255,255,0.1) !important;
}
.epic-main .newsHeadlineText, .epic-main .newsHeadline, .epic-main .NewsHeadline {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Buttons inside legacy content — override tibiacom sprites with gradient button */
.epic-main input[type="submit"],
.epic-main input[type="image"],
.epic-main .BigButton, .epic-main .MediumButton, .epic-main .SmallButton {
    background-image: none !important;
}
.epic-main input[type="submit"], .epic-main button.BigButtonText, .epic-main .ButtonText {
    padding: 9px 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(218,165,32,0.3), rgba(138,107,31,0.15)) !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, filter .2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.epic-main input[type="submit"]:hover, .epic-main .ButtonText:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(218,165,32,0.5), rgba(138,107,31,0.25)) !important;
    box-shadow: 0 6px 16px rgba(218,165,32,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Green variant for "Get Premium" etc */
.epic-main .BigButtonGreen input[type="submit"], .epic-main .BigButtonGreen .BigButtonText {
    background: linear-gradient(180deg, rgba(75,214,107,0.3), rgba(45,176,85,0.15)) !important;
    border-color: rgba(75,214,107,0.6) !important;
    color: #b7f5c5 !important;
}
.epic-main .BigButtonGreen input[type="submit"]:hover {
    background: linear-gradient(180deg, rgba(75,214,107,0.5), rgba(45,176,85,0.25)) !important;
    box-shadow: 0 6px 16px rgba(75,214,107,0.35);
}
/* Red variant for Logout */
.epic-main .BigButtonRed input[type="submit"], .epic-main .BigButtonRed .BigButtonText {
    background: linear-gradient(180deg, #c0392b, #7b1a1a) !important;
    border-color: #e74c3c !important;
    color: #fff !important;
}
.epic-main .BigButtonRed input[type="submit"]:hover {
    background: linear-gradient(180deg, #e74c3c, #a02020) !important;
    box-shadow: 0 6px 16px rgba(231,76,60,0.5);
}

/* Alerts / error boxes (tibiacom uses specific class names) */
.epic-main .ErrorMessage, .epic-main .AttentionSign,
.epic-main .BoxContent[style*="red"], .epic-main [class*="error"] {
    background: linear-gradient(90deg, rgba(255,77,77,0.22), rgba(255,77,77,0.08)) !important;
    border: 1px solid rgba(255,77,77,0.5) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: #ffb7b7 !important;
    box-shadow: 0 0 18px rgba(255,77,77,0.12) !important;
}

/* ========================================================
   TABLECONTENT (Highscores, Characters, Guilds, etc.)
   ======================================================== */

/* Kill the inline light-border background colors from legacy rows */
.epic-main .TableContent { 
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.epic-main .TableContent tr { background: transparent !important; }
.epic-main .TableContent tr[style*="background"] td,
.epic-main .TableContent tr[bgcolor] td {
    background: transparent !important;
}
.epic-main .TableContent td {
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: #eadfc5 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

/* Header row (.LabelH) — vibrant gradient with animation */
.epic-main .TableContent tr.LabelH td,
.epic-main .TableContent .LabelH td,
.epic-main tr.LabelH td {
    background: linear-gradient(90deg,
        rgba(255,180,43,0.28) 0%,
        rgba(255,107,160,0.28) 35%,
        rgba(178,107,255,0.28) 70%,
        rgba(76,194,255,0.28) 100%
    ) !important;
    color: #fff !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    border-bottom: 2px solid rgba(255,216,107,0.5) !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Data rows — true zebra striping (override inline bgs) */
.epic-main .TableContent tbody tr:not(.LabelH):nth-child(even) td {
    background: rgba(255,255,255,0.025) !important;
}
.epic-main .TableContent tbody tr:not(.LabelH):nth-child(odd) td {
    background: rgba(255,255,255,0.01) !important;
}

/* Hover glow on data rows */
.epic-main .TableContent tbody tr:not(.LabelH) {
    transition: transform .15s;
}
.epic-main .TableContent tbody tr:not(.LabelH):hover td {
    background: linear-gradient(90deg, rgba(255,180,43,0.12), rgba(178,107,255,0.10)) !important;
    color: #fff !important;
}

/* Rank column — give it a medal feel (first column of highscores) */
.epic-main .TableContent tbody tr:not(.LabelH) td:first-child {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold-bright) !important;
    font-size: 15px !important;
    width: 60px;
    text-align: center;
}
/* Top 3 — gold / silver / bronze */
.epic-main .TableContent tbody tr:not(.LabelH):nth-child(2) td:first-child { color: #ffd700 !important; text-shadow: 0 0 10px #ffd700; font-size: 17px !important; }
.epic-main .TableContent tbody tr:not(.LabelH):nth-child(3) td:first-child { color: #e4e4e4 !important; text-shadow: 0 0 10px #fff;    font-size: 16px !important; }
.epic-main .TableContent tbody tr:not(.LabelH):nth-child(4) td:first-child { color: #d38a3d !important; text-shadow: 0 0 10px #d38a3d; font-size: 15px !important; }

/* Character name links inside table */
.epic-main .TableContent a {
    color: #ffd700 !important;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.epic-main .TableContent a:hover {
    background: rgba(255,180,43,0.18);
    color: #fff !important;
    text-shadow: 0 0 8px #f0a020;
}

/* Pagination */
.epic-main .PageNavigation {
    padding: 14px !important;
    font-size: 13px !important;
    color: var(--text-dim) !important;
}
.epic-main .PageLink, .epic-main .CurrentPageLink {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 2px;
    border-radius: 6px;
    font-weight: 600;
}
.epic-main .PageLink a {
    color: #ffd700 !important;
}
.epic-main .CurrentPageLink {
    background: linear-gradient(180deg, #f0a020, #ff6ba0) !important;
    color: #1a0a20 !important;
    box-shadow: 0 0 12px rgba(255,180,43,0.5);
}

/* LabelV120/180 (form labels) */
.epic-main .LabelV120, .epic-main .LabelV180 {
    color: var(--text-dim) !important;
    font-weight: 600;
    padding: 6px 10px 6px 0 !important;
    font-size: 13px !important;
    letter-spacing: 1px;
}

/* Form select styling (tibiacom forms) */
.epic-main select {
    appearance: none;
    -webkit-appearance: none;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23ffd86b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center,
        rgba(0,0,0,0.4);
    padding-right: 36px;
}

/* ========================================================
   NEWS TICKER / NEWSBOX
   ======================================================== */

/* Kill sprite borders/corners of the old news ticker */
.epic-main #NewsTicker .Corner-tl,
.epic-main #NewsTicker .Corner-tr,
.epic-main #NewsTicker .Border_1,
.epic-main #NewsTicker .BorderTitleText,
.epic-main .Box .Corner-tl, .epic-main .Box .Corner-tr,
.epic-main .Box .Corner-bl, .epic-main .Box .Corner-br,
.epic-main .Box .Border_1,   .epic-main .Box .BorderTitleText {
    background-image: none !important;
    display: none !important;
}

/* Outer box */
.epic-main #NewsTicker, .epic-main .Box {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
    overflow: hidden;
    position: relative;
}
.epic-main #NewsTicker::before, .epic-main .Box::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, #f0a020, #ff6ba0, #b26bff, #4cc2ff, #4bd6a0);
    background-size: 200% 100%;
    animation: rainbowFlow 6s linear infinite;
    z-index: 1;
}

/* BorderTitleText is the caption header green bg — give it our gradient via .HeaderPagesText that follows */
.epic-main #NewsTicker .HeaderPagesText,
.epic-main .Box .HeaderPagesText {
    display: block !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    background: linear-gradient(90deg,
        rgba(255,180,43,0.18), rgba(255,107,160,0.18), rgba(178,107,255,0.18)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    font-family: 'Cinzel', serif !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 0 12px rgba(255,216,107,0.5);
}

/* Scroll background remove */
.epic-main #NewsTicker .BoxContent, .epic-main .Box .BoxContent {
    background-image: none !important;
    background: transparent !important;
    padding: 8px 0 !important;
}

.epic-main #NewsTicker .Border_2, .epic-main #NewsTicker .Border_3,
.epic-main .Box .Border_2, .epic-main .Box .Border_3 {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Each ticker row */
.epic-main #NewsTicker .Row, .epic-main .Box .Row {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    transition: background .18s;
    cursor: pointer;
}
.epic-main #NewsTicker .Row:last-child { border-bottom: none !important; }
.epic-main #NewsTicker .Row:hover, .epic-main .Box .Row:hover {
    background: rgba(255,180,43,0.06) !important;
}
.epic-main #NewsTicker .Odd, .epic-main #NewsTicker .Even,
.epic-main .Box .Odd, .epic-main .Box .Even {
    background: transparent !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100%;
}

/* The icon image square — rounded + glow */
.epic-main .NewsTickerIcon {
    width: 44px !important; height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background-color: rgba(255,180,43,0.08) !important;
    background-size: 32px 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 1px solid rgba(255,216,107,0.3) !important;
    box-shadow: 0 0 12px rgba(255,180,43,0.15) !important;
    transition: transform .2s, box-shadow .2s;
}
.epic-main .Row:hover .NewsTickerIcon {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255,180,43,0.35) !important;
}
.epic-main .NewsTickerIcon img {
    width: 32px; height: 32px; object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255,180,43,0.5));
}

/* Plus/minus expand button */
.epic-main .NewsTickerExtend {
    width: 22px !important; height: 22px !important;
    background-image: none !important;
    background: rgba(178,107,255,0.25) !important;
    border: 1px solid rgba(178,107,255,0.5) !important;
    border-radius: 50% !important;
    position: relative;
    flex-shrink: 0;
    order: 99;
    cursor: pointer;
    transition: background .18s, transform .18s;
}
.epic-main .NewsTickerExtend::before,
.epic-main .NewsTickerExtend::after {
    content: '';
    position: absolute;
    background: #fff;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 2px;
}
.epic-main .NewsTickerExtend::before { width: 10px; height: 2px; }
.epic-main .NewsTickerExtend::after  { width: 2px;  height: 10px; }
.epic-main .NewsTickerExtend:hover {
    background: rgba(178,107,255,0.5) !important;
    transform: scale(1.1);
}

/* Text block */
.epic-main .NewsTickerText {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #e8dcc0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
.epic-main .NewsTickerDate {
    display: inline-block;
    padding: 2px 9px !important;
    background: linear-gradient(180deg, rgba(76,194,255,0.22), rgba(76,194,255,0.1));
    border: 1px solid rgba(76,194,255,0.4);
    border-radius: 10px;
    color: #bfe7ff !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 1px;
    margin-right: 10px !important;
}
.epic-main .NewsTickerTime {
    color: var(--text-dim) !important;
    font-size: 11px !important;
    margin-right: 8px !important;
}
.epic-main .NewsTickerShortText {
    color: #fff !important;
    font-weight: 500;
    font-size: 14px !important;
    margin-top: 2px;
}
.epic-main .NewsTickerFullText {
    color: #d6ccaf !important;
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid #f0a020;
    border-radius: 0 8px 8px 0;
}
.epic-main .NewsTickerFullText img,
.epic-main .NewsTickerShortText img,
.epic-main .NewsTickerTextContainer img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain;
    display: block;
}
.epic-main .NewsTickerTextContainer { min-width: 0; }
.epic-main .NewsTickerFullText table,
.epic-main .NewsTickerFullText td,
.epic-main .NewsTickerFullText tr {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* ========================================================
   NEWS PAGE (latestnews.php)
   Each .topic--list is a modern colorful card
   ======================================================== */

/* Kill Bootstrap panel yellow/cream backgrounds globally in content */
.epic-main .panel,
.epic-main .panel-default,
.epic-main .panel-body,
.epic-main .panel-heading,
.epic-main .panel-footer,
.epic-main .bg-body {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Kill inline scroll.gif / yellow scrolls anywhere in content */
.epic-main [style*="scroll.gif"] {
    background-image: none !important;
    background: transparent !important;
}

/* Container of all news */
.epic-main .bg-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 14px;
}

/* Each news article = big rounded card with colored top stripe */
.epic-main .topic--list {
    position: relative;
    background: linear-gradient(180deg, rgba(25,22,48,0.65), rgba(18,15,38,0.5)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.epic-main .topic--list:hover {
    transform: translateY(-3px);
    border-color: rgba(255,216,107,0.4) !important;
    box-shadow: 0 16px 38px rgba(255,180,43,0.15), 0 0 0 1px rgba(255,216,107,0.3);
}
.epic-main .topic--list::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #f0a020, #ff6ba0, #b26bff, #4cc2ff, #4bd6a0, #f0a020);
    background-size: 300% 100%;
    animation: rainbowFlow 8s linear infinite;
    z-index: 2;
}
/* Alternate accent border per card for variety */
.epic-main .topic--list:nth-child(4n+1) { --card-accent: #f0a020; --card-accent2: #ff6ba0; }
.epic-main .topic--list:nth-child(4n+2) { --card-accent: #4cc2ff; --card-accent2: #b26bff; }
.epic-main .topic--list:nth-child(4n+3) { --card-accent: #4bd6a0; --card-accent2: #4cc2ff; }
.epic-main .topic--list:nth-child(4n+4) { --card-accent: #ff6ba0; --card-accent2: #f0a020; }

/* HEADLINE BANNER — big colorful header with icon */
.epic-main .topic--list .NewsHeadline {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}
.epic-main .topic--list .NewsHeadlineBackground {
    background-image: none !important;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--card-accent, #f0a020) 30%, transparent),
        color-mix(in srgb, var(--card-accent2, #ff6ba0) 22%, transparent)
    ) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}
.epic-main .topic--list .NewsHeadlineBackground::after {
    content: '';
    position: absolute; right: -40px; top: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    pointer-events: none;
}

/* Icon */
.epic-main .topic--list .NewsHeadlineIcon {
    width: 48px !important; height: 48px !important;
    padding: 8px;
    border-radius: 12px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 0 14px rgba(255,216,107,0.3);
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
    transition: transform .3s;
}
.epic-main .topic--list:hover .NewsHeadlineIcon {
    transform: rotate(-6deg) scale(1.08);
}

/* Date pill */
.epic-main .topic--list .NewsHeadlineDate {
    display: inline-block;
    padding: 4px 11px !important;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    color: #bfe7ff !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-right: 10px !important;
    white-space: nowrap;
    order: 2;
}

/* Title text */
.epic-main .topic--list .NewsHeadlineText {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(255,216,107,0.25);
    flex: 1 1 auto !important;
    min-width: 0;
    margin-left: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.epic-main .topic--list .NewsHeadlineText:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* BODY — aggressively kill any white/cream/scroll.gif backgrounds */
.epic-main .topic--list .panel,
.epic-main .topic--list .panel-body,
.epic-main .topic--list .panel-default,
.epic-main .topic--list .panel.panel-default,
.epic-main .topic--list [style*="scroll.gif"],
.epic-main .topic--list [style*="background-image"],
.epic-main .topic--list [style*="background-color"],
.epic-main .topic--list [bgcolor] {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.epic-main .topic--list > .panel-body {
    padding: 18px 22px !important;
}
.epic-main .topic--list #news-body {
    color: #e0d8c2 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    padding: 0 !important;
}
.epic-main .topic--list #news-body p,
.epic-main .topic--list #news-body span,
.epic-main .topic--list #news-body div { color: #e0d8c2 !important; }
.epic-main .topic--list #news-body p { margin: 0 0 10px; }
.epic-main .topic--list #news-body img {
    max-width: 100%;
    height: auto !important;
    border-radius: 10px;
    margin: 12px 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.epic-main .topic--list #news-body table,
.epic-main .topic--list #news-body td,
.epic-main .topic--list #news-body tr {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}
.epic-main .topic--list #news-body iframe {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    margin: 12px 0;
    display: block;
}
.epic-main .topic--list #news-body a {
    color: #ffd700 !important;
    border-bottom: 1px dashed rgba(255,216,107,0.4);
}
.epic-main .topic--list #news-body a:hover {
    color: #fff !important;
    border-bottom-color: #fff;
}

/* HR separator between content and footer */
.epic-main .topic--list hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent) !important;
    margin: 14px 0 !important;
}

/* FOOTER — "Posted by" bar */
.epic-main .topic--list > .panel-body + hr + .panel-body,
.epic-main .topic--list > .panel-body ~ .panel-body#news-body {
    padding: 12px 22px 18px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px !important;
    color: var(--text-dim) !important;
    background: transparent !important;
    line-height: 1.5 !important;
}
/* "Postado por" label — force color override on inline <font> */
.epic-main .topic--list font,
.epic-main .topic--list font[style],
.epic-main .topic--list font[color] {
    color: #f0a020 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-shadow: 0 0 8px rgba(255,180,43,0.3);
    background: none !important;
}
.epic-main .topic--list > .panel-body a[href*="characters"] {
    padding: 4px 12px;
    background: linear-gradient(180deg, rgba(255,180,43,0.22), rgba(255,180,43,0.08));
    border: 1px solid rgba(255,216,107,0.4);
    border-radius: 20px;
    color: #ffd700 !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,216,107,0.4) !important;
    transition: all .15s;
}
.epic-main .topic--list > .panel-body a[href*="characters"]:hover {
    background: linear-gradient(180deg, rgba(255,180,43,0.45), rgba(255,107,160,0.25));
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,180,43,0.3);
}

/* Admin action buttons (Delete/Edit/Add news) */
.epic-main .topic--list input.linkText,
.epic-main .topic--list input.linkTextRed,
.epic-main .linkText, .epic-main .linkTextRed {
    padding: 6px 14px !important;
    border: 1px solid rgba(76,194,255,0.4) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(76,194,255,0.18), rgba(76,194,255,0.06)) !important;
    color: #bfe7ff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
}
.epic-main .topic--list input.linkText:hover, .epic-main .linkText:hover {
    background: linear-gradient(180deg, rgba(76,194,255,0.4), rgba(178,107,255,0.2)) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76,194,255,0.3);
}
.epic-main .topic--list input.linkTextRed,
.epic-main .linkTextRed {
    border-color: rgba(255,77,77,0.45) !important;
    background: linear-gradient(180deg, rgba(255,77,77,0.2), rgba(255,77,77,0.06)) !important;
    color: #ff9e9e !important;
}
.epic-main .topic--list input.linkTextRed:hover, .epic-main .linkTextRed:hover {
    background: linear-gradient(180deg, rgba(255,77,77,0.5), rgba(255,107,160,0.3)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255,77,77,0.35) !important;
}

/* ========================================================
   FEATURED: TOP GUILDS
   ======================================================== */
.epic-main .guild-cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    padding: 10px;
}
.epic-main .guild-card {
    background: linear-gradient(180deg, rgba(178,107,255,0.12), rgba(76,194,255,0.08)) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
}
.epic-main .guild-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,216,107,0.5);
    box-shadow: 0 12px 28px rgba(178,107,255,0.25);
}
.epic-main .guild-card-header {
    background: linear-gradient(90deg, #f0a020, #ff6ba0);
    color: #1a0a20 !important;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 6px 10px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.epic-main .guild-card:nth-child(1) .guild-card-header { background: linear-gradient(90deg, #ffd700, #ffa500); }
.epic-main .guild-card:nth-child(2) .guild-card-header { background: linear-gradient(90deg, #e4e4e4, #a8a8a8); }
.epic-main .guild-card:nth-child(3) .guild-card-header { background: linear-gradient(90deg, #d38a3d, #7a4a1f); color: #fff !important; }
.epic-main .guild-card-content {
    padding: 14px 10px;
    color: var(--text);
}
.epic-main .guild-card-content img {
    width: 64px; height: 64px;
    object-fit: contain;
    margin: 0 auto 8px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.epic-main .guild-card-content .linkButton {
    background: none; border: none;
    color: #ffd700 !important;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px !important;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.epic-main .guild-card-content .linkButton:hover {
    background: rgba(255,180,43,0.18);
    color: #fff !important;
    text-shadow: 0 0 8px #f0a020;
}
.epic-main .guild-card-content small {
    display: block;
    margin-top: 8px;
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* TOP Guilds outer wrapper — styled via .Box rules already */
.epic-main #featuredTOPs .NewsHeadline,
.epic-main #featuredTOPs .NewsHeadlineBackground {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 12px 16px !important;
    margin: 0 0 10px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.epic-main #featuredTOPs .NewsHeadlineText {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px !important;
    flex: 1;
    width: auto !important;
}
.epic-main #featuredTOPs select {
    background-color: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,216,107,0.3);
    color: var(--text);
    padding: 6px 28px 6px 10px;
    border-radius: 8px;
    font-size: 13px;
}

/* "Add Ticker" / action buttons at top of news */
.epic-main .newsTickerButton {
    margin: 0 0 14px !important;
    display: flex;
    justify-content: flex-end;
}

/* Scrollbars in tables */
.epic-main .TableScrollbarWrapper, .epic-main .TableScrollbarContainer { display: none !important; }

/* Smoothen any leftover inline border="1" tables */
.epic-main table[border] { border: none !important; }
.epic-main table[border] td { border: none !important; }

/* ---------- FOOTER ---------- */
.epic-footer {
    margin-top: 50px;
    padding: 28px 22px;
    border-top: 1px solid var(--panel-border);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
}
.epic-footer .links { margin-bottom: 10px; }
.epic-footer .links a { margin: 0 10px; color: var(--gold-bright); }

/* ---------- UTILS ---------- */
.glow { text-shadow: 0 0 8px var(--gold); }
.center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.fade-in { animation: fadeIn .6s ease both; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: #0a0d18; }
::-webkit-scrollbar-thumb  { background: linear-gradient(180deg, var(--gold-dark), #3a2a0c); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- LOGIN BOX ---------- */
.login-box {
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.login-box label { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }

/* ---------- LEGACY GESIOR LOGIN FORM STYLES ---------- */
.TableContainer { width: 100%; }
.Table4 { width: 100%; border-collapse: collapse; }
.CaptionContainer { position: relative; }
.CaptionInnerContainer { 
    display: flex; align-items: center; justify-content: center;
    padding: 8px 0; position: relative;
}
.CaptionInnerContainer .Text { 
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px;
    color: var(--gold-bright); text-transform: uppercase; letter-spacing: 2px;
}
.InnerTableContainer { padding: 10px; }
.TableContent { width: 100%; border-collapse: collapse; }
.TableContent td { padding: 8px; vertical-align: middle; }
.loginBoxLogin { 
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 0;
}
.Cell { display: inline-flex; align-items: center; }
.Cell.LabelV120 { min-width: 120px; color: var(--text-dim); font-size: 13px; }
.Cell.InputField input[type="email"],
.Cell.InputField input[type="password"],
.Cell.InputField input[type="text"] {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 14px;
    min-width: 200px;
}
.Cell.InputField input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(218,165,32,0.3);
}
.Cell.ButtonField { margin: 5px; }
.Break { width: 100%; }
.BigButton { display: inline-block; cursor: pointer; }
.LoginButtons { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#LoginCreateAccountBox { padding: 10px; }
#LoginCreateAccountBox p { margin: 5px 0; color: var(--text); }

/* ========== MODERN ACCOUNT MANAGEMENT DASHBOARD ========== */
.am-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 0 24px;
}

/* Cards */
.am-card {
    background: linear-gradient(180deg, rgba(18, 22, 40, 0.85), rgba(11, 16, 32, 0.92));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    position: relative;
}
.am-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.am-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(218,165,32,0.12), rgba(138,107,31,0.04));
    border-bottom: 1px solid rgba(218,165,32,0.2);
    font-family: Cinzel, serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-bright);
}
.am-card-head > i:first-child {
    font-size: 18px;
    filter: drop-shadow(0 0 8px rgba(218,165,32,0.4));
}
.am-card-body {
    padding: 20px;
}

/* Status card */
.am-status-row {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.am-status-info {
    flex: 1;
    min-width: 220px;
}
.am-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: Cinzel, serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.is-vip .am-status-badge {
    background: linear-gradient(180deg, rgba(75,214,107,0.2), rgba(45,176,85,0.08));
    border: 1px solid rgba(75,214,107,0.5);
    color: #4bd66b;
    text-shadow: 0 0 10px rgba(75,214,107,0.3);
}
.is-free .am-status-badge {
    background: linear-gradient(180deg, rgba(231,76,60,0.18), rgba(123,26,26,0.08));
    border: 1px solid rgba(231,76,60,0.4);
    color: #ff9e9e;
}
.am-status-desc {
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}
.am-status-desc small { color: var(--text-dim); font-size: 12px; }
.am-status-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

/* Perks row */
.am-perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(218,165,32,0.15);
}
.am-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(218,165,32,0.04);
    border: 1px solid rgba(218,165,32,0.1);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}
.am-perk img {
    width: 36px; height: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.4));
}
@media (max-width: 800px) {
    .am-perks { grid-template-columns: 1fr; }
}

/* Info grid */
.am-info-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(218,165,32,0.15);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}
.am-info-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
    padding: 12px 16px;
    background: rgba(18, 22, 40, 0.6);
    align-items: center;
}
.am-info-label {
    color: var(--gold-bright);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.am-info-label i { width: 16px; text-align: center; }
.am-info-value {
    color: var(--text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.am-coins {
    color: var(--gold-bright) !important;
    font-weight: 700;
    font-size: 16px !important;
    font-family: Cinzel, serif;
}

/* Show/hide toggle */
.am-toggle {
    background: linear-gradient(180deg, rgba(218,165,32,0.18), rgba(138,107,31,0.08));
    border: 1px solid rgba(218,165,32,0.4);
    color: var(--gold-bright);
    width: 32px; height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: auto;
}
.am-toggle:hover {
    background: linear-gradient(180deg, rgba(218,165,32,0.35), rgba(138,107,31,0.15));
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(218,165,32,0.3);
}
.am-toggle.visible i::before { content: "\f070"; } /* eye-slash */

/* Actions row */
.am-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
.am-actions-row form { margin: 0; padding: 0; display: inline-block; }

/* Unified buttons */
.am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--gold);
    border-radius: 6px;
    font-family: Cinzel, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(218,165,32,0.22), rgba(138,107,31,0.1));
    color: var(--gold-bright);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.am-btn:hover {
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.2));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(218,165,32,0.3);
    color: var(--gold-bright);
}
.am-btn.am-btn-gold {
    background: linear-gradient(180deg, rgba(218,165,32,0.22), rgba(138,107,31,0.1));
    border-color: var(--gold);
    color: var(--gold-bright);
}
.am-btn.am-btn-green {
    background: linear-gradient(180deg, rgba(75,214,107,0.22), rgba(45,176,85,0.1));
    border-color: rgba(75,214,107,0.6);
    color: #4bd66b;
}
.am-btn.am-btn-green:hover {
    background: linear-gradient(180deg, rgba(75,214,107,0.4), rgba(45,176,85,0.2));
    box-shadow: 0 4px 12px rgba(75,214,107,0.3);
    color: #b7f5c5;
}
.am-btn.am-btn-red {
    background: linear-gradient(180deg, rgba(231,76,60,0.22), rgba(123,26,26,0.1));
    border-color: rgba(231,76,60,0.6);
    color: #ff9e9e;
}
.am-btn.am-btn-red:hover {
    background: linear-gradient(180deg, rgba(231,76,60,0.4), rgba(123,26,26,0.2));
    box-shadow: 0 4px 12px rgba(231,76,60,0.3);
    color: #fff;
}
.am-btn.am-btn-sm {
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.am-btn.am-btn-lg {
    padding: 14px 30px;
    font-size: 15px;
}

/* Profile card (not registered) */
.am-profile-card {
    border-color: rgba(255,180,43,0.3);
}
.am-profile-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.am-profile-text {
    flex: 1;
    min-width: 250px;
}
.am-profile-text h3 {
    margin: 0 0 8px;
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-size: 18px;
    letter-spacing: 1px;
}
.am-profile-text p {
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.5;
}

/* Characters list */
.am-chars-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(218,165,32,0.15);
    border-radius: 8px;
    overflow: hidden;
}
.am-char-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 15px;
    padding: 12px 16px;
    background: rgba(18, 22, 40, 0.7);
    align-items: center;
    transition: background 0.15s;
}
.am-char-row:hover {
    background: rgba(218,165,32,0.06);
}
.am-char-row.is-deleted { opacity: 0.6; }

.am-char-main { display: flex; flex-direction: column; gap: 4px; }
.am-char-name {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(218,165,32,0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.am-char-name:hover { color: #fff !important; text-shadow: 0 0 12px rgba(218,165,32,0.6); }
.am-char-main-icon { width: 18px; height: 18px; }
.am-char-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--text-dim);
    font-size: 12px;
}
.am-char-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.am-char-level { color: #ffd966 !important; font-weight: 600; }
.am-char-voc { color: var(--text); }
.am-char-world::before { content: "\f0ac"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 4px; opacity: 0.6; }
.am-char-guild { color: #4bd66b; }

.am-char-status {
    display: flex;
    align-items: center;
    gap: 4px;
}
.am-char-status img { width: 20px; height: 20px; }
.am-char-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}
.am-char-actions form { margin: 0; padding: 0; display: inline-block; }

.am-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
}

@media (max-width: 700px) {
    .am-info-row { grid-template-columns: 1fr; gap: 4px; }
    .am-char-row { grid-template-columns: 1fr; }
    .am-char-status, .am-char-actions { justify-content: flex-start; }
    .am-status-actions { width: 100%; }
}

/* ========== AM FORMS (create character, edit, etc.) ========== */
.am-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .am-form-grid { grid-template-columns: 1fr; }
}
.am-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.am-field label {
    color: var(--gold-bright);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.am-field input[type="text"],
.am-field input[type="password"],
.am-field input[type="email"],
.am-field select,
.am-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: rgba(11, 16, 32, 0.7);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s;
}
.am-field input:focus,
.am-field select:focus,
.am-field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
    background: rgba(11, 16, 32, 0.9);
}
.am-field input::placeholder { color: var(--text-dim); opacity: 0.7; }

.am-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.am-radio-pill {
    display: inline-flex;
    align-items: center;
    padding: 0;
    cursor: pointer;
    user-select: none;
}
.am-radio-pill input { display: none; }
.am-radio-pill span {
    padding: 8px 16px;
    background: rgba(218,165,32,0.08);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}
.am-radio-pill:hover span {
    background: rgba(218,165,32,0.18);
    border-color: var(--gold);
}
.am-radio-pill input:checked + span {
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.2));
    border-color: var(--gold);
    color: var(--gold-bright);
    box-shadow: 0 0 12px rgba(218,165,32,0.25);
}

.am-section-title {
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.am-section-desc {
    color: var(--text-dim);
    font-size: 12px;
    margin: 0 0 12px;
    line-height: 1.5;
}

/* World filter boxes */
.am-world-filter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.am-pvp-filter {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.am-world-option {
    cursor: pointer;
    user-select: none;
}
.am-world-option input { display: none; }
.am-world-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    background: rgba(218,165,32,0.05);
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 8px;
    transition: all 0.15s;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}
.am-world-box img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.am-world-box span, .am-world-box b {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
.am-world-box p {
    margin: 0;
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.3;
}
.am-world-option:hover .am-world-box {
    background: rgba(218,165,32,0.1);
    border-color: var(--gold);
    transform: translateY(-1px);
}
.am-world-option input:checked + .am-world-box {
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(138,107,31,0.1));
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(218,165,32,0.3), inset 0 0 0 1px var(--gold);
}
.am-world-option input:checked + .am-world-box span,
.am-world-option input:checked + .am-world-box b {
    color: var(--gold-bright);
}

/* World list (world_id radios injected by createcharhook.js) */
.am-world-list {
    background: rgba(11, 16, 32, 0.5);
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--text);
    font-size: 13px;
    line-height: 2;
}
.am-world-list label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    color: var(--text);
    cursor: pointer;
}
.am-world-list input[type="radio"] {
    accent-color: var(--gold);
    cursor: pointer;
}
.am-world-list input[type="radio"]:checked + ::after {
    color: var(--gold-bright);
}

/* Disabled filter option (text-disabled from createcharhook.js) */
.text-disabled { opacity: 0.35; cursor: not-allowed !important; }
.text-disabled .am-world-box { filter: grayscale(1); }

/* ========== World Radio Cards (injetado por createcharhook.js) ========== */
.am-world-list { padding: 8px !important; }
.am-world-radio {
    display: block;
    cursor: pointer;
    user-select: none;
    margin: 0 0 8px 0 !important;
    line-height: normal !important;
}
.am-world-radio:last-child { margin-bottom: 0 !important; }
.am-world-radio input { display: none; }
.am-world-radio-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(11, 16, 32, 0.5);
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 8px;
    transition: all 0.15s;
}
.am-world-radio:hover .am-world-radio-card {
    background: rgba(218,165,32,0.1);
    border-color: var(--gold);
    transform: translateY(-1px);
}
.am-world-radio input:checked + .am-world-radio-card {
    background: linear-gradient(180deg, rgba(218,165,32,0.28), rgba(138,107,31,0.12));
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(218,165,32,0.3), inset 0 0 0 1px var(--gold);
}
.am-world-radio-flag {
    width: 32px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(218,165,32,0.4);
    flex-shrink: 0;
}
.am-world-radio-info {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    line-height: 1.2;
}
.am-world-radio-info b {
    color: var(--text);
    font-family: Cinzel, serif;
    font-size: 14px;
    letter-spacing: 0.4px;
}
.am-world-radio-info em {
    color: var(--text-dim);
    font-size: 11px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.am-world-radio input:checked + .am-world-radio-card .am-world-radio-info b {
    color: var(--gold-bright);
}
.am-world-radio-new {
    height: 18px;
    width: auto;
    flex-shrink: 0;
}

/* ========== Vocation Cards (createaccount + createcharacter) ========== */
.am-voc-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
}
.am-voc-carousel::before,
.am-voc-carousel::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 56px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
.am-voc-carousel::before {
    left: 0;
    background: linear-gradient(90deg, rgba(11,16,32,0.95), rgba(11,16,32,0));
}
.am-voc-carousel::after {
    right: 0;
    background: linear-gradient(270deg, rgba(11,16,32,0.95), rgba(11,16,32,0));
}
.am-voc-carousel.has-overflow-left::before { opacity: 1; }
.am-voc-carousel.has-overflow-right::after { opacity: 1; }
.am-voc-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(218,165,32,0.85), rgba(138,107,31,0.85));
    color: #1a1206;
    border: 1px solid rgba(255,231,170,0.6);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s, transform 0.15s;
    pointer-events: none;
}
.am-voc-carousel-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}
.am-voc-carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }
.am-voc-carousel-arrow.left  { left: 6px; }
.am-voc-carousel-arrow.right { right: 6px; }

.am-vocation-cards {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 6px 4px 8px;
    /* "safe center": centra quando cabe, vira flex-start quando overflow (evita cortar a esquerda) */
    justify-content: safe center;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;  /* proximity em vez de mandatory pra n\u00e3o brigar com auto-scroll */
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
}
.am-vocation-cards::-webkit-scrollbar { display: none; height: 0; width: 0; }
/* Fallback para browsers sem "safe center" */
.am-vocation-cards.is-overflowing { justify-content: flex-start; }
.am-field label.am-voc-card,
label.am-voc-card {
    position: relative !important;
    width: 159px !important;
    min-width: 159px !important;
    max-width: 159px !important;
    height: 319px !important;
    min-height: 319px !important;
    flex: 0 0 159px !important;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    border: 2px solid rgba(218,165,32,0.25);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: block !important;
    scroll-snap-align: start;
    /* override .am-field label uppercase + spacing */
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    color: inherit !important;
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: initial !important;
}
.am-voc-card input { display: none; }
.am-voc-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    transition: filter 0.25s, transform 0.4s;
}
.am-voc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 2;
    pointer-events: none;
}
.am-voc-title {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 75%;
    max-height: 38px;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85));
    transition: opacity 0.25s, transform 0.25s;
}
.am-voc-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 18px 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    color: #f6e7c1;
    font-family: 'Crimson Text', Georgia, serif;
    z-index: 4;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s ease-out, opacity 0.25s ease-out;
    pointer-events: none;
    text-align: center;
}
.am-voc-info h5 {
    margin: 0 0 4px;
    font-family: Cinzel, serif;
    font-size: 15px;
    letter-spacing: 1px;
    color: #ffe9a8;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.am-voc-info p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: #f0e1bc;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

/* HOVER: backdrop scales slightly + info slides up */
.am-voc-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 6px 22px rgba(0,0,0,0.65), 0 0 14px rgba(218,165,32,0.3);
}
.am-voc-card:hover .am-voc-bg { transform: scale(1.04); filter: brightness(0.85); }
.am-voc-card:hover .am-voc-title { transform: translateX(-50%) translateY(-4px); }
.am-voc-card:hover .am-voc-info {
    transform: translateY(0);
    opacity: 1;
}

/* SELECTED state */
.am-voc-card input:checked ~ .am-voc-bg { filter: brightness(0.95) saturate(1.1); }
.am-voc-card:has(input:checked) {
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 2px rgba(218,165,32,0.55), 0 0 22px rgba(218,165,32,0.45), 0 6px 22px rgba(0,0,0,0.6);
}
/* Fallback for browsers without :has — sibling check via .checked class added by JS optionally */
.am-voc-card.is-selected {
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 2px rgba(218,165,32,0.55), 0 0 22px rgba(218,165,32,0.45), 0 6px 22px rgba(0,0,0,0.6);
}

@media (max-width: 780px) {
    .am-voc-card { width: 100%; max-width: 359px; }
}

/* ========== CAST SYSTEM (cast.php) ========== */
.am-cast-page { display: flex; flex-direction: column; gap: 18px; }

/* Hero */
.am-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(218,165,32,0.18), rgba(11,16,32,0.85) 60%);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.am-hero::after {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(218,165,32,0.25), transparent 70%);
    pointer-events: none;
}
.am-hero-icon {
    flex-shrink: 0;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.2));
    border: 2px solid rgba(218,165,32,0.6);
    box-shadow: 0 0 20px rgba(218,165,32,0.4);
    font-size: 28px;
    color: var(--gold-bright);
    z-index: 1;
}
.am-hero-text { z-index: 1; }
.am-hero-text h2 {
    margin: 0 0 4px;
    font-family: Cinzel, serif;
    font-size: 26px;
    color: var(--gold-bright);
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(218,165,32,0.4);
}
.am-hero-text p {
    margin: 0;
    color: var(--text);
    opacity: 0.85;
    font-size: 14px;
    line-height: 1.5;
    max-width: 720px;
}

/* Stats strip */
.am-cast-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.am-cast-stat {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(11,16,32,0.6);
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 10px;
    transition: all 0.2s;
}
.am-cast-stat:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(218,165,32,0.2);
}
.am-cast-stat > i {
    font-size: 22px;
    color: var(--gold);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(218,165,32,0.12);
}
.am-cast-stat b {
    display: block;
    font-family: Cinzel, serif;
    font-size: 20px;
    color: var(--gold-bright);
    line-height: 1;
}
.am-cast-stat span {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}
/* Scroll toggle (cl&aacute;ssico - imagem do pergaminho) */
.am-cast-page .am-cast-scroll-toggle {
    display: block !important;
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    text-align: center !important;
    width: 100%;
    margin: 0 auto;
}
.am-cast-page .am-cast-scroll-toggle img {
    display: inline-block;
    margin: 0 auto 6px;
    transition: transform 0.2s, filter 0.2s;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    border: 0;
}
.am-cast-scroll-toggle:hover img {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 4px 10px rgba(218,165,32,0.6));
}
.am-cast-scroll-toggle.is-open img {
    filter: drop-shadow(0 0 12px rgba(218,165,32,0.8));
}
.am-cast-scroll-toggle span {
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
    transition: color 0.2s;
}
.am-cast-scroll-toggle:hover span {
    color: var(--gold-bright);
}

/* Cast list */
.am-cast-list-body { padding: 14px !important; }
.am-cast-list { display: flex; flex-direction: column; gap: 12px; }
.am-cast-item {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(90deg, rgba(11,16,32,0.7), rgba(11,16,32,0.5));
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 10px;
    transition: all 0.2s;
    overflow: hidden;
}
.am-cast-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #ff4d4d, #c0392b);
    box-shadow: 0 0 10px rgba(255,77,77,0.6);
}
.am-cast-item.is-locked::before {
    background: linear-gradient(180deg, var(--gold), #8a6b1f);
    box-shadow: 0 0 10px rgba(218,165,32,0.6);
}
.am-cast-item:hover {
    border-color: var(--gold);
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 14px rgba(218,165,32,0.2);
}
.am-cast-live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(180deg, #ff4d4d, #c0392b);
    border-radius: 6px;
    color: #fff;
    font-family: Cinzel, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: 0 0 10px rgba(255,77,77,0.5);
}
.am-cast-live-badge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: castPulse 1.4s ease-in-out infinite;
}
.am-cast-item.is-locked .am-cast-live-badge {
    background: linear-gradient(180deg, var(--gold), #8a6b1f);
    color: #1a1206;
    box-shadow: 0 0 10px rgba(218,165,32,0.5);
}
@keyframes castPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.3); }
}
.am-cast-avatar {
    width: 64px; height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(218,165,32,0.18), transparent 70%);
    border-radius: 50%;
}
.am-cast-avatar img {
    max-width: 64px;
    max-height: 64px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.am-cast-info { min-width: 0; }
.am-cast-name {
    display: inline-block;
    font-family: Cinzel, serif;
    font-size: 16px;
    color: var(--gold-bright) !important;
    text-decoration: none !important;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.am-cast-name:hover { color: #fff !important; text-shadow: 0 0 10px var(--gold); }
.am-cast-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.am-cast-meta i { color: var(--gold); margin-right: 4px; }
.am-cast-desc-line {
    color: var(--text);
    opacity: 0.85;
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-cast-desc-line i {
    color: var(--gold);
    opacity: 0.5;
    margin-right: 4px;
    font-size: 10px;
}
.am-cast-stats-col {
    display: flex; flex-direction: column; gap: 6px;
    align-items: flex-end;
    text-align: right;
    min-width: 130px;
}
.am-cast-spectators {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: rgba(218,165,32,0.12);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 8px;
    color: var(--gold-bright);
}
.am-cast-spectators i { font-size: 14px; }
.am-cast-spectators b { font-family: Cinzel, serif; font-size: 16px; }
.am-cast-started {
    font-size: 11px;
    color: var(--text-dim);
    display: flex; align-items: center; gap: 5px;
}
.am-cast-lock {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-family: Cinzel, serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.am-cast-lock.locked {
    background: rgba(231,76,60,0.18);
    color: #ff8a7a;
    border: 1px solid rgba(231,76,60,0.4);
}
.am-cast-lock.public {
    background: rgba(75,214,107,0.18);
    color: #95eaa8;
    border: 1px solid rgba(75,214,107,0.4);
}

@media (max-width: 720px) {
    .am-cast-item {
        grid-template-columns: auto 1fr;
        gap: 10px;
    }
    .am-cast-live-badge { grid-column: 1 / -1; justify-self: start; }
    .am-cast-stats-col { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .am-cast-desc-line { white-space: normal; }
}

/* Empty state */
.am-cast-empty {
    text-align: center;
    padding: 40px 20px;
}
.am-cast-empty i {
    font-size: 56px;
    color: var(--gold);
    opacity: 0.4;
    margin-bottom: 14px;
}
.am-cast-empty h4 {
    margin: 0 0 6px;
    font-family: Cinzel, serif;
    color: var(--gold-bright);
    font-size: 18px;
    letter-spacing: 1.5px;
}
.am-cast-empty p {
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
}

/* Help (collapsible) */
.am-cast-desc { color: var(--text); line-height: 1.55; font-size: 14px; }
.am-cast-desc code,
.am-cast-cmd code {
    background: rgba(11,16,32,0.7);
    border: 1px solid rgba(218,165,32,0.3);
    padding: 1px 7px;
    border-radius: 4px;
    color: var(--gold-bright);
    font-family: 'Courier New', monospace;
    font-size: 12px;
}
.am-cast-cmds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.am-cast-cmd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(11,16,32,0.5);
    border: 1px solid rgba(218,165,32,0.15);
    border-radius: 8px;
    font-size: 13px;
}
.am-cast-cmd:hover { border-color: rgba(218,165,32,0.4); background: rgba(11,16,32,0.7); }
.am-cast-cmd-icon { width: 18px; height: 18px; flex-shrink: 0; }
.am-cast-cmd code { white-space: nowrap; flex-shrink: 0; }
.am-cast-cmd span { color: var(--text-dim); flex: 1; }
.am-cast-legend {
    display: flex; flex-wrap: wrap; gap: 18px;
    justify-content: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(218,165,32,0.2);
    font-size: 12px;
    color: var(--text-dim);
}
.am-cast-legend img { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }

/* Bonus note */
.am-cast-bonus-note {
    text-align: center;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(75,214,107,0.12), rgba(75,214,107,0.04));
    border: 1px solid rgba(75,214,107,0.4);
    border-radius: 10px;
    color: #b7f5c5;
    font-size: 14px;
}
.am-cast-bonus-note i {
    color: #95eaa8;
    margin-right: 6px;
    font-size: 16px;
}
.am-cast-bonus-note b { color: #fff; }

/* ========== EVENT CALENDAR (eventcalendar.php) ========== */
.am-calendar-page { display: flex; flex-direction: column; gap: 18px; }

/* Header bar with month navigation */
.am-calendar-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
}
.am-calendar-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}
.am-calendar-arrow {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(138,107,31,0.1));
    border: 1px solid rgba(218,165,32,0.5);
    color: var(--gold-bright) !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: all 0.15s;
}
.am-calendar-arrow:hover {
    background: linear-gradient(180deg, var(--gold), rgba(218,165,32,0.5));
    color: #1a1206 !important;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(218,165,32,0.4);
}
.am-calendar-arrow.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}
.am-calendar-month {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Cinzel, serif;
    font-size: 18px;
    color: var(--gold-bright);
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(218,165,32,0.3);
    text-transform: none !important;
    min-width: 200px;
    justify-content: center;
}
.am-calendar-month i { color: var(--gold); font-size: 16px; }
.am-calendar-now {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: 12px;
    font-family: 'Courier New', monospace;
    background: rgba(11,16,32,0.55);
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 6px;
    padding: 6px 12px;
}
.am-calendar-now i { color: var(--gold); }

/* Calendar table */
.am-calendar-body { padding: 12px !important; }
.am-calendar-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 6px !important;
    table-layout: fixed;
    background: transparent !important;
}
.am-calendar-table tr,
.am-calendar-table tr:hover td { background: transparent !important; }
.am-cal-weekday {
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(138,107,31,0.1)) !important;
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 10px 4px !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    border-radius: 6px !important;
}

/* Day cells (legacy ids: dia_atual, dia_comum, dia_branco) */
.am-calendar-table td {
    height: 96px !important;
    min-height: 96px;
    vertical-align: top !important;
    padding: 8px !important;
    background: rgba(11,16,32,0.55) !important;
    border: 1px solid rgba(218,165,32,0.18) !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    color: var(--text);
    font-size: 12px;
    position: relative;
}
.am-calendar-table td:hover {
    border-color: var(--gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.am-calendar-table td#dia_atual,
.am-calendar-table td[id="dia_atual"] {
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(138,107,31,0.08)) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 16px rgba(218,165,32,0.35), inset 0 0 0 1px rgba(255,231,170,0.4) !important;
}
.am-calendar-table td#dia_atual::before,
.am-calendar-table td[id="dia_atual"]::before {
    content: "TODAY";
    position: absolute;
    top: 4px; right: 6px;
    font-family: Cinzel, serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--gold-bright);
    background: rgba(11,16,32,0.7);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(218,165,32,0.5);
}
.am-calendar-table td#dia_branco,
.am-calendar-table td[id="dia_branco"] {
    background: rgba(11,16,32,0.2) !important;
    border-color: rgba(218,165,32,0.05) !important;
    opacity: 0.5;
}
.am-calendar-table td#dia_branco:hover,
.am-calendar-table td[id="dia_branco"]:hover {
    transform: none;
    border-color: rgba(218,165,32,0.05) !important;
    box-shadow: none;
}
/* Day number */
.am-calendar-table td > div[style*="font-weight: bold"]:first-child {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}
/* Event pills inside cells (legacy class .calendarEventName) */
.am-calendar-table .calendarEventName {
    display: block;
    padding: 3px 6px;
    margin-bottom: 3px;
    border-radius: 4px;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-calendar-table .sazonalIcons {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}
.am-calendar-table .sazonalIcons img {
    width: 16px; height: 16px;
    filter: drop-shadow(0 0 4px rgba(218,165,32,0.5));
}
.am-calendar-table .HelperDivIndicator { cursor: help; }

/* Legend */
.am-calendar-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    color: var(--text);
    font-size: 13px;
}
.am-calendar-legend > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(11,16,32,0.5);
    border: 1px solid rgba(218,165,32,0.15);
    border-radius: 8px;
}
.am-calendar-legend img { width: 18px; height: 18px; }
.am-cal-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: rgba(218,165,32,0.18);
    border: 1px solid rgba(218,165,32,0.4);
    border-radius: 5px;
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 720px) {
    .am-calendar-table td { height: 70px !important; font-size: 10px !important; }
    .am-calendar-table .calendarEventName { font-size: 9px !important; padding: 2px 4px; }
    .am-cal-weekday { font-size: 10px !important; padding: 6px 2px !important; letter-spacing: 0.5px !important; }
    .am-calendar-month { font-size: 14px; min-width: auto; }
}

/* ========== CHANGELOG (changelog.php) ========== */
.am-changelog-page { display: flex; flex-direction: column; gap: 18px; }

/* Categories grid */
.am-changelog-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.am-changelog-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(11,16,32,0.5);
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 8px;
    transition: all 0.15s;
}
.am-changelog-cat:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}
.am-changelog-cat img {
    width: 32px; height: 32px;
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.3));
}
.am-changelog-cat b {
    font-family: Cinzel, serif;
    font-size: 11px;
    color: var(--gold-bright);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Changelog list */
.am-changelog-body { padding: 14px !important; }
.am-changelog-list { display: flex; flex-direction: column; gap: 10px; }
.am-changelog-item {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(11,16,32,0.7), rgba(11,16,32,0.5));
    border: 1px solid rgba(218,165,32,0.18);
    border-radius: 10px;
    transition: all 0.2s;
}
.am-changelog-item:hover {
    border-color: var(--gold);
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 14px rgba(218,165,32,0.15);
}
.am-changelog-item.is-hidden { opacity: 0.55; }
.am-changelog-new {
    position: absolute;
    top: -6px; left: -6px;
    z-index: 2;
    padding: 2px 8px;
    background: linear-gradient(180deg, #ff4d4d, #c0392b);
    color: #fff;
    font-family: Cinzel, serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(255,77,77,0.5);
    transform: rotate(-6deg);
}
.am-changelog-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(218,165,32,0.1);
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 8px;
    padding: 6px;
}
.am-changelog-icon img { max-width: 100%; max-height: 100%; }
.am-changelog-main { min-width: 0; }
.am-changelog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 12px;
    flex-wrap: wrap;
}
.am-changelog-id {
    font-family: 'Courier New', monospace;
    color: var(--gold-bright);
    font-weight: 700;
    background: rgba(218,165,32,0.15);
    border: 1px solid rgba(218,165,32,0.3);
    padding: 1px 7px;
    border-radius: 4px;
}
.am-changelog-cat-name {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: Cinzel, serif;
    font-size: 11px;
}
.am-changelog-date {
    color: var(--text-dim);
    font-size: 12px;
}
.am-changelog-date i { color: var(--gold); margin-right: 4px; }
.am-changelog-desc {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-changelog-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.am-changelog-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: rgba(11,16,32,0.6);
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    font-family: Cinzel, serif;
}
.am-changelog-stat i { color: var(--gold); }
.am-changelog-stat.is-hot {
    background: rgba(255,77,77,0.15);
    border-color: rgba(255,77,77,0.4);
    color: #ff8a7a;
}
.am-changelog-stat.is-hot i { color: #ff4d4d; animation: castPulse 1.4s ease-in-out infinite; }
.am-changelog-likes img { width: 14px; height: 14px; }
.am-changelog-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.am-cl-form { display: inline-block; margin: 0; }

@media (max-width: 760px) {
    .am-changelog-item {
        grid-template-columns: auto 1fr;
        gap: 10px;
    }
    .am-changelog-stats, .am-changelog-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; }
    .am-changelog-desc { white-space: normal; }
}

/* Empty state */
.am-changelog-empty {
    text-align: center;
    padding: 36px 20px;
}
.am-changelog-empty i {
    font-size: 50px;
    color: var(--gold);
    opacity: 0.4;
    margin-bottom: 12px;
}
.am-changelog-empty h4 {
    margin: 0 0 6px;
    font-family: Cinzel, serif;
    color: var(--gold-bright);
    font-size: 17px;
    letter-spacing: 1.5px;
}
.am-changelog-empty p { margin: 0; color: var(--text-dim); font-size: 13px; }

/* Pagination */
.am-changelog-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(218,165,32,0.2);
}
.am-changelog-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-dim); font-size: 13px; }
.am-changelog-pages b { color: var(--gold-bright); margin-right: 4px; font-family: Cinzel, serif; letter-spacing: 1px; }
.am-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: rgba(11,16,32,0.6);
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-family: Cinzel, serif;
    font-size: 13px;
    transition: all 0.15s;
}
.am-page-link:hover {
    background: rgba(218,165,32,0.15);
    border-color: var(--gold);
    color: var(--gold-bright) !important;
}
.am-page-link.active {
    background: linear-gradient(180deg, var(--gold), rgba(218,165,32,0.5));
    color: #1a1206 !important;
    border-color: var(--gold);
    cursor: default;
}
.am-changelog-total {
    color: var(--text-dim);
    font-size: 13px;
}
.am-changelog-total b { color: var(--gold-bright); font-family: Cinzel, serif; }

.am-changelog-disclaimer {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: rgba(11,16,32,0.4);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}
.am-changelog-disclaimer i { color: var(--gold); margin-right: 6px; }

/* Single view */
.am-changelog-view-date {
    margin-left: auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: none !important;
    letter-spacing: normal !important;
}
.am-changelog-view-date i { color: var(--gold); margin-right: 4px; }
.am-changelog-view-body { padding: 22px !important; }
.am-changelog-content {
    color: var(--text);
    line-height: 1.65;
    font-size: 14px;
}
.am-changelog-content ul, .am-changelog-content ol { margin: 10px 0 10px 24px; }
.am-changelog-content li { margin-bottom: 4px; }
.am-changelog-content a { color: var(--gold-bright); text-decoration: underline; }
.am-changelog-content b, .am-changelog-content strong { color: var(--gold-bright); }
.am-changelog-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(218,165,32,0.4), transparent);
    margin: 18px 0;
}
.am-changelog-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 6px;
}
.am-cl-foot-block { text-align: center; }
.am-cl-foot-block small {
    display: block;
    color: var(--text-dim);
    font-family: Cinzel, serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10px;
    margin-bottom: 6px;
}
.am-cl-share, .am-cl-copy {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.am-cl-share a, .am-cl-copy a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(11,16,32,0.6);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 6px;
    color: var(--gold-bright) !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: all 0.15s;
}
.am-cl-share a:hover, .am-cl-copy a:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(218,165,32,0.25);
}
.am-cl-likes { margin: 0; display: flex; justify-content: center; }

@media (max-width: 600px) {
    .am-changelog-footer { grid-template-columns: 1fr; }
}

.am-changelog-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

/* Admin category radios */
.am-changelog-cat-radios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.am-changelog-cat-radio {
    cursor: pointer;
    user-select: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    background: rgba(11,16,32,0.5);
    border: 2px solid rgba(218,165,32,0.2);
    border-radius: 8px;
    transition: all 0.15s;
    font-family: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--text) !important;
}
.am-changelog-cat-radio input { display: none; }
.am-changelog-cat-radio img { width: 28px; height: 28px; }
.am-changelog-cat-radio span { font-size: 11px; color: var(--text-dim); }
.am-changelog-cat-radio:hover {
    border-color: var(--gold);
    background: rgba(218,165,32,0.08);
}
.am-changelog-cat-radio:has(input:checked),
.am-changelog-cat-radio.is-checked {
    border-color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(138,107,31,0.1));
    box-shadow: 0 0 14px rgba(218,165,32,0.3);
}

.am-changelog-delete-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* Generic Epic buttons used across changelog */
.am-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(218,165,32,0.5);
    border-radius: 8px;
    background: rgba(11,16,32,0.55);
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s;
}
.am-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.am-btn-gold {
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.15));
    border-color: var(--gold);
    color: var(--gold-bright) !important;
}
.am-btn-gold:hover {
    background: linear-gradient(180deg, var(--gold), rgba(218,165,32,0.5));
    color: #1a1206 !important;
    box-shadow: 0 6px 16px rgba(218,165,32,0.4);
}
.am-btn-danger {
    background: linear-gradient(180deg, #c0392b, #7b1a1a);
    border-color: #e74c3c;
    color: #fff !important;
}
.am-btn-danger:hover {
    background: linear-gradient(180deg, #e74c3c, #a02020);
    box-shadow: 0 6px 16px rgba(231,76,60,0.4);
}
.am-btn-ghost {
    background: rgba(11,16,32,0.4);
    border-color: rgba(218,165,32,0.25);
    color: var(--text) !important;
}
.am-btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright) !important; }

/* ========== CHARACTER PROFILE (when name searched) ========== */
.am-character-profile-page { display: flex; flex-direction: column; gap: 10px; }
.am-character-profile-page .TableContainer { margin-bottom: 0 !important; }

/* Neutralize legacy colored backgrounds inside profile */
.am-character-profile-page tr[bgcolor],
.am-character-profile-page td[bgcolor],
.am-character-profile-page tr[style*="background-color"],
.am-character-profile-page td[style*="background-color"] {
    background-color: transparent !important;
}
.am-character-profile-page td[style*="color: blanchedalmond"],
.am-character-profile-page td[style*="color:blanchedalmond"] {
    color: var(--text) !important;
}
/* Toggle row: full-width header for collapsible sections */
.am-character-profile-page .am-toggle-row td {
    padding: 0 !important;
}
.am-character-profile-page .am-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(218,165,32,0.18), rgba(138,107,31,0.05));
    border: none;
    border-bottom: 1px solid rgba(218,165,32,0.25);
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.am-character-profile-page .am-toggle-btn:hover {
    background: linear-gradient(180deg, rgba(218,165,32,0.3), rgba(138,107,31,0.1));
}
.am-character-profile-page .am-toggle-btn > i:first-child {
    font-size: 14px;
    color: var(--gold);
    transition: transform 0.2s;
}
.am-character-profile-page .am-toggle-btn.is-open > i:first-child {
    transform: rotate(180deg);
}
.am-character-profile-page .am-toggle-btn span {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.am-character-profile-page .am-toggle-btn span i { color: var(--gold); }

/* Hero with character outfit + stats */
.am-char-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(218,165,32,0.18), rgba(11,16,32,0.85) 60%);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.am-char-hero::after {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(218,165,32,0.25), transparent 70%);
    pointer-events: none;
}
.am-char-hero-avatar {
    flex-shrink: 0;
    width: 110px; height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(218,165,32,0.3), transparent 70%);
    border-radius: 50%;
    z-index: 1;
}
.am-char-hero-avatar img {
    max-width: 100%; max-height: 100%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}
.am-char-hero-info { flex: 1 1 280px; min-width: 0; z-index: 1; }
.am-char-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-family: Cinzel, serif;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 6px;
}
.am-char-hero-status.online {
    background: rgba(75,214,107,0.18);
    color: #95eaa8;
    border: 1px solid rgba(75,214,107,0.4);
}
.am-char-hero-status.offline {
    background: rgba(120,120,120,0.18);
    color: #b0b0b0;
    border: 1px solid rgba(120,120,120,0.3);
}
.am-char-hero-status .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.am-char-hero-status.online .dot { animation: castPulse 1.4s ease-in-out infinite; }
.am-char-hero-name {
    margin: 0 0 8px;
    font-family: Cinzel, serif;
    font-size: 28px;
    color: var(--gold-bright);
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(218,165,32,0.5);
}
.am-char-hero-meta {
    display: flex; flex-wrap: wrap; gap: 16px;
    color: var(--text);
    font-size: 13px;
}
.am-char-hero-meta i { color: var(--gold); margin-right: 5px; }
.am-char-hero-stats {
    display: flex; gap: 14px;
    flex-shrink: 0;
    z-index: 1;
}
.am-char-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 18px;
    background: rgba(11,16,32,0.6);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 10px;
    min-width: 80px;
}
.am-char-hero-stat i {
    color: var(--gold);
    font-size: 18px;
    margin-bottom: 4px;
}
.am-char-hero-stat b {
    font-family: Cinzel, serif;
    font-size: 22px;
    color: var(--gold-bright);
    line-height: 1;
}
.am-char-hero-stat span {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

/* Restyle legacy TableContainer/Caption inside profile to look like Epic cards */
.am-character-profile-page .CaptionEdgeLeftTop,
.am-character-profile-page .CaptionEdgeRightTop,
.am-character-profile-page .CaptionEdgeLeftBottom,
.am-character-profile-page .CaptionEdgeRightBottom,
.am-character-profile-page .CaptionBorderTop,
.am-character-profile-page .CaptionBorderBottom,
.am-character-profile-page .CaptionVerticalLeft,
.am-character-profile-page .CaptionVerticalRight,
.am-character-profile-page .TableScrollbarWrapper,
.am-character-profile-page .TableScrollbarContainer {
    display: none !important;
}
.am-character-profile-page .TableContainer {
    background: linear-gradient(180deg, rgba(18,22,40,0.85), rgba(11,16,32,0.92)) !important;
    border: 1px solid rgba(218,165,32,0.25) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
    position: relative;
    margin-bottom: 14px !important;
}
.am-character-profile-page .TableContainer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.am-character-profile-page .CaptionContainer,
.am-character-profile-page .CaptionInnerContainer {
    background: linear-gradient(180deg, rgba(218,165,32,0.18), rgba(138,107,31,0.08)) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(218,165,32,0.2);
    position: relative;
}
.am-character-profile-page .CaptionContainer .Text,
.am-character-profile-page .CaptionInnerContainer .Text {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 10px rgba(218,165,32,0.4);
}
.am-character-profile-page .Table5,
.am-character-profile-page .TableContent,
.am-character-profile-page .TableContentContainer,
.am-character-profile-page .InnerTableContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important;
}
.am-character-profile-page .TableContent[style*="border"] {
    border: none !important;
}
.am-character-profile-page .TableContent tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(218,165,32,0.08);
}
.am-character-profile-page .TableContent tr:last-child { border-bottom: none; }
.am-character-profile-page .TableContent tr[bgcolor] td {
    background: transparent !important;
}
.am-character-profile-page .TableContent tr:nth-child(even) td {
    background: rgba(218,165,32,0.04) !important;
}
.am-character-profile-page .TableContent td {
    padding: 8px 14px !important;
    color: var(--text);
    border: none !important;
    font-size: 13px;
}
.am-character-profile-page .LabelV175,
.am-character-profile-page .LabelV120,
.am-character-profile-page .LabelV {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    width: 200px;
    vertical-align: middle !important;
}

/* Inputs/buttons in search section at bottom */
.am-character-profile-page input[type="text"],
.am-character-profile-page input[name="name"] {
    box-sizing: border-box;
    padding: 10px 14px;
    background: rgba(11,16,32,0.7) !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s;
}
.am-character-profile-page input[type="text"]:focus {
    outline: none;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
}
.am-character-profile-page .BigButton {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
}
.am-character-profile-page .BigButton input[type="submit"],
.am-character-profile-page .BigButtonText {
    padding: 8px 18px !important;
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.15)) !important;
    background-image: none !important;
    border: 1px solid var(--gold) !important;
    border-radius: 8px !important;
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    width: auto !important;
    height: auto !important;
    transition: all 0.15s;
}
.am-character-profile-page .BigButton input[type="submit"]:hover,
.am-character-profile-page .BigButtonText:hover {
    background: linear-gradient(180deg, var(--gold), rgba(218,165,32,0.5)) !important;
    color: #1a1206 !important;
}

@media (max-width: 720px) {
    .am-char-hero { padding: 16px; gap: 14px; }
    .am-char-hero-avatar { width: 80px; height: 80px; }
    .am-char-hero-name { font-size: 22px; }
    .am-char-hero-stats { width: 100%; }
    .am-char-hero-stat { flex: 1; }
}

/* ========== CHARACTERS PAGE — PODIUM + SEARCH ========== */
.am-characters-page { display: flex; flex-direction: column; gap: 18px; }

/* Podium */
.am-podium-body {
    padding: 36px 24px 0 !important;
    padding-bottom: 0 !important;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(218,165,32,0.1), transparent 65%),
        linear-gradient(180deg, transparent 50%, rgba(218,165,32,0.04) 100%) !important;
    position: relative;
    overflow: hidden;
}
.am-podium-body::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(218,165,32,0.07));
    pointer-events: none;
    z-index: 0;
}
.am-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
    flex-wrap: nowrap;
}
.am-podium-slot {
    position: relative;
    flex: 1 1 200px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px 0;
    text-decoration: none !important;
    color: var(--text);
    transition: transform 0.25s, filter 0.25s;
}
.am-podium-slot:hover,
.am-podium-slot:focus,
.am-podium-slot:active {
    transform: translateY(-6px);
    filter: brightness(1.1);
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.am-podium-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: Cinzel, serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.am-podium-rank i { font-size: 14px; }
.am-podium-rank-1 .am-podium-rank {
    background: linear-gradient(180deg, #ffd700, #daa520);
    color: #1a1206;
    box-shadow: 0 0 18px rgba(218,165,32,0.6);
}
.am-podium-rank-2 .am-podium-rank {
    background: linear-gradient(180deg, #e6e6e6, #a8a8a8);
    color: #1a1a1a;
    box-shadow: 0 0 12px rgba(200,200,200,0.4);
}
.am-podium-rank-3 .am-podium-rank {
    background: linear-gradient(180deg, #cd9165, #8a5a3b);
    color: #1a1206;
    box-shadow: 0 0 12px rgba(205,145,101,0.4);
}

.am-podium-avatar {
    width: 110px; height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(218,165,32,0.15), transparent 70%);
    border-radius: 50%;
    position: relative;
}
.am-podium-rank-2 .am-podium-avatar {
    background: radial-gradient(circle, rgba(200,200,200,0.18), transparent 70%);
    filter: drop-shadow(0 0 12px rgba(180,180,180,0.35));
}
.am-podium-rank-3 .am-podium-avatar {
    background: radial-gradient(circle, rgba(205,145,101,0.18), transparent 70%);
    filter: drop-shadow(0 0 10px rgba(205,145,101,0.3));
}
.am-podium-rank-1 .am-podium-avatar {
    width: 136px; height: 136px;
    background: radial-gradient(circle, rgba(218,165,32,0.38), transparent 70%);
    filter: drop-shadow(0 0 22px rgba(218,165,32,0.6));
}
.am-podium-avatar img {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
}
.am-podium-name {
    font-family: Cinzel, serif;
    font-size: 15px;
    color: var(--gold-bright);
    text-shadow: 0 0 10px rgba(218,165,32,0.4);
    text-align: center;
    letter-spacing: 1px;
}
.am-podium-rank-1 .am-podium-name { font-size: 18px; }
.am-podium-meta {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.am-podium-level {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(218,165,32,0.12);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 8px;
}
.am-podium-level span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
}
.am-podium-level b {
    font-family: Cinzel, serif;
    font-size: 18px;
    color: var(--gold-bright);
}
.am-podium-rank-1 .am-podium-level b { font-size: 22px; }

/* Pedestal base */
.am-podium-base {
    width: 100%;
    margin-top: 12px;
    border-radius: 10px 10px 0 0;
    position: relative;
    overflow: visible;
    margin-bottom: -200px;
    padding-bottom: 200px;
}
.am-podium-rank-1 .am-podium-base {
    min-height: 96px;
    background: linear-gradient(180deg, rgba(218,165,32,0.5), rgba(138,107,31,0.3));
    border: 1px solid var(--gold);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255,231,170,0.4), 0 -6px 20px rgba(218,165,32,0.25);
}
.am-podium-rank-2 .am-podium-base {
    min-height: 68px;
    background: linear-gradient(180deg, rgba(200,200,200,0.35), rgba(120,120,120,0.2));
    border: 1px solid rgba(200,200,200,0.55);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 -4px 14px rgba(0,0,0,0.3);
}
.am-podium-rank-3 .am-podium-base {
    min-height: 48px;
    background: linear-gradient(180deg, rgba(205,145,101,0.38), rgba(138,90,59,0.22));
    border: 1px solid rgba(205,145,101,0.55);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255,200,150,0.2), 0 -4px 14px rgba(0,0,0,0.3);
}
.am-podium-base::after {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: Cinzel, serif;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}
.am-podium-rank-1 .am-podium-base::after {
    content: "1";
    font-size: 56px;
    color: rgba(255,231,120,0.55);
    text-shadow: 0 0 18px rgba(218,165,32,0.5), 0 2px 4px rgba(0,0,0,0.6);
}
.am-podium-rank-2 .am-podium-base::after {
    content: "2";
    font-size: 40px;
    color: rgba(230,230,230,0.5);
    text-shadow: 0 0 12px rgba(200,200,200,0.4), 0 2px 4px rgba(0,0,0,0.5);
}
.am-podium-rank-3 .am-podium-base::after {
    content: "3";
    font-size: 30px;
    color: rgba(255,185,130,0.5);
    text-shadow: 0 0 10px rgba(205,145,101,0.4), 0 2px 4px rgba(0,0,0,0.5);
}

@media (max-width: 720px) {
    .am-podium { gap: 8px; }
    .am-podium-slot { padding: 10px 6px 0; }
    .am-podium-avatar { width: 80px; height: 80px; }
    .am-podium-rank-1 .am-podium-avatar { width: 96px; height: 96px; }
    .am-podium-name { font-size: 12px; word-break: break-word; }
    .am-podium-rank-1 .am-podium-name { font-size: 14px; }
    .am-podium-rank-1 .am-podium-base { height: 60px; }
    .am-podium-rank-2 .am-podium-base { height: 44px; }
    .am-podium-rank-3 .am-podium-base { height: 30px; }
}

/* Character Search */
.am-char-search {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}
.am-char-search-input {
    flex: 1 1 280px;
    position: relative;
    display: flex;
    align-items: center;
}
.am-char-search-input i {
    position: absolute;
    left: 14px;
    color: var(--gold);
    font-size: 16px;
    pointer-events: none;
}
.am-char-search-input input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px 12px 42px;
    background: rgba(11,16,32,0.7);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 8px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    transition: all 0.15s;
}
.am-char-search-input input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
    background: rgba(11,16,32,0.9);
}
.am-char-search-input input::placeholder { color: var(--text-dim); opacity: 0.7; }
.am-char-search button {
    padding: 12px 22px;
    font-size: 14px;
}

/* ========== LOSTACCOUNT (lostaccount.php) ========== */
.am-lostaccount-page { display: flex; flex-direction: column; gap: 18px; }

/* Hide ALL the legacy box-frame decoration sprites */
.am-lostaccount-page .CaptionEdgeLeftTop,
.am-lostaccount-page .CaptionEdgeRightTop,
.am-lostaccount-page .CaptionEdgeLeftBottom,
.am-lostaccount-page .CaptionEdgeRightBottom,
.am-lostaccount-page .CaptionBorderTop,
.am-lostaccount-page .CaptionBorderBottom,
.am-lostaccount-page .CaptionVerticalLeft,
.am-lostaccount-page .CaptionVerticalRight,
.am-lostaccount-page .TableScrollbarWrapper,
.am-lostaccount-page .TableScrollbarContainer {
    display: none !important;
}

/* TableContainer becomes Epic card */
.am-lostaccount-page .TableContainer {
    background: linear-gradient(180deg, rgba(18,22,40,0.85), rgba(11,16,32,0.92)) !important;
    border: 1px solid rgba(218,165,32,0.25) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
    position: relative;
    margin-bottom: 0 !important;
}
.am-lostaccount-page .TableContainer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.am-lostaccount-page .CaptionContainer,
.am-lostaccount-page .CaptionInnerContainer {
    background: linear-gradient(180deg, rgba(218,165,32,0.18), rgba(138,107,31,0.08)) !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(218,165,32,0.25);
    position: relative;
}
.am-lostaccount-page .CaptionContainer .Text,
.am-lostaccount-page .CaptionInnerContainer .Text {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 10px rgba(218,165,32,0.4);
}

/* Inner tables — make them transparent */
.am-lostaccount-page .Table5,
.am-lostaccount-page .TableContent,
.am-lostaccount-page .TableContentContainer,
.am-lostaccount-page .InnerTableContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 14px !important;
}
.am-lostaccount-page table {
    background: transparent !important;
    color: var(--text);
}
.am-lostaccount-page .TableContent,
.am-lostaccount-page .TableContent tbody,
.am-lostaccount-page .TableContent tr,
.am-lostaccount-page .TableContent td {
    background: transparent !important;
    border: none !important;
}
.am-lostaccount-page .TableContent[style*="border"] {
    border: 1px solid rgba(218,165,32,0.15) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.am-lostaccount-page tr[style*="background-color"] td {
    background: transparent !important;
}

/* Form rows */
.am-lostaccount-page .LabelV200,
.am-lostaccount-page .LabelV {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    width: 200px;
    vertical-align: middle !important;
}
.am-lostaccount-page td {
    padding: 10px 14px !important;
    color: var(--text);
    line-height: 1.55;
}
.am-lostaccount-page td[style*="color: red"] {
    color: #ff8a7a !important;
    background: rgba(231,76,60,0.1) !important;
    border-left: 3px solid #e74c3c;
    border-radius: 4px;
    padding: 10px 14px !important;
}
.am-lostaccount-page td a { color: var(--gold-bright) !important; }
.am-lostaccount-page td b { color: var(--gold-bright); }

/* Inputs */
.am-lostaccount-page input[type="text"],
.am-lostaccount-page input[type="password"],
.am-lostaccount-page input[type="email"] {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    padding: 10px 14px;
    background: rgba(11,16,32,0.7) !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s;
}
.am-lostaccount-page input[type="text"]:focus,
.am-lostaccount-page input[type="password"]:focus,
.am-lostaccount-page input[type="email"]:focus {
    outline: none;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
    background: rgba(11,16,32,0.9) !important;
}

/* Radio buttons (action_type chooser) */
.am-lostaccount-page input[type="radio"] {
    accent-color: var(--gold);
    width: 16px; height: 16px;
    vertical-align: middle;
    margin-right: 6px;
}

/* BigButton -> Epic button */
.am-lostaccount-page .BigButton {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
    margin: 4px;
}
.am-lostaccount-page .BigButton input[type="submit"],
.am-lostaccount-page .BigButtonText {
    padding: 10px 22px !important;
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.15)) !important;
    background-image: none !important;
    border: 1px solid var(--gold) !important;
    border-radius: 8px !important;
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.15s;
    width: auto !important;
    height: auto !important;
}
.am-lostaccount-page .BigButton input[type="submit"]:hover,
.am-lostaccount-page .BigButtonText:hover {
    background: linear-gradient(180deg, var(--gold), rgba(218,165,32,0.5)) !important;
    color: #1a1206 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(218,165,32,0.4);
}

/* Center button rows */
.am-lostaccount-page table[style*="display: flex"] {
    display: flex !important;
    justify-content: center !important;
    margin: 8px 0 !important;
}
.am-lostaccount-page table[style*="display: flex"] tbody,
.am-lostaccount-page table[style*="display: flex"] tr {
    display: flex !important;
    gap: 12px;
}

/* ===== LOSTACCOUNT STEP FORM (initial action='' form) ===== */
.am-lostaccount-page .am-la-step-body {
    padding: 22px 24px 26px;
}

.am-lostaccount-page .am-la-desc {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 22px;
    padding: 12px 16px;
    background: rgba(218,165,32,0.04);
    border-left: 3px solid rgba(218,165,32,0.35);
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

.am-lostaccount-page .am-la-desc i {
    color: rgba(218,165,32,0.7);
    font-size: 15px;
    flex-shrink: 0;
}

/* Option cards (radio selectors) */
.am-lostaccount-page .am-la-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.am-lostaccount-page .am-la-option {
    cursor: pointer;
    display: block;
}

.am-lostaccount-page .am-la-option input[type="radio"] {
    display: none !important;
}

.am-lostaccount-page .am-la-option-box {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    background: rgba(11,16,32,0.55);
    border: 1px solid rgba(218,165,32,0.15);
    border-radius: 10px;
    transition: all 0.2s;
}

.am-lostaccount-page .am-la-option-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(218,165,32,0.08);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
}

.am-lostaccount-page .am-la-option-icon i {
    font-size: 20px;
    color: rgba(218,165,32,0.6);
    transition: color 0.2s;
}

.am-lostaccount-page .am-la-option-box strong {
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
}

.am-lostaccount-page .am-la-option-box p {
    color: var(--text-dim);
    font-size: 12px;
    margin: 0;
    line-height: 1.55;
}

.am-lostaccount-page .am-la-option:hover .am-la-option-box {
    border-color: rgba(218,165,32,0.4);
    background: rgba(218,165,32,0.06);
}

.am-lostaccount-page .am-la-option:hover .am-la-option-icon {
    background: rgba(218,165,32,0.14);
}

.am-lostaccount-page .am-la-option:hover .am-la-option-icon i {
    color: var(--gold);
}

.am-lostaccount-page .am-la-option input[type="radio"]:checked + .am-la-option-box {
    border-color: var(--gold) !important;
    background: rgba(218,165,32,0.1) !important;
    box-shadow: 0 0 0 1px rgba(218,165,32,0.25), 0 4px 16px rgba(0,0,0,0.3);
}

.am-lostaccount-page .am-la-option input[type="radio"]:checked + .am-la-option-box .am-la-option-icon {
    background: rgba(218,165,32,0.2);
}

.am-lostaccount-page .am-la-option input[type="radio"]:checked + .am-la-option-box .am-la-option-icon i {
    color: var(--gold-bright);
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.5));
}

/* ========== ACCOUNT MANAGEMENT LEGACY FIXES (for sub-action pages) ========== */

/* Show/Hide toggle: replace PNG with CSS gradient button + FA eye icon */
.epic-main .pull-right {
    position: absolute !important;
    right: 10px !important;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    display: flex !important;
    align-items: center;
}
.epic-main [id^="showInfoAccount"],
.epic-main [id^="btn_hiddenAccount"],
.epic-main [id^="showInfoEmail"],
.epic-main [id^="btn_hiddenEmail"] {
    position: static !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: linear-gradient(180deg, rgba(218,165,32,0.18), rgba(138,107,31,0.08)) !important;
    border: 1px solid rgba(218,165,32,0.4) !important;
    border-radius: 6px !important;
    transition: all 0.2s;
}
.epic-main [id^="showInfoAccount"]:hover,
.epic-main [id^="btn_hiddenAccount"]:hover,
.epic-main [id^="showInfoEmail"]:hover,
.epic-main [id^="btn_hiddenEmail"]:hover {
    background: linear-gradient(180deg, rgba(218,165,32,0.35), rgba(138,107,31,0.15)) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 10px rgba(218,165,32,0.25);
}
.epic-main [id^="showInfoAccount"] img,
.epic-main [id^="btn_hiddenAccount"] img,
.epic-main [id^="showInfoEmail"] img,
.epic-main [id^="btn_hiddenEmail"] img {
    width: 0 !important; height: 0 !important;
    display: none !important;
}
.epic-main [id^="showInfoAccount"]::before,
.epic-main [id^="showInfoEmail"]::before {
    content: "\f06e"; /* fa-eye */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--gold-bright); font-size: 14px;
}
.epic-main [id^="btn_hiddenAccount"]::before,
.epic-main [id^="btn_hiddenEmail"]::before {
    content: "\f070"; /* fa-eye-slash */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--gold-bright); font-size: 14px;
}

/* Cells containing masked fields need position relative */
.epic-main #CharacterCell2_1,
.epic-main td:has(#MaskedAccount2),
.epic-main td:has(#MaskedEmail) {
    position: relative !important;
}

/* ===== CHARACTER LIST ===== */
.epic-main #charactersSystem .Table3 td,
.epic-main #charactersSystem .TableContent td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
    line-height: 1.4 !important;
}
.epic-main #charactersSystem .TableContent tr:hover td {
    background: rgba(212, 175, 55, 0.06) !important;
}
/* Character name highlight */
.epic-main #charactersSystem #CharacterCell2_1 a {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(218,165,32,0.3);
}
.epic-main #charactersSystem #CharacterCell2_1 a:hover {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(218,165,32,0.6);
}
.epic-main #charactersSystem #CharacterCell2_1 small {
    color: var(--text-dim) !important;
    font-size: 11px !important;
    opacity: 0.85;
}
.epic-main #charactersSystem #CharacterCell2_1 br {
    line-height: 0 !important;
}
.epic-main #charactersSystem #CharacterCell2_1 > span {
    line-height: 1.3 !important;
}

/* Edit/Delete/Undelete pill linkButtons */
.epic-main .linkButton {
    background: linear-gradient(180deg, rgba(218,165,32,0.18), rgba(138,107,31,0.08)) !important;
    border: 1px solid rgba(218,165,32,0.45) !important;
    color: var(--gold-bright) !important;
    padding: 5px 14px !important;
    border-radius: 5px !important;
    font-family: Cinzel, serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    text-decoration: none !important;
    display: inline-block;
}
.epic-main .linkButton:hover {
    background: linear-gradient(180deg, rgba(218,165,32,0.35), rgba(138,107,31,0.15)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(218,165,32,0.25);
}
/* Red variant when the button is Delete */
.epic-main form[action*="deletecharacter"] .linkButton {
    background: linear-gradient(180deg, rgba(231,76,60,0.25), rgba(123,26,26,0.12)) !important;
    border-color: rgba(231,76,60,0.5) !important;
    color: #ff9e9e !important;
}
.epic-main form[action*="deletecharacter"] .linkButton:hover {
    background: linear-gradient(180deg, rgba(231,76,60,0.45), rgba(123,26,26,0.2)) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(231,76,60,0.3);
}

/* Action cell - buttons side-by-side horizontally */
.epic-main #charactersSystem td[id^="CharacterCell4"] {
    text-align: right !important;
    padding-right: 15px !important;
    white-space: nowrap !important;
}
.epic-main #charactersSystem td[id^="CharacterCell4"] > span {
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: nowrap;
}
.epic-main #charactersSystem td[id^="CharacterCell4"] > span > span {
    display: inline-flex;
}
.epic-main #charactersSystem td[id^="CharacterCell4"] br {
    display: none !important;
}
.epic-main #charactersSystem td[id^="CharacterCell4"] form {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== NOT REGISTERED ROW ===== */
/* Force the "Your account is not registered" cell to use full available width */
.epic-main td.red {
    width: auto !important;
    padding: 15px 20px !important;
    text-align: left !important;
    font-size: 14px !important;
}
.epic-main td.red b, .epic-main td.red center {
    text-align: left !important;
    display: block !important;
    font-size: 15px !important;
    letter-spacing: 0.5px;
}
.epic-main td.red center {
    text-align: left !important;
}

/* ===== PREMIUM BENEFITS ROW ===== */
.epic-main td.premiumbenefits {
    display: table-cell !important;
    padding: 18px !important;
}
.epic-main td.premiumbenefits > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    padding: 6px 0;
}
.epic-main td.premiumbenefits > div:last-child {
    margin-bottom: 0 !important;
}
.epic-main td.premiumbenefits > div > div {
    flex: 1;
    color: var(--text);
    font-size: 13px;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.epic-main td.premiumbenefits .PremiumFeatureImage1 {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.4));
}

/* Account status right buttons - uniform width */
.epic-main .TableContent td .BigButton,
.epic-main .TableContent td .BigButtonGreen,
.epic-main .TableContent td .BigButtonRed {
    min-width: 170px !important;
    width: 100% !important;
    margin-bottom: 6px !important;
}

/* ========== CHARACTER PROFILE — refinements ========== */
/* Strong color neutralization in profile (kill leftover green/red/colored bits) */
.am-character-profile-page font[color],
.am-character-profile-page [style*="color: green"],
.am-character-profile-page [style*="color:green"],
.am-character-profile-page [style*="color: red"],
.am-character-profile-page [style*="color:red"],
.am-character-profile-page [style*="color: brown"],
.am-character-profile-page [style*="color:brown"],
.am-character-profile-page [style*="color: darkgreen"],
.am-character-profile-page [style*="color:darkgreen"] {
    color: var(--text) !important;
}
.am-character-profile-page span.green,
.am-character-profile-page font[color="green"] { color: #4ade80 !important; }
.am-character-profile-page span.red,
.am-character-profile-page font[color="red"] { color: #f87171 !important; }

/* ========== PROFILE LAYOUT (sidebar only, showcase is full-width below) ========== */
.am-profile-grid {
    display: flex;
    margin-bottom: 16px;
}
.am-profile-sidebar { display: flex; width: 100%; }
.am-profile-sidebar > .am-profile-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 14px 20px;
    padding: 18px 24px;
    overflow: hidden;
}
/* Row 1: Header — full-width */
.am-profile-header {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(218,165,32,0.15);
    margin-bottom: 4px;
}
.am-profile-header .am-profile-name {
    margin: 0;
    font-size: 26px;
    text-align: left;
    white-space: nowrap;
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(255,215,0,0.5), 0 0 24px rgba(218,165,32,0.25), 0 2px 0 rgba(0,0,0,0.5);
    background: linear-gradient(90deg, var(--gold-bright) 30%, #fff8d0 45%, var(--gold-bright) 60%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShimmer 4s linear infinite;
}
.am-profile-header .am-profile-vocation { align-self: center; }
/* Row 2: Avatar | Info | Guild */
.am-profile-card .am-profile-avatar { padding: 0; width: auto; flex-shrink: 0; background: none; }
.am-profile-card .am-profile-avatar img { width: 110px; height: 110px; }
/* Info list */
.am-profile-card .am-profile-info {
    flex: 1;
    margin: 0;
    padding: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.am-profile-card .am-profile-info li { border-bottom: 1px solid rgba(218,165,32,0.07); padding: 6px 4px; }
.am-profile-card .am-profile-info li:last-child { border-bottom: none; }
/* Guild */
.am-profile-card .am-profile-guild {
    margin-top: 0;
    flex-shrink: 0;
    align-self: center;
    min-width: 170px;
    max-width: 200px;
    border-left: 1px solid rgba(218,165,32,0.15);
    padding-left: 20px;
    background: none;
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

/* Sidebar card — centered avatar + name + status corner */
.am-profile-card {
    background: linear-gradient(180deg, rgba(20,24,42,0.95), rgba(11,16,32,0.98));
    border: 1px solid rgba(218,165,32,0.22);
    border-radius: 14px;
    overflow: visible;
    position: relative;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    text-align: center;
    padding: 24px 18px 22px;
    justify-content: center;
}
.am-profile-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent);
    box-shadow: 0 2px 12px rgba(255,215,0,0.45), 0 0 4px rgba(255,215,0,0.6);
}
/* Status badge in TOP-RIGHT corner */
.am-profile-status-corner {
    position: absolute;
    top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1px solid;
    z-index: 2;
}
.am-profile-status-corner .dot { width: 6px; height: 6px; border-radius: 50%; }
.am-profile-status-corner.online { color: #4ade80; background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.50); }
.am-profile-status-corner.online .dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: livePulse 1.6s ease-in-out infinite; }
.am-profile-status-corner.offline { color: var(--text-dim); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.am-profile-status-corner.offline .dot { background: var(--text-dim); }

.am-profile-avatar {
    width: 100%;
    padding: 18px 0 10px;
    display: flex; justify-content: center; align-items: center;
    background: radial-gradient(ellipse at center, rgba(218,165,32,0.18), transparent 65%);
}
.am-profile-avatar img {
    width: 150px; height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(218,165,32,0.45));
}
.am-profile-name {
    margin: 8px 0 8px;
    font-family: Cinzel, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: 0 0 16px rgba(218,165,32,0.4);
    letter-spacing: 1px;
    text-align: center;
}
.am-profile-vocation {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px;
    border: 1px solid rgba(218,165,32,0.30);
    border-radius: 20px;
    background: rgba(218,165,32,0.08);
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.am-profile-vocation i { color: var(--gold); }

/* Sidebar info list (World/Residence/Houses) */
.am-profile-info {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(218,165,32,0.15);
    text-align: left;
    width: 100%;
}
.am-profile-info li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(218,165,32,0.07);
    font-size: 12px;
}
.am-profile-info li:last-child { border-bottom: none; }
.am-profile-info li > i {
    width: 16px;
    color: var(--gold);
    font-size: 12px;
    text-align: center;
    margin-top: 2px;
}
.am-profile-info li > span {
    flex: 1;
    color: var(--text-dim);
    font-family: Cinzel, serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    padding-top: 1px;
}
.am-profile-info li > b {
    color: var(--text);
    font-weight: 600;
    font-size: 12px;
    text-align: right;
    max-width: 55%;
}
.am-profile-info-houses { flex-wrap: wrap; }
.am-profile-info-houses .am-house-list {
    display: flex; flex-direction: column; gap: 4px;
    align-items: flex-end;
    max-width: 60%;
}
.am-profile-info-houses .am-house-list a {
    display: flex; flex-direction: column; align-items: flex-end;
    color: var(--gold-bright) !important;
    font-size: 11px;
    line-height: 1.3;
    transition: color .15s;
}
.am-profile-info-houses .am-house-list a:hover { color: #fff !important; }
.am-profile-info-houses .am-house-list small {
    color: var(--text-dim);
    font-size: 9px;
    font-style: italic;
}

/* Guild block in sidebar */
.am-profile-guild {
    margin-top: 14px;
    padding: 12px;
    display: flex; gap: 10px; align-items: center;
    background: linear-gradient(180deg, rgba(218,165,32,0.10), rgba(11,16,32,0.5));
    border: 1px solid rgba(218,165,32,0.22);
    border-radius: 10px;
    text-align: left;
}
.am-profile-guild-empty {
    background: rgba(11,16,32,0.4);
    border-style: dashed;
    border-color: rgba(218,165,32,0.18);
}
.am-profile-guild-empty > i {
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed rgba(218,165,32,0.25);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 18px;
}
.am-profile-guild-empty .am-profile-guild-text strong {
    color: var(--text-dim);
    font-family: Cinzel, serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.am-house-empty {
    color: var(--text-dim);
    font-style: italic;
    font-size: 11px;
}
.am-profile-guild img {
    width: 44px; height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(11,16,32,0.5);
    border-radius: 8px;
    border: 1px solid rgba(218,165,32,0.20);
    padding: 4px;
}
.am-profile-guild-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-profile-guild-text a {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.am-profile-guild-text a:hover { color: #fff !important; }
.am-profile-guild-text span {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* Flag tile */
.am-tile-flag {
    width: 36px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(218,165,32,0.30);
    box-shadow: 0 0 8px rgba(218,165,32,0.25);
}

@media (max-width: 600px) {
    .am-profile-sidebar > .am-profile-card { flex-direction: column; text-align: center; padding: 16px; }
    .am-profile-header { justify-content: center; }
    .am-profile-card .am-profile-avatar img { width: 100px; height: 100px; }
    .am-profile-card .am-profile-name { text-align: center; font-size: 20px; }
    .am-profile-card .am-profile-vocation { align-self: center; }
    .am-profile-card .am-profile-info { flex-direction: column; gap: 0; }
    .am-profile-card .am-profile-guild { min-width: unset; width: 100%; border-left: none; border-top: 1px solid rgba(218,165,32,0.15); padding-left: 0; padding-top: 12px; }
}

/* ========== INNOVATIVE CHARACTER SHEET ========== */
.am-sheet-showcase {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    padding: 22px;
    background:
        radial-gradient(ellipse at top left, rgba(218,165,32,0.18), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(74,222,128,0.06), transparent 60%),
        linear-gradient(180deg, rgba(20,24,42,0.95), rgba(11,16,32,0.98));
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.45);
    position: relative;
    overflow: hidden;
}
.am-sheet-showcase::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* XP Ring */
.am-xp-ring {
    position: relative;
    width: 220px; height: 220px;
    align-self: center;
    justify-self: center;
}
.am-xp-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 16px rgba(218,165,32,0.35));
}
.am-xp-ring .ring-track {
    fill: none;
    stroke: rgba(218,165,32,0.10);
    stroke-width: 10;
}
.am-xp-ring .ring-fill {
    fill: none;
    stroke: url(#xpGrad);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1);
    animation: ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse {
    0%,100% { filter: drop-shadow(0 0 6px rgba(218,165,32,0.4)); }
    50%     { filter: drop-shadow(0 0 14px rgba(218,165,32,0.7)); }
}
.am-xp-ring-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80%;
}
.am-xp-ring-content .ring-level {
    font-family: Cinzel, serif;
    font-size: 56px;
    font-weight: 900;
    color: var(--gold-bright);
    text-shadow: 0 0 24px rgba(218,165,32,0.5);
    line-height: 1;
}
.am-xp-ring-content .ring-label {
    font-family: Cinzel, serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 4px;
}
.am-xp-ring-content .ring-pct {
    margin-top: 10px;
    padding: 4px 12px;
    border: 1px solid rgba(218,165,32,0.35);
    border-radius: 20px;
    font-size: 11px;
    color: var(--gold-bright);
    background: rgba(218,165,32,0.10);
}

/* Stat tiles */
.am-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    align-self: center;
}
.am-stat-tile {
    background: linear-gradient(180deg, rgba(218,165,32,0.10), rgba(11,16,32,0.5));
    border: 1px solid rgba(218,165,32,0.20);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
}
.am-stat-tile::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top, rgba(218,165,32,0.12), transparent 55%);
    opacity: 0; transition: opacity .2s;
}
.am-stat-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(218,165,32,0.45);
    box-shadow: 0 8px 22px rgba(218,165,32,0.18);
}
.am-stat-tile:hover::after { opacity: 1; }
.am-stat-tile i {
    font-size: 22px;
    color: var(--gold);
    filter: drop-shadow(0 0 10px rgba(218,165,32,0.45));
    z-index: 1;
}
.am-stat-tile b {
    font-family: Cinzel, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(218,165,32,0.35);
    z-index: 1;
}
.am-stat-tile span {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
    z-index: 1;
}

/* Showcase responsive — must come AFTER base rules to override correctly */
@media (max-width: 860px) {
    .am-sheet-showcase {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }
    .am-xp-ring {
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }
    .am-xp-ring-content .ring-level { font-size: 44px; }
    .am-stat-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 540px) {
    .am-sheet-showcase {
        padding: 16px !important;
        gap: 14px !important;
    }
    .am-xp-ring {
        width: 150px;
        height: 150px;
    }
    .am-xp-ring-content .ring-level { font-size: 38px; }
    .am-stat-tiles {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .am-stat-tile {
        padding: 12px 8px;
    }
    .am-stat-tile b { font-size: 14px; }
    .am-stat-tile i { font-size: 18px; }
}

/* Skills card */
.am-skills-card .am-card-body { padding: 18px 20px; }
.am-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 22px;
}
.am-skill-row { display: flex; flex-direction: column; gap: 6px; }
.am-skill-head {
    display: flex; justify-content: space-between; align-items: center;
}
.am-skill-name {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: Cinzel, serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text);
}
.am-skill-name i { color: var(--gold); font-size: 13px; }
.am-skill-val {
    font-family: Cinzel, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(218,165,32,0.3);
}
.am-skill-bar {
    height: 8px;
    background: rgba(11,16,32,0.7);
    border: 1px solid rgba(218,165,32,0.20);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.am-skill-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(218,165,32,0.6), var(--gold), #f5d76e);
    box-shadow: 0 0 12px rgba(218,165,32,0.6);
    border-radius: 5px;
    transition: width 1.2s cubic-bezier(.2,.8,.2,1);
    position: relative;
}
.am-skill-bar-fill::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: skillShine 2.4s ease-in-out infinite;
}
@keyframes skillShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Hide ALL legacy TableContainers in profile (replaced by modern blocks) */
.am-character-profile-page .TableContainer { display: none !important; }

/* Section sub-titles (inside modern cards) */
.am-section-title {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 0 10px;
    padding: 0 0 8px;
    font-family: Cinzel, serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold-bright);
    border-bottom: 1px solid rgba(218,165,32,0.18);
}
.am-section-title i { color: var(--gold); }

/* ===== Timeline (deaths, frags) ===== */
.am-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
    position: relative;
}
.am-timeline::before {
    content: "";
    position: absolute; left: 17px; top: 6px; bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(218,165,32,0.30), transparent);
}
.am-timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 10px 12px 10px 0;
    margin-left: 0;
}
.am-timeline-dot {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(20,24,42,0.95), rgba(11,16,32,0.98));
    border: 2px solid rgba(218,165,32,0.35);
    color: var(--gold);
    font-size: 13px;
    z-index: 1;
    box-shadow: 0 0 12px rgba(218,165,32,0.20);
}
.am-timeline-item.death .am-timeline-dot { border-color: rgba(248,113,113,0.45); color: #f87171; box-shadow: 0 0 12px rgba(248,113,113,0.25); }
.am-timeline-item.frag-unjust .am-timeline-dot { border-color: rgba(251,146,60,0.50); color: #fb923c; box-shadow: 0 0 12px rgba(251,146,60,0.25); }
.am-timeline-item.frag-just .am-timeline-dot { border-color: rgba(74,222,128,0.50); color: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,0.25); }

.am-timeline-content {
    flex: 1;
    background: linear-gradient(180deg, rgba(218,165,32,0.05), rgba(11,16,32,0.40));
    border: 1px solid rgba(218,165,32,0.12);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all .15s;
}
.am-timeline-item:hover .am-timeline-content {
    border-color: rgba(218,165,32,0.35);
    background: linear-gradient(180deg, rgba(218,165,32,0.10), rgba(11,16,32,0.50));
}
.am-timeline-meta {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--text-dim);
}
.am-timeline-meta .lvl {
    padding: 2px 8px;
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 12px;
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-weight: 700;
    letter-spacing: 1px;
}
.am-timeline-meta time { font-style: italic; }
.am-timeline-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.am-timeline-text b { color: var(--gold-bright); font-weight: 600; }
.am-timeline-text a { color: var(--gold-bright) !important; }
.tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 6px;
}
.tag-bad { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.35); }
.tag-good { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }

/* Clickable stat tiles */
.am-tile-clickable {
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
}
.am-tile-clickable[disabled] { opacity: 0.5; cursor: not-allowed; }
.am-tile-clickable[disabled]:hover { transform: none; box-shadow: none; }
.am-tile-corner {
    position: absolute;
    top: 8px; right: 10px;
    font-size: 10px !important;
    color: var(--text-dim) !important;
    opacity: 0.6;
    transition: all .15s;
}
.am-tile-clickable:hover .am-tile-corner { color: var(--gold) !important; opacity: 1; transform: scale(1.15); }

/* ===== Modal ===== */
.am-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.am-modal.is-open { display: flex; animation: modalFadeIn .18s ease; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.am-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.am-modal-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(20,24,42,0.98), rgba(11,16,32,0.99));
    border: 1px solid rgba(218,165,32,0.30);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.65), 0 0 30px rgba(218,165,32,0.18);
    overflow: hidden;
    animation: modalSlideUp .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.am-modal-panel::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.am-modal-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(218,165,32,0.14), rgba(218,165,32,0.04));
    border-bottom: 1px solid rgba(218,165,32,0.20);
    color: var(--gold-bright);
    font-family: Cinzel, serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.am-modal-head > i:first-child { color: var(--gold); font-size: 16px; }
.am-modal-head span { flex: 1; }
.am-modal-head em { color: var(--text-dim); font-style: normal; font-size: 11px; letter-spacing: 1px; }
.am-modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(218,165,32,0.10);
    border: 1px solid rgba(218,165,32,0.25);
    color: var(--gold-bright);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.am-modal-close:hover { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.am-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 20px;
}
.am-modal-empty {
    text-align: center;
    color: var(--text-dim);
    padding: 30px 0;
    font-style: italic;
}
.am-modal-body::-webkit-scrollbar { width: 8px; }
.am-modal-body::-webkit-scrollbar-thumb { background: rgba(218,165,32,0.30); border-radius: 4px; }
.am-modal-body::-webkit-scrollbar-track { background: rgba(11,16,32,0.4); }

/* Combat / Account body padding */
.am-combat-body, .am-account-card .am-card-body { padding: 16px 18px 18px; }
.am-combat-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
.am-combat-tiles .am-stat-tile { padding: 12px 10px; }
.am-combat-tiles .am-stat-tile i { font-size: 18px; }
.am-combat-tiles .am-stat-tile b { font-size: 22px; }
.am-account-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }

/* Compact timeline */
.am-timeline { padding-left: 0; }
.am-timeline::before { left: 14px; }
.am-timeline-item { padding: 6px 0; gap: 12px; }
.am-timeline-dot { width: 30px; height: 30px; font-size: 11px; border-width: 2px; }
.am-timeline-content { padding: 8px 12px; border-radius: 8px; }
.am-timeline-meta { margin-bottom: 2px; font-size: 10px; }
.am-timeline-meta .lvl { padding: 1px 7px; font-size: 10px; }
.am-timeline-text { font-size: 12px; line-height: 1.4; }
.am-section-title { margin: 14px 0 6px; padding-bottom: 6px; font-size: 11px; }

@media (max-width: 720px) {
    .am-sheet-showcase { grid-template-columns: 1fr; padding: 16px; }
    .am-xp-ring { width: 180px; height: 180px; }
    .am-xp-ring-content .ring-level { font-size: 44px; }
}

/* Each profile block = polished glass card */
.am-character-profile-page { gap: 14px !important; }
.am-character-profile-page > br { display: none !important; }
/* All TableContainers within profile main = polished glass cards */
.am-profile-main .TableContainer,
.am-character-profile-page > .TableContainer {
    background: linear-gradient(180deg, rgba(20,24,42,0.92), rgba(11,16,32,0.96)) !important;
    border: 1px solid rgba(218,165,32,0.22) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative;
    box-shadow: 0 8px 26px rgba(0,0,0,0.35);
    margin: 0 !important;
}
.am-profile-main .TableContainer::before,
.am-character-profile-page > .TableContainer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Caption (block header) — modern */
.am-character-profile-page .CaptionContainer {
    background: linear-gradient(180deg, rgba(218,165,32,0.14), rgba(218,165,32,0.04)) !important;
    border-bottom: 1px solid rgba(218,165,32,0.20) !important;
    padding: 0 !important;
}
.am-character-profile-page .CaptionInnerContainer {
    background: transparent !important;
    padding: 14px 20px !important;
    border-bottom: none !important;
}
.am-character-profile-page .CaptionInnerContainer .Text {
    font-family: Cinzel, serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--gold-bright) !important;
    text-shadow: 0 0 14px rgba(218,165,32,0.35);
    background: none !important;
}

/* Inner tables: zero borders/backgrounds, modern padding */
.am-character-profile-page .Table1,
.am-character-profile-page .Table2,
.am-character-profile-page .Table3,
.am-character-profile-page .Table4,
.am-character-profile-page .Table5,
.am-character-profile-page .TableContent,
.am-character-profile-page .TableContentContainer,
.am-character-profile-page .InnerTableContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.am-character-profile-page .TableContent {
    width: 100% !important;
    border-collapse: collapse !important;
}
.am-character-profile-page .TableContent tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(218,165,32,0.07);
}
.am-character-profile-page .TableContent tr:last-child { border-bottom: none; }
.am-character-profile-page .TableContent tr:hover td { background: rgba(218,165,32,0.04) !important; }
.am-character-profile-page .TableContent tr.LabelH td,
.am-character-profile-page .TableContent tr.LabelH th {
    background: rgba(218,165,32,0.06) !important;
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    padding: 10px 16px !important;
}
.am-character-profile-page .TableContent td {
    padding: 10px 16px !important;
    color: var(--text) !important;
    border: none !important;
    font-size: 13px !important;
    background: transparent !important;
}
.am-character-profile-page .TableContent .LabelV,
.am-character-profile-page .TableContent .LabelV120,
.am-character-profile-page .TableContent .LabelV175 {
    color: var(--gold-bright) !important;
    font-family: Cinzel, serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    background: transparent !important;
    padding: 10px 16px !important;
    width: 175px;
    font-weight: 700;
}
.am-character-profile-page .Label {
    color: var(--gold-bright) !important;
    background: transparent !important;
    font-family: Cinzel, serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 11px !important;
}

/* Equipment slot tiles */
.am-character-profile-page td[style*="#d4c0a1"],
.am-character-profile-page td[style*="background-color: #d4c0a1"] {
    background: linear-gradient(180deg, rgba(218,165,32,0.10), rgba(11,16,32,0.6)) !important;
    border: 1px solid rgba(218,165,32,0.18) !important;
    border-radius: 8px !important;
    padding: 6px !important;
}

/* Skill bars (if present) */
.am-character-profile-page .SkillBar,
.am-character-profile-page [class*="SkillBar"] {
    background: rgba(11,16,32,0.7) !important;
    border: 1px solid rgba(218,165,32,0.25) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* Links inside profile */
.am-character-profile-page a {
    color: var(--gold-bright) !important;
    text-decoration: none !important;
    transition: color .15s;
}
.am-character-profile-page a:hover { color: #fff !important; }

/* Strong color neutralization (override anything still bleeding through) */
.am-character-profile-page td[style*="color"] { color: var(--text) !important; }
.am-character-profile-page td[bgcolor],
.am-character-profile-page tr[bgcolor],
.am-character-profile-page td[style*="background"],
.am-character-profile-page tr[style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===== Account Characters list (Epic) ===== */
.am-char-list-card .am-card-body { padding: 0; }
.am-char-list {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}
.am-char-list thead th {
    text-align: left;
    padding: 12px 16px;
    font-family: Cinzel, serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(218,165,32,0.10), rgba(138,107,31,0.04));
    border-bottom: 1px solid rgba(218,165,32,0.25);
}
.am-char-list tbody tr {
    border-bottom: 1px solid rgba(218,165,32,0.08);
    transition: background 0.15s ease;
}
.am-char-list tbody tr:last-child { border-bottom: none; }
.am-char-list tbody tr:hover { background: rgba(218,165,32,0.06); }
.am-char-list tbody tr.is-current { background: rgba(218,165,32,0.10); }
.am-char-list tbody tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.am-char-list td {
    padding: 12px 16px;
    color: var(--text);
    font-size: 13px;
    vertical-align: middle;
}
.am-char-list .col-num {
    width: 42px;
    color: var(--text-dim);
    font-family: Cinzel, serif;
    font-weight: 700;
    text-align: center;
}
.am-char-list .col-name { min-width: 200px; }
.am-char-list .col-world { width: 120px; color: var(--text-dim); }
.am-char-list .col-status { width: 130px; }
.am-char-list .col-trade { width: 40px; text-align: center; }
.am-char-list .col-action { width: 110px; text-align: right; }

.am-char-name {
    font-family: Cinzel, serif;
    font-weight: 600;
    font-size: 14px;
    margin-right: 6px;
}
.am-char-name.on { color: #4ade80; }
.am-char-name.off { color: var(--text); }
.am-char-main { color: var(--gold); margin-right: 4px; }
.am-char-deleted { color: #f87171; font-size: 11px; font-weight: 700; margin-left: 6px; }
.am-char-hidden { color: var(--text-dim); font-size: 11px; font-style: italic; margin-left: 6px; }

.am-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid;
}
.am-status-pill .dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.am-status-pill.on {
    color: #4ade80;
    background: rgba(74,222,128,0.10);
    border-color: rgba(74,222,128,0.35);
}
.am-status-pill.on .dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: livePulse 1.6s ease-in-out infinite; }
.am-status-pill.off {
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}
.am-status-pill.off .dot { background: var(--text-dim); }

.am-icon-btn {
    background: rgba(218,165,32,0.12);
    border: 1px solid rgba(218,165,32,0.30);
    color: var(--gold-bright);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.am-icon-btn:hover { background: var(--gold); color: #1a1206; border-color: var(--gold); }

.am-btn-sm {
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* ===== Search Character card (isolated, after list) ===== */
.am-char-search-card { margin-top: 14px !important; }
.am-char-search-card .am-char-search {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.am-char-search-card .am-char-search-input {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: center;
}
.am-char-search-card .am-char-search-input i {
    position: absolute;
    left: 14px;
    color: var(--gold);
    pointer-events: none;
}
.am-char-search-card .am-char-search-input input {
    width: 100%;
    padding: 12px 14px 12px 40px !important;
    background: rgba(11,16,32,0.7) !important;
    border: 1px solid rgba(218,165,32,0.30) !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    transition: all .15s;
}
.am-char-search-card .am-char-search-input input:focus {
    outline: none;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
}

@media (max-width: 720px) {
    .am-char-list .col-world,
    .am-char-list thead th.col-world { display: none; }
    .am-char-list td, .am-char-list th { padding: 10px 8px; }
    .am-char-name { font-size: 13px; }
}

/* ========== HOUSES PAGE LAYOUT ========== */
.am-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.am-page .am-card {
    margin-bottom: 0;
}

.am-houses-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.am-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(218,165,32,0.08), rgba(11,16,32,0.6));
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 12px;
    text-align: center;
}

.am-hero-icon {
    font-size: 48px;
    color: var(--gold-bright);
    filter: drop-shadow(0 0 20px rgba(218,165,32,0.4));
}

.am-hero-text h2 {
    margin: 0 0 10px;
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: var(--gold-bright);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.am-hero-text p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

/* House list table styling - using highscores TableContent style */
.am-card-body .TableContent { 
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.am-card-body .TableContent tr { background: transparent !important; }
.am-card-body .TableContent tr[style*="background"] td,
.am-card-body .TableContent tr[bgcolor] td {
    background: transparent !important;
}
.am-card-body .TableContent td {
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: #eadfc5 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all .15s !important;
}

/* Header row (.LabelH) — clean with gold fonts */
.am-card-body .TableContent tr.LabelH td,
.am-card-body .TableContent .LabelH td,
.am-card-body tr.LabelH td {
    background: transparent !important;
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 12px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 12px rgba(255,180,43,0.4) !important;
    border-bottom: 1px solid rgba(218,165,32,0.3) !important;
}

/* Data rows — true zebra striping (override inline bgs) */
.am-card-body .TableContent tbody tr:not(.LabelH):nth-child(even) td {
    background: rgba(255,255,255,0.025) !important;
}
.am-card-body .TableContent tbody tr:not(.LabelH):nth-child(odd) td {
    background: rgba(255,255,255,0.01) !important;
}

/* Hover glow on data rows - gold only */
.am-card-body .TableContent tbody tr:not(.LabelH) {
    transition: transform .15s !important;
}
.am-card-body .TableContent tbody tr:not(.LabelH):hover td {
    background: rgba(218,165,32,0.08) !important;
    color: #fff !important;
}

.am-card-body .TableContent tbody tr:not(.LabelH):hover td .am-btn {
    background: linear-gradient(180deg, rgba(218,165,32,0.35), rgba(138,107,31,0.18)) !important;
    border-color: var(--gold) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(218,165,32,0.4) !important;
}

/* House detail layout */
.am-house-detail {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    align-items: start;
}

.am-house-img {
    text-align: center;
}

.am-house-img img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 12px;
    border: 3px solid rgba(218,165,32,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.am-house-info h3 {
    margin: 0 0 16px;
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: var(--gold-bright);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.am-house-info p {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.am-section-title {
    margin: 24px 0 12px;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--gold-bright);
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Form styling */
.am-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.am-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-bright);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.am-field select,
.am-field input {
    background: rgba(11,16,32,0.7);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 8px;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    transition: all 0.15s;
}

.am-field select:focus,
.am-field input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
}

/* Pagination */
.am-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.am-pagination-link,
.am-pagination-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}

.am-pagination-link {
    background: rgba(11,16,32,0.6);
    border: 1px solid rgba(218,165,32,0.25);
    color: var(--text);
}

.am-pagination-link:hover {
    background: rgba(218,165,32,0.12);
    border-color: var(--gold);
    color: var(--gold-bright);
    transform: translateY(-1px);
}

.am-pagination-active {
    background: linear-gradient(180deg, rgba(218,165,32,0.25), rgba(138,107,31,0.12));
    border: 1px solid var(--gold);
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(218,165,32,0.4);
}

/* Responsive design */
@media (max-width: 768px) {
    .am-hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .am-hero-icon {
        font-size: 36px;
    }
    
    .am-hero-text h2 {
        font-size: 20px;
    }
    
    .am-house-detail {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .am-house-img {
        order: -1;
    }
    
    .am-form-grid {
        grid-template-columns: 1fr;
    }
    
    .am-card-body table {
        font-size: 12px;
    }
    
    .am-card-body table th,
    .am-card-body table td {
        padding: 8px 10px;
    }
    
    .am-pagination {
        gap: 4px;
    }
    
    .am-pagination-link,
    .am-pagination-active {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
        padding: 0 8px;
    }
}

/* ============================================================
   COINS BANNER
   ============================================================ */
.am-coins-banner {
    background: linear-gradient(180deg, rgba(18,22,40,0.85), rgba(11,16,32,0.92));
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}

.am-coins-banner::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(218,165,32,0.15), transparent 70%);
    pointer-events: none;
}

.am-coins-banner-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-bright);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 13px;
    margin-bottom: 14px;
    text-shadow: 0 0 10px rgba(218,165,32,0.4);
    position: relative;
}

.am-coins-banner-title i {
    font-size: 18px;
}

.am-coins-banner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    position: relative;
}

.am-coin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
    background: linear-gradient(135deg, rgba(11,16,32,0.7), rgba(11,16,32,0.4));
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 12px;
    transition: all 0.2s;
    min-width: 0;
    text-align: center;
}

.am-coin-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 18px rgba(218,165,32,0.15);
}

.am-coin-card img {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.6));
    flex-shrink: 0;
}

.am-coin-card i {
    font-size: 36px;
    color: var(--gold);
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.4));
    flex-shrink: 0;
}

.am-coin-card-value {
    color: var(--gold-bright);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    line-height: 1.1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.am-coin-card-label {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    white-space: nowrap;
}

.am-coin-card-trusted {
    background: linear-gradient(135deg, rgba(75,214,107,0.08), rgba(11,16,32,0.4));
    border-color: rgba(75,214,107,0.25);
}

.am-coin-card-trusted:hover {
    border-color: rgba(75,214,107,0.6);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 18px rgba(75,214,107,0.15);
}

.am-coin-card-trusted .am-coin-card-value {
    color: #b7f5c5;
}

.am-coin-card-reserved {
    background: linear-gradient(135deg, rgba(120,120,140,0.08), rgba(11,16,32,0.4));
    border-color: rgba(180,180,200,0.2);
}

.am-coin-card-reserved i {
    color: rgba(180,180,200,0.6);
}

.am-coin-card-reserved .am-coin-card-value {
    color: #c5c5d5;
}

/* ============================================================
   BAZAAR SEARCH PANEL
   ============================================================ */

.am-bazaar-info {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(218,165,32,0.06), rgba(11,16,32,0.4));
    border: 1px solid rgba(218,165,32,0.15);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.am-bazaar-info-text {
    flex: 1;
    min-width: 280px;
}

.am-bazaar-info-text p {
    margin: 0 0 8px;
    color: #eadfc5;
    line-height: 1.6;
    font-size: 13px;
}

.am-bazaar-info-text p:last-child {
    margin-bottom: 0;
}

.am-bazaar-info-action {
    display: flex;
    align-items: center;
}

/* Search Bar - input with side buttons */
.am-bazaar-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(11,16,32,0.85);
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 12px;
    padding: 6px 6px 6px 16px;
    margin-bottom: 18px;
    transition: all 0.2s;
}

.am-bazaar-searchbar:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15);
}

.am-bazaar-searchbar-icon {
    color: var(--gold);
    font-size: 16px;
    flex-shrink: 0;
}

.am-bazaar-searchbar input[type="text"] {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 12px 8px !important;
    color: var(--gold-bright) !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0;
}

.am-bazaar-searchbar input[type="text"]::placeholder {
    color: var(--text-dim);
    font-style: italic;
}

.am-bazaar-searchbar-btn {
    flex-shrink: 0;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

.am-bazaar-searchbar-btn-clear {
    width: 40px;
    padding: 10px !important;
    justify-content: center;
}

/* Filters grid */
.am-bazaar-filters {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}

.am-bazaar-filters .am-field-full {
    grid-column: span 4;
}

/* ============================================================
   CURRENT AUCTIONS HEADER
   ============================================================ */
.am-bazaar-auctions-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: linear-gradient(180deg, rgba(18,22,40,0.85), rgba(11,16,32,0.92));
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.am-bazaar-auctions-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-bright);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(218,165,32,0.4);
}

.am-bazaar-auctions-title i {
    font-size: 18px;
    color: #ff8c42;
    filter: drop-shadow(0 0 8px rgba(255,140,66,0.6));
    animation: am-fire-pulse 2s ease-in-out infinite;
}

@keyframes am-fire-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

.am-bazaar-auctions-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.am-bazaar-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(11,16,32,0.7);
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 20px;
    font-size: 12px;
    color: #eadfc5;
}

.am-bazaar-stat b {
    color: var(--gold-bright);
    font-weight: 700;
}

.am-bazaar-stat i {
    color: var(--gold);
    font-size: 11px;
}

/* Hide the legacy "Leilões Atuais" caption since we have the new header */
.am-bazaar-auctions-head + .TableContainer > .CaptionContainer {
    display: none !important;
}

@media (max-width: 1024px) {
    .am-bazaar-filters {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .am-bazaar-filters .am-field-full {
        grid-column: span 2;
    }
    .am-coins-banner-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .am-bazaar-filters {
        grid-template-columns: 1fr !important;
    }
    .am-bazaar-filters .am-field-full {
        grid-column: 1;
    }
    .am-bazaar-searchbar {
        flex-wrap: wrap;
    }
    .am-bazaar-searchbar input[type="text"] {
        width: 100%;
        flex-basis: 100%;
    }
    .am-bazaar-auctions-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   BAZAAR PAGE EPIC LAYOUT v2
   Transforms legacy TableContainer/CaptionContainer into modern cards
   ============================================================ */

/* Page wrapper - flex column with consistent gap */
.am-bazaar-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.am-bazaar-page > br {
    display: none !important;
}

/* Hide legacy frame edges/borders */
.am-bazaar-page .CaptionEdgeLeftTop,
.am-bazaar-page .CaptionEdgeRightTop,
.am-bazaar-page .CaptionEdgeLeftBottom,
.am-bazaar-page .CaptionEdgeRightBottom,
.am-bazaar-page .CaptionBorderTop,
.am-bazaar-page .CaptionBorderBottom,
.am-bazaar-page .CaptionVerticalLeft,
.am-bazaar-page .CaptionVerticalRight,
.am-bazaar-page .TableScrollbarWrapper,
.am-bazaar-page .TableScrollbarContainer,
.am-bazaar-page .TableShadowContainer,
.am-bazaar-page .TableShadowContainerRightTop,
.am-bazaar-page .TableShadowRightTop,
.am-bazaar-page .TableContentAndRightShadow,
.am-bazaar-page .TableBottomShadow,
.am-bazaar-page .TableBottomLeftShadow,
.am-bazaar-page .TableBottomRightShadow {
    display: none !important;
}

/* TableContainer -> Modern card */
.am-bazaar-page .TableContainer {
    background: linear-gradient(180deg, rgba(11,16,32,0.92), rgba(11,16,32,0.88));
    border: 1px solid rgba(218,165,32,0.18);
    border-radius: 14px;
    padding: 0;
    margin: 0 !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(218,165,32,0.08);
    position: relative;
}

.am-bazaar-page .TableContainer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(218,165,32,0.04), transparent 60%);
    pointer-events: none;
    border-radius: 14px;
}

/* Caption / Header */
.am-bazaar-page .CaptionContainer {
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    border-bottom: 1px solid rgba(218,165,32,0.15);
}

.am-bazaar-page .CaptionInnerContainer {
    background: linear-gradient(180deg, rgba(218,165,32,0.08), rgba(218,165,32,0.02)) !important;
    padding: 14px 20px !important;
    height: auto !important;
    position: relative;
    display: flex;
    align-items: center;
}

.am-bazaar-page .CaptionInnerContainer .Text {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
    color: var(--gold-bright) !important;
    background: transparent !important;
    text-shadow: 0 0 12px rgba(218,165,32,0.4), 0 2px 6px rgba(0,0,0,0.6) !important;
    font-size: 14px !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4;
}

/* Inner table containers */
.am-bazaar-page .InnerTableContainer,
.am-bazaar-page .TableContentContainer {
    max-width: unset !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.am-bazaar-page table.Table1,
.am-bazaar-page table.Table2,
.am-bazaar-page table.Table3,
.am-bazaar-page table.Table4,
.am-bazaar-page table.Table5 {
    background: transparent !important;
    border: none !important;
}

/* TableContent inside bazaar */
.am-bazaar-page .TableContent {
    background: transparent !important;
    border: none !important;
    border-collapse: collapse !important;
}

.am-bazaar-page .TableContent td {
    background: transparent !important;
    color: #eadfc5 !important;
    border: none !important;
    padding: 12px 16px;
}

.am-bazaar-page .TableContent tr.LabelH td,
.am-bazaar-page .TableContent .LabelH td {
    background: rgba(218,165,32,0.06) !important;
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    font-size: 12px !important;
    border-bottom: 1px solid rgba(218,165,32,0.2) !important;
}

/* Tibia Coins Balance bar */
.am-bazaar-page .CharacterTradeTibiaCoinBalance {
    background: linear-gradient(135deg, rgba(11,16,32,0.85), rgba(11,16,32,0.7));
    border: 1px solid rgba(218,165,32,0.2);
    border-radius: 12px;
    padding: 14px 20px;
    color: var(--gold-bright);
    font-weight: 700;
    text-align: right;
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 15px;
}

.am-bazaar-page .VSCCoinImages {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    filter: drop-shadow(0 0 4px rgba(218,165,32,0.5));
}

/* Filter inputs and selects */
.am-bazaar-page .AuctionInput,
.am-bazaar-page select.AuctionInput,
.am-bazaar-page input.AuctionInput,
.am-bazaar-page input[type="text"].AuctionInputSearch {
    background: rgba(11,16,32,0.85) !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    color: var(--text) !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    transition: all 0.15s !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.am-bazaar-page .AuctionInput:focus,
.am-bazaar-page select.AuctionInput:focus,
.am-bazaar-page input.AuctionInput:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(218,165,32,0.15) !important;
}

.am-bazaar-page select.AuctionInput option {
    background: #0b1020;
    color: var(--text);
}

/* Display options layout */
.am-bazaar-page .DisplayOptionsContent {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 8px 12px !important;
    min-width: 170px;
}

.am-bazaar-page .DisplayOptionsLabel,
.am-bazaar-page .LabelV150 {
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.3px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
}

.am-bazaar-page .DisplayOptionsButton {
    display: flex !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap;
}

.am-bazaar-page .AuctionFilterHelper {
    width: 100%;
    height: 1px;
    background: rgba(218,165,32,0.1);
    margin: 8px 0;
}

/* BigButton in bazaar */
.am-bazaar-page .BigButton,
.am-bazaar-page .BigButtonGrey {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 !important;
}

.am-bazaar-page .BigButton input[type="submit"],
.am-bazaar-page .BigButton .BigButtonText,
.am-bazaar-page input.BigButtonText {
    padding: 9px 22px !important;
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.18)) !important;
    background-image: none !important;
    border: 1px solid rgba(218,165,32,0.6) !important;
    border-radius: 8px !important;
    color: #ffe9a0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    cursor: pointer !important;
    width: auto !important;
    height: auto !important;
    transition: all 0.15s !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.am-bazaar-page .BigButton input[type="submit"]:hover,
.am-bazaar-page .BigButton .BigButtonText:hover,
.am-bazaar-page input.BigButtonText:hover {
    background: linear-gradient(180deg, var(--gold), rgba(218,165,32,0.5)) !important;
    color: #1a1206 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(218,165,32,0.4);
}

.am-bazaar-page .BigButtonGrey input[type="submit"] {
    background: linear-gradient(180deg, rgba(120,120,140,0.3), rgba(80,80,100,0.15)) !important;
    border: 1px solid rgba(180,180,200,0.4) !important;
    color: #d5d5e0 !important;
    padding: 9px 22px !important;
    border-radius: 8px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.am-bazaar-page .BigButtonGrey input[type="submit"]:hover {
    background: linear-gradient(180deg, rgba(180,180,200,0.4), rgba(120,120,140,0.2)) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Auction Card - the actual character item */
.am-bazaar-page .Auction {
    background: linear-gradient(135deg, rgba(11,16,32,0.6), rgba(11,16,32,0.4));
    border: 1px solid rgba(218,165,32,0.15);
    border-radius: 12px;
    padding: 0;
    margin: 12px 0;
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
}

.am-bazaar-page .Auction:hover {
    border-color: rgba(218,165,32,0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 16px rgba(218,165,32,0.1);
}

.am-bazaar-page .AuctionHeader {
    background: linear-gradient(180deg, rgba(218,165,32,0.08), rgba(218,165,32,0.02));
    padding: 10px 110px 10px 14px !important;
    border-bottom: 1px solid rgba(218,165,32,0.15);
    position: relative;
}

.am-bazaar-page .AuctionCharacterName,
.am-bazaar-page .AuctionCharacterName a {
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    text-shadow: 0 0 10px rgba(218,165,32,0.3);
}

.am-bazaar-page .AuctionCharacterName a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.am-bazaar-page .AuctionBody {
    padding: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
}

.am-bazaar-page .AuctionBodyBlock {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(218,165,32,0.08);
    border-radius: 8px;
    padding: 8px;
}

.am-bazaar-page .AuctionOutfitImage {
    background: radial-gradient(ellipse at center, rgba(218,165,32,0.15), transparent 70%);
    border-radius: 8px;
    padding: 4px;
}

.am-bazaar-page .AuctionInfo,
.am-bazaar-page .AuctionGeneralInfo {
    color: #eadfc5 !important;
    font-size: 13px !important;
}

.am-bazaar-page .AuctionInfo b,
.am-bazaar-page .AuctionGeneralInfo b {
    color: var(--gold-bright) !important;
}

/* CV Items (item icons in auction) */
.am-bazaar-page .CVIcon,
.am-bazaar-page .CVIconObject {
    background: rgba(11,16,32,0.6) !important;
    border: 1px solid rgba(218,165,32,0.15) !important;
    border-radius: 6px !important;
    transition: all 0.15s;
}

.am-bazaar-page .CVIcon:hover,
.am-bazaar-page .CVIconObject:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 0 12px rgba(218,165,32,0.3);
}

/* PageNavigation */
.am-bazaar-page .PageNavigation {
    padding: 12px 16px !important;
    background: rgba(11,16,32,0.5) !important;
    border-bottom: 1px solid rgba(218,165,32,0.1) !important;
}

.am-bazaar-page .PageNavigation b,
.am-bazaar-page .PageNavigation small {
    color: #eadfc5 !important;
    font-size: 13px;
}

.am-bazaar-page .PageLink {
    display: inline-block;
    margin: 0 2px;
}

.am-bazaar-page .CurrentPageLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(11,16,32,0.6);
    border: 1px solid rgba(218,165,32,0.25);
    color: var(--text) !important;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}

.am-bazaar-page .CurrentPageLink a {
    color: var(--text) !important;
    text-decoration: none !important;
}

.am-bazaar-page .CurrentPageLink:hover {
    background: rgba(218,165,32,0.12);
    border-color: var(--gold);
}

.am-bazaar-page .CurrentPageLink:hover a {
    color: var(--gold-bright) !important;
}

/* SmallBox - HintBox style messages */
.am-bazaar-page .SmallBox {
    background: linear-gradient(135deg, rgba(218,165,32,0.06), rgba(11,16,32,0.6));
    border: 1px solid rgba(218,165,32,0.18);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.am-bazaar-page .SmallBox .BoxFrameHorizontal,
.am-bazaar-page .SmallBox .BoxFrameVerticalLeft,
.am-bazaar-page .SmallBox .BoxFrameVerticalRight,
.am-bazaar-page .SmallBox .BoxFrameEdgeLeftTop,
.am-bazaar-page .SmallBox .BoxFrameEdgeRightTop,
.am-bazaar-page .SmallBox .BoxFrameEdgeLeftBottom,
.am-bazaar-page .SmallBox .BoxFrameEdgeRightBottom {
    display: none !important;
}

.am-bazaar-page .SmallBox .Message,
.am-bazaar-page .SmallBox .MessageContainer {
    background: transparent !important;
    padding: 0 !important;
}

.am-bazaar-page .HintBox {
    background: transparent !important;
    width: 100% !important;
}

.am-bazaar-page .HintBox td {
    padding: 18px 22px !important;
    color: #eadfc5 !important;
    line-height: 1.7;
}

.am-bazaar-page .HintBox p {
    margin: 0 0 10px;
    color: #eadfc5;
    line-height: 1.7;
}

.am-bazaar-page .HintBox p b {
    color: var(--gold-bright);
}

.am-bazaar-page .HintBox p small {
    color: var(--text-dim);
    font-size: 12px;
}

/* Detail buttons & flags */
.am-bazaar-page .detailsButton {
    transition: transform 0.15s;
}

.am-bazaar-page .detailsButton:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(218,165,32,0.5));
}

.am-bazaar-page .newFlag,
.am-bazaar-page .newFlagHot {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Tables in bazaar - clean inputs/links */
.am-bazaar-page a {
    color: var(--gold-bright);
    transition: color 0.15s;
}

.am-bazaar-page a:hover {
    color: #fff;
    text-decoration: none;
}

/* Auction Body flex children sizing */

.am-bazaar-page .AuctionOutfit {
    background: radial-gradient(ellipse at center, rgba(218,165,32,0.12), transparent 70%) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(218,165,32,0.12) !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    position: relative;
    min-width: 80px;
}

.am-bazaar-page .AuctionItemsViewBox {
    background: rgba(11,16,32,0.4) !important;
    border: 1px solid rgba(218,165,32,0.1) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    flex: 1 1 160px !important;
    min-width: 160px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
}

.am-bazaar-page .ShortAuctionData {
    background: rgba(11,16,32,0.5) !important;
    border: 1px solid rgba(218,165,32,0.12) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    flex: 0 1 195px !important;
    min-width: 160px !important;
    color: #eadfc5;
}

.am-bazaar-page .CurrentBid {
    background: linear-gradient(135deg, rgba(218,165,32,0.05), rgba(11,16,32,0.5)) !important;
    border: 1px solid rgba(218,165,32,0.18) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    flex: 0 1 155px !important;
    min-width: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
}

/* Auction Timer */
.am-bazaar-page .AuctionTimer {
    background: linear-gradient(180deg, rgba(218,165,32,0.15), rgba(218,165,32,0.05)) !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 0 8px rgba(218,165,32,0.4);
}

/* Auction Data Labels & Values */
.am-bazaar-page .ShortAuctionDataLabel {
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-top: 8px;
    margin-bottom: 2px;
}

.am-bazaar-page .ShortAuctionDataValue {
    color: #eadfc5 !important;
    font-size: 13px !important;
    font-weight: 600;
    margin-bottom: 6px;
}

.am-bazaar-page .ShortAuctionDataValue b {
    color: var(--gold-bright) !important;
    font-size: 15px;
}

.am-bazaar-page .ShortAuctionDataBidRow {
    border-top: 1px solid rgba(218,165,32,0.12);
    padding-top: 8px;
    margin-top: 8px;
}

/* My Max Bid Input */
.am-bazaar-page .MyMaxBidLabel {
    color: var(--gold-bright) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 6px;
    text-align: center;
}

.am-bazaar-page .MyMaxBidInput,
.am-bazaar-page input.MyMaxBidInput {
    background: rgba(11,16,32,0.85) !important;
    border: 1px solid rgba(218,165,32,0.4) !important;
    color: var(--gold-bright) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700;
    text-align: center;
    width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.am-bazaar-page .MyMaxBidInput:focus {
    outline: none;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(218,165,32,0.2) !important;
}

/* Green Bid Button */
.am-bazaar-page .BigButtonGreen {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 !important;
}

.am-bazaar-page .BigButtonGreen input[type="submit"] {
    background: linear-gradient(180deg, rgba(75,214,107,0.4), rgba(45,176,85,0.18)) !important;
    border: 1px solid rgba(75,214,107,0.6) !important;
    color: #b7f5c5 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    width: 100%;
}

.am-bazaar-page .BigButtonGreen input[type="submit"]:hover {
    background: linear-gradient(180deg, #4bd66b, rgba(45,176,85,0.3)) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(75,214,107,0.4);
}

/* Outer wrapping table that contains the auction list */
.am-bazaar-page .TableContainer table.Table3 td,
.am-bazaar-page .TableContainer table.Table5 td {
    padding: 0 !important;
}

/* Inner content containers - reduce padding */
.am-bazaar-page .InnerTableContainer {
    padding: 16px !important;
}

/* But TableContent inside InnerTableContainer should not double-pad */
.am-bazaar-page .InnerTableContainer .TableContentContainer {
    padding: 0 !important;
}

/* Filter form inner */
.am-bazaar-page form .TableContent {
    padding: 0 !important;
}

.am-bazaar-page form .TableContent td {
    padding: 16px !important;
}

/* Login button in HintBox */
.am-bazaar-page .HintBox .BigButton {
    margin-top: 10px;
}

.am-bazaar-page .HintBox input[type="image"] {
    background: linear-gradient(180deg, rgba(218,165,32,0.4), rgba(138,107,31,0.18)) !important;
    border: 1px solid rgba(218,165,32,0.6) !important;
    border-radius: 8px;
    padding: 9px 22px;
    text-indent: -9999px;
    width: 130px;
    height: 40px;
    position: relative;
    cursor: pointer;
}

.am-bazaar-page .HintBox input[type="image"]::after {
    content: 'LOGIN';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffe9a0;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-indent: 0;
    letter-spacing: 1.2px;
}

/* Skull/Status icons */
.am-bazaar-page .skullbazaar {
    vertical-align: middle;
    margin-left: 4px;
}

/* Watch button */
.am-bazaar-page #addWatch button,
.am-bazaar-page #removeWatch button,
.am-bazaar-page #addWatch input[type="image"],
.am-bazaar-page #removeWatch input[type="image"] {
    background: rgba(11,16,32,0.6) !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    border-radius: 6px;
    padding: 4px;
    transition: all 0.15s;
}

.am-bazaar-page #addWatch button:hover,
.am-bazaar-page #removeWatch button:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 0 8px rgba(218,165,32,0.3);
}

/* Form rows */
.am-bazaar-page form > .TableContainer + .TableContainer {
    margin-top: 16px !important;
}

/* Empty state */
.am-bazaar-page .TableContent td[colspan] {
    text-align: center;
    padding: 30px !important;
    color: var(--text-dim) !important;
    font-style: italic;
}

/* Item count badge */
.am-bazaar-page .ObjectAmount {
    background: rgba(218,165,32,0.9) !important;
    color: #1a1206 !important;
    font-weight: 700 !important;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 10px;
}

/* HelperDivIndicator for items - keep image but ensure good background */
.am-bazaar-page .HelperDivIndicator {
    border-radius: 4px;
    transition: transform 0.15s;
}

.am-bazaar-page .HelperDivIndicator:hover {
    transform: scale(1.1);
}

/* AuctionLinks — absolute top-right of AuctionHeader */
.am-bazaar-page .AuctionLinks {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-direction: row !important;
}
.am-bazaar-page .AuctionLinks input[type="image"] {
    position: static !important;
    right: auto !important;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.am-bazaar-page .AuctionLinks input[type="image"]:hover {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.5));
}
.am-bazaar-page .AuctionLinks form {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .am-bazaar-page .ShortAuctionData,
    .am-bazaar-page .CurrentBid {
        flex: 0 1 calc(50% - 5px) !important;
    }
}

@media (max-width: 768px) {
    .am-bazaar-page .DisplayOptionsContent {
        min-width: 100%;
    }
    
    .am-bazaar-page .DisplayOptionsButton {
        flex-direction: column;
    }
    
    .am-bazaar-page .CharacterTradeTibiaCoinBalance {
        justify-content: center;
        text-align: center;
    }
    
    .am-bazaar-page .Auction:hover {
        transform: none;
    }
    
    .am-bazaar-page .ShortAuctionData,
    .am-bazaar-page .CurrentBid,
    .am-bazaar-page .AuctionItemsViewBox {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
}

/* ============================================================
   AUCTION SPECIAL FEATURES (arguments + badge row)
   ============================================================ */
.am-bazaar-page .SpecialCharacterFeatures {
    flex: 1 1 100% !important;
    width: 100% !important;
    border-top: 1px solid rgba(218,165,32,0.1) !important;
    padding: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    background: rgba(255,255,255,0.015) !important;
}

.am-bazaar-page .Entry {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    background: rgba(11,16,32,0.7) !important;
    border: 1px solid rgba(218,165,32,0.12) !important;
    border-radius: 20px !important;
    color: #eadfc5 !important;
    font-size: 11.5px !important;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.am-bazaar-page .Entry:hover {
    border-color: rgba(218,165,32,0.35) !important;
}

.am-bazaar-page .CharacterFeatureCategory {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    flex-shrink: 0;
}

.am-bazaar-page .gradeBazar {
    margin-left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 5px 12px !important;
    background: linear-gradient(135deg, rgba(218,165,32,0.12), rgba(11,16,32,0.6)) !important;
    border: 1px solid rgba(218,165,32,0.25) !important;
    border-radius: 8px !important;
    color: var(--gold-bright) !important;
    font-size: 11px !important;
    text-align: center !important;
    gap: 3px;
}

.am-bazaar-page .gradeBazar a {
    color: var(--gold-bright) !important;
    text-decoration: none !important;
}

.am-bazaar-page .gradeBazar img {
    vertical-align: middle !important;
}

/* BigButtonRed — cancel auction */
.am-bazaar-page .BigButtonRed {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 !important;
}

.am-bazaar-page .BigButtonRed input[type="submit"],
.am-bazaar-page .BigButtonRed .BigButtonText {
    background: linear-gradient(180deg, rgba(231,76,60,0.4), rgba(123,26,26,0.18)) !important;
    border: 1px solid rgba(231,76,60,0.6) !important;
    color: #ff9e9e !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.am-bazaar-page .BigButtonRed input[type="submit"]:hover {
    background: linear-gradient(180deg, rgba(231,76,60,0.6), rgba(123,26,26,0.3)) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* CurrentBid inner content flex */
.am-bazaar-page .CurrentBid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    align-items: center !important;
}

/* CVIconObject — proper square sizing for item icons */
.am-bazaar-page .CVIcon.CVIconObject {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

/* Auction rows — subtle separator between auction cards */
.am-bazaar-page .TableContent tbody > tr > td {
    padding: 6px 8px !important;
    border-bottom: 1px solid rgba(218,165,32,0.06) !important;
}

.am-bazaar-page .TableContent tbody:last-child > tr > td {
    border-bottom: none !important;
}

/* Sold label */
.am-bazaar-page font[style*="orange"] {
    color: #ff9f43 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pagination improved pill style */
.am-bazaar-page .PageNavigation small {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 8px;
}

.am-bazaar-page .PageNavigation small > div[style*="float"] {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
}


/* Highscores Table Responsive */
.am-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
}

.am-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 14px;
}

.am-table thead th {
    background: transparent;
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    padding: 12px 8px;
    text-align: left;
    border-bottom: 2px solid #daa520;
    white-space: nowrap;
}

.am-table tbody td {
    padding: 10px 8px;
    color: #c8b896;
    border-bottom: 1px solid rgba(218,165,32,0.1);
}

.am-table tbody tr.am-table-row {
    background: rgba(11,16,32,0.3);
}

.am-table tbody tr.am-table-row-alt {
    background: rgba(11,16,32,0.5);
}

.am-table tbody tr:hover {
    background: rgba(218,165,32,0.08);
}

.am-table tbody td a {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
}

.am-table tbody td a:hover {
    color: #5dade2;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .am-table {
        font-size: 12px;
    }
    
    .am-table thead th,
    .am-table tbody td {
        padding: 8px 6px;
    }
}

/* Highscores Pagination Hover Effects */
.am-card-body a[href*="page="]:hover {
    background: rgba(218,165,32,0.15) !important;
    border-color: #daa520 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218,165,32,0.3);
}

/* Character Bazaar Pagination Modern Style */
.PageNavigation {
    padding: 20px 0 !important;
}

.PageNavigation small {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
}

.PageNavigation .PageLink {
    display: inline-block;
    margin: 0 4px;
}

.PageNavigation .CurrentPageLink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px;
    height: 40px;
    background: rgba(11,16,32,0.6) !important;
    color: #c8b896 !important;
    border: 1px solid rgba(218,165,32,0.3) !important;
    border-radius: 8px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.PageNavigation .CurrentPageLink a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.PageNavigation .CurrentPageLink:hover {
    background: rgba(218,165,32,0.15) !important;
    border-color: #daa520 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218,165,32,0.3);
}

/* Página atual ativa */
.PageNavigation .PageLink:has(.CurrentPageLink[style*="background"]) .CurrentPageLink,
.PageNavigation .CurrentPageLink:not(:has(a)) {
    background: linear-gradient(135deg,#daa520,#f0d166) !important;
    color: #0b1020 !important;
    border: 2px solid #daa520 !important;
    box-shadow: 0 0 15px rgba(218,165,32,0.4) !important;
    font-weight: 700 !important;
}

/* ============================================================
   MOBILE RESPONSIVE LAYOUT
   ============================================================ */

/* Mobile Logo */
.mobile-logo {
    display: none;
    position: relative;
    text-align: center;
    padding: 0;
}

.mobile-logo img {
    width: 250px;
    height: auto;
    max-width: 90%;
    margin: 0px auto;
    margin-bottom: -45px;
    display: inline-block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(212, 175, 55, 0.5));
}

/* Mobile Navigation */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10000;
    background: linear-gradient(135deg, #daa520, #f0d166);
    border: none;
    border-radius: 8px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background: #0b1020;
    margin: 5px auto;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-nav-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 350px;
    height: 100%;
    background: linear-gradient(180deg, #12182a, #0b1020);
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}

.mobile-nav-menu.active {
    right: 0;
}

.mobile-nav-header {
    padding: 20px;
    background: linear-gradient(135deg, rgba(218,165,32,0.1), rgba(11,16,32,0.5));
    border-bottom: 2px solid rgba(218,165,32,0.3);
    text-align: center;
}

.mobile-nav-header a {
    display: inline-block;
}

.mobile-nav-header img {
    max-height: 50px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.mobile-nav-content {
    padding: 20px 0;
}

.mobile-nav-group {
    margin-bottom: 8px;
}

.mobile-nav-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(218,165,32,0.05);
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.mobile-nav-group-title:hover {
    background: rgba(218,165,32,0.1);
    border-left-color: #daa520;
}

.mobile-nav-group-title i {
    margin-right: 10px;
}

.mobile-nav-group-title .fa-chevron-down {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.mobile-nav-group.active .mobile-nav-group-title .fa-chevron-down {
    transform: rotate(180deg);
}

.mobile-nav-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0,0,0,0.2);
}

.mobile-nav-group.active .mobile-nav-items {
    max-height: 1000px;
}

.mobile-nav-items a {
    display: flex;
    align-items: center;
    padding: 12px 20px 12px 40px;
    color: #c8b896;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.mobile-nav-items a:hover {
    background: rgba(218,165,32,0.08);
    color: #f0d166;
    border-left-color: #daa520;
    padding-left: 45px;
}

.mobile-nav-items a i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.mobile-nav-footer {
    padding: 20px;
    border-top: 1px solid rgba(218,165,32,0.2);
    margin-top: 20px;
}

.mobile-nav-footer a {
    display: block;
    padding: 12px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(218,165,32,0.1), rgba(11,16,32,0.5));
    border: 1px solid rgba(218,165,32,0.3);
    border-radius: 8px;
    color: #daa520;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mobile-nav-footer a:hover {
    background: linear-gradient(135deg, rgba(218,165,32,0.2), rgba(11,16,32,0.6));
    transform: translateY(-2px);
}

/* Mobile Layout Adjustments */
@media (max-width: 1100px) {
    body { padding-top: 0; }

    /* Show mobile elements */
    .mobile-logo,
    .mobile-menu-toggle,
    .mobile-nav-overlay,
    .mobile-nav-menu {
        display: block;
    }

    /* Hide desktop elements */
    .epic-topbar,
    .epic-header,
    .epic-nav,
    .epic-topnav,
    .epic-stats,
    .epic-logo-banner,
    .download-btn,
    .sidebar-top-artwork {
        display: none !important;
    }
    
    /* Hide all sidebars and themeboxes */
    .sidebar-left,
    .sidebar-right,
    .ThemeboxesColumn,
    .epic-sidebar-left,
    .epic-sidebar-right,
    .epic-sidebar,
    aside.epic-sidebar,
    aside.epic-sidebar.left,
    aside.epic-sidebar.right,
    #LeftColumn,
    #RightColumn,
    .LeftColumn,
    .RightColumn {
        display: none !important;
    }
    
    /* Hide only sidebar panels and widgets */
    aside .panel,
    aside .menu-panel,
    aside .widget-shop,
    aside .widget-discord,
    aside .widget-cta,
    aside .epic-menu {
        display: none !important;
    }
    
    /* Full width layout */
    .epic-shell {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    
    .epic-container {
        max-width: 100% !important;
        padding: 10px !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    
    .main-content,
    .epic-main,
    #MainColumn,
    .MainColumn,
    section.epic-main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        grid-column: 1 !important;
    }
    
    /* Ensure content panels are visible */
    .epic-main .panel,
    .epic-main .am-card,
    .epic-main .am-page,
    #MainColumn .panel,
    section.epic-main > * {
        display: block !important;
    }
    
    /* Adjust page title - centered on mobile/tablet */
    .page-title-banner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 4px -10px 16px -10px;
        width: calc(100% + 20px);
        max-width: none;
    }
    .page-title-banner i,
    .page-title-banner span {
        position: relative;
        top: 18px;
    }
    
    /* Coins banner mobile */
    .am-coins-banner-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .am-coin-card {
        padding: 16px;
    }
    
    /* Form grid mobile */
    .am-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    /* Cards mobile */
    .am-card {
        border-radius: 8px;
        margin-bottom: 16px;
    }
    
    .am-card-body {
        padding: 16px !important;
    }
    
    /* Slide/slideshow margin to avoid logo overlap */
    .slideshow,
    .slideshow-container,
    .epic-slideshow,
    #slideshow,
    .carousel,
    .epic-carousel {
        margin-top: 20px !important;
    }
    
    /* Bazaar auctions mobile */
    .am-bazaar-auctions-head {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        text-align: center;
    }
    
    .am-bazaar-auctions-title {
        justify-content: center;
    }
    
    .am-bazaar-auctions-stats {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        align-items: center;
    }
    
    /* Table responsive */
    .am-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .am-table {
        min-width: 600px;
        font-size: 12px;
    }
    
    .am-table thead th,
    .am-table tbody td {
        padding: 8px 6px;
    }
    
    /* Buttons mobile */
    .am-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Pagination mobile */
    .PageNavigation {
        font-size: 12px;
    }
    
    .PageNavigation .CurrentPageLink {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .epic-container {
        padding: 5px;
    }
    
    .page-title-banner {
        font-size: 12px;
        letter-spacing: 1px;
        padding: 0 40px;
    }
    .page-title-banner::before,
    .page-title-banner::after {
        display: none;
    }
    
    .am-coin-card-value {
        font-size: 18px;
    }
    
    .am-coin-card i {
        font-size: 32px;
    }
    
    .am-coin-card img {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   MOBILE TABLE RESPONSIVENESS
   Prevent horizontal scroll and add spacing between cards
   ============================================================ */
@media (max-width: 1100px) {
    /* Add space between all cards inside main content areas */
    .epic-main .am-card {
        margin-bottom: 16px !important;
    }
    .epic-main .am-card:last-child {
        margin-bottom: 0 !important;
    }
    .am-profile-main .am-card {
        margin-bottom: 16px !important;
    }
    .am-profile-main .am-card:last-child {
        margin-bottom: 0 !important;
    }

    /* Make table containers scrollable with smooth touch */
    .am-card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Compact table cells */
    .am-card-body table td,
    .am-card-body table th {
        padding: 8px 6px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* Reduce font in table headers */
    .am-card-body table .LabelH td,
    .am-card-body table thead td,
    .am-card-body table thead th {
        font-size: 11px !important;
        letter-spacing: 0.5px;
    }

    /* Mobile hidden columns utility classes */
    .mobile-hide { display: none !important; }
}

/* ============================================================
   DOWNLOAD PAGE (Epic redesign)
   ============================================================ */
.am-download-page { display: flex; flex-direction: column; gap: 24px; }

/* Hero */
.am-dl-hero {
    position: relative;
    text-align: center;
    padding: 38px 24px 34px;
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(218,165,32,0.18), transparent 60%),
        linear-gradient(180deg, rgba(20,24,42,0.95), rgba(11,16,32,0.98));
    border: 1px solid rgba(218,165,32,0.25);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.am-dl-hero-glow {
    position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 50% 0%, rgba(255,215,0,0.12), transparent 70%);
    pointer-events: none;
}
.am-dl-hero-icon {
    position: relative;
    width: 78px; height: 78px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 34px;
    color: #1a1208;
    background: linear-gradient(180deg, #ffd700, #daa520);
    box-shadow: 0 0 24px rgba(218,165,32,0.55), inset 0 2px 0 rgba(255,255,255,0.5);
    animation: dlFloat 3.5s ease-in-out infinite;
}
@keyframes dlFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.am-dl-hero-title {
    position: relative;
    margin: 0 0 8px;
    font-family: 'Cinzel', serif;
    font-size: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-shadow: 0 0 14px rgba(255,215,0,0.4), 0 2px 0 rgba(0,0,0,0.5);
}
.am-dl-hero-sub {
    position: relative;
    margin: 0 auto;
    max-width: 620px;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.6;
}
.am-dl-update-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    color: #eadfc5;
    background: rgba(218,165,32,0.1);
    border: 1px solid rgba(218,165,32,0.3);
}
.am-dl-update-badge b { color: var(--gold-bright); font-family: 'Cinzel', serif; letter-spacing: 1px; }
.am-dl-update-badge i { color: var(--gold); }

/* Agreement card */
.am-dl-agreement {
    max-height: 360px;
    overflow-y: auto;
    padding: 4px 16px 4px 2px;
    margin-bottom: 20px;
    color: #cdbfa3;
    font-size: 14px;
    line-height: 1.7;
    scrollbar-width: thin;
    scrollbar-color: rgba(218,165,32,0.4) transparent;
}
.am-dl-agreement::-webkit-scrollbar { width: 8px; }
.am-dl-agreement::-webkit-scrollbar-thumb { background: rgba(218,165,32,0.4); border-radius: 8px; }
.am-dl-agreement p { margin: 0 0 14px; }
.am-dl-agreement a { color: var(--gold-bright); text-decoration: none; }
.am-dl-agreement a:hover { text-decoration: underline; }
.am-dl-agree-actions { display: flex; justify-content: center; }
.am-dl-agree-btn {
    font-size: 14px;
    padding: 12px 28px;
    letter-spacing: 1px;
}

/* Client grid */
.am-dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.am-dl-client {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(20,24,42,0.95), rgba(11,16,32,0.98));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.am-dl-client:hover {
    border-color: rgba(218,165,32,0.4);
    box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 18px rgba(218,165,32,0.12);
}
.am-dl-recommended {
    border-color: rgba(218,165,32,0.45);
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(218,165,32,0.12), transparent 60%),
        linear-gradient(180deg, rgba(24,28,48,0.96), rgba(11,16,32,0.98));
}
.am-dl-recommended::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
.am-dl-ribbon {
    position: absolute;
    top: 14px; right: -34px;
    transform: rotate(45deg);
    background: linear-gradient(180deg, #ffd700, #daa520);
    color: #1a1208;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 40px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.am-dl-client-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.am-dl-client-icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 24px;
    color: var(--gold-bright);
    background: rgba(218,165,32,0.12);
    border: 1px solid rgba(218,165,32,0.3);
}
.am-dl-beta .am-dl-client-icon {
    color: #ff8a5b;
    background: rgba(255,138,91,0.12);
    border-color: rgba(255,138,91,0.35);
}
.am-dl-client-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.5px;
}
.am-dl-client-tag {
    display: inline-block;
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.am-dl-client-desc {
    margin: 0 0 16px;
    color: #b6a987;
    font-size: 13.5px;
    line-height: 1.6;
    flex-grow: 1;
}
.am-dl-specs {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.am-dl-specs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 12px;
    color: #eadfc5;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.am-dl-specs li i { color: var(--gold); font-size: 12px; }
.am-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #1a1208 !important;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 100%);
    border: 1px solid #fff3b0;
    box-shadow: 0 4px 14px rgba(218,165,32,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: all .25s ease;
}
.am-dl-btn:hover {
    background: linear-gradient(180deg, #ffe34d 0%, #e6b528 100%);
    box-shadow: 0 8px 22px rgba(218,165,32,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
}
.am-dl-btn-beta {
    color: #fff !important;
    background: linear-gradient(180deg, #ff8a5b 0%, #d85a32 100%);
    border-color: #ffb08c;
    box-shadow: 0 4px 14px rgba(216,90,50,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.am-dl-btn-beta:hover {
    background: linear-gradient(180deg, #ff9d72 0%, #e66a3f 100%);
    box-shadow: 0 8px 22px rgba(216,90,50,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.am-dl-btn-disabled {
    color: #888 !important;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: none;
    cursor: not-allowed;
}
.am-dl-btn-disabled:hover { background: rgba(255,255,255,0.05); box-shadow: none; }

/* Empty state */
.am-dl-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 24px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20,24,42,0.9), rgba(11,16,32,0.96));
    border: 1px dashed rgba(218,165,32,0.3);
}
.am-dl-empty i { font-size: 46px; color: rgba(218,165,32,0.5); margin-bottom: 14px; }
.am-dl-empty h3 { margin: 0 0 8px; font-family: 'Cinzel', serif; color: var(--gold-bright); }
.am-dl-empty p { margin: 0; color: var(--text-dim); }

/* Help / steps */
.am-dl-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.am-dl-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
}
.am-dl-step-num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
    color: #1a1208;
    background: linear-gradient(180deg, #ffd700, #daa520);
    box-shadow: 0 0 10px rgba(218,165,32,0.4);
}
.am-dl-step b { display: block; color: var(--gold-bright); font-size: 14px; margin-bottom: 3px; }
.am-dl-step p { margin: 0; color: #b6a987; font-size: 13px; line-height: 1.5; }
.am-dl-help-note {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    color: var(--text-dim);
    font-size: 13px;
}
.am-dl-help-note i { color: var(--gold); margin-right: 6px; }

@media (max-width: 600px) {
    .am-dl-hero { padding: 28px 16px 26px; }
    .am-dl-hero-title { font-size: 24px; }
    .am-dl-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OUTFIT BONUS PAGE (Epic redesign)
   ============================================================ */
.am-outfit-bonus-page { display: flex; flex-direction: column; gap: 20px; }

/* Hero tags */
.obx-tags {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}
.obx-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(218,165,32,0.3);
    background: rgba(218,165,32,0.08);
    color: var(--gold-bright);
    letter-spacing: 0.5px;
}
.obx-tag i { color: var(--gold); font-size: 12px; }

/* Toolbar */
.obx-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(218,165,32,0.15);
}
.obx-count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-dim);
    padding: 9px 15px;
    border-radius: 10px;
    background: rgba(218,165,32,0.08);
    border: 1px solid rgba(218,165,32,0.22);
    white-space: nowrap;
}
.obx-count > i {
    font-size: 15px;
    color: var(--gold-bright);
    filter: drop-shadow(0 0 6px rgba(218,165,32,0.4));
}
.obx-count b {
    color: var(--gold-bright);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    padding: 0 1px;
}
form.obx-search-wrap { margin: 0; padding: 0; border: none; background: none; }
.obx-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}
.obx-search-wrap > i {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 14px;
    pointer-events: none;
    transition: color .2s;
}
.obx-search-wrap:focus-within > i { color: var(--gold-bright); }
input.obx-search {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.32);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
input.obx-search:focus {
    border-color: rgba(218,165,32,0.55);
    background: rgba(0,0,0,0.45);
    box-shadow: 0 0 0 3px rgba(218,165,32,0.12);
}
input.obx-search::placeholder { color: var(--text-dim); }
.obx-search-clear {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: all .18s ease;
}
.obx-search-wrap:focus-within .obx-search-clear,
.obx-search:not(:placeholder-shown) + .obx-search-clear {
    opacity: 1;
    pointer-events: auto;
}
.obx-search-clear:hover { color: #fff; background: rgba(218,165,32,0.2); }

/* Compact list of outfit tiles */
.obx-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.obx-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20,24,42,0.9), rgba(11,16,32,0.96));
    cursor: pointer;
    outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.obx-item:hover, .obx-item:focus-visible {
    border-color: rgba(218,165,32,0.45);
    background: linear-gradient(180deg, rgba(28,32,54,0.95), rgba(15,20,38,0.98));
    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 14px rgba(218,165,32,0.1);
}
.obx-item-thumb {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(218,165,32,0.2);
    overflow: hidden;
}
.obx-item-thumb img { width: 48px; height: 48px; image-rendering: pixelated; }
.obx-item-info { min-width: 0; flex: 1; }
.obx-item-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--gold-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.obx-item-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-dim);
}
.obx-item-tag i { color: var(--gold); font-size: 10px; }
.obx-item-arrow {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 12px;
    transition: transform .18s ease, color .18s ease;
}
.obx-item:hover .obx-item-arrow, .obx-item:focus-visible .obx-item-arrow {
    color: var(--gold-bright);
    transform: translateX(3px);
}

/* Bonus modal */
.obx-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3,6,14,0.78);
    backdrop-filter: blur(4px);
    animation: obxFade .2s ease;
}
.obx-modal.open { display: flex; }
@keyframes obxFade { from { opacity: 0; } to { opacity: 1; } }
.obx-modal-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 16px;
    border: 1px solid rgba(218,165,32,0.35);
    background: linear-gradient(180deg, rgba(22,26,46,0.98), rgba(11,16,32,0.99));
    box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 30px rgba(218,165,32,0.1);
    animation: obxPop .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes obxPop {
    from { transform: translateY(16px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.obx-modal-box::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
.obx-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 15px;
    transition: all .18s ease;
}
.obx-modal-close:hover { color: #fff; border-color: rgba(218,165,32,0.5); background: rgba(218,165,32,0.15); }
.obx-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(218,165,32,0.18);
    background: linear-gradient(180deg, rgba(218,165,32,0.1), transparent);
}
.obx-modal-sprites { display: flex; gap: 6px; flex: 0 0 auto; }
.obx-modal-sprites img {
    width: 60px; height: 60px;
    image-rendering: pixelated;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(218,165,32,0.25);
    border-radius: 10px;
}
.obx-modal-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--gold-bright);
    line-height: 1.2;
}
.obx-modal-body { padding: 18px 20px 22px; }
.obx-gender-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 8px;
}
.obx-gender-label:first-child { margin-top: 0; }
.obx-gender-label i {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(218,165,32,0.12);
    color: var(--gold-bright);
    font-style: normal;
    font-size: 12px;
}

/* Bonus chips */
.obx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.obx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 9px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.obx-chip-l { color: var(--text); }
.obx-chip-v {
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(0,0,0,0.35);
    color: #fff;
}
.obx-hp   { border-color: rgba(231,76,60,0.4); }   .obx-hp   .obx-chip-v { background: rgba(231,76,60,0.85); }
.obx-mana { border-color: rgba(52,152,219,0.4); }  .obx-mana .obx-chip-v { background: rgba(52,152,219,0.85); }
.obx-off  { border-color: rgba(230,126,34,0.4); }  .obx-off  .obx-chip-v { background: rgba(230,126,34,0.85); }
.obx-def  { border-color: rgba(46,204,113,0.4); }  .obx-def  .obx-chip-v { background: rgba(46,204,113,0.8); color: #10240f; }
.obx-elem { border-color: rgba(155,89,182,0.4); }  .obx-elem .obx-chip-v { background: rgba(155,89,182,0.85); }
.obx-util { border-color: rgba(218,165,32,0.4); }  .obx-util .obx-chip-v { background: rgba(218,165,32,0.9); color: #241c05; }
.obx-speed { border-color: rgba(26,188,156,0.45); } .obx-speed .obx-chip-v { background: rgba(26,188,156,0.85); color: #06241e; }

/* Empty state */
.obx-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 24px;
    color: var(--text-dim);
    border: 1px dashed rgba(218,165,32,0.3);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20,24,42,0.9), rgba(11,16,32,0.96));
}

/* Type filter buttons */
.obx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.obx-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
}
.obx-filter:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(218,165,32,0.35);
    color: var(--text);
}
.obx-filter.active {
    background: rgba(218,165,32,0.12);
    border-color: rgba(218,165,32,0.45);
    color: var(--gold-bright);
    box-shadow: 0 0 10px rgba(218,165,32,0.1);
}
.obx-filter-store:hover { border-color: rgba(52,152,219,0.5); color: #5dade2; }
.obx-filter-store.active { background: rgba(52,152,219,0.12); border-color: rgba(52,152,219,0.5); color: #5dade2; box-shadow: 0 0 10px rgba(52,152,219,0.1); }
.obx-filter-exclusive:hover { border-color: rgba(155,89,182,0.5); color: #af7ac5; }
.obx-filter-exclusive.active { background: rgba(155,89,182,0.12); border-color: rgba(155,89,182,0.5); color: #af7ac5; box-shadow: 0 0 10px rgba(155,89,182,0.1); }

/* Outfit type badges (small, inline in tag row) */
.obx-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    vertical-align: middle;
}
.obx-badge-store {
    background: rgba(52,152,219,0.12);
    border: 1px solid rgba(52,152,219,0.3);
    color: #5dade2;
}
.obx-badge-exclusive {
    background: rgba(155,89,182,0.12);
    border: 1px solid rgba(155,89,182,0.3);
    color: #af7ac5;
}

/* Item type highlight borders */
.obx-item-store { border-color: rgba(52,152,219,0.25) !important; }
.obx-item-store:hover { border-color: rgba(52,152,219,0.55) !important; }
.obx-item-exclusive { border-color: rgba(155,89,182,0.25) !important; }
.obx-item-exclusive:hover { border-color: rgba(155,89,182,0.55) !important; }

/* Pagination */
.obx-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 18px;
    margin-top: 10px;
    border-top: 1px solid rgba(218,165,32,0.12);
}
.obx-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    text-decoration: none;
    transition: all .18s ease;
    cursor: pointer;
}
.obx-page-btn:hover {
    background: rgba(218,165,32,0.12);
    border-color: rgba(218,165,32,0.4);
    color: var(--gold-bright);
}
.obx-page-btn.active {
    background: rgba(218,165,32,0.2);
    border-color: rgba(218,165,32,0.5);
    color: var(--gold-bright);
    box-shadow: 0 0 12px rgba(218,165,32,0.15);
}
.obx-page-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Toolbar layout adjustments for filters */
@media (max-width: 768px) {
    .obx-toolbar { flex-direction: column; align-items: stretch; }
    .obx-search-wrap { max-width: none; }
    .obx-filters { justify-content: center; }
}

@media (max-width: 560px) {
    .obx-list { grid-template-columns: 1fr; }
    .obx-modal-title { font-size: 17px; }
}

/* ============================================================
   MERIDIANOT MODERN SKIN
   Final overrides for the custom MeridianOT artwork and palette.
   ============================================================ */

:root {
    --gold: #d8b45a;
    --gold-bright: #ffe18a;
    --gold-dark: #7d5b22;
    --crimson: #a84e78;
    --crimson-glow: #ff80bd;
    --bg-0: #030914;
    --bg-1: #071324;
    --bg-2: #0b2132;
    --panel: rgba(6, 18, 31, 0.82);
    --panel-border: rgba(76, 229, 222, 0.24);
    --panel-glow: rgba(0, 210, 255, 0.16);
    --text: #eaf9ff;
    --text-dim: #9fc3ca;
    --success: #25e6a8;
    --danger: #ff6384;
    --meridian-cyan: #34f4e4;
    --meridian-blue: #1d7cff;
    --meridian-deep: #06111d;
    --meridian-violet: #8b6dff;
    --meridian-gold: #ffe18a;
}

html,
body {
    color: var(--text);
    background-color: var(--bg-0);
}

body {
    padding-top: 70px;
    background-image:
        linear-gradient(180deg, rgba(2, 7, 14, 0.44) 0%, rgba(2, 7, 14, 0.15) 42%, rgba(2, 7, 14, 0.82) 100%),
        url('../background-artwork.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(1, 7, 15, 0.76), transparent 18%, transparent 82%, rgba(1, 7, 15, 0.76)),
        linear-gradient(180deg, rgba(1, 7, 15, 0.1), rgba(1, 7, 15, 0.78));
}

body::after {
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(2, 8, 18, 0.72) 0%, rgba(2, 8, 18, 0.2) 24%, rgba(2, 8, 18, 0.44) 68%, rgba(2, 8, 18, 0.9) 100%),
        radial-gradient(ellipse at 49% 12%, rgba(0, 244, 212, 0.25), transparent 36%),
        radial-gradient(ellipse at 18% 20%, rgba(126, 86, 255, 0.22), transparent 34%),
        radial-gradient(ellipse at 84% 22%, rgba(29, 124, 255, 0.2), transparent 36%);
}

.epic-noise-layer {
    opacity: .22;
    mix-blend-mode: screen;
}

#particles-canvas {
    opacity: .75;
}

a {
    color: var(--meridian-cyan);
}

a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(52, 244, 228, 0.55);
}

.epic-topbar {
    min-height: 70px;
    background:
        linear-gradient(180deg, rgba(4, 15, 28, 0.96), rgba(4, 17, 31, 0.82)),
        linear-gradient(90deg, rgba(52, 244, 228, 0.08), rgba(255, 225, 138, 0.06), rgba(29, 124, 255, 0.08));
    border-bottom: 1px solid rgba(52, 244, 228, 0.28);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.56), 0 0 42px rgba(0, 180, 255, 0.12);
}

.epic-topbar-inner {
    min-height: 70px;
    gap: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.epic-logo .minilogo-topbar {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter:
        drop-shadow(0 5px 9px rgba(0, 0, 0, 0.75))
        drop-shadow(0 0 18px rgba(52, 244, 228, 0.28));
}

.epic-logo::after {
    content: 'MeridianOT';
    display: inline-block;
    margin-left: 2px;
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow:
        0 0 14px rgba(52, 244, 228, 0.56),
        0 0 20px rgba(255, 225, 138, 0.22),
        0 2px 5px rgba(0, 0, 0, 0.9);
}

.epic-topnav {
    gap: 7px;
}

.epic-topnav a,
.epic-stat {
    border-radius: 7px;
    color: #dff8ff;
    background: rgba(3, 16, 29, 0.5);
    border: 1px solid rgba(120, 220, 255, 0.14);
}

.epic-topnav a:hover,
a.epic-stat:hover {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(52, 244, 228, 0.16), rgba(29, 124, 255, 0.12));
    border-color: rgba(52, 244, 228, 0.46);
    box-shadow: 0 8px 22px rgba(0, 180, 255, 0.18);
}

.epic-stat {
    color: #bffefa;
}

.epic-stat .dot {
    background: var(--success);
    box-shadow: 0 0 12px var(--success);
}

.epic-stat-cast i {
    color: var(--meridian-gold);
}

.epic-logo-banner {
    padding: 22px 20px 0;
}

.epic-logo-banner a {
    filter:
        drop-shadow(0 20px 34px rgba(0, 0, 0, 0.78))
        drop-shadow(0 0 30px rgba(52, 244, 228, 0.34))
        drop-shadow(0 0 22px rgba(255, 225, 138, 0.2));
}

.epic-logo-banner a:hover {
    transform: translateY(-3px) scale(1.025);
    filter:
        drop-shadow(0 24px 40px rgba(0, 0, 0, 0.82))
        drop-shadow(0 0 44px rgba(52, 244, 228, 0.5))
        drop-shadow(0 0 30px rgba(255, 225, 138, 0.32));
}

.epic-logo-banner img {
    width: min(520px, 78vw);
    max-width: none;
    animation: meridianLogoFloat 6s ease-in-out infinite;
}

@keyframes meridianLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.epic-shell {
    grid-template-columns: 230px minmax(0, 1fr) 250px;
    gap: 24px;
    max-width: 1440px;
    margin-top: 12px;
    padding-bottom: 70px;
}

.panel,
.am-card,
.epic-main .TableContainer,
.am-profile-main .TableContainer,
.am-character-profile-page > .TableContainer {
    background:
        linear-gradient(180deg, rgba(8, 27, 43, 0.9), rgba(4, 13, 24, 0.94)) !important;
    border: 1px solid rgba(79, 226, 230, 0.2) !important;
    border-radius: 8px !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 225, 138, 0.04) !important;
}

.panel::before,
.am-card::before,
.epic-main .TableContainer::before {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--meridian-cyan), var(--meridian-gold), transparent) !important;
    opacity: .85;
}

.panel:hover {
    border-color: rgba(52, 244, 228, 0.42) !important;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.5),
        0 0 26px rgba(0, 210, 255, 0.12) !important;
}

.panel-head,
.CaptionInnerContainer .Text,
.am-card-title,
.am-section-title {
    color: var(--meridian-gold) !important;
    text-shadow: 0 0 12px rgba(52, 244, 228, 0.18), 0 2px 4px rgba(0, 0, 0, 0.85);
}

.panel-body {
    color: var(--text);
}

.page-title-banner {
    width: 100%;
    margin: 0 0 10px;
    height: 60px;
    padding: 0 28px;
    background:
        linear-gradient(90deg, rgba(52, 244, 228, 0), rgba(52, 244, 228, 0.18), rgba(255, 225, 138, 0.12), rgba(52, 244, 228, 0)),
        linear-gradient(180deg, rgba(9, 35, 53, 0.96), rgba(5, 17, 31, 0.94)) !important;
    background-size: auto !important;
    border: 1px solid rgba(52, 244, 228, 0.24);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34), 0 0 26px rgba(0, 210, 255, 0.1);
    color: #ffffff;
    letter-spacing: 2px;
    filter: none;
}

.page-title-banner + .panel {
    margin-top: 0;
}

.page-title-banner::before,
.page-title-banner::after {
    content: '';
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 225, 138, 0.9));
}

.page-title-banner::after {
    background: linear-gradient(90deg, rgba(255, 225, 138, 0.9), transparent);
}

.page-title-banner i {
    color: var(--meridian-cyan);
    filter: drop-shadow(0 0 10px rgba(52, 244, 228, 0.75));
}

.epic-slider {
    aspect-ratio: 16 / 6.2;
    border-radius: 8px;
    border-color: rgba(52, 244, 228, 0.28);
    background: #06111d url('../background-artwork.png') center center / cover no-repeat;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.54), 0 0 42px rgba(0, 210, 255, 0.12);
}

.epic-slider::before {
    height: 2px;
    background: linear-gradient(90deg, var(--meridian-cyan), var(--meridian-blue), var(--meridian-violet), var(--meridian-gold), var(--meridian-cyan));
}

.slider-slide::after {
    background:
        radial-gradient(ellipse at 48% 42%, transparent 16%, rgba(0, 0, 0, 0.34) 62%, rgba(0, 0, 0, 0.82) 100%),
        linear-gradient(90deg, rgba(1, 8, 15, 0.82), rgba(1, 8, 15, 0.18) 44%, rgba(1, 8, 15, 0.72)),
        linear-gradient(180deg, rgba(1, 8, 15, 0.26), rgba(1, 8, 15, 0.82));
}

.slider-content {
    max-width: 720px;
    padding: 0 52px;
}

.slider-eyebrow {
    color: var(--meridian-cyan);
    letter-spacing: 4px;
    text-shadow: 0 0 14px rgba(52, 244, 228, 0.75), 0 2px 8px rgba(0, 0, 0, 0.9);
}

.slider-content h2 {
    color: #ffffff;
    letter-spacing: 3px;
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.9),
        0 0 24px rgba(52, 244, 228, 0.42),
        0 0 34px rgba(255, 225, 138, 0.2);
}

.slider-divider span {
    background: linear-gradient(90deg, transparent, rgba(52, 244, 228, 0.92), rgba(255, 225, 138, 0.8), transparent);
}

.slider-divider i,
.slider-cta i {
    color: var(--meridian-gold);
}

.slider-content p {
    color: #d8f9ff;
    font-style: normal;
    letter-spacing: .5px;
}

.slider-cta,
.btn-epic,
.epic-main input[type="submit"],
.epic-main button.BigButtonText,
.epic-main .ButtonText,
.am-btn,
.am-button,
.obx-page-btn.active {
    border-radius: 7px !important;
    border: 1px solid rgba(52, 244, 228, 0.48) !important;
    background:
        linear-gradient(180deg, rgba(52, 244, 228, 0.26), rgba(29, 124, 255, 0.22)),
        linear-gradient(90deg, rgba(255, 225, 138, 0.1), transparent) !important;
    color: #f4feff !important;
    box-shadow: 0 10px 24px rgba(0, 160, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.slider-cta:hover,
.btn-epic:hover,
.epic-main input[type="submit"]:hover,
.epic-main .ButtonText:hover,
.am-btn:hover,
.am-button:hover {
    border-color: rgba(255, 225, 138, 0.72) !important;
    background:
        linear-gradient(180deg, rgba(52, 244, 228, 0.42), rgba(29, 124, 255, 0.34)),
        linear-gradient(90deg, rgba(255, 225, 138, 0.18), transparent) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(0, 210, 255, 0.26), 0 0 18px rgba(255, 225, 138, 0.12) !important;
}

.btn-epic.account,
.menu-panel .menu-body-plain a.btn-login.account,
.menu-panel .menu-body-plain a.btn-shop {
    border-color: rgba(255, 225, 138, 0.62) !important;
    background: linear-gradient(180deg, #ffe18a, #b5832c) !important;
    color: #08111c !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

.btn-epic.logout,
.menu-panel .menu-body-plain a.logout,
.btn-epic.danger {
    border-color: rgba(255, 99, 132, 0.62) !important;
    background: linear-gradient(180deg, rgba(255, 99, 132, 0.76), rgba(120, 25, 55, 0.86)) !important;
    color: #fff !important;
}

.download-btn {
    margin: 6px auto 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(8, 31, 48, 0.84), rgba(4, 13, 24, 0.86)),
        radial-gradient(circle at 50% 0%, rgba(52, 244, 228, 0.16), transparent 58%);
    border: 1px solid rgba(52, 244, 228, 0.24);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.48));
    animation: meridianDownloadGlow 3.6s ease-in-out infinite;
}

.download-btn:hover {
    filter: drop-shadow(0 12px 24px rgba(0, 210, 255, 0.32)) brightness(1.08);
}

@keyframes meridianDownloadGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(52, 244, 228, 0); }
    50% { box-shadow: 0 0 28px rgba(52, 244, 228, 0.18); }
}

.menu-panel {
    margin-bottom: 14px !important;
}

.menu-panel .panel-head {
    aspect-ratio: auto !important;
    min-height: 48px;
    padding: 0 15px !important;
    border-radius: 8px !important;
    background:
        linear-gradient(90deg, rgba(52, 244, 228, 0.18), rgba(255, 225, 138, 0.1), rgba(29, 124, 255, 0.16)),
        linear-gradient(180deg, rgba(10, 42, 60, 0.98), rgba(5, 17, 31, 0.96)) !important;
    border: 1px solid rgba(52, 244, 228, 0.24) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    letter-spacing: 1.8px;
}

.menu-panel .panel-head i {
    color: var(--meridian-cyan) !important;
    text-shadow: 0 0 10px rgba(52, 244, 228, 0.72) !important;
}

.menu-panel .epic-menu {
    --cap-top-h: 0px;
    --cap-bottom-h: 0px;
    --cap-overlap: 0px;
    --submenu-drop: 0px;
    width: calc(100% - 10px);
    margin: 8px auto 0;
    padding: 8px !important;
    border: 1px solid rgba(52, 244, 228, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 24, 40, 0.9), rgba(4, 13, 24, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(52, 244, 228, 0.1), transparent 58%) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.menu-panel[data-accordion] > .epic-menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.menu-panel[data-accordion].is-open > .epic-menu {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.menu-panel .epic-menu a {
    min-height: 40px;
    padding: 10px 11px !important;
    border-radius: 7px;
    border-left: 0 !important;
    color: #d7f7ff !important;
    text-shadow: none !important;
}

.menu-panel .epic-menu a::after {
    display: none;
}

.menu-panel .epic-menu a i {
    color: var(--meridian-cyan) !important;
    filter: drop-shadow(0 0 8px rgba(52, 244, 228, 0.28));
}

.menu-panel .epic-menu a:hover,
.menu-panel .epic-menu a.active {
    padding-left: 11px !important;
    color: #ffffff !important;
    background:
        linear-gradient(90deg, rgba(52, 244, 228, 0.18), rgba(255, 225, 138, 0.08), transparent) !important;
    box-shadow: inset 2px 0 0 var(--meridian-cyan), 0 8px 18px rgba(0, 0, 0, 0.18);
    text-shadow: 0 0 12px rgba(52, 244, 228, 0.24) !important;
}

.menu-panel .menu-body-plain {
    gap: 9px;
}

.menu-panel .menu-body-plain a.btn-login,
.menu-panel .menu-body-plain a.btn-register,
.menu-panel .menu-body-plain a.btn-discord-full,
.menu-panel .menu-body-plain a.btn-instagram {
    border-radius: 7px !important;
}

.menu-panel .menu-body-plain a.btn-login {
    background: linear-gradient(180deg, #35dff2 0%, #1761d6 100%) !important;
    border-color: rgba(129, 246, 255, 0.8) !important;
}

.menu-panel .menu-body-plain a.btn-register {
    background: linear-gradient(180deg, #25e6a8 0%, #087e76 100%) !important;
    border-color: rgba(92, 255, 205, 0.72) !important;
}

.menu-panel .lost-pass-link,
.menu-panel .widget-cta p,
.menu-panel .widget-discord-sub {
    color: #9fc3ca !important;
    text-shadow: none !important;
}

.menu-panel .lost-pass-link:hover {
    color: var(--meridian-cyan) !important;
}

.menu-panel .widget-cta,
.menu-panel .widget-online,
.menu-panel .widget-discord,
.menu-panel .widget-boosted,
.menu-panel .widget-topplayers {
    background:
        linear-gradient(180deg, rgba(7, 24, 40, 0.9), rgba(4, 13, 24, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(52, 244, 228, 0.1), transparent 58%) !important;
}

.menu-panel .widget-cta h4,
.menu-panel .widget-discord h4,
.menu-panel .widget-boosted .name,
.boosted-name {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(52, 244, 228, 0.22) !important;
}

.boosted-tag,
.menu-panel .widget-boosted .tag {
    color: var(--meridian-gold) !important;
    border-color: rgba(255, 225, 138, 0.32) !important;
    background: rgba(255, 225, 138, 0.08) !important;
}

.boosted-img-box,
.menu-panel .widget-boosted .img-wrap,
.tp-outfit {
    background: radial-gradient(circle, rgba(52, 244, 228, 0.18), rgba(29, 124, 255, 0.06), transparent 70%) !important;
}

.menu-panel .widget-topplayers .tp-row {
    border-radius: 7px !important;
    background:
        linear-gradient(90deg, rgba(52, 244, 228, 0.14), rgba(255, 225, 138, 0.08), rgba(29, 124, 255, 0.1)) !important;
    border: 1px solid rgba(52, 244, 228, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.menu-panel .widget-topplayers .tp-row:hover {
    filter: none !important;
    border-color: rgba(255, 225, 138, 0.34) !important;
    background:
        linear-gradient(90deg, rgba(52, 244, 228, 0.24), rgba(255, 225, 138, 0.12), rgba(29, 124, 255, 0.16)) !important;
}

.menu-panel .widget-topplayers .tp-name {
    color: #ffffff !important;
}

.menu-panel .widget-topplayers .tp-meta {
    color: var(--meridian-gold) !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea,
.epic-main select,
.epic-main input[type="text"],
.epic-main input[type="password"],
.epic-main input[type="email"] {
    background: rgba(3, 15, 27, 0.82) !important;
    border: 1px solid rgba(52, 244, 228, 0.24) !important;
    border-radius: 7px !important;
    color: var(--text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

input:focus,
select:focus,
textarea:focus,
.epic-main select:focus {
    border-color: rgba(52, 244, 228, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(52, 244, 228, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.epic-main .TableContent {
    background: rgba(3, 15, 27, 0.55) !important;
}

.epic-main .TableContent td {
    color: #d8f9ff !important;
    border-color: rgba(52, 244, 228, 0.12) !important;
}

.epic-main .TableContent tr.LabelH td,
.epic-main .TableContent .LabelH td,
.epic-main .TableContent th {
    background:
        linear-gradient(180deg, rgba(52, 244, 228, 0.15), rgba(29, 124, 255, 0.1)) !important;
    color: var(--meridian-gold) !important;
    border-color: rgba(52, 244, 228, 0.22) !important;
}

.epic-main .TableContent tbody tr:not(.LabelH):nth-child(even) td,
.epic-main .TableContent tbody tr:not(.LabelH):nth-child(odd) td {
    background: rgba(4, 18, 32, 0.48) !important;
}

.epic-main .TableContent tbody tr:not(.LabelH):hover td {
    background: rgba(52, 244, 228, 0.08) !important;
}

.epic-main .TableContent a {
    color: var(--meridian-cyan) !important;
}

.epic-main .CaptionInnerContainer,
.epic-main .CaptionContainer {
    background: transparent !important;
}

.epic-footer {
    margin-top: 20px;
    background:
        linear-gradient(180deg, rgba(2, 8, 18, 0), rgba(2, 8, 18, 0.92)),
        linear-gradient(90deg, rgba(52, 244, 228, 0.08), rgba(255, 225, 138, 0.06), rgba(29, 124, 255, 0.08));
    border-top: 1px solid rgba(52, 244, 228, 0.24);
    color: #91b8c0;
}

.epic-footer .links a {
    color: var(--meridian-cyan);
}

::-webkit-scrollbar-track {
    background: #03101d;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--meridian-cyan), #1555b8);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--meridian-gold), var(--meridian-cyan));
}

.mobile-logo img {
    width: min(360px, 88vw);
    margin-bottom: -36px;
    filter:
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.75))
        drop-shadow(0 0 22px rgba(52, 244, 228, 0.36));
}

.mobile-menu-toggle {
    border: 1px solid rgba(52, 244, 228, 0.62);
    background: linear-gradient(180deg, #36f2e2, #1761d6);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.44), 0 0 18px rgba(52, 244, 228, 0.24);
}

.mobile-menu-toggle span {
    background: #ffffff;
}

.mobile-nav-overlay {
    background: rgba(1, 7, 15, 0.82);
    backdrop-filter: blur(5px);
}

.mobile-nav-menu {
    background:
        linear-gradient(180deg, rgba(8, 28, 45, 0.98), rgba(3, 10, 19, 0.98)),
        url('../background-artwork.png') center top / cover no-repeat;
    border-left: 1px solid rgba(52, 244, 228, 0.24);
}

.mobile-nav-header {
    background: rgba(3, 16, 29, 0.72);
    border-bottom-color: rgba(52, 244, 228, 0.28);
}

.mobile-nav-header img {
    width: 200px;
    max-height: none;
    filter: drop-shadow(0 0 18px rgba(52, 244, 228, 0.28));
}

.mobile-nav-group-title {
    background: rgba(6, 24, 39, 0.78);
    color: var(--meridian-gold);
    border-left-color: transparent;
}

.mobile-nav-group-title:hover {
    background: rgba(52, 244, 228, 0.12);
    border-left-color: var(--meridian-cyan);
}

.mobile-nav-items {
    background: rgba(2, 10, 19, 0.68);
}

.mobile-nav-items a {
    color: #d7f7ff;
}

.mobile-nav-items a:hover {
    background: rgba(52, 244, 228, 0.1);
    color: #ffffff;
    border-left-color: var(--meridian-cyan);
}

.mobile-nav-footer {
    border-top-color: rgba(52, 244, 228, 0.18);
}

.mobile-nav-footer a {
    background: linear-gradient(180deg, rgba(52, 244, 228, 0.16), rgba(29, 124, 255, 0.14));
    border-color: rgba(52, 244, 228, 0.3);
    color: #ffffff;
}

@media (max-width: 1300px) {
    .epic-logo .minilogo-topbar {
        width: 48px;
        height: 48px;
    }

    .epic-logo::after {
        font-size: 18px;
        letter-spacing: 1.4px;
    }

    .epic-topbar-inner {
        gap: 10px;
    }
}

@media (max-width: 1100px) {
    body {
        padding-top: 0;
        background-attachment: scroll;
        background-position: center top;
    }

    .epic-shell {
        margin-top: 0;
    }

    .epic-main,
    section.epic-main {
        padding: 10px 12px 24px !important;
    }

    .epic-slider {
        margin-top: 10px;
        aspect-ratio: 16 / 8;
    }

    .page-title-banner {
        width: 100%;
        margin: 6px 0 12px;
    }

    .page-title-banner i,
    .page-title-banner span {
        top: 0;
    }
}

@media (max-width: 720px) {
    .mobile-logo {
        padding-top: 6px;
    }

    .mobile-logo img {
        width: min(315px, 92vw);
        margin-bottom: -28px;
    }

    .epic-slider {
        aspect-ratio: 16 / 10.5;
        min-height: 230px;
    }

    .slider-content {
        padding: 0 28px;
    }

    .slider-content h2 {
        font-size: 25px;
        letter-spacing: 1.5px;
    }

    .slider-eyebrow {
        letter-spacing: 2px;
        font-size: 10px;
    }

    .slider-content p {
        font-size: 13px;
    }

    .slider-arrow {
        width: 34px;
        height: 34px;
    }

    .page-title-banner {
        height: 50px;
        min-height: 50px;
        padding: 0 14px;
        font-size: 13px;
    }

    .page-title-banner::before,
    .page-title-banner::after {
        width: 24px;
    }
}

@media (max-width: 480px) {
    .mobile-menu-toggle {
        top: 12px;
        right: 12px;
        width: 46px;
        height: 46px;
    }

    .mobile-logo img {
        width: min(285px, 90vw);
    }

    .epic-main,
    section.epic-main {
        padding: 8px !important;
    }

    .epic-slider {
        min-height: 220px;
    }

    .slider-content h2 {
        font-size: 21px;
    }

    .slider-content p {
        display: none;
    }

    .slider-cta {
        padding: 8px 14px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .page-title-banner {
        padding: 0 10px;
        letter-spacing: 1px;
    }
}

/* ============================================================
   MERIDIAN LIGHTWEIGHT POLISH
   Faster feeling: fewer filters/animations, CSS download button,
   subtle smoke behind the logo.
   ============================================================ */

body {
    background-attachment: scroll !important;
}

.epic-noise-layer,
#particles-canvas {
    display: none !important;
}

.epic-topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.epic-topnav a,
.epic-stat,
.panel,
.page-title-banner,
.menu-panel .panel-head,
.menu-panel .epic-menu,
.epic-slider,
.btn-epic,
.download-btn {
    transition-duration: .12s !important;
}

.panel,
.am-card,
.epic-slider,
.menu-panel .epic-menu,
.menu-panel .panel-head,
.page-title-banner {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34) !important;
}

.panel:hover,
.epic-topnav a:hover,
a.epic-stat:hover,
.download-btn:hover,
.btn-epic:hover {
    transform: none !important;
}

.epic-logo-banner {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    overflow: visible;
}

.epic-logo-banner::before,
.epic-logo-banner::after {
    content: '';
    position: absolute;
    top: 36%;
    width: 240px;
    height: 118px;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
    filter: blur(14px);
    background:
        radial-gradient(ellipse at center, rgba(52, 244, 228, 0.34), transparent 62%),
        radial-gradient(ellipse at 70% 42%, rgba(29, 124, 255, 0.24), transparent 66%),
        radial-gradient(ellipse at 35% 72%, rgba(255, 225, 138, 0.16), transparent 58%);
}

.epic-logo-banner::before {
    right: 50%;
    animation: meridianSmokeLeft 6.6s ease-in-out infinite;
}

.epic-logo-banner::after {
    left: 50%;
    animation: meridianSmokeRight 6.6s 1.8s ease-in-out infinite;
}

@keyframes meridianSmokeLeft {
    0% { opacity: 0; transform: translate(10px, -8px) scale(.82); }
    22% { opacity: .7; }
    100% { opacity: 0; transform: translate(-210px, -34px) scale(1.18); }
}

@keyframes meridianSmokeRight {
    0% { opacity: 0; transform: translate(-10px, -8px) scale(.82); }
    22% { opacity: .62; }
    100% { opacity: 0; transform: translate(210px, -34px) scale(1.18); }
}

.epic-logo-banner a,
.epic-logo-banner a:hover {
    transform: none !important;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55)) !important;
}

.epic-logo-banner img {
    width: min(430px, 72vw) !important;
    animation: none !important;
}

.epic-logo .minilogo-topbar,
.mobile-logo img,
.mobile-nav-header img {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)) !important;
}

.epic-logo::after {
    text-shadow: 0 0 10px rgba(52, 244, 228, 0.42), 0 2px 4px rgba(0, 0, 0, 0.82) !important;
}

.download-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    line-height: 1.1;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    background:
        linear-gradient(180deg, rgba(50, 236, 225, 0.24), rgba(23, 97, 214, 0.24)),
        linear-gradient(90deg, rgba(255, 225, 138, 0.13), transparent 54%),
        rgba(4, 17, 31, 0.94) !important;
    border: 1px solid rgba(52, 244, 228, 0.44);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important;
    animation: none !important;
}

.download-btn::before,
.download-btn::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.download-btn::before {
    inset: 1px;
    border-radius: 7px;
    border: 1px solid rgba(255, 225, 138, 0.12);
}

.download-btn::after {
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(52, 244, 228, 0.64), transparent);
}

.download-btn-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(52, 244, 228, 0.28), rgba(29, 124, 255, 0.2));
    color: var(--meridian-gold);
}

.download-btn-text {
    position: relative;
    top: 1px;
}

.download-btn img {
    display: none !important;
}

.download-btn:hover {
    color: #ffffff !important;
    border-color: rgba(255, 225, 138, 0.54);
    background:
        linear-gradient(180deg, rgba(50, 236, 225, 0.32), rgba(23, 97, 214, 0.3)),
        linear-gradient(90deg, rgba(255, 225, 138, 0.18), transparent 54%),
        rgba(5, 22, 39, 0.96) !important;
    filter: none !important;
}

.slider-slide,
.slider-slide.active,
.slider-slide img,
.slider-slide.active img,
.slider-slide.leaving {
    animation: none !important;
    filter: none !important;
    transition: opacity .24s ease !important;
    transform: none !important;
}

.slider-slide::after {
    background:
        linear-gradient(90deg, rgba(1, 8, 15, 0.76), rgba(1, 8, 15, 0.22) 46%, rgba(1, 8, 15, 0.72)),
        linear-gradient(180deg, rgba(1, 8, 15, 0.18), rgba(1, 8, 15, 0.74)) !important;
}

.slider-slide.active .slider-eyebrow,
.slider-slide.active .slider-content h2,
.slider-slide.active .slider-divider,
.slider-slide.active .slider-content p,
.slider-slide.active .slider-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.slider-vignette,
.slider-slide.active .slider-vignette::before {
    box-shadow: none !important;
    animation: none !important;
}

.btn-epic::before,
.menu-panel .menu-body-plain a.btn-login::after,
.menu-panel .menu-body-plain a.btn-register::after,
.menu-panel .menu-body-plain a.btn-shop::after {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .epic-logo-banner::before,
    .epic-logo-banner::after {
        animation: none !important;
        display: none !important;
    }
}

@media (max-width: 1100px) {
    .mobile-logo img {
        width: min(300px, 86vw) !important;
        margin-bottom: -24px !important;
    }
}

@media (max-width: 720px) {
    .epic-logo-banner::before,
    .epic-logo-banner::after {
        width: 150px;
        height: 80px;
    }

    .download-btn {
        min-height: 54px;
        font-size: 12px;
    }
}

/* ============================================================
   MERIDIAN FINAL HOME TUNING
   Fixed full background, no slider, smaller floating logo and
   visible colored smoke from both sides.
   ============================================================ */

body {
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center top !important;
}

.epic-logo-banner {
    position: relative !important;
    isolation: isolate;
    min-height: 220px;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
}

.epic-logo-banner a {
    position: relative;
    z-index: 2;
    display: inline-block;
    animation: meridianLogoFloatSoft 5.4s ease-in-out infinite !important;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.54)) !important;
}

.epic-logo-banner a:hover {
    transform: none !important;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.54)) !important;
}

.epic-logo-banner img {
    width: min(350px, 58vw) !important;
    animation: none !important;
}

.epic-logo-banner::before,
.epic-logo-banner::after {
    top: 36%;
    z-index: 1;
    width: 280px;
    height: 140px;
    opacity: 0;
    filter: blur(18px);
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(52, 244, 228, 0.44), transparent 58%),
        radial-gradient(ellipse at 66% 36%, rgba(29, 124, 255, 0.32), transparent 62%),
        radial-gradient(ellipse at 35% 66%, rgba(44, 255, 180, 0.28), transparent 60%),
        radial-gradient(ellipse at 48% 70%, rgba(255, 225, 138, 0.18), transparent 62%);
}

.epic-logo-banner::before {
    right: calc(50% + 70px);
    animation: meridianSmokeLeftVisible 5.8s ease-out infinite !important;
}

.epic-logo-banner::after {
    left: calc(50% + 70px);
    animation: meridianSmokeRightVisible 5.8s 1.2s ease-out infinite !important;
}

@keyframes meridianLogoFloatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes meridianSmokeLeftVisible {
    0% { opacity: 0; transform: translate(44px, 10px) scale(.72); }
    18% { opacity: .68; }
    58% { opacity: .4; }
    100% { opacity: 0; transform: translate(-120px, -38px) scale(1.2); }
}

@keyframes meridianSmokeRightVisible {
    0% { opacity: 0; transform: translate(-44px, 10px) scale(.72); }
    18% { opacity: .62; }
    58% { opacity: .36; }
    100% { opacity: 0; transform: translate(120px, -38px) scale(1.2); }
}

.epic-slider {
    display: none !important;
}

@media (max-width: 1100px) {
    body {
        background-attachment: fixed !important;
        background-size: cover !important;
    }
}

@media (max-width: 720px) {
    .epic-logo-banner {
        min-height: 160px;
    }

    .epic-logo-banner img {
        width: min(280px, 74vw) !important;
    }

    .epic-logo-banner::before,
    .epic-logo-banner::after {
        width: 180px;
        height: 96px;
        filter: blur(14px);
    }

    .epic-logo-banner::before {
        right: calc(50% + 38px);
    }

    .epic-logo-banner::after {
        left: calc(50% + 38px);
    }
}

/* ============================================================
   MERIDIAN FINAL REFINEMENTS
   Outfit top players, aurora smoke, smaller floating logo and
   steady menu hover.
   ============================================================ */

.epic-logo-banner {
    min-height: 188px !important;
    padding-top: 0 !important;
}

.epic-logo-banner a {
    animation: meridianLogoBreathe 4.8s ease-in-out infinite !important;
    will-change: transform;
}

.epic-logo-banner img {
    width: min(300px, 50vw) !important;
}

.epic-logo-banner::before,
.epic-logo-banner::after {
    top: 34%;
    width: 340px;
    height: 150px;
    opacity: 0;
    filter: blur(16px) saturate(1.55);
    mix-blend-mode: screen;
    background:
        linear-gradient(112deg,
            transparent 0%,
            rgba(41, 255, 202, 0.05) 12%,
            rgba(41, 255, 202, 0.42) 30%,
            rgba(20, 126, 255, 0.34) 49%,
            rgba(126, 92, 255, 0.22) 66%,
            rgba(255, 225, 138, 0.18) 78%,
            transparent 100%),
        radial-gradient(ellipse at 50% 55%, rgba(58, 255, 232, 0.26), transparent 58%);
}

.epic-logo-banner::before {
    right: calc(50% + 18px);
    transform-origin: right center;
    animation: meridianAuroraLeft 5.6s ease-in-out infinite !important;
}

.epic-logo-banner::after {
    left: calc(50% + 18px);
    transform-origin: left center;
    animation: meridianAuroraRight 5.6s 1.15s ease-in-out infinite !important;
}

@keyframes meridianLogoBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-11px); }
}

@keyframes meridianAuroraLeft {
    0% { opacity: 0; transform: translate(70px, 16px) rotate(-5deg) scaleX(.55) scaleY(.72); }
    18% { opacity: .9; }
    54% { opacity: .62; transform: translate(-52px, -20px) rotate(-10deg) scaleX(1.05) scaleY(.98); }
    100% { opacity: 0; transform: translate(-164px, -54px) rotate(-16deg) scaleX(1.32) scaleY(1.12); }
}

@keyframes meridianAuroraRight {
    0% { opacity: 0; transform: translate(-70px, 16px) rotate(5deg) scaleX(.55) scaleY(.72); }
    18% { opacity: .84; }
    54% { opacity: .56; transform: translate(52px, -20px) rotate(10deg) scaleX(1.05) scaleY(.98); }
    100% { opacity: 0; transform: translate(164px, -54px) rotate(16deg) scaleX(1.32) scaleY(1.12); }
}

.menu-panel .epic-menu a,
.menu-panel .menu-body-plain a,
.mobile-nav-items a {
    transform: none !important;
    transition: background-color .12s ease, background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}

.menu-panel .epic-menu a:hover,
.menu-panel .epic-menu a:focus,
.menu-panel .epic-menu a.active {
    padding-left: 11px !important;
    transform: none !important;
    filter: none !important;
}

.menu-panel .menu-body-plain a:hover,
.menu-panel .menu-body-plain a:focus {
    transform: none !important;
}

.mobile-nav-items a:hover,
.mobile-nav-items a:focus {
    padding-left: 40px !important;
    transform: none !important;
}

.menu-panel .widget-topplayers .tp-badge {
    display: none !important;
}

.menu-panel .widget-topplayers .tp-row {
    min-height: 54px;
    gap: 10px !important;
    padding: 8px 10px !important;
    align-items: center;
}

.menu-panel .widget-topplayers .tp-row:hover,
.menu-panel .widget-topplayers .tp-row:focus,
.menu-panel .widget-topplayers .tp-row:active {
    padding: 8px 10px !important;
    transform: none !important;
}

.menu-panel .widget-topplayers .tp-outfit {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border-radius: 9px !important;
    border: 1px solid rgba(52, 244, 228, 0.24);
    background:
        radial-gradient(circle at 50% 38%, rgba(52, 244, 228, 0.24), rgba(29, 124, 255, 0.1) 50%, rgba(4, 13, 24, 0.68) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 12px rgba(0,0,0,0.28);
}

.menu-panel .widget-topplayers .tp-outfit img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.62)) !important;
}

.menu-panel .widget-topplayers .tp-info {
    margin-left: 0 !important;
}

@media (max-width: 720px) {
    .epic-logo-banner {
        min-height: 140px !important;
    }

    .epic-logo-banner img {
        width: min(240px, 68vw) !important;
    }

    .epic-logo-banner::before,
    .epic-logo-banner::after {
        width: 210px;
        height: 100px;
        filter: blur(13px) saturate(1.45);
    }
}

/* ============================================================
   MERIDIAN STABILITY + VIVID AURORA
   Strong final overrides for steady sidebar widgets and clearer
   aurora trails behind the logo.
   ============================================================ */

.epic-logo-banner::before,
.epic-logo-banner::after {
    top: 26% !important;
    width: 470px !important;
    height: 190px !important;
    filter: blur(10px) saturate(2.35) brightness(1.2) !important;
    mix-blend-mode: screen;
    background:
        linear-gradient(104deg,
            transparent 0%,
            rgba(44, 255, 215, 0.16) 10%,
            rgba(33, 255, 190, 0.82) 27%,
            rgba(0, 172, 255, 0.72) 43%,
            rgba(92, 104, 255, 0.56) 59%,
            rgba(179, 92, 255, 0.36) 72%,
            rgba(255, 232, 135, 0.26) 84%,
            transparent 100%),
        linear-gradient(78deg,
            transparent 0%,
            rgba(0, 255, 196, 0.44) 32%,
            rgba(42, 150, 255, 0.34) 55%,
            transparent 88%),
        radial-gradient(ellipse at 50% 50%, rgba(69, 255, 235, 0.42), transparent 58%);
}

.epic-logo-banner::before {
    right: calc(50% - 10px) !important;
    animation: meridianAuroraVividLeft 6.2s ease-in-out infinite !important;
}

.epic-logo-banner::after {
    left: calc(50% - 10px) !important;
    animation: meridianAuroraVividRight 6.2s 1.15s ease-in-out infinite !important;
}

@keyframes meridianAuroraVividLeft {
    0% { opacity: 0; transform: translate(76px, 18px) rotate(-8deg) scaleX(.42) scaleY(.62); }
    14% { opacity: .95; }
    48% { opacity: .78; transform: translate(-68px, -22px) rotate(-12deg) scaleX(1.02) scaleY(.96); }
    100% { opacity: 0; transform: translate(-238px, -68px) rotate(-18deg) scaleX(1.35) scaleY(1.18); }
}

@keyframes meridianAuroraVividRight {
    0% { opacity: 0; transform: translate(-76px, 18px) rotate(8deg) scaleX(.42) scaleY(.62); }
    14% { opacity: .88; }
    48% { opacity: .72; transform: translate(68px, -22px) rotate(12deg) scaleX(1.02) scaleY(.96); }
    100% { opacity: 0; transform: translate(238px, -68px) rotate(18deg) scaleX(1.35) scaleY(1.18); }
}

.epic-sidebar,
.epic-sidebar *,
.menu-panel,
.menu-panel *,
.download-btn {
    transform: none !important;
}

.epic-sidebar *,
.menu-panel * {
    transition-property: background, color, border-color, box-shadow, opacity !important;
    transition-duration: .08s !important;
}

.epic-sidebar .panel,
.epic-sidebar .panel:hover,
.epic-sidebar .menu-panel,
.epic-sidebar .menu-panel:hover {
    transform: none !important;
    filter: none !important;
}

.epic-sidebar .panel:hover,
.epic-sidebar .menu-panel:hover {
    border-color: rgba(79, 226, 230, 0.2) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34) !important;
}

.menu-panel .panel-head,
.menu-panel .panel-head:hover,
.menu-panel[data-accordion] > .panel-head,
.menu-panel[data-accordion] > .panel-head:hover {
    transform: none !important;
    filter: none !important;
}

.menu-panel .epic-menu a,
.menu-panel .epic-menu a:hover,
.menu-panel .epic-menu a:focus,
.menu-panel .epic-menu a:active,
.menu-panel .epic-menu a.active {
    padding: 10px 11px !important;
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
}

.menu-panel .menu-body-plain a,
.menu-panel .menu-body-plain a:hover,
.menu-panel .menu-body-plain a:focus,
.menu-panel .menu-body-plain a:active {
    transform: none !important;
    filter: none !important;
}

.menu-panel .widget-topplayers .tp-row,
.menu-panel .widget-topplayers .tp-row:hover,
.menu-panel .widget-topplayers .tp-row:focus,
.menu-panel .widget-topplayers .tp-row:active {
    min-height: 72px !important;
    padding: 8px 10px !important;
    gap: 12px !important;
    transform: none !important;
    filter: none !important;
}

.menu-panel .widget-topplayers .tp-outfit {
    width: 62px !important;
    height: 62px !important;
    flex-basis: 62px !important;
    border-radius: 10px !important;
}

.menu-panel .widget-topplayers .tp-outfit img {
    width: 62px !important;
    height: 62px !important;
}

.menu-panel .widget-topplayers .tp-name {
    font-size: 13px !important;
}

.menu-panel .widget-topplayers .tp-meta {
    font-size: 11px !important;
}

@media (max-width: 720px) {
    .epic-logo-banner::before,
    .epic-logo-banner::after {
        width: 260px !important;
        height: 120px !important;
        filter: blur(9px) saturate(2) brightness(1.15) !important;
    }
}

/* ============================================================
   MERIDIAN CORRECTIONS
   Softer aurora, real logo motion, larger outfit sprite only,
   and fully stable sidebar hover.
   ============================================================ */

.epic-logo-banner a,
.epic-logo-banner a:hover {
    animation: meridianLogoTranslateFloat 4.8s ease-in-out infinite !important;
    transform: none !important;
}

.epic-logo-banner img {
    width: min(280px, 46vw) !important;
}

@keyframes meridianLogoTranslateFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

.epic-logo-banner::before,
.epic-logo-banner::after {
    top: 31% !important;
    width: 330px !important;
    height: 145px !important;
    filter: blur(15px) saturate(1.65) brightness(1.02) !important;
    background:
        linear-gradient(108deg,
            transparent 0%,
            rgba(40, 255, 205, 0.08) 15%,
            rgba(40, 255, 205, 0.34) 33%,
            rgba(27, 132, 255, 0.28) 52%,
            rgba(112, 92, 255, 0.18) 70%,
            rgba(255, 226, 138, 0.12) 82%,
            transparent 100%),
        radial-gradient(ellipse at center, rgba(64, 245, 230, 0.22), transparent 62%) !important;
}

.epic-logo-banner::before {
    right: calc(50% + 42px) !important;
    animation: meridianAuroraSoftLeft 6.2s ease-in-out infinite !important;
}

.epic-logo-banner::after {
    left: calc(50% + 42px) !important;
    animation: meridianAuroraSoftRight 6.2s 1.2s ease-in-out infinite !important;
}

@keyframes meridianAuroraSoftLeft {
    0% { opacity: 0; transform: translate(48px, 12px) rotate(-6deg) scaleX(.58) scaleY(.72); }
    18% { opacity: .62; }
    54% { opacity: .42; transform: translate(-42px, -16px) rotate(-10deg) scaleX(1.02) scaleY(.92); }
    100% { opacity: 0; transform: translate(-150px, -46px) rotate(-14deg) scaleX(1.18) scaleY(1.05); }
}

@keyframes meridianAuroraSoftRight {
    0% { opacity: 0; transform: translate(-48px, 12px) rotate(6deg) scaleX(.58) scaleY(.72); }
    18% { opacity: .56; }
    54% { opacity: .38; transform: translate(42px, -16px) rotate(10deg) scaleX(1.02) scaleY(.92); }
    100% { opacity: 0; transform: translate(150px, -46px) rotate(14deg) scaleX(1.18) scaleY(1.05); }
}

.epic-sidebar,
.epic-sidebar:hover,
.epic-sidebar .panel,
.epic-sidebar .panel:hover,
.epic-sidebar .menu-panel,
.epic-sidebar .menu-panel:hover,
.epic-sidebar .panel-head,
.epic-sidebar .panel-head:hover,
.epic-sidebar .epic-menu,
.epic-sidebar .epic-menu:hover {
    top: auto !important;
    translate: none !important;
    transform: none !important;
    filter: none !important;
}

.epic-sidebar *,
.epic-sidebar *:hover,
.epic-sidebar *:focus {
    translate: none !important;
    transition: none !important;
}

.epic-sidebar .panel:hover,
.epic-sidebar .menu-panel:hover,
.epic-sidebar a:hover,
.epic-sidebar a:focus,
.epic-sidebar button:hover,
.epic-sidebar button:focus {
    box-shadow: none !important;
    filter: none !important;
}

.menu-panel .epic-menu a,
.menu-panel .epic-menu a:hover,
.menu-panel .epic-menu a:focus,
.menu-panel .epic-menu a:active,
.menu-panel .epic-menu a.active,
.menu-panel .menu-body-plain a,
.menu-panel .menu-body-plain a:hover,
.menu-panel .menu-body-plain a:focus,
.menu-panel .menu-body-plain a:active {
    padding-left: 11px !important;
    padding-right: 11px !important;
    transform: none !important;
    filter: none !important;
    translate: none !important;
}

.menu-panel .widget-topplayers .tp-row,
.menu-panel .widget-topplayers .tp-row:hover,
.menu-panel .widget-topplayers .tp-row:focus,
.menu-panel .widget-topplayers .tp-row:active {
    min-height: 78px !important;
    padding: 8px 10px !important;
    gap: 12px !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    translate: none !important;
}

.menu-panel .widget-topplayers .tp-outfit {
    width: 46px !important;
    height: 58px !important;
    flex: 0 0 46px !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.menu-panel .widget-topplayers .tp-outfit img {
    width: 76px !important;
    height: 76px !important;
    max-width: none !important;
    max-height: none !important;
    transform: scale(1.22) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.72)) !important;
}

@media (max-width: 720px) {
    .epic-logo-banner img {
        width: min(220px, 64vw) !important;
    }

    .epic-logo-banner::before,
    .epic-logo-banner::after {
        width: 210px !important;
        height: 95px !important;
        filter: blur(13px) saturate(1.45) brightness(1) !important;
    }
}

/* ============================================================
   MERIDIAN ARC REDESIGN
   Major visual shift away from the legacy fantasy/sidebar look.
   ============================================================ */

:root {
    --arc-bg: rgba(3, 11, 20, 0.78);
    --arc-bg-solid: #06111d;
    --arc-line: rgba(91, 240, 226, 0.22);
    --arc-line-strong: rgba(91, 240, 226, 0.48);
    --arc-gold: #f3d274;
    --arc-cyan: #39f1e4;
    --arc-blue: #267cff;
    --arc-green: #38f0a8;
    --arc-text: #edfaff;
    --arc-muted: #8fb6c0;
}

body.meridian-page {
    background-color: #020813 !important;
    background-image:
        linear-gradient(90deg, rgba(2,8,19,.9), rgba(2,8,19,.32) 18%, rgba(2,8,19,.2) 50%, rgba(2,8,19,.32) 82%, rgba(2,8,19,.9)),
        linear-gradient(180deg, rgba(2,8,19,.28), rgba(2,8,19,.7) 78%, rgba(2,8,19,.96)),
        url('../background-artwork.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}

.epic-topbar {
    min-height: 62px !important;
    background:
        linear-gradient(90deg, rgba(4, 20, 34, 0.94), rgba(8, 34, 52, 0.88), rgba(4, 20, 34, 0.94)) !important;
    border-bottom: 1px solid rgba(57, 241, 228, .2) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}

.epic-topbar-inner {
    min-height: 62px !important;
    max-width: 1540px !important;
}

.epic-logo .minilogo-topbar {
    width: 42px !important;
    height: 42px !important;
}

.epic-logo::after {
    content: 'MERIDIAN OT' !important;
    font-size: 15px !important;
    letter-spacing: 4px !important;
    color: #ecfeff !important;
}

.epic-topnav {
    justify-content: center;
}

.epic-topnav a,
.epic-stat,
.epic-stats .btn-epic {
    min-height: 34px;
    border-radius: 999px !important;
    padding: 7px 13px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(91,240,226,.16) !important;
    box-shadow: none !important;
}

.epic-topnav a:hover,
.epic-stat:hover,
.epic-stats .btn-epic:hover {
    background: rgba(57,241,228,.1) !important;
    border-color: rgba(91,240,226,.36) !important;
}

.epic-logo-banner {
    max-width: 1540px;
    min-height: 132px !important;
    margin: 0 auto !important;
    padding: 8px 28px 0 !important;
    justify-content: flex-start !important;
}

.epic-logo-banner a {
    margin-left: clamp(0px, 3vw, 42px);
}

.epic-logo-banner img {
    width: min(230px, 36vw) !important;
}

.epic-logo-banner::before,
.epic-logo-banner::after {
    opacity: .75;
}

.epic-shell {
    grid-template-columns: 250px minmax(0, 1fr) 280px !important;
    gap: 18px !important;
    max-width: 1540px !important;
    margin-top: 0 !important;
    padding: 0 28px 64px !important;
}

.epic-sidebar {
    position: sticky;
    top: 78px;
    align-self: start;
}

.epic-sidebar.left,
.epic-sidebar.right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-panel,
.panel.menu-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.menu-panel .panel-head {
    min-height: 34px !important;
    aspect-ratio: auto !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--arc-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 2.3px !important;
}

.menu-panel .panel-head::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(91,240,226,.28), transparent);
}

.menu-panel .panel-head i {
    color: var(--arc-cyan) !important;
    text-shadow: none !important;
}

.menu-panel[data-accordion] .panel-head-chev {
    position: static !important;
    transform: none !important;
    color: var(--arc-muted) !important;
}

.menu-panel .epic-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid rgba(91,240,226,.14) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(6, 23, 38, .72), rgba(3, 12, 22, .78)),
        radial-gradient(circle at 0 0, rgba(57,241,228,.11), transparent 50%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.22) !important;
    overflow: hidden !important;
}

.menu-panel[data-accordion] > .epic-menu {
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
}

.menu-panel[data-accordion].is-open > .epic-menu {
    max-height: 900px;
    padding: 7px !important;
    border-color: rgba(91,240,226,.14) !important;
}

.menu-panel .epic-menu a {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 9px !important;
    border-radius: 7px !important;
    color: #ccecf2 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: .1px !important;
    background: transparent !important;
    box-shadow: inset 2px 0 0 transparent !important;
}

.menu-panel .epic-menu a:hover,
.menu-panel .epic-menu a.active {
    padding: 8px 9px !important;
    color: #ffffff !important;
    background: rgba(57,241,228,.09) !important;
    box-shadow: inset 2px 0 0 var(--arc-cyan) !important;
}

.menu-panel .epic-menu a i {
    width: 17px !important;
    color: var(--arc-cyan) !important;
}

.download-btn {
    min-height: 48px !important;
    border-radius: 10px !important;
    margin: 2px 0 4px !important;
    background:
        linear-gradient(135deg, rgba(57,241,228,.23), rgba(38,124,255,.2)),
        rgba(5,18,31,.85) !important;
    border-color: rgba(91,240,226,.28) !important;
}

.page-title-banner {
    height: auto !important;
    min-height: 58px !important;
    justify-content: flex-start !important;
    margin: 0 0 12px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    background:
        linear-gradient(90deg, rgba(57,241,228,.13), transparent 48%),
        rgba(5,19,32,.82) !important;
    border: 1px solid rgba(91,240,226,.18) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.26) !important;
}

.page-title-banner::before,
.page-title-banner::after {
    display: none !important;
}

.page-title-banner span {
    letter-spacing: 1.3px !important;
}

.epic-main > .panel {
    border-radius: 14px !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(7,24,39,.88), rgba(3,12,22,.94)),
        radial-gradient(circle at 100% 0, rgba(38,124,255,.12), transparent 46%) !important;
    border: 1px solid rgba(91,240,226,.16) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.36) !important;
}

.epic-main > .panel .panel-body {
    padding: 16px !important;
}

.epic-sidebar.right .menu-panel .epic-menu,
.epic-sidebar.right .menu-panel .menu-body-plain {
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(8,29,45,.84), rgba(4,14,25,.92)),
        radial-gradient(circle at 100% 0, rgba(243,210,116,.1), transparent 40%) !important;
}

.menu-panel .widget-topplayers .tp-row {
    min-height: 70px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(91,240,226,.1) !important;
}

.menu-panel .widget-topplayers .tp-row:hover {
    background: rgba(57,241,228,.07) !important;
    border-color: rgba(91,240,226,.2) !important;
}

.menu-panel .widget-topplayers .tp-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
}

.menu-panel .widget-topplayers .tp-meta {
    font-family: 'Inter', sans-serif !important;
    color: var(--arc-gold) !important;
}

.epic-main .TableContainer,
.epic-main .TableContent,
.am-card {
    border-radius: 12px !important;
}

@media (max-width: 1100px) {
    .epic-logo-banner {
        justify-content: center !important;
        min-height: 126px !important;
    }

    .epic-logo-banner a {
        margin-left: 0;
    }

    .epic-shell {
        grid-template-columns: 1fr !important;
        padding: 0 12px 40px !important;
    }

    .epic-sidebar {
        position: static;
    }
}

/* ============================================================
   MERIDIAN POLARIS UPDATE
   Distinct top navigation, framed left dock, stream widget,
   luminous gold accents and final positioning.
   ============================================================ */

:root {
    --gold: #d99422;
    --gold-bright: #ffc83d;
    --gold-dark: #7c4b06;
    --meridian-gold: #ffc83d;
    --arc-gold: #ffc83d;
    --arc-gold-hot: #f0a51e;
    --arc-gold-deep: #8a5408;
}

.epic-topbar {
    min-height: 74px !important;
    background:
        linear-gradient(180deg, rgba(3, 14, 25, .98), rgba(4, 21, 35, .94)),
        linear-gradient(90deg, rgba(57,241,228,.05), rgba(255,200,61,.07), rgba(38,124,255,.05)) !important;
    border-bottom: 1px solid rgba(255, 200, 61, .16) !important;
}

.epic-topbar-inner {
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: 285px minmax(420px, 1fr) auto !important;
    gap: 20px !important;
    align-items: center !important;
}

.epic-topnav {
    justify-content: stretch !important;
    gap: 0 !important;
    min-height: 44px;
    padding: 4px;
    border: 1px solid rgba(91, 240, 226, .14);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(57,241,228,.045), rgba(255,255,255,.035));
}

.epic-topnav a {
    flex: 1 1 0;
    min-height: 34px !important;
    justify-content: center;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #d9f8ff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
    box-shadow: inset -1px 0 0 rgba(91,240,226,.12) !important;
}

.epic-topnav a:last-child {
    box-shadow: none !important;
}

.epic-topnav a:hover {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(57,241,228,.12), rgba(38,124,255,.1)) !important;
    box-shadow: inset 0 -2px 0 var(--arc-cyan) !important;
}

.epic-topnav a:first-child {
    color: #120b01 !important;
    background: linear-gradient(180deg, #ffc83d, #d99422 58%, #8a5408) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 14px rgba(255, 184, 35, .2) !important;
}

.epic-stats {
    gap: 8px !important;
}

.epic-stat,
.epic-stats .btn-epic {
    border-radius: 10px !important;
    background: rgba(2,12,22,.76) !important;
    border: 1px solid rgba(91,240,226,.18) !important;
}

.epic-stats .btn-epic,
.btn-shop,
.menu-panel .menu-body-plain a.btn-shop,
.btn-epic.account {
    color: #150d02 !important;
    border-color: rgba(255, 200, 61, .72) !important;
    background:
        linear-gradient(180deg, #ffd86a 0%, #ffc83d 36%, #d99422 70%, #8a5408 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 0 16px rgba(255, 184, 35, .28) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.28) !important;
}

.epic-logo-banner {
    min-height: 158px !important;
    justify-content: flex-start !important;
    padding-top: 34px !important;
    padding-left: max(18px, calc((100vw - 1540px) / 2 + 18px)) !important;
}

.epic-logo-banner a {
    margin-left: 0 !important;
}

.epic-logo-banner img {
    width: min(255px, 40vw) !important;
}

.epic-sidebar.left {
    position: sticky;
    top: 88px;
    padding: 12px 10px !important;
    border: 1px solid rgba(91, 240, 226, .16);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(5,19,32,.58), rgba(3,11,20,.34)),
        radial-gradient(circle at 50% 0, rgba(57,241,228,.08), transparent 42%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 1px 0 0 rgba(91,240,226,.08),
        0 14px 30px rgba(0,0,0,.22) !important;
}

.epic-sidebar.left::before,
.epic-sidebar.left::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 18px;
}

.epic-sidebar.left::before {
    inset: 6px;
    border: 1px solid rgba(91, 240, 226, .08);
}

.epic-sidebar.left::after {
    top: 22px;
    bottom: 22px;
    right: -1px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(91,240,226,.42), transparent);
}

.menu-panel .epic-menu {
    background: rgba(2, 12, 22, .42) !important;
}

.menu-panel .epic-menu a.active,
.menu-panel .epic-menu a:hover {
    background: linear-gradient(90deg, rgba(57,241,228,.12), rgba(57,241,228,.04)) !important;
}

.menu-panel .widget-topplayers .tp-row,
.menu-panel .widget-topplayers .tp-row:hover,
.menu-panel .widget-topplayers .tp-row:focus,
.menu-panel .widget-topplayers .tp-row:active {
    min-height: 64px !important;
    padding: 5px 9px 7px 2px !important;
    gap: 5px !important;
}

.menu-panel .widget-topplayers .tp-outfit {
    width: 42px !important;
    height: 52px !important;
    flex: 0 0 42px !important;
    margin-left: -10px !important;
    margin-top: -10px !important;
}

.menu-panel .widget-topplayers .tp-outfit img {
    width: 66px !important;
    height: 66px !important;
    transform: scale(1.05) !important;
}

.widget-streams {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 10px !important;
}

.stream-row {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background:
        linear-gradient(90deg, rgba(57,241,228,.09), rgba(255,200,61,.05)),
        rgba(255,255,255,.03) !important;
    border: 1px solid rgba(91,240,226,.12);
}

.stream-row:hover {
    background:
        linear-gradient(90deg, rgba(57,241,228,.14), rgba(255,200,61,.08)),
        rgba(255,255,255,.04) !important;
}

.stream-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35f0a8;
    box-shadow: 0 0 10px rgba(53,240,168,.75);
}

.stream-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stream-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff !important;
    font-weight: 850;
    font-size: 12px;
}

.stream-player {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--arc-muted);
    font-size: 10px;
}

.stream-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--arc-gold) !important;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(255, 200, 61, .35);
}

.stream-empty .stream-live-dot {
    background: #496878;
    box-shadow: none;
}

@media (max-width: 1200px) {
    .epic-topbar-inner {
        grid-template-columns: 230px minmax(360px, 1fr) auto !important;
        gap: 12px !important;
    }

    .epic-topnav a {
        font-size: 11px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 1100px) {
    .epic-topbar-inner {
        display: flex !important;
    }

    .epic-logo-banner {
        justify-content: center !important;
        padding-left: 18px !important;
        padding-top: 8px !important;
    }

    .epic-sidebar.left {
        position: static;
        border: 0;
        padding: 0 !important;
        background: transparent;
        box-shadow: none !important;
    }
}

/* ============================================================
   MERIDIAN STREAM RIBBON + TOP PLAYER INFO
   Live stream ticker beside the logo, richer top player metadata,
   and amber-gold login hover.
   ============================================================ */

.epic-logo-banner {
    gap: 28px !important;
    align-items: center !important;
}

.meridian-stream-ribbon {
    flex: 1;
    max-width: 760px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 191, 49, .18);
    background:
        linear-gradient(90deg, rgba(4, 18, 31, .78), rgba(6, 26, 42, .58)),
        radial-gradient(circle at 0 50%, rgba(255, 191, 49, .12), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
    overflow: hidden;
}

.stream-ribbon-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--arc-gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 191, 49, .34);
}

.stream-ribbon-window {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.stream-ribbon-track {
    display: flex;
    width: max-content;
    gap: 10px;
    animation: streamRibbonSlide 24s linear infinite;
}

.meridian-stream-ribbon:hover .stream-ribbon-track {
    animation-play-state: paused;
}

.stream-ribbon-item {
    width: 250px;
    min-height: 42px;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 6px 10px !important;
    border-radius: 10px;
    border: 1px solid rgba(91, 240, 226, .13);
    background: rgba(2, 12, 22, .58) !important;
    color: #fff !important;
}

.stream-ribbon-mark {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--arc-cyan);
    background: rgba(57, 241, 228, .1);
}

.stream-ribbon-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.stream-ribbon-text b,
.stream-ribbon-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stream-ribbon-text b {
    font-size: 12px;
    line-height: 1.2;
}

.stream-ribbon-text small {
    color: var(--arc-muted);
    font-size: 10px;
}

.stream-ribbon-stars {
    color: var(--arc-gold);
    font-weight: 900;
    text-shadow: 0 0 8px rgba(255, 191, 49, .34);
}

@keyframes streamRibbonSlide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.menu-panel .widget-topplayers .tp-row,
.menu-panel .widget-topplayers .tp-row:hover,
.menu-panel .widget-topplayers .tp-row:focus,
.menu-panel .widget-topplayers .tp-row:active {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    padding-left: 0 !important;
    gap: 18px !important;
}

.menu-panel .widget-topplayers .tp-outfit {
    margin-left: -11px !important;
    margin-top: -8px !important;
}

.menu-panel .widget-topplayers .tp-info {
    margin-left: 12px !important;
    padding-left: 6px !important;
}

.menu-panel .widget-topplayers .tp-name {
    margin-left: 0 !important;
}

.menu-panel .widget-topplayers .tp-meta {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

.tp-vocation,
.tp-vip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .3px;
    line-height: 1;
}

.tp-vocation {
    color: #bceff4;
    background: rgba(57, 241, 228, .1);
    border: 1px solid rgba(57, 241, 228, .15);
}

.tp-vip.is-vip {
    color: #160d02;
    background: linear-gradient(180deg, #ffd86a, #ffc033 48%, #d88b16);
    border: 1px solid rgba(255, 206, 84, .74);
    box-shadow: 0 0 10px rgba(255, 184, 35, .24);
}

.tp-vip.is-free {
    color: #7f9ba3;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}

.epic-stats .btn-epic:hover,
.epic-stats .btn-epic:focus,
.epic-stats .btn-epic[href*="login_redirect"]:hover,
.epic-stats .btn-epic[href*="login_redirect"]:focus {
    color: #120b01 !important;
    border-color: rgba(255, 211, 93, .9) !important;
    background:
        linear-gradient(180deg, #ffe082 0%, #ffc83d 38%, #df941b 72%, #8a5408 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.54),
        0 0 18px rgba(255, 184, 35, .34) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.28) !important;
}

@media (max-width: 1100px) {
    .meridian-stream-ribbon {
        display: none;
    }
}

/* ============================================================
   STREAM LOGO STAGE
   Stream/logo carousel belongs above the right sidebar stream
   widget, matching the marked area.
   ============================================================ */

.meridian-stream-ribbon {
    display: none !important;
}

.stream-logo-stage {
    min-height: 184px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(57, 241, 228, .28);
    background:
        linear-gradient(180deg, rgba(4, 16, 29, .36), rgba(4, 16, 29, .14)),
        radial-gradient(circle at 50% 50%, rgba(57, 241, 228, .1), transparent 58%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 16px 34px rgba(0,0,0,.2);
    position: relative;
}

.stream-logo-stage::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(57, 241, 228, .12);
    border-radius: 14px;
    pointer-events: none;
}

.stream-logo-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2,8,18,.86), transparent 18%, transparent 82%, rgba(2,8,18,.86)),
        linear-gradient(180deg, rgba(57,241,228,.08), transparent 42%, rgba(0,0,0,.16));
}

.stream-logo-track {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    width: max-content;
    padding: 0 18px;
    animation: streamLogoPass 22s linear infinite;
}

.stream-logo-stage:hover .stream-logo-track {
    animation-play-state: paused;
}

.stream-logo-card {
    width: 158px;
    min-height: 96px;
    display: grid !important;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    gap: 7px;
    padding: 12px 10px !important;
    border-radius: 14px;
    border: 1px solid rgba(57, 241, 228, .18);
    background:
        linear-gradient(180deg, rgba(5, 22, 36, .78), rgba(3, 11, 21, .84)),
        radial-gradient(circle at 50% 0, rgba(255, 200, 61, .1), transparent 54%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.stream-logo-badge {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #0b1206;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1px;
    background:
        linear-gradient(135deg, #ffe07a, #ffc83d 42%, #d99422 72%, #7a4707);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 0 18px rgba(255, 184, 35, .28);
}

.stream-logo-name {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #eaffff;
    font-size: 12px;
    font-weight: 850;
}

.stream-logo-stars {
    color: var(--arc-gold);
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(255, 200, 61, .38);
}

@keyframes streamLogoPass {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 1100px) {
    .stream-logo-stage {
        display: none;
    }
}

/* ============================================================
   HERO STREAM STAGE POSITION
   Keeps the stream logo carousel aligned with the main logo,
   above the right sidebar widgets.
   ============================================================ */

.epic-logo-banner {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) 310px !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 210px !important;
    max-width: 1540px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 26px 28px 12px !important;
}

.epic-logo-banner > a {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
}

.epic-logo-banner > .stream-logo-stage {
    grid-column: 3 !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    height: 166px !important;
    min-height: 166px !important;
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
}

.epic-sidebar.right > .stream-logo-stage {
    display: none !important;
}

.stream-logo-stage {
    overflow: hidden !important;
}

.stream-logo-track {
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    display: flex !important;
    animation: none !important;
    transform: translateX(0);
    will-change: transform;
}

.stream-logo-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 14px 12px !important;
    border-color: rgba(255, 200, 61, .36) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 28px rgba(0,0,0,.28),
        0 0 22px rgba(57, 241, 228, .08) !important;
}

.stream-logo-card:hover,
.stream-logo-card:focus {
    border-color: rgba(255, 216, 106, .85) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 16px 32px rgba(0,0,0,.34),
        0 0 24px rgba(255, 200, 61, .24) !important;
}

.stream-logo-badge {
    width: 54px !important;
    height: 54px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
}

.stream-logo-name {
    max-width: 240px !important;
    font-size: 13px !important;
}

@keyframes streamLogoStep {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 1180px) {
    .epic-logo-banner {
        grid-template-columns: 260px minmax(0, 1fr) 280px !important;
        min-height: 190px !important;
    }

    .epic-logo-banner > .stream-logo-stage {
        height: 150px !important;
        min-height: 150px !important;
    }
}

@media (max-width: 1100px) {
    .epic-logo-banner {
        display: flex !important;
        justify-content: center !important;
        min-height: 150px !important;
        padding: 22px 20px 10px !important;
    }

    .epic-logo-banner > .stream-logo-stage {
        display: none !important;
    }
}

/* ============================================================
   PARTIAL PAGE LOADING
   Internal navigation swaps only the center content.
   ============================================================ */

.epic-main {
    position: relative;
}

.epic-main::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent, rgba(57, 241, 228, .08), transparent),
        rgba(2, 10, 19, .28);
    backdrop-filter: blur(1px);
    transition: opacity .18s ease;
}

.meridian-pjax-loading .epic-main::after {
    opacity: 1;
}

.meridian-pjax-loading .epic-main .panel {
    opacity: .72;
    transition: opacity .18s ease;
}

.meridian-pjax-loading .epic-main::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 18px;
    right: 18px;
    z-index: 26;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--arc-cyan), var(--arc-gold), transparent);
    background-size: 220% 100%;
    box-shadow: 0 0 16px rgba(57, 241, 228, .35);
    animation: meridianPjaxBar .9s linear infinite;
}

@keyframes meridianPjaxBar {
    from { background-position: 220% 0; }
    to { background-position: -220% 0; }
}

/* ============================================================
   MERIDIAN AQUA BUTTONS
   Removes the yellow/gold button pass and brings buttons back
   into the site's cyan, teal and deep-blue Meridian palette.
   ============================================================ */

:root {
    --gold: #39f1e4;
    --gold-bright: #d9ffff;
    --gold-dark: #0b5f72;
    --meridian-gold: #39f1e4;
    --arc-gold: #52ffe7;
    --arc-gold-hot: #7efff1;
    --arc-gold-deep: #07566d;
}

.epic-topnav a:first-child,
.epic-stats .btn-epic[href*="login_redirect"],
.epic-stats .btn-epic:hover,
.epic-stats .btn-epic:focus,
.btn-shop,
.menu-panel .menu-body-plain a.btn-shop,
.btn-epic.account,
.download-btn,
.am-btn-gold,
.epic-main .BigButton input[type="submit"],
.epic-main .MediumButton input[type="submit"],
.epic-main .SmallButton input[type="submit"],
.epic-main input[type="submit"],
.epic-main button.BigButtonText,
.epic-main .ButtonText,
.am-character-profile-page .BigButton input[type="submit"],
.am-character-profile-page .BigButtonText {
    position: relative;
    overflow: hidden;
    color: #eaffff !important;
    border: 1px solid rgba(82, 255, 231, .55) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(23, 91, 116, .96) 0%, rgba(8, 43, 67, .98) 49%, rgba(2, 18, 35, .98) 100%),
        radial-gradient(circle at 18% 0%, rgba(126, 255, 241, .32), transparent 44%) !important;
    box-shadow:
        inset 0 1px 0 rgba(224, 255, 255, .24),
        inset 0 -1px 0 rgba(0, 0, 0, .42),
        0 0 0 1px rgba(7, 214, 207, .12),
        0 0 18px rgba(57, 241, 228, .18),
        0 8px 20px rgba(0, 0, 0, .28) !important;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .72),
        0 0 10px rgba(82, 255, 231, .25) !important;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.epic-topnav a:first-child::before,
.epic-stats .btn-epic[href*="login_redirect"]::before,
.epic-stats .btn-epic:hover::before,
.epic-stats .btn-epic:focus::before,
.btn-shop::before,
.menu-panel .menu-body-plain a.btn-shop::before,
.btn-epic.account::before,
.download-btn::before,
.am-btn-gold::before,
.epic-main .ButtonText::before,
.am-character-profile-page .BigButtonText::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 3px;
    height: 42%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(234,255,255,.34), rgba(234,255,255,.06) 68%, rgba(234,255,255,0));
    pointer-events: none;
}

.epic-topnav a:first-child::after,
.epic-stats .btn-epic[href*="login_redirect"]::after,
.btn-shop::after,
.menu-panel .menu-body-plain a.btn-shop::after,
.btn-epic.account::after,
.download-btn::after,
.am-btn-gold::after,
.epic-main .ButtonText::after,
.am-character-profile-page .BigButtonText::after {
    content: '';
    position: absolute;
    inset: auto 12px 5px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(82,255,231,.72), transparent);
    pointer-events: none;
}

.epic-topnav a:first-child:hover,
.epic-stats .btn-epic[href*="login_redirect"]:hover,
.epic-stats .btn-epic[href*="login_redirect"]:focus,
.btn-shop:hover,
.menu-panel .menu-body-plain a.btn-shop:hover,
.btn-epic.account:hover,
.download-btn:hover,
.am-btn-gold:hover,
.epic-main .BigButton input[type="submit"]:hover,
.epic-main .MediumButton input[type="submit"]:hover,
.epic-main .SmallButton input[type="submit"]:hover,
.epic-main input[type="submit"]:hover,
.epic-main button.BigButtonText:hover,
.epic-main .ButtonText:hover,
.am-character-profile-page .BigButton input[type="submit"]:hover,
.am-character-profile-page .BigButtonText:hover {
    color: #ffffff !important;
    border-color: rgba(160, 255, 246, .9) !important;
    background:
        linear-gradient(180deg, rgba(35, 134, 162, .98) 0%, rgba(9, 65, 92, .98) 48%, rgba(3, 25, 48, .98) 100%),
        radial-gradient(circle at 18% 0%, rgba(126, 255, 241, .5), transparent 46%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -1px 0 rgba(0, 0, 0, .45),
        0 0 0 1px rgba(82, 255, 231, .2),
        0 0 22px rgba(57, 241, 228, .36),
        0 10px 24px rgba(0, 0, 0, .34) !important;
    filter: saturate(1.08) brightness(1.04);
}

.epic-topnav a:first-child i,
.epic-stats .btn-epic[href*="login_redirect"] i,
.btn-shop i,
.btn-epic.account i,
.download-btn i,
.am-btn-gold i {
    color: #7efff1 !important;
    text-shadow: 0 0 10px rgba(82, 255, 231, .5) !important;
}

.stream-logo-badge {
    color: #eaffff !important;
    background:
        linear-gradient(180deg, rgba(38, 144, 168, .98), rgba(7, 54, 82, .98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 0 18px rgba(57, 241, 228, .28) !important;
}

.download-btn::before {
    left: 14px !important;
    right: auto !important;
    top: 6px !important;
    width: 44px !important;
    height: calc(100% - 12px) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(126,255,241,.26), rgba(57,241,228,.12)),
        radial-gradient(circle at 50% 0, rgba(234,255,255,.22), transparent 60%) !important;
}

.download-btn::after {
    left: 74px !important;
    right: 18px !important;
    bottom: 9px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(82,255,231,.42), transparent) !important;
}

/* ============================================================
   CENTERED HERO LOGO
   Stream-logo stage removed from the hero; keep the server logo
   centered and pull the page content closer.
   ============================================================ */

.epic-logo-banner {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 1540px !important;
    width: 100% !important;
    min-height: 178px !important;
    margin: 0 auto !important;
    padding: 24px 28px 0 !important;
}

.epic-logo-banner > a {
    grid-column: auto !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
}

.epic-logo-banner img {
    width: min(270px, 38vw) !important;
}

.epic-logo-banner > .stream-logo-stage,
.stream-logo-stage {
    display: none !important;
}

.epic-shell {
    margin-top: -4px !important;
}

@media (max-width: 1100px) {
    .epic-logo-banner {
        min-height: 145px !important;
        padding: 18px 20px 0 !important;
    }

    .epic-logo-banner img {
        width: min(245px, 62vw) !important;
    }

    .epic-shell {
        margin-top: 0 !important;
    }
}

/* Pull the whole page content closer to the top artwork. */
.epic-logo-banner {
    min-height: 126px !important;
    padding-top: 6px !important;
    padding-bottom: 0 !important;
}

.epic-logo-banner img {
    width: min(245px, 34vw) !important;
}

.epic-shell {
    margin-top: -18px !important;
}

@media (max-width: 1100px) {
    .epic-logo-banner {
        min-height: 118px !important;
        padding-top: 6px !important;
    }

    .epic-logo-banner img {
        width: min(225px, 58vw) !important;
    }

    .epic-shell {
        margin-top: -8px !important;
    }
}

/* ============================================================
   STABLE SIDEBAR BUTTONS
   Remove mirror shine and stop hover movement on account/download
   buttons.
   ============================================================ */

.download-btn::before,
.download-btn::after,
.menu-panel .menu-body-plain a.btn-login::before,
.menu-panel .menu-body-plain a.btn-login::after,
.menu-panel .menu-body-plain a.btn-register::before,
.menu-panel .menu-body-plain a.btn-register::after,
.menu-panel .menu-body-plain a.btn-compact::before,
.menu-panel .menu-body-plain a.btn-compact::after {
    content: none !important;
    display: none !important;
}

.download-btn,
.download-btn:hover,
.download-btn:focus,
.download-btn:active,
.menu-panel .menu-body-plain a.btn-login,
.menu-panel .menu-body-plain a.btn-login:hover,
.menu-panel .menu-body-plain a.btn-login:focus,
.menu-panel .menu-body-plain a.btn-login:active,
.menu-panel .menu-body-plain a.btn-register,
.menu-panel .menu-body-plain a.btn-register:hover,
.menu-panel .menu-body-plain a.btn-register:focus,
.menu-panel .menu-body-plain a.btn-register:active,
.menu-panel .menu-body-plain a.btn-compact,
.menu-panel .menu-body-plain a.btn-compact:hover,
.menu-panel .menu-body-plain a.btn-compact:focus,
.menu-panel .menu-body-plain a.btn-compact:active {
    transform: none !important;
    scale: 1 !important;
    translate: none !important;
    animation: none !important;
    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease !important;
}

.download-btn {
    filter: none !important;
}

.download-btn:hover,
.download-btn:focus,
.download-btn:active {
    filter: none !important;
}

.menu-panel .menu-body-plain a.btn-login,
.menu-panel .menu-body-plain a.btn-login:hover,
.menu-panel .menu-body-plain a.btn-login:focus,
.menu-panel .menu-body-plain a.btn-login:active {
    min-height: 43px !important;
    padding: 9px 12px !important;
    border-width: 1px !important;
}

.menu-panel .menu-body-plain a.btn-register,
.menu-panel .menu-body-plain a.btn-register:hover,
.menu-panel .menu-body-plain a.btn-register:focus,
.menu-panel .menu-body-plain a.btn-register:active,
.menu-panel .menu-body-plain a.btn-compact,
.menu-panel .menu-body-plain a.btn-compact:hover,
.menu-panel .menu-body-plain a.btn-compact:focus,
.menu-panel .menu-body-plain a.btn-compact:active {
    min-height: 43px !important;
    padding: 8px 10px !important;
    border-width: 1px !important;
}