* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-gold: #e1be8e;
    --dark-brown: #1a1512;
    --medium-brown: #2a2320;
    --light-gold: #ddb87a;
    --text-gold: #e1be8e;
    --text-light: #e8dcc8;
    --bg-darkest: #0f0d0b;
    --border-gold: rgba(225, 190, 142, 0.2);
    --glow-gold: rgba(225, 190, 142, 0.7);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-darkest);
    color: var(--text-light);
    overflow-x: hidden;
    line-height: 1.5;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.87) 0%, rgba(26, 15, 10, 0.70) 50%, rgba(10, 5, 4, 0.87) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="noise"><feTurbulence baseFrequency="0.9" /></filter><rect width="400" height="400" filter="url(%23noise)" opacity="0.05"/></svg>');
    pointer-events: none;
    z-index: -1;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-brown);
}

::-webkit-scrollbar-thumb {
    background: var(--medium-brown);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gold);
}

/* Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar {
    width: 280px;
    background: linear-gradient(180deg, rgba(10, 5, 4, 0.98) 0%, rgba(26, 15, 10, 0.95) 100%);
    border-right: 1px solid var(--border-gold);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed {
    transform: translateX(-100%);
}

.sidebar-toggle {
    display: none;
}

/* Sidebar toggle button (fixed on screen) */
.sidebar-expand {
    position: fixed;
    left: 280px;
    top: 20px;
    transform: translateX(-50%) scale(1);
    width: 24px;
    height: 40px;
    background: rgba(10, 5, 4, 0.95);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    color: var(--text-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0;
}

.sidebar-expand:hover {
    background: rgba(26, 15, 10, 0.95);
    color: var(--primary-gold);
    border-color: var(--primary-gold);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 0 12px rgba(225, 190, 142, 0.15);
}

@media (max-width: 768px) {
    .sidebar-expand {
        display: none;
    }
}

.sidebar-expand:active {
    transform: translateX(-50%) scale(0.92);
    transition: transform 0.1s ease;
}

.sidebar-expand.visible {
    left: 0;
    transform: translateX(0) scale(1);
    border-left: none;
    border-radius: 0 6px 6px 0;
}

.sidebar-expand.visible:hover {
    transform: translateX(0) scale(1.1);
}

.sidebar-expand.visible:active {
    transform: translateX(0) scale(0.92);
}

.sidebar-expand svg {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-expand.visible svg {
    transform: rotate(180deg);
}

.sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid var(--border-gold);
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.08) 0%, transparent 100%);
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.logo {
    height: 42px;
    margin-top: 8px;
    filter: drop-shadow(0 0 20px var(--glow-gold)) brightness(1.1);
    transition: all 0.3s ease;
}

.logo:hover {
    filter: drop-shadow(0 0 30px rgba(225, 190, 142, 0.9)) brightness(1.2);
    transform: scale(1.05);
}

/* Search Box */
.search-container {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.8) 0%, rgba(45, 24, 16, 0.6) 100%);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 20px rgba(225, 190, 142, 0.2);
}

.search-input::placeholder {
    color: rgba(232, 220, 200, 0.6);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-gold);
    pointer-events: none;
}

/* Current Section Indicator */
.current-section-indicator {
    padding: 12px 20px;
    background: linear-gradient(90deg, rgba(225, 190, 142, 0.15) 0%, rgba(225, 190, 142, 0.05) 100%);
    border-bottom: 1px solid rgba(225, 190, 142, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: rgba(232, 220, 200, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.current-section-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.92rem;
    color: var(--primary-gold);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation Menu */
.nav-menu {
    flex: 1;
    padding: 15px 0;
    overflow-y: auto;
}

.nav-category {
    margin-bottom: 2px;
}

.nav-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    position: relative;
    overflow: hidden;
}

.nav-category-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.04), transparent);
    transition: left 0.5s;
}

.nav-category-header:hover::before {
    left: 100%;
}

.nav-category-header:hover {
    background: linear-gradient(90deg, rgba(225, 190, 142, 0.06) 0%, transparent 100%);
    border-left-color: rgba(225, 190, 142, 0.4);
}

.nav-category.active .nav-category-header {
    background: linear-gradient(90deg, rgba(225, 190, 142, 0.08) 0%, transparent 100%);
    border-left-color: rgba(225, 190, 142, 0.5);
}

.nav-category-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-gold);
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-category-icon {
    font-size: 15px;
    font-weight: 600;
    color: rgba(225, 190, 142, 0.5);
    transition: all 0.3s;
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
}

.nav-category:hover .nav-category-icon,
.nav-category.active .nav-category-icon {
    color: rgba(225, 190, 142, 0.75);
    transform: scale(1.05);
}

.nav-arrow {
    transition: transform 0.3s ease;
    color: var(--primary-gold);
    opacity: 0.6;
}

.nav-category.active .nav-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-subcategories {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0, 0, 0, 0.15);
}

.nav-category.active .nav-subcategories {
    max-height: 500px;
}

.nav-subcategory {
    display: block;
    padding: 9px 20px 9px 50px;
    font-size: 13.5px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    border-radius: 6px;
    margin: 2px 8px;
}

a.nav-subcategory {
    text-decoration: none;
}

.nav-subcategory::before {
    content: '';
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: rgba(225, 190, 142, 0.25);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.nav-subcategory:hover {
    color: var(--text-gold);
    background: rgba(225, 190, 142, 0.05);
}

.nav-subcategory:hover::before {
    background: rgba(225, 190, 142, 0.5);
}

.nav-subcategory.active {
    color: var(--text-light);
    font-weight: 500;
    background: linear-gradient(90deg, rgba(140, 90, 40, 0.25) 0%, rgba(80, 50, 20, 0.12) 100%);
    border: none;
    box-shadow: none;
}

.nav-subcategory.active::before {
    background: var(--primary-gold);
    width: 5px;
    height: 5px;
    box-shadow: 0 0 6px rgba(225, 190, 142, 0.3);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-gold);
    display: block;
}

.sidebar-online-status {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sidebar-online-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(232, 220, 200, 0.46);
}

.sidebar-online-value {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 24px;
    line-height: 1;
    color: var(--text-gold);
    text-shadow: 0 0 18px rgba(201, 169, 97, 0.12);
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 280px;
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    max-width: 100%;
}

/* Top Header Bar */
.top-header {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    height: 48px;
    background: linear-gradient(180deg, rgba(10, 5, 4, 0.98) 0%, rgba(26, 15, 10, 0.95) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(225, 190, 142, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 120;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.top-news-menu {
    position: relative;
    z-index: 130;
}

.top-news-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 16px 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(225, 190, 142, 0.16);
    background:
        radial-gradient(circle at top right, rgba(225, 190, 142, 0.16), transparent 36%),
        linear-gradient(135deg, rgba(24, 14, 10, 0.92) 0%, rgba(48, 28, 18, 0.72) 100%);
    color: var(--text-gold);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 232, 190, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.22);
}

.top-news-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.26) 0%, rgba(225, 190, 142, 0.08) 100%);
    color: #f7dfb3;
    font-size: 13px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 243, 214, 0.22);
}

.top-news-trigger-text {
    transform: translateY(0.5px);
}

.top-news-dropdown {
    position: fixed;
    top: 60px;
    left: 50%;
    width: min(680px, calc(100vw - 380px));
    max-width: 680px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(225, 190, 142, 0.18);
    background:
        radial-gradient(circle at top right, rgba(225, 190, 142, 0.14), transparent 24%),
        radial-gradient(circle at left bottom, rgba(140, 78, 42, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(20, 14, 10, 0.995) 0%, rgba(11, 8, 6, 0.99) 100%);
    box-shadow:
        0 34px 70px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(255, 225, 173, 0.03);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition: all 0.22s ease;
    z-index: 300;
}

.top-news-menu:hover .top-news-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.top-news-shell {
    display: grid;
    gap: 14px;
}

.top-news-shell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.12);
}

.top-news-shell-copy {
    display: grid;
    gap: 4px;
}

.top-news-shell-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: rgba(225, 190, 142, 0.58);
}

.top-news-shell-copy strong {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #f6ddb0;
    letter-spacing: 0.8px;
}

.top-news-shell-copy span:last-child {
    color: rgba(232, 220, 200, 0.68);
    font-size: 12px;
}

.top-news-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 244, 222, 0.04);
    border: 1px solid rgba(225, 190, 142, 0.12);
}

.top-news-tab {
    min-width: 108px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(232, 220, 200, 0.62);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    letter-spacing: 0.9px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.top-news-tab.active,
.top-news-tab:hover {
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.22) 0%, rgba(225, 190, 142, 0.08) 100%);
    color: #f6ddb0;
    box-shadow: inset 0 1px 0 rgba(255, 244, 222, 0.16);
}

.top-news-panels {
    position: relative;
}

.top-news-panel {
    display: none;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 12px;
}

.top-news-panel.active {
    display: grid;
}

.top-news-card {
    position: relative;
    min-height: 132px;
    border-radius: 18px;
    border: 1px solid rgba(225, 190, 142, 0.11);
    background:
        linear-gradient(180deg, rgba(10, 8, 6, 0.06) 0%, rgba(10, 8, 6, 0.84) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(225, 190, 142, 0.03));
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 245, 222, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.top-news-card:hover {
    border-color: rgba(225, 190, 142, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 222, 0.08),
        0 4px 20px rgba(225, 190, 142, 0.1);
}

.top-news-card-featured {
    grid-row: span 2;
    min-height: 276px;
}

.top-news-card-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 3, 2, 0.05) 0%, rgba(10, 7, 5, 0.28) 42%, rgba(10, 7, 5, 0.92) 100%);
}

.top-news-card-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: grid;
    gap: 8px;
    padding: 15px;
}

.top-news-card strong {
    color: #f6ddb0;
    font-size: 15px;
    line-height: 1.25;
}

.top-news-card span {
    color: rgba(240, 228, 206, 0.72);
    line-height: 1.55;
    font-size: 12px;
}

.top-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.top-news-slug {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(225, 190, 142, 0.16);
    color: rgba(255, 238, 208, 0.88);
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.top-news-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(232, 220, 200, 0.58);
}

.top-news-card-empty {
    grid-column: 1 / -1;
    min-height: 154px;
    background:
        linear-gradient(180deg, rgba(17, 12, 9, 0.98) 0%, rgba(11, 8, 6, 0.98) 100%);
}

.top-news-card-empty .top-news-card-body {
    inset: 0;
    align-content: center;
    justify-items: start;
    gap: 10px;
}

.top-news-card-empty .top-news-card-overlay {
    display: none;
}

.top-news-empty-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.18) 0%, rgba(225, 190, 142, 0.05) 100%);
    color: #f2d5a2;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 245, 222, 0.14);
}

/* News Carousel Navigation */
.top-news-carousel {
    display: contents;
}

.top-news-pagination {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0 4px;
    margin-top: 4px;
}

.top-news-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(225, 190, 142, 0.2);
    background: linear-gradient(180deg, rgba(26, 20, 16, 0.8) 0%, rgba(18, 13, 10, 0.9) 100%);
    color: rgba(225, 190, 142, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.top-news-nav:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.15) 0%, rgba(225, 190, 142, 0.05) 100%);
    border-color: rgba(225, 190, 142, 0.4);
    color: #f6ddb0;
    transform: scale(1.05);
}

.top-news-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.top-news-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-news-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(225, 190, 142, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.top-news-dot:hover {
    background: rgba(225, 190, 142, 0.5);
    transform: scale(1.1);
}

.top-news-dot.active {
    background: rgba(225, 190, 142, 0.9);
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.4);
    transform: scale(1.2);
}

.top-news-content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 3;
}

.top-news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(225, 190, 142, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.top-news-card:hover .top-news-read-more {
    color: #f6ddb0;
}

/* News Modal */
.news-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.news-modal.active {
    opacity: 1;
    visibility: visible;
}

.news-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 3, 2, 0.92);
    backdrop-filter: blur(4px);
}

.news-modal-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(26, 20, 16, 0.98) 0%, rgba(18, 13, 10, 0.98) 100%);
    border: 1px solid rgba(225, 190, 142, 0.25);
    border-radius: 20px;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(225, 190, 142, 0.1),
        inset 0 1px 0 rgba(255, 232, 200, 0.08);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
}

.news-modal.active .news-modal-container {
    transform: translateY(0) scale(1);
}

.news-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(225, 190, 142, 0.2);
    background: linear-gradient(180deg, rgba(26, 20, 16, 0.9) 0%, rgba(18, 13, 10, 0.95) 100%);
    color: rgba(225, 190, 142, 0.8);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.news-modal-close:hover {
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.2) 0%, rgba(225, 190, 142, 0.08) 100%);
    border-color: rgba(225, 190, 142, 0.4);
    color: #f6ddb0;
    transform: scale(1.05);
}

.news-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 0;
}

.news-modal-type {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.2) 0%, rgba(225, 190, 142, 0.08) 100%);
    color: #f6ddb0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.news-modal-slug {
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.news-modal-image {
    margin: 16px 24px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(225, 190, 142, 0.15);
}

.news-modal-image img {
    width: 100%;
    height: auto;
    display: block;
}

.news-modal-body {
    padding: 20px 24px 24px;
}

.news-modal-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #f6ddb0;
    line-height: 1.3;
    margin-bottom: 16px;
}

.news-modal-content {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(240, 228, 206, 0.9);
}

.news-modal-content p {
    margin-bottom: 12px;
}

.news-modal-content p:last-child {
    margin-bottom: 0;
}

/* Security: Slide to Verify - Clean Odegon Style */
.slide-verify-wrap {
    margin: 16px 0 8px;
    position: relative;
}

.slide-verify-track {
    position: relative;
    height: 44px;
    background: linear-gradient(135deg, rgba(26, 20, 16, 0.6) 0%, rgba(18, 13, 10, 0.8) 100%);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 22px;
    overflow: hidden;
}

.slide-verify-track::before {
    content: '护';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
    font-size: 14px;
    color: rgba(225, 190, 142, 0.25);
    letter-spacing: 2px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.slide-verify-track.verified::before {
    opacity: 0;
}

.slide-verify-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        rgba(225, 190, 142, 0.1) 0%,
        rgba(225, 190, 142, 0.25) 100%);
    border-radius: 22px;
    transition: width 0.1s linear;
}

.slide-verify-track.verified .slide-verify-fill {
    width: 100% !important;
    background: linear-gradient(90deg,
        rgba(76, 175, 80, 0.15) 0%,
        rgba(76, 175, 80, 0.3) 100%);
}

.slide-verify-thumb {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: linear-gradient(180deg,
        rgba(225, 190, 142, 0.9) 0%,
        rgba(201, 169, 97, 0.85) 100%);
    border-radius: 50%;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(225, 190, 142, 0.3),
        inset 0 1px 0 rgba(255, 245, 222, 0.4);
    transition: left 0.1s linear, transform 0.2s ease, background 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.slide-verify-thumb:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(0.95);
}

.slide-verify-thumb svg {
    width: 16px;
    height: 16px;
    color: #1a1512;
    transition: all 0.2s ease;
}

.slide-verify-track.verified .slide-verify-thumb {
    left: calc(100% - 41px) !important;
    background: linear-gradient(180deg,
        rgba(76, 175, 80, 0.9) 0%,
        rgba(76, 175, 80, 0.85) 100%);
    cursor: default;
}

.slide-verify-track.verified .slide-verify-thumb svg {
    color: #fff;
}

.slide-verify-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: rgba(232, 220, 200, 0.6);
    letter-spacing: 1px;
    pointer-events: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.slide-verify-track:hover .slide-verify-text {
    color: rgba(232, 220, 200, 0.8);
}

.slide-verify-track.verified .slide-verify-text {
    color: #81c784;
    font-weight: 500;
}

/* Form verification states */
form[data-needs-verify="true"] .register-submit-btn,
form[data-needs-verify="true"] .account-action-btn {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
    pointer-events: none;
}

form[data-verify-complete="true"] .register-submit-btn,
form[data-verify-complete="true"] .account-action-btn {
    opacity: 1;
    cursor: pointer;
    filter: none;
    pointer-events: auto;
}

/* Compact inline verification for small forms */
.verify-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(225, 190, 142, 0.08);
}

.verify-inline-text {
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
}

.verify-inline-check {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.verify-inline-check:hover {
    border-color: rgba(225, 190, 142, 0.5);
    background: rgba(225, 190, 142, 0.05);
}

.verify-inline-check.verified {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.5);
    color: #81c784;
}

.verify-inline-check svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.verify-inline-check.verified svg {
    opacity: 1;
}

/* User Status in Top Header */
.user-status {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar svg {
    color: rgba(225, 190, 142, 0.5);
}

.user-status-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gold);
    letter-spacing: 1px;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(20, 15, 12, 0.98);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 8px;
    padding: 6px;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(225, 190, 142, 0.1);
}

.user-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 25px;
    width: 12px;
    height: 12px;
    background: rgba(20, 15, 12, 0.98);
    border-left: 1px solid rgba(225, 190, 142, 0.2);
    border-top: 1px solid rgba(225, 190, 142, 0.2);
    transform: rotate(45deg);
}

.user-status:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 6px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.user-dropdown-item svg {
    color: rgba(225, 190, 142, 0.6);
    flex-shrink: 0;
}

.user-dropdown-item:hover {
    background: rgba(225, 190, 142, 0.1);
    color: var(--primary-gold);
}

.user-dropdown-item:hover svg {
    color: var(--primary-gold);
}

.header-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--text-gold);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.header-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-gold);
    transition: width 0.3s ease;
}

.header-link:hover::after {
    width: 100%;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.8) 0%, rgba(45, 24, 16, 0.6) 100%);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    transition: all 0.3s ease;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

.lang-selector-btn:hover {
    border-color: var(--primary-gold);
    box-shadow: 0 5px 20px rgba(225, 190, 142, 0.2);
}

.lang-selector .lang-flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
}

.lang-selector .lang-code {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
}

/* Hero Banner */
.hero-banner {
    position: relative;
    height: 60vh;
    min-height: 450px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, var(--bg-darkest) 0%, transparent 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    pointer-events: none;
}

.banner-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.banner-logo {
    height: 110px;
    width: auto;
    margin-top: 10px;
    filter: drop-shadow(0 0 40px rgba(225, 190, 142, 0.5));
}

.banner-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 18px;
    opacity: 0.8;
    font-weight: 500;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
}

/* Content Wrapper - Main Box */
.content-wrapper {
    position: relative;
    background: linear-gradient(180deg,
    rgba(10, 5, 4, 0.98) 0%,
    rgba(18, 10, 6, 0.99) 10%,
    rgba(15, 8, 5, 1) 50%,
    rgba(18, 10, 6, 0.99) 90%,
    rgba(10, 5, 4, 0.98) 100%);
    margin: -80px 20px 0 20px;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-bottom: none;
    box-shadow:
        0 -20px 60px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(225, 190, 142, 0.1);
    padding-top: 60px;
    z-index: 10;
}

.content-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
    border-radius: 0 0 10px 10px;
}

/* Introduction Section */
.intro-section {
    position: relative;
    z-index: 5;
    text-align: center;
    margin-bottom: 50px;
    padding: 0 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.intro-logo {
    max-width: 280px;
    height: auto;
    margin: 0 auto 10px;
    display: block;
    filter: drop-shadow(0 0 20px rgba(225, 190, 142, 0.15));
}

.intro-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.97rem;
    color: var(--text-light);
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto 30px;
    opacity: 0.85;
}

.intro-text .highlight {
    color: var(--primary-gold);
    font-weight: 600;
}

.intro-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 24px;
}

.intro-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.intro-stat-value {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary-gold);
    line-height: 1;
}

.intro-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-light);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.intro-stat-divider {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(225, 190, 142, 0.25), transparent);
}

.intro-flags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.intro-flags img {
    width: 24px;
    height: 17px;
    border-radius: 2px;
    object-fit: cover;
    transition: all 0.3s ease;
    cursor: pointer;
}

.intro-flags img:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(225, 190, 142, 0.4));
}

@media (max-width: 768px) {
    .hero-banner {
        height: 40vh;
        min-height: 300px;
    }
    .banner-logo {
        height: 90px;
    }
    .banner-tagline {
        font-size: 0.78rem;
        letter-spacing: 3px;
    }
    .content-wrapper {
        margin: -50px 10px 0 10px;
        padding-top: 40px;
        border-radius: 15px 15px 0 0;
    }
    .intro-section {
        padding: 0 20px;
        margin-bottom: 30px;
    }
    .intro-text {
        font-size: 0.97rem;
    }
    .intro-logo {
        max-width: 220px;
    }
    .intro-stats {
        gap: 20px;
    }
    .intro-stat-value {
        font-size: 1.4rem;
    }
    .intro-flags {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .hero-banner {
        height: 40vh;
        min-height: 280px;
    }
    .banner-logo {
        height: 90px;
    }
    .banner-tagline {
        font-size: 0.92rem;
        letter-spacing: 2px;
    }
    .content-wrapper {
        margin: -40px 5px 0 5px;
    }
    .intro-stats {
        gap: 15px;
        flex-wrap: wrap;
    }
    .intro-flags {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.hero-video {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    object-fit: cover;
    object-position: center top;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-overlay {
    z-index: 2;
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(10, 5, 4, 0) 0%, rgba(10, 5, 4, 0.1) 65%, rgba(10, 5, 4, 0.8) 100%),
        radial-gradient(ellipse at center top, transparent 40%, rgba(10, 5, 4, 0.3) 100%);
}

.hero-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--light-gold);
    border-radius: 50%;
    opacity: 0;
    animation: float-particle 12s infinite;
}

@keyframes float-particle {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(1);
    }
}

/* Referral Box - Same height as Welcome */
.referral-box {
    text-align: center;
    padding: 35px 40px;
    background: linear-gradient(180deg,
    rgba(35, 25, 15, 0.92) 0%,
    rgba(28, 20, 12, 0.95) 50%,
    rgba(35, 25, 15, 0.92) 100%);
    border: 2px solid rgba(225, 190, 142, 0.4);
    border-radius: 10px;
    position: relative;
    width: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.9),
        inset 0 0 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(225, 190, 142, 0.15);
    animation: referral-glow 4s ease-in-out infinite;
    overflow: hidden;
}

.referral-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.08), transparent);
    animation: referral-shine 4s infinite;
}

@keyframes referral-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

@keyframes referral-glow {
    0%, 100% {
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            inset 0 0 40px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(225, 190, 142, 0.15);
        border-color: rgba(225, 190, 142, 0.3);
    }
    50% {
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            inset 0 0 40px rgba(0, 0, 0, 0.4),
            0 0 50px rgba(225, 190, 142, 0.25);
        border-color: rgba(225, 190, 142, 0.5);
    }
}

/* Connecting Line Between Boxes */
.boxes-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-shrink: 0;
    position: relative;
}

.connector-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-gold), rgba(225, 190, 142, 0.5), var(--primary-gold));
    position: relative;
    animation: line-pulse 3s ease-in-out infinite;
}

.connector-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateY(-50%);
    animation: line-shine 2s ease-in-out infinite;
}

@keyframes line-pulse {
    0%, 100% {
        opacity: 0.7;
        box-shadow: 0 0 10px rgba(225, 190, 142, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(225, 190, 142, 0.6);
    }
}

@keyframes line-shine {
    0% { transform: translateY(-50%) translateX(-100%); }
    50%, 100% { transform: translateY(-50%) translateX(100%); }
}

.connector-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary-gold);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(225, 190, 142, 0.8);
}

.connector-dot-left {
    left: -5px;
}

.connector-dot-right {
    right: -5px;
}

.referral-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.referral-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.2) 0%, rgba(225, 190, 142, 0.05) 100%);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-gold);
    margin-bottom: 15px;
}

.referral-badge svg {
    color: var(--primary-gold);
}

.referral-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(225, 190, 142, 0.3);
}

.referral-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
    opacity: 0.9;
}

.referral-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.referral-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.referral-benefit:hover {
    border-color: rgba(225, 190, 142, 0.4);
    background: rgba(225, 190, 142, 0.1);
    transform: translateX(5px);
}

.benefit-icon {
    font-size: 20px;
}

.referral-code-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 20px;
    background: rgba(26, 18, 12, 0.7);
    border: 1px dashed rgba(225, 190, 142, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.referral-code-box:hover {
    border-color: var(--primary-gold);
    background: rgba(225, 190, 142, 0.1);
}

.code-label {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    opacity: 0.7;
}

.code-value {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-gold);
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(225, 190, 142, 0.3);
}

/* Loading Bar */
.loading-container {
    width: 100%;
    margin: 20px 0;
}

.loading-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.loading-label span:first-child {
    color: var(--text-light);
}

.loading-status {
    color: #4ade80;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loading-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
    }
}

.loading-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(225, 190, 142, 0.2);
}

.loading-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 75%;
    background: linear-gradient(90deg, var(--primary-gold), var(--light-gold), var(--primary-gold));
    background-size: 200% 100%;
    border-radius: 3px;
    animation: loading-shimmer 2s linear infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.loading-glow {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 75%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: loading-glow 2s ease-in-out infinite;
}

@keyframes loading-glow {
    0%, 100% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
}

.loading-info {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--text-light);
    text-align: center;
}

.loading-info strong {
    color: var(--text-gold);
    font-weight: 600;
}

/* Hero Boxes Container - Centered */
.hero-boxes-container {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: 100%;
    padding: 40px 60px;
}

.scroll-box {
    text-align: center;
    padding: 35px 40px;
    background: linear-gradient(180deg,
    rgba(35, 25, 15, 0.92) 0%,
    rgba(28, 20, 12, 0.95) 50%,
    rgba(35, 25, 15, 0.92) 100%);
    border: 2px solid rgba(225, 190, 142, 0.4);
    border-radius: 10px;
    position: relative;
    width: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.9),
        inset 0 0 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(225, 190, 142, 0.15);
    animation: scroll-glow 4s ease-in-out infinite;
}

@keyframes scroll-glow {
    0%, 100% {
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            inset 0 0 40px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(225, 190, 142, 0.15);
    }
    50% {
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            inset 0 0 40px rgba(0, 0, 0, 0.4),
            0 0 50px rgba(225, 190, 142, 0.25);
    }
}

.scroll-ornament-top,
.scroll-ornament-bottom {
    position: absolute;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}

.scroll-ornament-top {
    top: 14px;
}

.scroll-ornament-bottom {
    bottom: 14px;
}

.scroll-ornament-top::before,
.scroll-ornament-bottom::before {
    content: '◈';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary-gold);
    font-size: 11px;
    background: rgba(35, 25, 15, 1);
    padding: 0 6px;
}

.scroll-ornament-top::before {
    top: -7px;
}

.scroll-ornament-bottom::before {
    bottom: -7px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.15) 0%, rgba(225, 190, 142, 0.05) 100%);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 50px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-gold);
    margin-bottom: 18px;
}

.badge-symbol {
    color: var(--primary-gold);
    font-size: 6px;
}

.hero-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    color: var(--text-gold);
    text-shadow: 0 2px 20px rgba(225, 190, 142, 0.3);
}

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 5px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--primary-gold) 0%, #a08040 100%);
    border: none;
    border-radius: 6px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--dark-brown);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary svg {
    stroke: var(--dark-brown);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(225, 190, 142, 0.5);
}

.btn-secondary {
    padding: 12px 30px;
    background: transparent;
    border: 2px solid rgba(225, 190, 142, 0.5);
    border-radius: 6px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-gold);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    background: rgba(225, 190, 142, 0.1);
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(225, 190, 142, 0.2);
}

/* Pet Divider */
.pet-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    position: relative;
    background: linear-gradient(180deg, var(--bg-darkest) 0%, rgba(26, 15, 10, 0.3) 50%, var(--bg-darkest) 100%);
}

.pet-divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
    max-width: 300px;
}

.pet-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pet-video {
    height: 100px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.7));
    background: transparent !important;
}

.pet-ground-line {
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-gold) 20%, var(--primary-gold) 80%, transparent 100%);
    margin-top: -5px;
    box-shadow: 0 0 10px rgba(225, 190, 142, 0.3);
}

.pet-img {
    height: 70px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.7));
    transition: all 0.4s ease;
    animation: pet-bounce 3s ease-in-out infinite;
}

.pet-img:nth-child(1) {
    animation-delay: 0s;
}

.pet-img:nth-child(2) {
    animation-delay: 0.5s;
}

.pet-img:nth-child(3) {
    animation-delay: 1s;
}

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

.pet-img:hover {
    transform: scale(1.2) translateY(-5px);
    filter: drop-shadow(0 10px 25px rgba(225, 190, 142, 0.4));
}

@media (max-width: 900px) {
    .hero-boxes-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
    }
    .scroll-box,
    .referral-box {
        width: 100%;
        max-width: 380px;
    }
    .boxes-connector {
        width: 2px;
        height: 40px;
        flex-direction: column;
    }
    .connector-line {
        width: 2px;
        height: 100%;
    }
    .connector-dot-left {
        left: 50%;
        top: -5px;
        transform: translateX(-50%);
    }
    .connector-dot-right {
        right: auto;
        left: 50%;
        bottom: -5px;
        top: auto;
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .hero-boxes-container {
        padding: 20px;
    }
    .scroll-box,
    .referral-box {
        padding: 30px 25px;
    }
    .hero-title {
        font-size: 1.8rem;
    }
    .referral-title {
        font-size: 1.4rem;
    }
    .pet-container {
        gap: 10px;
    }
    .pet-img {
        height: 50px;
    }
    .pet-video {
        height: 70px;
    }
    .pet-ground-line {
        width: 150px;
    }
}

/* Races Section */
.races-section {
    padding: 70px 60px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.89) 100%),
        url('../pres-assets/images/Backgrounds/image.webp') center center / cover no-repeat;
    overflow: hidden;
}

.races-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}

.races-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(10, 5, 4, 0.75) 100%);
    pointer-events: none;
}

.races-section .section-header {
    position: relative;
    z-index: 1;
}

.races-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.race-card {
    position: relative;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.race-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.race-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(225, 190, 142, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.race-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
    transform: translateY(-5px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(225, 190, 142, 0.1);
}

.race-card:hover::before,
.race-card:hover::after {
    opacity: 1;
}

.race-image-container {
    position: relative;
    height: 260px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: url('../pres-assets/images/Bg%20Categories/image%20(24.html).webp') center center / cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
    opacity: 1;
}

.race-image-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 10, 0.45);
    z-index: 0;
}

.race-image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3), rgba(225, 190, 142, 0.5), rgba(225, 190, 142, 0.3), transparent);
    z-index: 3;
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

.race-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.race-card:hover .race-image {
    transform: scale(1.08) translateY(-5px);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(225, 190, 142, 0.3));
}

.race-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(225, 190, 142, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 1;
}

.race-card:hover .race-glow {
    opacity: 1;
}

.race-info {
    position: relative;
    z-index: 3;
}

.race-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.race-type {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-light);
    opacity: 0.8;
    margin-bottom: 12px;
}

.race-skills {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(225, 190, 142, 0.15);
}

.skill-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.2) 0%, rgba(225, 190, 142, 0.05) 100%);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 8px;
    padding: 4px;
    transition: all 0.3s;
    cursor: pointer;
}

.skill-icon:hover {
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.4) 0%, rgba(225, 190, 142, 0.15) 100%);
    border-color: var(--primary-gold);
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(225, 190, 142, 0.4);
}

.skill-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.1);
}

@media (max-width: 1100px) {
    .races-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .races-section {
        padding: 60px 30px;
    }
    .races-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .race-image-container {
        height: 180px;
    }
}

/* Border Decoration */
.border-decoration {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-gold) 50%, transparent 100%);
    margin: 0;
    position: relative;
    z-index: 10;
}

/* Section Styles */
.content-section {
    padding: 70px 60px;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 15, 10, 0.3) 50%, transparent 100%);
}

#equipment {
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(1.html).webp') center center / cover no-repeat;
}

#maps {
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/worldmaps.png') center center / cover no-repeat;
}

#mining {
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.84) 0%, rgba(15, 8, 5, 0.76) 50%, rgba(10, 5, 4, 0.86) 100%),
        url('../pres-assets/images/Backgrounds/mining.png') center center / cover no-repeat;
}

#fishing {
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(22.html).webp') center center / cover no-repeat;
}

#battlepass {
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/Battlepass.png') center center / cover no-repeat;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: 20px;
}

.ornament {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.ornament-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-gold));
}

.ornament-line:last-child {
    background: linear-gradient(90deg, var(--primary-gold), transparent);
}

.ornament-icon {
    color: var(--primary-gold);
    font-size: 20px;
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(225, 190, 142, 0.4);
}

.section-description {
    text-align: center;
    color: var(--text-light);
    font-size: 0.97rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 20px auto 0;
    font-family: 'Inter', sans-serif;
}

.section-description .highlight,
.highlight {
    color: var(--primary-gold);
    font-weight: 600;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.info-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.4s ease;
}

.info-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(225, 190, 142, 0.15);
}

.info-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.info-card h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.2rem;
    color: var(--text-gold);
    margin-bottom: 10px;
}

.info-card p {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.4;
}

/* Enchant Section - Modern Redesign */
.enchant-section {
    padding: 40px 60px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(13.html).webp') center center / cover no-repeat;
}

.enchant-section .section-header {
    position: relative;
    z-index: 5;
}

.enchant-layout {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.enchant-render-box {
    flex: 0 0 340px;
    text-align: center;
    position: relative;
}

.enchant-render-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.enchant-render-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3), rgba(225, 190, 142, 0.5), rgba(225, 190, 142, 0.3), transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

.enchant-text-box {
    flex: 1;
}

.enchant-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 22px;
}

.enchant-feat {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.enchant-feat-icon {
    color: var(--primary-gold);
    font-size: 7px;
}

/* Responsive Enchant */
@media (max-width: 900px) {
    .enchant-layout {
        flex-direction: column;
        align-items: center;
    }
    .enchant-render-box {
        flex: 0 0 auto;
        max-width: 280px;
    }
}

@media (max-width: 500px) {
    .enchant-section {
        padding: 30px 15px;
    }
    .enchant-features-list {
        grid-template-columns: 1fr;
        padding: 14px 16px;
    }
    .enchant-feat {
        font-size: 12px;
    }
}

/* Skill Reader Section */
.skill-reader-section {
    padding: 70px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.90) 0%, rgba(20, 12, 8, 0.84) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(9.html).webp') center center / cover no-repeat;
}

.sr-layout {
    display: flex;
    gap: 35px;
    max-width: 1300px;
    margin: 0 auto;
    align-items: flex-start;
    padding-left: 160px;
}

.sr-image-side {
    flex: 1 1 60%;
    min-width: 0;
}

.sr-info-side {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-right: -40px;
    position: relative;
    z-index: 2;
}

.sr-detail-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.3s ease;
}

.sr-detail-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.sr-detail-num {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.5;
    flex-shrink: 0;
    padding-top: 2px;
}

.sr-detail-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    image-rendering: pixelated;
}

/* Skill Books Window */
.sr-books-window {
    margin-top: 10px;
    background: rgba(15, 10, 8, 0.95);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.sr-books-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(225, 190, 142, 0.08);
    border-bottom: 1px solid rgba(225, 190, 142, 0.15);
}

.sr-books-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-gold);
    opacity: 0.6;
}

.sr-books-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.88rem;
    color: var(--text-gold);
    letter-spacing: 0.5px;
}

.sr-books-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 10px;
}

.sr-book-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.sr-book-item:hover {
    background: rgba(225, 190, 142, 0.1);
}

.sr-book-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.sr-book-item span {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-light);
    opacity: 0.8;
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 500px) {
    .sr-books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sr-detail-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.97rem;
    color: var(--text-gold);
    margin: 0 0 4px;
}

.sr-detail-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

.sr-ui-placeholder-unused {
    display: none;
    justify-content: center;
    gap: 10px;
}

/* Skill Reader Responsive */
@media (max-width: 768px) {
    .sr-layout {
        flex-direction: column;
        align-items: center;
        padding-left: 0;
    }
    .sr-info-side {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .skill-reader-section {
        padding: 40px 15px;
    }
    .sr-detail-card {
        padding: 12px;
    }
    .sr-detail-title {
        font-size: 0.88rem;
    }
    .sr-detail-desc {
        font-size: 0.78rem;
    }
}

/* Inventory Section */
.inventory-section {
    padding: 70px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.90) 0%, rgba(20, 12, 8, 0.84) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(3.html).webp') center center / cover no-repeat;
}

.inventory-layout {
    display: flex;
    gap: 35px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-start;
}

.inventory-image-side {
    flex: 1 1 60%;
    min-width: 0;
}

.inventory-info-side {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inventory-detail-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.3s ease;
}

.inventory-detail-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.inventory-detail-num {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.5;
    flex-shrink: 0;
    padding-top: 2px;
}

.inventory-detail-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.97rem;
    color: var(--text-gold);
    margin: 0 0 4px;
}

.inventory-detail-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

/* Calendar Events Section */
.calendar-section {
    padding: 70px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.90) 0%, rgba(20, 12, 8, 0.84) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(4.html).webp') center center / cover no-repeat;
}

.calendar-showcase {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Calendar UI Placeholder */
.calendar-ui-container {
    flex: 1 1 55%;
    min-width: 0;
}

.calendar-ui-placeholder {
    height: 100%;
    min-height: 350px;
    background: rgba(10, 8, 6, 0.3);
    border: 2px dashed rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.calendar-placeholder-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.2rem;
    color: var(--text-gold);
    letter-spacing: 2px;
    opacity: 0.6;
}

.calendar-placeholder-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-light);
    opacity: 0.4;
}

/* Events Slider */
.events-slider-container {
    flex: 0 0 310px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.events-slider-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.02rem;
    color: var(--text-gold);
    letter-spacing: 2px;
}

.slider-diamond {
    color: var(--primary-gold);
    font-size: 8px;
    opacity: 0.7;
}

.events-slider {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 20px;
    overflow: visible;
    position: relative;
}

.events-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    transition: transform 0.4s ease;
    overflow: visible;
}

.event-item {
    position: relative;
    width: 65px;
    height: 65px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.event-item:hover {
    border-color: rgba(225, 190, 142, 0.3);
    transform: translateY(-3px);
    z-index: 100;
}

.event-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.event-item:hover img {
    transform: scale(1.1);
}

/* Event Tooltip - appears to the right */
.event-tooltip {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    transform: translateY(-50%);
    width: 200px;
    background: rgba(15, 12, 10, 0.95);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.event-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: rgba(225, 190, 142, 0.15);
}

.event-item:hover .event-tooltip {
    opacity: 1;
    visibility: visible;
}

/* For items on the right side, show tooltip on left */
.event-item:nth-child(5n) .event-tooltip,
.event-item:nth-child(5n-1) .event-tooltip {
    left: auto;
    right: calc(100% + 15px);
}

.event-item:nth-child(5n) .event-tooltip::after,
.event-item:nth-child(5n-1) .event-tooltip::after {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: rgba(225, 190, 142, 0.15);
}

.event-tooltip h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.97rem;
    color: var(--text-gold);
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.event-tooltip p {
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

/* Slider Navigation */
.slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.slider-btn {
    width: 36px;
    height: 36px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 50%;
    color: var(--primary-gold);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.slider-dots {
    display: flex;
    gap: 8px;
}

.slider-dot {
    width: 8px;
    height: 8px;
    background: rgba(225, 190, 142, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active,
.slider-dot:hover {
    background: var(--primary-gold);
    transform: scale(1.2);
}

/* Calendar Description */
.calendar-description {
    max-width: 800px;
    margin: 40px auto 0;
    text-align: center;
}

.calendar-description p {
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
}

.calendar-description .highlight {
    color: var(--primary-gold);
    font-weight: 600;
}

/* Event Features Grid */
.event-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 900px;
    margin: 30px auto 0;
}

.event-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.3s ease;
}

.event-feat:hover {
    border-color: rgba(225, 190, 142, 0.3);
    transform: translateY(-2px);
}

.event-feat-icon {
    font-size: 20px;
    color: var(--primary-gold);
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    text-shadow: 0 0 8px rgba(225, 190, 142, 0.3);
}

.event-feat-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
}

.event-feat-info h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    color: var(--text-gold);
    font-weight: 600;
    margin: 0 0 2px;
}

.event-feat-info p {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
    margin: 0;
    line-height: 1.4;
}

/* Calendar Responsive */
@media (max-width: 1000px) {
    .calendar-showcase {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .calendar-ui-container {
        width: 100%;
    }
    .events-slider-container {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .event-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .calendar-section {
        padding: 50px 20px;
    }
    .events-track {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .event-item {
        width: 65px;
        height: 65px;
    }
    .event-item img {
        width: 42px;
        height: 42px;
    }
    .event-tooltip {
        width: 150px;
        padding: 10px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .event-tooltip::after {
        display: none;
    }
    /* For items on the right side on mobile */
    .event-item:nth-child(4n) .event-tooltip,
    .event-item:nth-child(4n-1) .event-tooltip {
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }
    .event-tooltip h4 {
        font-size: 0.88rem;
    }
    .event-tooltip p {
        font-size: 0.78rem;
    }
    .calendar-description p {
        font-size: 0.92rem;
    }
    .event-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 450px) {
    .events-track {
        grid-template-columns: repeat(3, 1fr);
    }
    .event-item {
        width: 60px;
        height: 60px;
    }
    .event-item img {
        width: 38px;
        height: 38px;
    }
    .event-item:nth-child(3n) .event-tooltip,
    .event-item:nth-child(3n-1) .event-tooltip {
        left: 50%;
        right: auto;
    }
}

/* Biologist & Seon-Pyeong Section */
.biologist-section {
    padding: 70px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.93) 0%, rgba(20, 12, 8, 0.86) 50%, rgba(10, 5, 4, 0.93) 100%),
        url('../pres-assets/images/Backgrounds/image%20(10.html).webp') center center / cover no-repeat;
}

.biologist-tables {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.bio-table-card {
    position: relative;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-width: 450px;
    max-width: 580px;
}

.bio-table-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: rgba(10, 8, 6, 0.3);
    border-bottom: 1px solid rgba(225, 190, 142, 0.1);
}

.bio-table-header h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.4rem;
    color: var(--text-gold);
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
}

.bio-diamond {
    color: var(--primary-gold);
    font-size: 11px;
    opacity: 0.7;
}

.bio-table-wrapper {
    padding: 0 0 22px;
}

.bio-table thead tr {
    background: none;
}

.bio-table th:first-child {
    padding-left: 24px;
}

.bio-table th:last-child {
    padding-right: 24px;
}

.bio-table td:first-child {
    padding-left: 24px;
}

.bio-table td:last-child {
    padding-right: 24px;
}

.bio-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    table-layout: fixed;
}

.bio-table col:nth-child(1) { width: 12%; }
.bio-table col:nth-child(2) { width: 22%; }
.bio-table col:nth-child(3) { width: 16%; }
.bio-table col:nth-child(4) { width: 30%; }
.bio-table col:nth-child(5) { width: 20%; }

.bio-table th {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-gold);
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(225, 190, 142, 0.35);
    background: rgba(26, 21, 18, 0.85);
    white-space: nowrap;
}

.bio-table td {
    padding: 9px 14px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.7);
    border-bottom: 1px solid rgba(225, 190, 142, 0.12);
    background: rgba(26, 21, 18, 0.7);
    vertical-align: middle;
}

.bio-table td:nth-child(4) {
    color: #89b88d;
    min-width: 120px;
    line-height: 1.4;
}

.bio-table tbody tr:hover td {
    background: rgba(26, 21, 18, 0.9);
}

.bio-table tbody tr:last-child td {
    border-bottom: none;
}

.bio-item-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    vertical-align: middle;
}

.bio-items-cell {
    white-space: nowrap;
}

.bio-items-cell .bio-item-pair {
    vertical-align: middle;
}

.bio-item-pair {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

.bio-qty {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-gold);
    opacity: 0.7;
    font-weight: 600;
}

.bio-select-no {
    color: #f87171;
    font-size: 0.92rem;
    font-weight: 700;
}

.bio-select-yes {
    color: #4ade80;
    font-size: 0.92rem;
    font-weight: 700;
}

/* Biologist Render */
.bio-render-box {
    text-align: center;
    margin-top: 30px;
    position: relative;
}

.bio-render-img {
    max-height: 340px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.bio-render-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3), rgba(225, 190, 142, 0.5), rgba(225, 190, 142, 0.3), transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

/* Biologist Responsive */
@media (max-width: 1100px) {
    .biologist-tables {
        gap: 80px;
    }
    .bio-table-card {
        min-width: 100%;
        max-width: 500px;
    }
}

@media (max-width: 600px) {
    .biologist-section {
        padding: 50px 20px;
    }
    .bio-table-card {
        min-width: 100%;
    }
    .bio-table-header h3 {
        font-size: 1.2rem;
    }
    .bio-table th,
    .bio-table td {
        padding: 7px 8px;
        font-size: 10px;
    }
    .bio-item-icon {
        width: 26px;
        height: 26px;
    }
    .bio-render-img {
        max-height: 260px;
    }
}

/* Personal Shop & Search Section */
/* ============================================
           EVOLUTION SYSTEM SECTION
           ============================================ */
.evolution-section {
    padding: 40px 60px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.95) 0%, rgba(18, 10, 6, 0.88) 50%, rgba(10, 5, 4, 0.95) 100%),
        url('../pres-assets/images/Backgrounds/image%20(23.html).webp') center center / cover no-repeat;
}

.evolution-content {
    max-width: 1000px;
    margin: 0 auto;
}

.evolution-group {
    margin-bottom: 35px;
}

.evolution-group:last-child {
    margin-bottom: 0;
}

.evolution-group-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary-gold);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.evolution-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(225, 190, 142, 0.3), transparent);
}

.evolution-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.evolution-item {
    width: 90px;
    min-height: 100px;
    background: rgba(26, 21, 18, 0.7);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.evolution-item:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 2;
}

.evolution-item.rarity-common {
    border-color: rgba(180, 180, 180, 0.4);
}
.evolution-item.rarity-common:hover {
    box-shadow: 0 0 15px rgba(180, 180, 180, 0.2);
}

.evolution-item.rarity-rare {
    border-color: rgba(70, 130, 230, 0.5);
}
.evolution-item.rarity-rare:hover {
    box-shadow: 0 0 15px rgba(70, 130, 230, 0.3);
}

.evolution-item.rarity-epic {
    border-color: rgba(160, 80, 220, 0.5);
}
.evolution-item.rarity-epic:hover {
    box-shadow: 0 0 15px rgba(160, 80, 220, 0.3);
}

.evolution-item.rarity-legendary {
    border-color: rgba(225, 190, 142, 0.6);
}
.evolution-item.rarity-legendary:hover {
    box-shadow: 0 0 20px rgba(225, 190, 142, 0.3);
}

.evolution-item.final {
    border-color: rgba(225, 190, 142, 0.7);
    box-shadow: 0 0 12px rgba(225, 190, 142, 0.15);
    animation: final-item-pulse 3s ease-in-out infinite;
}

@keyframes final-item-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(225, 190, 142, 0.15); }
    50% { box-shadow: 0 0 22px rgba(225, 190, 142, 0.35); }
}

.evolution-item img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.evolution-item-name {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: var(--text-light);
    text-align: center;
    margin-top: 6px;
    line-height: 1.2;
    opacity: 0.8;
}

.evolution-arrow {
    color: var(--primary-gold);
    font-size: 20px;
    font-weight: bold;
    padding: 0 10px;
    opacity: 0.6;
    animation: arrow-pulse 2s ease-in-out infinite;
    user-select: none;
}

@keyframes arrow-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Evolution Tooltip */
.evolution-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 10, 8, 0.95);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 220px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.evolution-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(225, 190, 142, 0.2);
}

.evolution-item:hover .evolution-tooltip {
    opacity: 1;
    visibility: visible;
}

.evolution-tooltip strong {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--primary-gold);
}

.evolution-tooltip span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.8;
}

.evolution-tooltip .tooltip-divider {
    width: 100%;
    height: 1px;
    background: rgba(225, 190, 142, 0.2);
    margin: 2px 0;
}

.evolution-shoes-row {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.evolution-subgroup {
    display: flex;
    align-items: center;
}

.evolution-shoes-row .evolution-item img {
    width: 32px;
    height: 32px;
}

.evolution-chain-wrap {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.evolution-chain-wrap .evolution-item img {
    width: 40px;
    height: 40px;
}

.evolution-tooltip .evo-stat-positive {
    color: #89b88d;
    opacity: 1;
}

.evolution-tooltip .evo-stat-negative {
    color: #e57875;
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .evolution-section {
        padding: 30px 15px;
    }
    .evolution-content {
        max-width: 100%;
    }
    .evolution-group {
        margin-bottom: 25px;
    }
    .evolution-item {
        width: 64px;
        min-height: 74px;
        padding: 8px 4px;
    }
    .evolution-item img {
        width: 38px;
        height: 38px;
    }
    .evolution-item-name {
        font-size: 8px;
    }
    .evolution-arrow {
        font-size: 16px;
        padding: 0 6px;
    }
    .evolution-tooltip {
        display: none;
    }
}

@media (max-width: 500px) {
    .evolution-section {
        padding: 25px 10px;
    }
    .evolution-group-title {
        font-size: 11px;
        letter-spacing: 2px;
    }
    .evolution-item {
        width: 56px;
        min-height: 66px;
        padding: 6px 3px;
        border-radius: 10px;
    }
    .evolution-item img {
        width: 32px;
        height: 32px;
    }
    .evolution-item-name {
        font-size: 7px;
        margin-top: 4px;
    }
    .evolution-arrow {
        font-size: 15px;
        padding: 0 4px;
    }
}

@media (max-width: 380px) {
    .evolution-item {
        width: 48px;
        min-height: 58px;
    }
    .evolution-item img {
        width: 28px;
        height: 28px;
    }
    .evolution-arrow {
        font-size: 13px;
        padding: 0 2px;
    }
}

.shop-section {
    padding: 40px 60px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/personashop.png') center center / cover no-repeat;
}

.shop-layout {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 850px;
    margin: 0 auto;
}

.shop-render-box {
    flex: 0 0 340px;
    text-align: center;
    position: relative;
}

.shop-render-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.shop-render-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3), rgba(225, 190, 142, 0.5), rgba(225, 190, 142, 0.3), transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

.shop-text-box {
    flex: 1;
}

.shop-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 22px;
}

.shop-feat {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.shop-feat-icon {
    color: var(--primary-gold);
    font-size: 7px;
}

/* Shop Responsive */
@media (max-width: 900px) {
    .shop-layout {
        flex-direction: column;
        align-items: center;
    }
    .shop-render-box {
        flex: 0 0 auto;
        max-width: 280px;
    }
    .shop-section {
        padding: 40px 20px;
    }
}

/* Alchemist & Gaya Market Section */
.alchemy-section {
    padding: 70px 40px;
    position: relative;
    overflow: hidden;
}

.alchemy-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(15.html).webp') center center / cover no-repeat;
    z-index: 0;
}

.alchemy-section > * {
    position: relative;
    z-index: 1;
}

.alchemy-tabs-container {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 20px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.alchemy-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.alchemy-tab {
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(26, 21, 18, 0.8);
    border: 1px solid rgba(225, 190, 142, 0.15);
    color: rgba(232, 220, 200, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.alchemy-tab-number {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.7;
}

.alchemy-tab:hover {
    border-color: rgba(225, 190, 142, 0.4);
    color: var(--text-gold);
    background: rgba(225, 190, 142, 0.08);
}

.alchemy-tab:hover .alchemy-tab-number { opacity: 1; }

.alchemy-tab.active {
    background: rgba(225, 190, 142, 0.12);
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.alchemy-tab.active .alchemy-tab-number {
    opacity: 1;
    color: #fff;
}

.alchemy-feature-display {
    display: flex;
    gap: 16px;
    max-width: 750px;
    margin: 0 auto 10px;
    min-height: 220px;
}

.alchemy-icon-box {
    flex: 0 0 150px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.alchemy-icon-card {
    width: 80px;
    height: 80px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.alchemy-icon-card:hover {
    border-color: rgba(225, 190, 142, 0.4);
    background: rgba(26, 21, 18, 0.8);
    box-shadow: 0 0 12px rgba(225, 190, 142, 0.15);
}

.alchemy-icon-card img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.alchemy-icon-card:hover img { transform: scale(1.15); }

.alchemy-icon-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 15px;
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 5px;
}

.alchemy-icon-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alchemy-details-box {
    flex: 1;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 22px;
    transition: all 0.3s ease;
}

.alchemy-details-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.alchemy-details-content {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.8);
    line-height: 1.6;
}

.alchemy-details-content p { margin: 0 0 8px 0; }

.alchemy-details-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.alchemy-details-content li {
    font-size: 13px;
    color: rgba(232, 220, 200, 0.7);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alchemy-details-content li::before {
    content: '◆';
    color: var(--primary-gold);
    font-size: 7px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .alchemy-feature-display { flex-direction: column; }
    .alchemy-icon-box {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 15px;
        padding: 15px 20px;
    }
    .alchemy-icon-card { width: 50px; height: 50px; margin-bottom: 0; }
    .alchemy-icon-card img { max-width: 36px; max-height: 36px; }
    .alchemy-details-content ul { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .alchemy-tabs-container { padding: 10px; }
    .alchemy-tab { padding: 7px 10px; font-size: 9px; }
    .alchemy-details-box { padding: 15px; }
}

/* ── Gem Orbital (spinning sphere) ── */
.gem-orbital {
    position: relative;
    width: 460px;
    max-width: 100%;
    height: 460px;
    margin: 20px auto 10px;
    z-index: 5;
}

.gem-orbital-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.gem-orbital-icon-wrap {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gem-orbital-center-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(225, 190, 142, 0.4));
}

/* Orbital Rings */
.gem-orbital-ring {
    position: absolute;
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gem-orbital-ring-1 {
    width: 320px;
    height: 320px;
    border-style: dashed;
    animation: gem-ring-rotate 30s linear infinite;
}

.gem-orbital-ring-2 {
    width: 360px;
    height: 360px;
    border-color: rgba(225, 190, 142, 0.1);
    animation: gem-ring-rotate 45s linear infinite reverse;
}

@keyframes gem-ring-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Orbiting Items Container */
.gem-orbital-items {
    position: absolute;
    width: 360px;
    height: 360px;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -180px;
    animation: gem-items-orbit 28s linear infinite;
    z-index: 20;
    will-change: transform;
}

.gem-orbital-items.paused {
    animation-play-state: paused !important;
}

@keyframes gem-items-orbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Individual Gem Item */
.gem-orbital-item {
    position: absolute;
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.9) 100%);
    border: 2px solid rgba(225, 190, 142, 0.4);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    animation: gem-counter-rotate 28s linear infinite;
    z-index: 25;
    will-change: transform;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gem-orbital-items.paused .gem-orbital-item {
    animation-play-state: paused !important;
}

@keyframes gem-counter-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* 6 items evenly spaced (60° apart) on 360px container, radius 180, item 68px */
.gem-orbital-item[data-index="0"] { top: -34px;  left: 146px; }  /* 0° top */
.gem-orbital-item[data-index="1"] { top: 56px;   left: 302px; }  /* 60° */
.gem-orbital-item[data-index="2"] { top: 236px;  left: 302px; }  /* 120° */
.gem-orbital-item[data-index="3"] { top: 326px;  left: 146px; }  /* 180° bottom */
.gem-orbital-item[data-index="4"] { top: 236px;  left: -10px; }  /* 240° */
.gem-orbital-item[data-index="5"] { top: 56px;   left: -10px; }  /* 300° */

.gem-orbital-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gem-clr, rgba(225, 190, 142, 0.2)) 0%, transparent 70%);
    animation: gem-orbital-pulse 3s ease-in-out infinite;
    opacity: 0;
}

@keyframes gem-orbital-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

.gem-orbital-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.gem-orbital-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(232, 220, 200, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.gem-orbital-item:hover,
.gem-orbital-item.active {
    border-color: var(--gem-clr, var(--primary-gold));
    box-shadow: 0 0 25px color-mix(in srgb, var(--gem-clr, rgba(225,190,142,1)) 50%, transparent);
    z-index: 30;
}

.gem-orbital-item.active {
    box-shadow: 0 0 35px color-mix(in srgb, var(--gem-clr, rgba(225,190,142,1)) 60%, transparent);
}

.gem-orbital-item.active .gem-orbital-label {
    color: var(--gem-clr, var(--primary-gold));
}

/* SVG Connection Ring */
.gem-orbital-connections {
    position: absolute;
    width: 360px;
    height: 360px;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -180px;
    pointer-events: none;
    animation: gem-items-orbit 28s linear infinite;
    will-change: transform;
    z-index: 15;
}

.gem-orbital-connections.paused {
    animation-play-state: paused !important;
}

/* Gem Stats Popup (center of orbital) */
.gem-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(15, 10, 8, 0.98);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 10px;
    padding: 0;
    min-width: 260px;
    max-width: 300px;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(225, 190, 142, 0.2);
}

.gem-popup.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.gem-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(225, 190, 142, 0.08);
    border-bottom: 1px solid rgba(225, 190, 142, 0.15);
    padding: 12px 18px;
    border-radius: 9px 9px 0 0;
}

.gem-popup-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--primary-gold);
}

.gem-popup-close {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.gem-popup-close:hover {
    color: var(--primary-gold);
}

.gem-popup-content {
    padding: 12px 18px;
}

.gem-popup-stats {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-gold);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.gem-popup-stat-line {
    padding: 6px 15px;
    border-left: 3px solid var(--primary-gold);
    color: #89b88d;
}

.gem-popup-stat-line + .gem-popup-stat-line {
    border-top: 1px solid rgba(225, 190, 142, 0.15);
}

/* Gem Orbital Responsive */
@media (max-width: 768px) {
    .alchemy-section {
        padding: 50px 20px;
    }
    .gem-orbital {
        width: 360px;
        height: 360px;
    }
    .gem-orbital-items,
    .gem-orbital-connections {
        width: 280px;
        height: 280px;
        margin-top: -140px;
        margin-left: -140px;
    }
    .gem-orbital-ring-1 { width: 250px; height: 250px; }
    .gem-orbital-ring-2 { width: 280px; height: 280px; }
    .gem-orbital-item {
        width: 56px;
        height: 56px;
    }
    .gem-orbital-img { width: 30px; height: 30px; }
    .gem-orbital-item[data-index="0"] { top: -28px;  left: 112px; }
    .gem-orbital-item[data-index="1"] { top: 42px;   left: 233px; }
    .gem-orbital-item[data-index="2"] { top: 182px;  left: 233px; }
    .gem-orbital-item[data-index="3"] { top: 252px;  left: 112px; }
    .gem-orbital-item[data-index="4"] { top: 182px;  left: -9px;  }
    .gem-orbital-item[data-index="5"] { top: 42px;   left: -9px;  }
    .gem-popup { min-width: 220px; max-width: 260px; }
}

@media (max-width: 500px) {
    .alchemy-section {
        padding: 40px 15px;
    }
    .gem-orbital {
        width: 300px;
        height: 300px;
    }
    .gem-orbital-items,
    .gem-orbital-connections {
        width: 240px;
        height: 240px;
        margin-top: -120px;
        margin-left: -120px;
    }
    .gem-orbital-ring-1 { width: 210px; height: 210px; }
    .gem-orbital-ring-2 { width: 240px; height: 240px; }
    .gem-orbital-item {
        width: 48px;
        height: 48px;
    }
    .gem-orbital-img { width: 26px; height: 26px; }
    .gem-orbital-label { font-size: 0.5rem; }
    .gem-orbital-item[data-index="0"] { top: -24px;  left: 96px;  }
    .gem-orbital-item[data-index="1"] { top: 36px;   left: 200px; }
    .gem-orbital-item[data-index="2"] { top: 156px;  left: 200px; }
    .gem-orbital-item[data-index="3"] { top: 216px;  left: 96px;  }
    .gem-orbital-item[data-index="4"] { top: 156px;  left: -8px;  }
    .gem-orbital-item[data-index="5"] { top: 36px;   left: -8px;  }
    .gem-popup { min-width: 200px; max-width: 240px; }
}

/* ── Gaya Detail Row ── */
.alchemy-detail-row {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-top: 35px;
    padding: 25px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    transition: border-color 0.3s ease;
}

.alchemy-detail-row:hover {
    border-color: rgba(225, 190, 142, 0.22);
}

.alchemy-detail-visual {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.alchemy-visual-scene {
    flex-shrink: 0;
    width: 300px;
}

.alchemy-scene-ui {
    width: 100%;
}

.alchemy-scene-ui img {
    width: 100%;
    height: auto;
    display: block;
}

.alchemy-detail-text {
    flex: 1;
}

.alchemy-detail-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary-gold);
    margin: 0 0 10px;
    letter-spacing: 0.03em;
}

.alchemy-detail-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .alchemy-detail-row {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .alchemy-visual-scene {
        width: 260px;
    }
}

@media (max-width: 500px) {
    .alchemy-detail-row {
        padding: 15px;
    }
    .alchemy-visual-scene {
        width: 220px;
    }
}

/* Quest System Section */
.quest-section {
    padding: 70px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.93) 0%, rgba(20, 12, 8, 0.86) 50%, rgba(10, 5, 4, 0.93) 100%),
        url('../pres-assets/images/Backgrounds/image%20(6.html).webp') center center / cover no-repeat;
}

.quest-layout {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

/* Quest Info Side */
.quest-info-side {
    flex: 1;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Quest Banner Box */
.quest-banner-box {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.quest-banner-placeholder {
    height: 120px;
    background: rgba(10, 8, 6, 0.4);
    border: 1px dashed rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.quest-banner-placeholder span {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    color: var(--text-gold);
    opacity: 0.5;
    letter-spacing: 2px;
}

.quest-banner-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.83rem !important;
    opacity: 0.35 !important;
}

.quest-info-box {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.quest-info-box:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.quest-info-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.quest-chinese-icon {
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
    font-size: 1.3rem;
    color: var(--primary-gold);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(225, 190, 142, 0.08);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 8px;
}

.quest-info-content h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    color: var(--text-gold);
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.quest-info-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* Mission Books Slider Container */
.mission-books-container {
    flex: 1;
    max-width: 450px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.mission-books-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px;
    background: rgba(10, 8, 6, 0.3);
    border-bottom: 1px solid rgba(225, 190, 142, 0.1);
}

.mission-books-header h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.2rem;
    color: var(--text-gold);
    letter-spacing: 2px;
    margin: 0;
}

.mb-diamond {
    color: var(--primary-gold);
    font-size: 8px;
    opacity: 0.7;
}

.mission-books-slider {
    padding: 20px;
}

.mb-slider-track {
    position: relative;
    overflow: hidden;
}

.mb-slide {
    display: none;
    animation: mbFadeIn 0.4s ease;
}

.mb-slide.active {
    display: block;
}

@keyframes mbFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.mb-ui-placeholder {
    height: 200px;
    background: rgba(10, 8, 6, 0.4);
    border: 1px dashed rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mb-ui-placeholder span {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    color: var(--text-gold);
    opacity: 0.6;
    letter-spacing: 2px;
}

.mb-placeholder-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.83rem !important;
    opacity: 0.4 !important;
}

/* Slider Controls */
.mb-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.mb-slider-btn {
    width: 36px;
    height: 36px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 50%;
    color: var(--primary-gold);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mb-slider-btn:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.mb-slider-dots {
    display: flex;
    gap: 8px;
}

.mb-dot {
    width: 10px;
    height: 10px;
    background: rgba(225, 190, 142, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mb-dot.active,
.mb-dot:hover {
    background: var(--primary-gold);
    transform: scale(1.2);
}

/* Reward Section */
.mb-reward-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(225, 190, 142, 0.2);
}

.mb-reward-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.4), transparent);
}

.mb-reward-icon-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mb-reward-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(225, 190, 142, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: rewardPulse 2s ease-in-out infinite;
}

@keyframes rewardPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

.mb-reward-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    animation: rewardFloat 3s ease-in-out infinite;
}

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

.mb-reward-text {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-light);
    opacity: 0.7;
    margin: 15px 0 20px;
    padding: 0 20px;
}

/* Quest Section Responsive */
@media (max-width: 900px) {
    .quest-layout {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .quest-info-side {
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .quest-banner-box {
        flex: 1 1 100%;
    }
    .quest-info-box {
        flex: 1;
        min-width: 280px;
    }
    .mission-books-container {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .quest-section {
        padding: 50px 20px;
    }
    .quest-info-side {
        flex-direction: column;
    }
    .quest-banner-box {
        width: 100%;
    }
    .quest-banner-placeholder {
        height: 100px;
    }
    .quest-info-box {
        min-width: 100%;
    }
    .quest-info-content h4 {
        font-size: 0.97rem;
    }
    .quest-info-content p {
        font-size: 0.83rem;
    }
    .mb-ui-placeholder {
        height: 160px;
    }
    .mb-reward-icon {
        width: 38px;
        height: 38px;
    }
    .mb-reward-icon-wrapper {
        width: 50px;
        height: 50px;
    }
}

/* Responsive Inventory */
@media (max-width: 768px) {
    .inventory-layout {
        flex-direction: column;
        align-items: center;
    }
    .inventory-info-side {
        flex: none;
        width: 100%;
    }
}

/* Feature Boxes */
.feature-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-box {
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.9) 0%, rgba(45, 24, 16, 0.7) 100%);
    border: 1px solid rgba(225, 190, 142, 0.25);
    border-radius: 10px;
    padding: 30px;
    transition: all 0.4s ease;
}

.feature-box:hover {
    border-color: rgba(225, 190, 142, 0.5);
    transform: translateY(-3px);
}

.feature-box h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.3rem;
    color: var(--text-gold);
    margin-bottom: 15px;
}

.feature-box p {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* QoL Grid */
.qol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.qol-item {
    background: rgba(26, 15, 10, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.qol-item:hover {
    border-color: rgba(225, 190, 142, 0.4);
    background: rgba(225, 190, 142, 0.1);
}

/* Dungeon Grid */
.dungeon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.dungeon-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    transition: all 0.4s ease;
}

.dungeon-card:hover {
    border-color: rgba(225, 190, 142, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(225, 190, 142, 0.15);
}

.dungeon-card h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    color: var(--text-gold);
    margin-bottom: 8px;
}

.dungeon-card p {
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    color: var(--text-light);
    opacity: 0.8;
}

/* Wikipedia Section */
.wikipedia-section {
    padding: 70px 40px 30px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.89) 100%),
        url('../pres-assets/images/Backgrounds/image%20(7.html).webp') center center / cover no-repeat;
    overflow: visible;
}

.wikipedia-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 4, 0.9) 100%);
    pointer-events: none;
}

.wikipedia-section .section-header {
    position: relative;
    z-index: 1;
}

.wiki-full-showcase {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.wiki-layout {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.wiki-text-box {
    flex: 1;
}

.wiki-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 22px;
}

.wiki-feat {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.wiki-feat-icon {
    color: var(--primary-gold);
    font-size: 7px;
}

.wiki-render-box {
    flex: 0 0 340px;
    text-align: center;
    position: relative;
}

.wiki-render-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.wiki-render-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3), rgba(225, 190, 142, 0.5), rgba(225, 190, 142, 0.3), transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

.wiki-ui-container {
    position: relative;
    width: 380px;
    max-width: 100%;
    flex-shrink: 0;
    transition: transform 0.4s ease;
    cursor: pointer;
    overflow: visible;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.95) 100%);
    border: 1px solid rgba(225, 190, 142, 0.5);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    height: fit-content;
    z-index: 5;
}

.wiki-ui-container:hover {
    transform: scale(1.02);
}

.wiki-ui-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.wiki-ui-container:hover .wiki-ui-img {
    /* No additional effect needed */
}

.wiki-character {
    position: relative;
    flex-shrink: 0;
    margin: 0 -40px;
    z-index: 10;
    align-self: flex-end;
}

.wiki-character video {
    background: transparent !important;
}

.wiki-char-img {
    height: 380px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
    pointer-events: none;
    background: transparent !important;
    display: block;
}

/* QoL Features Section */
.qol-features-section {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
}

/* Vertical line from QoL to separator - removed */
.qol-features-section::after {
    display: none;
}

.qol-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.qol-diamond {
    color: var(--primary-gold);
    font-size: 8px;
    opacity: 0.8;
}

.qol-line {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}

.qol-section-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.02rem;
    color: var(--text-gold);
    letter-spacing: 2px;
    white-space: nowrap;
}

.qol-features-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.95) 100%);
    border: 1px solid rgba(225, 190, 142, 0.5);
    border-radius: 10px;
    padding: 18px 22px;
    flex: 1;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.qol-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    color: var(--text-light);
    transition: all 0.3s ease;
    cursor: default;
}

.qol-feature-item:hover {
    color: var(--text-gold);
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(225, 190, 142, 0.3);
}

.qol-star {
    color: var(--primary-gold);
    font-size: 8px;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.qol-feature-item:hover .qol-star {
    opacity: 1;
    transform: scale(1.3) rotate(180deg);
    text-shadow: 0 0 15px rgba(225, 190, 142, 0.8);
}

@media (max-width: 1000px) {
    .wiki-layout {
        flex-direction: column;
        gap: 20px;
    }
    .wiki-render-box {
        flex: none;
        width: 100%;
        max-width: 300px;
    }
    .wiki-features-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .wikipedia-section {
        padding: 50px 20px;
    }
    .wiki-ui-container {
        max-width: 100%;
    }
    .wiki-character {
        position: relative;
        margin: -20px 0;
    }
    .wiki-char-img {
        height: 200px;
    }
    .qol-section-title {
        font-size: 0.92rem;
    }
    .qol-feature-item {
        font-size: 0.78rem;
    }
    .qol-features-list {
        padding: 12px 15px;
        grid-template-columns: 1fr;
    }
}

/* Data Table */
.table-container {
    max-width: 800px;
    margin: 0 auto;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
}

.data-table th {
    background: rgba(225, 190, 142, 0.2);
    color: var(--text-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid rgba(225, 190, 142, 0.3);
}

.data-table td {
    padding: 12px 15px;
    color: var(--text-light);
    border-bottom: 1px solid rgba(225, 190, 142, 0.1);
}

.data-table tr:hover td {
    background: rgba(225, 190, 142, 0.05);
}

/* QoL Main Section with Background */
.qol-main-section {
    padding: 70px 60px;
    position: relative;
    overflow: hidden;
}

.qol-main-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.89) 100%),
        url('../pres-assets/images/Backgrounds/image%20(8.html).webp') center center / cover no-repeat;
    z-index: 0;
}

.qol-main-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 4, 0.9) 100%);
    pointer-events: none;
    z-index: 0;
}

.qol-main-section > * {
    position: relative;
    z-index: 1;
}

.qol-main-section .section-header {
    position: relative;
    z-index: 1;
}

/* QoL Features Grid - Compact */
.qol-tabs-container {
    background: rgba(15, 12, 10, 0.7);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.qol-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.qol-tab {
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(26, 21, 18, 0.8);
    border: 1px solid rgba(225, 190, 142, 0.2);
    color: rgba(232, 220, 200, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qol-tab-number {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.7;
}

.qol-tab:hover {
    border-color: rgba(225, 190, 142, 0.5);
    color: var(--text-gold);
    background: rgba(225, 190, 142, 0.1);
}

.qol-tab:hover .qol-tab-number {
    opacity: 1;
}

.qol-tab.active {
    background: rgba(225, 190, 142, 0.15);
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.qol-tab.active .qol-tab-number {
    opacity: 1;
    color: #fff;
}

.qol-feature-display {
    display: flex;
    gap: 20px;
    max-width: 850px;
    margin: 0 auto;
    align-items: stretch;
    position: relative;
    z-index: 1;
    min-height: 380px;
}

.qol-icon-box {
    flex: 0 0 200px;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.qol-icon-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.qol-icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.qol-icon-box:hover .qol-icon-wrapper img {
    transform: scale(1.1);
}

.qol-desc-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    text-align: center;
    margin-top: 8px;
    transition: opacity 0.3s ease;
}

.qol-system-note {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(225, 190, 142, 0.35);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 12px;
    text-align: center;
}

.qol-details-box {
    flex: 1;
    background: rgba(26, 21, 18, 0.3);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-style: dashed;
    padding: 25px 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.qol-video-preview {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(10, 8, 6, 0.3);
}

.qol-video-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.qol-details-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 16px;
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.qol-details-content {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.8);
    line-height: 1.7;
}

.qol-details-content p {
    margin-bottom: 15px;
}

.qol-details-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.qol-details-content li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.qol-details-content li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--primary-gold);
    font-size: 8px;
    top: 4px;
}

/* Starting Equipment - Orbital Design */
.starting-equipment-section {
    padding: 50px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.89) 100%),
        url('../pres-assets/images/Backgrounds/image%20(2.html).webp') center center / cover no-repeat;
    overflow: hidden;
}

.starting-equipment-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 4, 0.9) 100%);
    pointer-events: none;
}

.starting-equipment-section .section-header {
    position: relative;
    z-index: 10;
}

.equipment-orbital {
    position: relative;
    width: 500px;
    max-width: 100%;
    height: 500px;
    margin: 20px auto 10px;
    z-index: 5;
}

.orbital-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.character-box {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    z-index: 2;
    background: radial-gradient(ellipse at center, rgba(225, 190, 142, 0.1) 0%, rgba(225, 190, 142, 0.02) 50%, transparent 70%);
    border: 2px solid rgba(225, 190, 142, 0.25);
    border-radius: 50%;
    box-shadow:
        inset 0 0 40px rgba(225, 190, 142, 0.08),
        0 0 30px rgba(225, 190, 142, 0.15),
        0 0 60px rgba(0, 0, 0, 0.4);
}

.orbital-character {
    height: 380px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 2;
}

.character-ground {
    width: 140px;
    height: 8px;
    background: radial-gradient(ellipse at center, rgba(225, 190, 142, 0.5) 0%, rgba(225, 190, 142, 0.15) 50%, transparent 70%);
    border-radius: 50%;
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(4px);
    z-index: 1;
}

/* Orbital Rings */
.orbital-ring {
    position: absolute;
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbital-ring-1 {
    width: 340px;
    height: 340px;
    border-style: dashed;
    animation: ring-rotate 30s linear infinite;
}

.orbital-ring-2 {
    width: 380px;
    height: 380px;
    border-color: rgba(225, 190, 142, 0.1);
    animation: ring-rotate 45s linear infinite reverse;
}

@keyframes ring-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Orbital Items Container */
.orbital-items {
    position: absolute;
    width: 380px;
    height: 380px;
    top: 50%;
    left: 50%;
    margin-top: -190px;
    margin-left: -190px;
    animation: items-orbit 25s linear infinite;
    z-index: 20;
    will-change: transform;
}

.orbital-items.paused {
    animation-play-state: paused !important;
}

@keyframes items-orbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Individual Orbital Item */
.orbital-item {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.9) 100%);
    border: 2px solid rgba(225, 190, 142, 0.4);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 25;
}

.orbital-items.paused .orbital-item .item-icon {
    animation-play-state: paused !important;
}

@keyframes counter-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* Position 8 items evenly in a circle (45deg apart, container 380px, item 60px) */
.orbital-item[data-index="0"] { top: -30px;  left: 160px; }  /* top */
.orbital-item[data-index="1"] { top: 26px;   left: 294px; }  /* top-right */
.orbital-item[data-index="2"] { top: 160px;  left: 350px; }  /* right */
.orbital-item[data-index="3"] { top: 294px;  left: 294px; }  /* bottom-right */
.orbital-item[data-index="4"] { top: 350px;  left: 160px; }  /* bottom */
.orbital-item[data-index="5"] { top: 294px;  left: 26px;  }  /* bottom-left */
.orbital-item[data-index="6"] { top: 160px;  left: -30px; }  /* left */
.orbital-item[data-index="7"] { top: 26px;   left: 26px;  }  /* top-left */

.orbital-item:hover,
.orbital-item.active {
    border-color: var(--primary-gold);
    box-shadow: 0 0 25px rgba(225, 190, 142, 0.5);
    z-index: 10;
}

.orbital-item.active {
    box-shadow: 0 0 35px rgba(225, 190, 142, 0.7);
}

.item-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(225, 190, 142, 0.2) 0%, transparent 70%);
    animation: item-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes item-pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.item-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    pointer-events: none;
    animation: counter-rotate 25s linear infinite;
    will-change: transform;
}

/* SVG Connections */
.orbital-connections {
    position: absolute;
    width: 380px;
    height: 380px;
    top: 50%;
    left: 50%;
    margin-top: -190px;
    margin-left: -190px;
    pointer-events: none;
    animation: items-orbit 25s linear infinite;
    will-change: transform;
    z-index: 15;
}

.orbital-connections.paused {
    animation-play-state: paused !important;
}

/* Item Details Popup */
.item-details-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(15, 10, 8, 0.98);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 10px;
    padding: 0;
    min-width: 280px;
    max-width: 320px;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(225, 190, 142, 0.2);
}

.item-details-popup.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.15);
    background: rgba(225, 190, 142, 0.08);
    border-radius: 9px 9px 0 0;
}

.popup-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-gold);
}

.popup-close {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
    line-height: 1;
}

.popup-close:hover {
    color: var(--primary-gold);
}

.popup-content {
    padding: 15px 20px;
}

.popup-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 12px;
}

.popup-stats {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-gold);
    padding: 8px 0;
    background: rgba(225, 190, 142, 0.05);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.popup-stat-line {
    padding: 6px 15px;
    border-left: 3px solid var(--primary-gold);
    color: #89b88d;
}

.popup-stat-line.stat-hp {
    color: #b0dfb4;
}

.popup-stat-line + .popup-stat-line {
    border-top: 1px solid rgba(225, 190, 142, 0.15);
}

.equipment-hint {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-gold);
    margin-top: 5px;
    padding: 10px 25px;
    background: rgba(225, 190, 142, 0.1);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 50px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Consumables & Boost Banner */
.consumables-banner {
    margin-top: 25px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 25px;
    position: relative;
    overflow: visible;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(225, 190, 142, 0.05);
    z-index: 5;
}

.consumables-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.consumables-banner::after {
    display: none;
}

.consumables-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.2rem;
    color: var(--primary-gold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(225, 190, 142, 0.4);
    position: relative;
    z-index: 1;
}

.register-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.6);
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    line-height: 1.6;
}

.register-subtitle .highlight {
    color: var(--primary-gold);
    font-weight: 600;
}

.register-prelaunch-note {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #e74c4c;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 12px rgba(231, 76, 76, 0.3);
}

.promo-code-box {
    position: relative;
    z-index: 1;
    text-align: center;
    background: rgba(225, 190, 142, 0.06);
    border: 1px dashed rgba(225, 190, 142, 0.2);
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 20px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.promo-code-label {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(232, 220, 200, 0.4);
    margin-bottom: 3px;
}

.promo-code-value {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-gold);
    letter-spacing: 4px;
    text-shadow: 0 0 15px rgba(225, 190, 142, 0.3);
}

.promo-code-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.45);
    line-height: 1.4;
    text-align: left;
}

.promo-code-desc .highlight {
    color: var(--primary-gold);
    font-weight: 600;
}

.consumables-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    position: relative;
    z-index: 1;
}

.consumable-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(26, 18, 12, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 10px;
    padding: 12px 15px;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.consumable-card:hover {
    border-color: var(--primary-gold);
    background: rgba(225, 190, 142, 0.1);
    transform: translateY(-3px);
    z-index: 10;
}

.consumable-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(225, 190, 142, 0.3));
    transition: all 0.3s ease;
}

.consumable-card:hover .consumable-icon {
    filter: drop-shadow(0 0 10px rgba(225, 190, 142, 0.6));
    transform: scale(1.1);
}

.consumable-text h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.88rem;
    color: var(--primary-gold);
    margin: 0 0 2px 0;
    font-weight: 600;
}

.consumable-text p {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-light);
    margin: 0;
    opacity: 0.8;
}

.consumable-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: linear-gradient(135deg, rgba(20, 12, 8, 0.98) 0%, rgba(35, 20, 12, 0.98) 100%);
    border: 2px solid var(--primary-gold);
    border-radius: 10px;
    padding: 12px 15px;
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(225, 190, 142, 0.3);
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    color: var(--text-light);
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
}

.consumable-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--primary-gold);
}

/* Bottom row popups appear above */
.consumable-card:nth-child(n+4) .consumable-popup {
    bottom: calc(100% + 10px);
    top: auto;
}

/* Top row popups appear below */
.consumable-card:nth-child(-n+3) .consumable-popup {
    bottom: auto;
    top: calc(100% + 10px);
}

.consumable-card:nth-child(-n+3) .consumable-popup::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--primary-gold);
}

.consumable-card:hover .consumable-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

@media (max-width: 768px) {
    .consumables-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .consumables-banner {
        padding: 20px 15px;
        margin-top: 20px;
    }
    .consumables-title {
        font-size: 1rem;
    }
}

@media (max-width: 500px) {
    .consumables-grid {
        grid-template-columns: 1fr;
    }
    .consumable-card {
        padding: 10px 12px;
    }
    .consumable-popup {
        width: 180px;
        font-size: 0.78rem;
    }
}

/* Apprentice Chest Section */
.apprentice-chest-section {
    margin-top: 40px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 25px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.apprentice-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.apprentice-header h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.3rem;
    color: var(--text-gold);
    letter-spacing: 2px;
    margin: 0;
}

.apprentice-diamond {
    color: var(--primary-gold);
    font-size: 11px;
    opacity: 0.7;
}

.apprentice-description {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-light);
    opacity: 0.9;
    margin-bottom: 25px;
}

/* Level Selector */
.level-selector {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.level-btn {
    width: 45px;
    height: 40px;
    background: linear-gradient(135deg, rgba(15, 8, 5, 0.9) 0%, rgba(30, 18, 12, 0.9) 100%);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.92rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.level-btn:hover {
    border-color: var(--primary-gold);
    color: var(--text-gold);
    transform: translateY(-2px);
}

.level-btn.active {
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.25) 0%, rgba(225, 190, 142, 0.15) 100%);
    border-color: var(--primary-gold);
    color: var(--text-gold);
    box-shadow: 0 0 15px rgba(225, 190, 142, 0.2);
}

/* Chest Display */
.chest-display {
    display: flex;
    gap: 30px;
    align-items: stretch;
    justify-content: center;
}

/* Single Evolving Chest Showcase */
.chest-showcase {
    width: 220px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(15, 8, 5, 0.8) 0%, rgba(30, 18, 12, 0.8) 100%);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 10px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.chest-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(225, 190, 142, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    top: 20px;
    animation: chestGlow 2.5s ease-in-out infinite;
}

@keyframes chestGlow {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.evolving-chest-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.chest-showcase:hover .evolving-chest-icon {
    transform: scale(1.1) translateY(-5px);
}

.chest-tier {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.02rem;
    color: var(--text-gold);
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.chest-level-range {
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    color: var(--text-light);
    opacity: 0.7;
    position: relative;
    z-index: 2;
}

/* Chest UI Placeholder */
.chest-ui-placeholder {
    flex: 1;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chest-ui-header {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-gold);
    text-align: center;
    letter-spacing: 1px;
    padding: 12px 18px;
    background: rgba(225, 190, 142, 0.08);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-bottom: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px 10px 0 0;
}

.chest-ui-header span span {
    font-weight: 700;
    color: var(--primary-gold);
}

.chest-ui-box {
    flex: 1;
    max-height: 200px;
    background: rgba(15, 10, 8, 0.98);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-top: none;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

.chest-ui-box span {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    color: var(--text-gold);
    opacity: 0.5;
    letter-spacing: 2px;
}

.chest-ui-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.83rem !important;
    opacity: 0.35 !important;
}

/* Apprentice Chest Responsive */
@media (max-width: 768px) {
    .chest-display {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .chest-showcase {
        width: 100%;
        max-width: 250px;
        padding: 20px;
    }
    .evolving-chest-icon {
        width: 70px;
        height: 70px;
    }
    .chest-ui-placeholder {
        width: 100%;
    }
    .chest-ui-box {
        min-height: 150px;
    }
    .level-btn {
        width: 40px;
        height: 36px;
        font-size: 0.83rem;
    }
}

@media (max-width: 500px) {
    .apprentice-chest-section {
        padding: 20px 15px;
    }
    .level-selector {
        gap: 5px;
    }
    .level-btn {
        width: 28px;
        height: 30px;
        font-size: 0.65rem;
        border-radius: 6px;
    }
    .chest-showcase {
        max-width: 200px;
    }
    .evolving-chest-icon {
        width: 60px;
        height: 60px;
    }
    .chest-tier {
        font-size: 0.92rem;
    }
    .apprentice-header h3 {
        font-size: 1rem;
    }
}

/* Status Boxes Container in Equipment Section */
.status-boxes-container {
    margin-top: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.status-points-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.status-video-box {
    width: 220px;
    height: 220px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.status-boxes-container .feature-box {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 20px 25px;
    text-align: center;
}

.status-boxes-container .feature-box h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1rem;
    color: var(--primary-gold);
    margin-bottom: 10px;
    font-weight: 600;
}

.status-boxes-container .feature-box p {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 600px) {
    .status-points-layout {
        flex-direction: column;
        align-items: center;
    }
    .status-video-box {
        width: 100%;
        max-width: 200px;
        height: 250px;
    }
}

/* Graphics Section */
.graphics-section {
    padding: 70px 60px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(5.html).webp') center center / cover no-repeat;
}

.graphics-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 4, 0.9) 100%);
    pointer-events: none;
}

.graphics-section .section-header {
    position: relative;
    z-index: 5;
}

.graphics-comparisons {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 5;
}

.graphics-compare {
    flex: 1 1 500px;
    max-width: 520px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(225, 190, 142, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.compare-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.compare-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.compare-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.compare-improved {
    z-index: 1;
}

.compare-original {
    z-index: 2;
    clip-path: inset(0 0 0 50%);
}

.compare-label {
    position: absolute;
    bottom: 15px;
    padding: 6px 14px;
    background: rgba(10, 5, 4, 0.85);
    border-radius: 20px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.improved-label {
    left: 15px;
    color: #7cb87c;
    border: 1px solid rgba(124, 184, 124, 0.4);
}

.original-label {
    right: 15px;
    color: var(--primary-gold);
    border: 1px solid rgba(225, 190, 142, 0.4);
}

.compare-slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
    transparent 0%,
    var(--primary-gold) 10%,
    var(--primary-gold) 90%,
    transparent 100%);
}

.slider-handle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.95) 100%);
    border: 2px solid var(--primary-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 15px rgba(225, 190, 142, 0.3);
    pointer-events: auto;
    cursor: ew-resize;
    z-index: 5;
}

.slider-arrows {
    font-size: 0.78rem;
    color: var(--primary-gold);
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .graphics-section {
        padding: 50px 30px;
    }
    .graphics-compare {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .compare-label {
        font-size: 0.65rem;
        padding: 5px 10px;
    }
    .slider-handle {
        width: 36px;
        height: 36px;
    }
    .slider-arrows {
        font-size: 0.68rem;
    }
}

@media (max-width: 500px) {
    .graphics-section {
        padding: 40px 15px;
    }
}

/* Challenges Section */
.challenges-section {
    padding: 40px 60px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.93) 0%, rgba(20, 12, 8, 0.86) 50%, rgba(10, 5, 4, 0.96) 100%),
        url('../pres-assets/images/Backgrounds/image%20(11.html).webp') center center / cover no-repeat;
    overflow: visible;
}

.challenges-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 4, 0.9) 100%);
    pointer-events: none;
}

.challenges-section .section-header {
    margin-bottom: 10px;
    position: relative;
    z-index: 5;
}

.challenges-layout {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.challenges-render-box {
    flex: 0 0 340px;
    text-align: center;
    position: relative;
}

.challenges-render-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.challenges-render-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3), rgba(225, 190, 142, 0.5), rgba(225, 190, 142, 0.3), transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

.challenges-text-box {
    flex: 1;
}

.challenges-description {
    font-family: 'Inter', sans-serif;
    font-size: 0.97rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

.challenges-description .highlight {
    color: var(--primary-gold);
    font-weight: 600;
}

.challenges-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 22px;
}

.challenge-feat {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.challenge-feat-icon {
    color: var(--primary-gold);
    font-size: 7px;
}

/* Left side - Benefits Box */
.challenges-benefits {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
}

.benefits-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.benefits-diamond {
    color: var(--primary-gold);
    font-size: 8px;
    opacity: 0.8;
}

.benefits-line {
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}

.benefits-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.92rem;
    color: var(--text-gold);
    letter-spacing: 2px;
    white-space: nowrap;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.95) 100%);
    border: 1px solid rgba(225, 190, 142, 0.5);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    color: var(--text-gold);
    transform: translateX(5px);
}

.benefit-star {
    color: var(--primary-gold);
    font-size: 11px;
}

.challenges-content {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    position: relative;
}

.challenges-ui-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* Rewards Banner */
.rewards-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    z-index: 6;
}

.rewards-icons {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
    position: relative;
    z-index: 7;
}

.reward-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.95) 100%);
    border: 2px solid rgba(225, 190, 142, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.reward-circle:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 15px rgba(225, 190, 142, 0.3);
    border-color: var(--primary-gold);
}

.reward-circle:active {
    transform: scale(0.95);
}

/* Connecting lines from circles to semicircle */
.reward-circle::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 12px;
    background: rgba(225, 190, 142, 0.5);
}

.reward-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.reward-circle:hover .reward-icon {
    transform: scale(1.1);
}

.rewards-semicircle {
    width: 200px;
    height: 28px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.95) 100%);
    border: 1px solid rgba(225, 190, 142, 0.5);
    border-bottom: none;
    border-radius: 100px 100px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 10px;
    margin-bottom: 0;
    z-index: 6;
}

/* Golden line under semicircle */
.rewards-semicircle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(225, 190, 142, 0.5);
}

.rewards-semicircle::before {
    display: none;
}

.rewards-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.challenges-ui {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.95) 100%);
    border: 1px solid rgba(225, 190, 142, 0.5);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* Top border lines on left and right sides */
.challenges-ui::before,
.challenges-ui::after {
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    background: rgba(225, 190, 142, 0.5);
}

.challenges-ui::before {
    left: 0;
    width: calc(50% - 101px);
}

.challenges-ui::after {
    right: 0;
    width: calc(50% - 101px);
}

.challenges-ui-img {
    height: 280px;
    width: auto;
    border-radius: 4px;
    display: block;
}

.challenges-character {
    position: relative;
    flex-shrink: 0;
    margin: 0 -40px;
    z-index: 1;
    align-self: flex-end;
}

/* Fade effect on left and right edges */
.challenges-character::before,
.challenges-character::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 150px;
    height: 180px;
    z-index: 2;
    pointer-events: none;
}

.challenges-character::before {
    left: 0;
    background: linear-gradient(90deg, rgba(15, 8, 5, 1) 0%, rgba(15, 8, 5, 0.8) 25%, rgba(15, 8, 5, 0.4) 50%, transparent 100%);
}

.challenges-character::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(15, 8, 5, 1) 0%, rgba(15, 8, 5, 0.8) 25%, rgba(15, 8, 5, 0.4) 50%, transparent 100%);
}

.challenges-character video {
    background: transparent !important;
}

.challenges-char-img {
    height: 320px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
    background: transparent !important;
    display: block;
}

@media (max-width: 768px) {
    .challenges-section {
        padding: 50px 30px;
    }
    .challenges-layout {
        flex-direction: column;
        gap: 20px;
    }
    .challenges-render-box {
        flex: none;
        width: 100%;
        max-width: 350px;
    }
    .challenges-features-list {
        grid-template-columns: 1fr;
    }
    .rewards-text {
        font-size: 0.55rem;
    }
    .challenges-description-box {
        margin-top: 25px;
    }
    .challenges-description {
        font-size: 0.92rem;
    }
    .benefits-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 15px;
    }
}

@media (max-width: 500px) {
    .challenges-showcase {
        gap: 15px;
    }
    .challenges-benefits {
        max-width: 100%;
    }
    .challenges-ui-img {
        height: 180px;
    }
    .challenges-char-img {
        height: 200px;
    }
    .challenges-character {
        margin: -20px 0;
    }
    .challenges-character::before,
    .challenges-character::after {
        width: 80px;
        height: 110px;
    }
    .reward-circle {
        width: 34px;
        height: 34px;
    }
    .reward-icon {
        width: 18px;
        height: 18px;
    }
    .rewards-semicircle {
        width: 150px;
        height: 24px;
    }
    .rewards-text {
        font-size: 0.5rem;
    }
    .challenges-description {
        font-size: 0.88rem;
    }
    .challenges-description-box {
        margin-top: 20px;
    }
    .benefits-list {
        grid-template-columns: 1fr;
    }
    .benefit-item {
        font-size: 0.78rem;
    }
}

/* Multi Farm Block Section */
.multi-farm-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.89) 100%),
        url('../pres-assets/images/Backgrounds/image%20(12.html).webp') center center / cover no-repeat;
    overflow: visible;
}

.multi-farm-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 5, 4, 0.9) 100%);
    pointer-events: none;
}

.multi-farm-section .section-header {
    position: relative;
    z-index: 10;
}

.multi-farm-display {
    position: relative;
    max-width: 800px;
    margin: 30px auto 0;
    padding-bottom: 20px;
    z-index: 5;
}

.farm-characters {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    position: relative;
    z-index: 5;
}

.farm-character {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
}

.farm-char-box {
    width: 220px;
    height: 300px;
    border: 2px solid;
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.farm-char-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../pres-assets/images/Bg%20Categories/image.webp') center center / cover no-repeat;
    z-index: 0;
}

.farm-char-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 10, 0.45);
    z-index: 0;
}

.farm-character.blocked .farm-char-box::before {
    filter: grayscale(100%);
}

.farm-box-allowed {
    border-color: rgba(74, 159, 74, 0.5);
    box-shadow: 0 0 20px rgba(74, 159, 74, 0.1);
}

.farm-box-blocked {
    border-color: rgba(180, 60, 60, 0.5);
    box-shadow: 0 0 20px rgba(180, 60, 60, 0.1);
}

.farm-char-box:hover {
    transform: translateY(-5px);
}

.farm-box-allowed:hover {
    border-color: rgba(74, 159, 74, 0.8);
    box-shadow: 0 5px 25px rgba(74, 159, 74, 0.2);
}

.farm-box-blocked:hover {
    border-color: rgba(180, 60, 60, 0.8);
    box-shadow: 0 5px 25px rgba(180, 60, 60, 0.2);
}

.farm-char-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.farm-character.blocked .farm-char-img {
    filter: grayscale(100%);
}

.farm-box-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    z-index: 5;
}

.farm-icon-allowed {
    background: rgba(74, 159, 74, 0.2);
    border: 1px solid rgba(74, 159, 74, 0.6);
    color: #4a9f4a;
}

.farm-icon-blocked {
    background: rgba(180, 60, 60, 0.2);
    border: 1px solid rgba(180, 60, 60, 0.6);
    color: #b43c3c;
}

.farm-tooltip {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 4px;
}

.farm-tooltip.allowed-tooltip {
    color: #4a9f4a;
}

.farm-tooltip.blocked-tooltip {
    color: #b43c3c;
}

@media (max-width: 768px) {
    .farm-characters {
        gap: 12px;
    }
    .farm-char-box {
        width: 160px;
        height: 210px;
    }
}

@media (max-width: 500px) {
    .farm-characters {
        gap: 8px;
    }
    .farm-char-box {
        width: 110px;
        height: 160px;
    }
    .farm-tooltip {
        font-size: 8px;
    }
}

@media (max-width: 600px) {
    .equipment-orbital {
        width: 320px;
        height: 320px;
    }
    .orbital-character {
        height: 200px;
    }
    .character-box {
        width: 160px;
        height: 160px;
    }
    .character-ground {
        width: 100px;
        bottom: -40px;
    }
    .orbital-ring-1 {
        width: 220px;
        height: 220px;
    }
    .orbital-ring-2 {
        width: 260px;
        height: 260px;
    }
    .orbital-items,
    .orbital-connections {
        width: 260px;
        height: 260px;
        margin-top: -130px;
        margin-left: -130px;
    }
    .orbital-item {
        width: 45px;
        height: 45px;
    }
    /* 8 items on 260px container, item 45px */
    .orbital-item[data-index="0"] { top: -22px;  left: 108px; }
    .orbital-item[data-index="1"] { top: 16px;   left: 198px; }
    .orbital-item[data-index="2"] { top: 108px;  left: 237px; }
    .orbital-item[data-index="3"] { top: 198px;  left: 198px; }
    .orbital-item[data-index="4"] { top: 237px;  left: 108px; }
    .orbital-item[data-index="5"] { top: 198px;  left: 16px;  }
    .orbital-item[data-index="6"] { top: 108px;  left: -22px; }
    .orbital-item[data-index="7"] { top: 16px;   left: 16px;  }
    .item-icon {
        width: 30px;
        height: 30px;
    }
    .item-details-popup {
        min-width: 240px;
        max-width: 280px;
    }
    .starting-equipment-section {
        padding: 40px 20px 30px;
    }
    .equipment-hint {
        font-size: 0.83rem;
        padding: 8px 18px;
    }
}

@media (max-width: 900px) {
    .qol-tabs-container {
        padding: 15px;
    }
    .qol-tabs {
        gap: 6px;
    }
    .qol-tab {
        padding: 8px 12px;
        font-size: 11px;
    }
    .qol-feature-display {
        flex-direction: column;
    }
    .qol-icon-box {
        flex: none;
    }
    .qol-main-section {
        padding: 50px 30px;
    }
}

@media (max-width: 500px) {
    .qol-tabs-container {
        padding: 10px;
    }
    .qol-tab {
        padding: 7px 10px;
        font-size: 9px;
    }
    .qol-details-box {
        padding: 15px;
    }
    .qol-main-section {
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {
    .content-section {
        padding: 50px 25px;
    }
    .info-grid,
    .feature-boxes,
    .qol-grid,
    .dungeon-grid {
        grid-template-columns: 1fr;
    }
    .data-table th,
    .data-table td {
        padding: 10px;
        font-size: 0.88rem;
    }
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.feature-card {
    background: rgba(26, 21, 18, 0.6);
    border: 2px solid var(--border-gold);
    border-radius: 10px;
    padding: 35px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.1), transparent);
    transition: left 0.5s;
}

.feature-card:hover::before {
    left: 100%;
}

.feature-card:hover {
    border-color: rgba(225, 190, 142, 0.5);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(225, 190, 142, 0.2);
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 20px;
    display: block;
    filter: grayscale(50%);
    transition: all 0.3s;
}

.feature-card:hover .feature-icon {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.feature-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-gold);
    margin-bottom: 15px;
}

.feature-text {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

/* Stats Section */
.stats-section {
    background: linear-gradient(180deg, rgba(26, 15, 10, 0.5) 0%, rgba(10, 5, 4, 0.8) 100%);
    border-top: 1px solid var(--border-gold);
    border-bottom: 1px solid var(--border-gold);
    padding: 25px 40px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    padding: 8px;
}

.stat-value {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: 4px;
    text-shadow: 0 0 20px rgba(225, 190, 142, 0.2);
    letter-spacing: 1px;
}

.stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(232, 220, 200, 0.45);
    font-weight: 300;
}

/* Blacksmith & Equipment Combined Section */
.blacksmith-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/blacksmith.png') center center / cover no-repeat;
}

.bs-layout {
    display: flex;
    gap: 30px;
    max-width: 950px;
    margin: 0 auto;
    align-items: flex-start;
}

.bs-layout--column {
    flex-direction: column;
    align-items: center;
}

.bs-image-top {
    width: 100%;
    max-width: 850px;
    margin-bottom: 10px;
}

.bs-left {
    flex: 0 0 280px;
}

.bs-right { flex: 1; width: 100%; }

/* Blacksmith Detail Cards (3 columns) */
.bs-detail-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bs-detail-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 14px;
    transition: border-color 0.3s ease;
}

.bs-detail-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.bs-detail-num {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.5;
    flex-shrink: 0;
    padding-top: 2px;
}

.bs-detail-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.97rem;
    color: var(--text-gold);
    margin: 0 0 4px;
}

.bs-detail-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

.bs-safe-badge {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 6px;
    padding: 3px 10px;
}

.bs-nodestroy-badge {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 6px;
    padding: 3px 10px;
}

/* Blacksmith Scrolls Box */
.bs-combined-card {
    background: linear-gradient(135deg, rgba(15, 8, 5, 0.9) 0%, rgba(25, 14, 10, 0.95) 100%);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    max-width: 620px;
    margin: 0 auto;
    overflow: visible;
}

.bs-combined-divider {
    height: 1px;
    background: rgba(225, 190, 142, 0.12);
    margin: 0 20px;
}

.bs-scrolls-box {
    padding: 16px 20px;
}

.bs-scrolls-box-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.88rem;
    color: var(--text-gold);
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.1);
    text-align: center;
}

/* Blacksmith Scrolls Grid with Popups */
.bs-scrolls-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.bs-scroll-item {
    position: relative;
    width: 48px;
    height: 48px;
    background: rgba(15, 12, 10, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bs-scroll-item:hover {
    border-color: rgba(225, 190, 142, 0.4);
    background: rgba(225, 190, 142, 0.08);
    transform: translateY(-2px);
}

.bs-scroll-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.bs-scroll-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(20, 12, 8, 0.98) 0%, rgba(30, 18, 12, 0.98) 100%);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    width: 200px;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.bs-scroll-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(225, 190, 142, 0.3);
}

.bs-scroll-item:hover .bs-scroll-popup {
    display: block;
}

.bs-scroll-popup h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.85rem;
    color: var(--text-gold);
    margin: 0 0 4px;
}

.bs-scroll-popup p {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-light);
    opacity: 0.8;
    margin: 0;
    line-height: 1.4;
}

/* Blacksmith Upgrade Table */
.bs-upgrade-table-wrapper {
    padding: 18px 20px;
}

.bs-upgrade-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    table-layout: fixed;
}

.bs-upgrade-table thead th {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-gold);
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(225, 190, 142, 0.35);
    background: rgba(26, 21, 18, 0.85);
}

.bs-upgrade-table td {
    padding: 9px 14px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.7);
    border-bottom: 1px solid rgba(225, 190, 142, 0.12);
    background: rgba(26, 21, 18, 0.7);
    vertical-align: middle;
}

.bs-upgrade-table .bs-method-name {
    font-family: 'Albertus Nova', sans-serif;
    color: var(--primary-gold);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.bs-upgrade-table .bs-note-cell {
    color: #89b88d;
    font-size: 11px;
    line-height: 1.4;
}

.bs-positive {
    color: #89b88d;
    font-weight: 600;
}

.bs-negative {
    color: #e57875;
    font-weight: 600;
}

.bs-upgrade-table tbody tr:hover td {
    background: rgba(26, 21, 18, 0.9);
}

.bs-upgrade-table tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    .blacksmith-section { padding: 50px 25px; }
    .bs-layout { flex-direction: column; }
    .bs-left { flex: none; width: 100%; }
    .bs-image-top { max-width: 100%; }
    .bs-combined-card { max-width: 100%; }
    .bs-upgrade-table thead th,
    .bs-upgrade-table td { font-size: 10px; padding: 7px 8px; }
}

@media (max-width: 500px) {
    .bs-scroll-item { width: 42px; height: 42px; }
    .bs-scroll-icon { width: 26px; height: 26px; }
    .bs-scroll-popup { width: 170px; }
}

/* Gathering Section */
.gathering-section {
    padding: 40px 60px 30px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(21.html).webp') center center / cover no-repeat;
}

.gathering-section .section-header {
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.gathering-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
}

.gathering-cards-row {
    display: flex;
    gap: 14px;
    width: 100%;
    position: relative;
    z-index: 2;
    margin-bottom: -80px;
}

.gathering-cards-row .gathering-detail-card {
    flex: 1;
}

.gathering-image-center {
    width: 100%;
    max-width: 900px;
}

.gathering-detail-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.3s ease;
}

.gathering-detail-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.gathering-detail-num {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.5;
    flex-shrink: 0;
    padding-top: 2px;
}

.gathering-detail-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.97rem;
    color: var(--text-gold);
    margin: 0 0 4px;
}

.gathering-detail-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .gathering-section {
        padding: 50px 25px;
    }
    .gathering-layout {
        flex-direction: column;
        align-items: center;
    }
    .gathering-cards-row {
        flex-direction: column;
    }
    .gathering-step-arrow {
        display: none;
    }
    .gathering-rewards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .gathering-section {
        padding: 40px 15px;
    }
}

/* Costume & Set Bonuses Section */
.costume-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(14.html).webp') center center / cover no-repeat;
}

/* Costume Pieces Row */
.costume-pieces-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 500px;
    margin: 0 auto 30px;
}

.costume-piece-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 10px;
    flex: 1;
    transition: all 0.3s ease;
}

.costume-piece-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.costume-piece-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(225, 190, 142, 0.15));
    image-rendering: auto;
    border-radius: 6px;
    background: rgba(225, 190, 142, 0.06);
    padding: 4px;
}

.costume-piece-label {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Costume Feature Cards Grid */
.costume-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 750px;
    margin: 0 auto 24px;
}

.costume-feat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 10px;
    padding: 16px 18px;
    transition: all 0.3s ease;
}

.costume-feat-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.costume-feat-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 4px rgba(225, 190, 142, 0.15));
    margin-top: 2px;
}

.costume-feat-text {
    flex: 1;
}

.costume-feat-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-gold);
    margin: 0 0 4px;
    font-weight: 600;
}

.costume-feat-desc {
    font-size: 12px;
    color: var(--text-light);
    opacity: 0.75;
    line-height: 1.5;
    margin: 0;
}

/* Costume Set Bonus */
.costume-set-info {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 750px;
    margin: 0 auto;
    padding: 14px 20px;
    background: rgba(76, 175, 80, 0.06);
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: 10px;
}

.costume-set-badge-box {
    flex-shrink: 0;
}

.costume-set-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    background: linear-gradient(135deg, #43a047, #2e7d32);
    padding: 5px 14px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.costume-set-desc {
    font-size: 12px;
    color: rgba(200, 230, 200, 0.85);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .costume-section {
        padding: 50px 25px;
    }
    .costume-pieces-row {
        flex-direction: column;
        align-items: center;
        max-width: 200px;
    }
    .costume-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .costume-feat-desc {
        padding-left: 0;
    }
}

/* Vote & Bonuses Section */
.vote-bonuses-section {
    padding: 70px 60px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(13.html).webp') center center / cover no-repeat;
}

/* Vote4Buff - Clean Layout */
.vb-layout {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.vb-image-side {
    flex: 1 1 60%;
    min-width: 0;
}

.vb-info-side {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vb-pill {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--primary-gold);
    background: rgba(225, 190, 142, 0.06);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 20px;
    padding: 5px 14px;
    font-weight: 600;
}

.vb-buff-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vb-buff-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 10px;
    transition: border-color 0.3s ease;
}

.vb-buff-row:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.vb-buff-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.vb-buff-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vb-buff-label {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-gold);
}

.vb-buff-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vb-buff-stats li {
    font-size: 0.74rem;
    color: var(--text-light);
    opacity: 0.75;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .vote-bonuses-section {
        padding: 50px 25px;
    }
    .vb-layout {
        flex-direction: column;
        align-items: center;
    }
    .vb-info-side {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .vote-bonuses-section {
        padding: 40px 15px;
    }
}

/* CTA Section */
.cta-section {
    padding: 70px 60px;
    text-align: center;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(21.html).webp') center center / cover no-repeat;
}

.cta-box {
    max-width: 650px;
    margin: 0 auto;
    padding: 50px 45px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.9) 0%, rgba(45, 24, 16, 0.7) 100%);
    border: 2px solid var(--border-gold);
    border-radius: 16px;
    position: relative;
}

.cta-box::before,
.cta-box::after {
    content: '⚔';
    position: absolute;
    top: -18px;
    font-size: 36px;
    color: var(--primary-gold);
    text-shadow: 0 0 20px var(--glow-gold);
}

.cta-box::before {
    left: 60px;
}

.cta-box::after {
    right: 60px;
}

.cta-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: 20px;
}

.cta-text {
    color: var(--text-light);
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
}

/* Footer */
.footer {
    background: rgba(10, 5, 4, 0.98);
    border-top: 1px solid var(--border-gold);
    padding: 40px 60px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo-wrap {
    position: relative;
    display: inline-block;
}

.footer-logo {
    height: 45px;
    filter: drop-shadow(0 0 15px var(--glow-gold));
}

/* Easter Egg */
.easter-egg-trigger {
    position: relative;
}

.easter-egg-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(10, 6, 1, 0.95);
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.easter-egg-popup--up {
    bottom: calc(100% + 10px);
    top: auto;
}

.easter-egg-trigger:hover .easter-egg-popup {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.easter-egg-emoji {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.easter-egg-popup span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(225, 190, 142, 0.7);
    font-style: italic;
    letter-spacing: 0.3px;
}

.footer-text {
    color: var(--text-light);
    font-size: 0.97rem;
    font-family: 'Inter', sans-serif;
}

.footer-links {
    display: flex;
    gap: 30px;
}

.footer-link {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.97rem;
    font-family: 'Inter', sans-serif;
    transition: color 0.3s ease;
    position: relative;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-gold);
    transition: width 0.3s ease;
}

.footer-link:hover {
    color: var(--text-gold);
}

.footer-link:hover::after {
    width: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar {
        width: 260px;
    }
    .main-content {
        margin-left: 260px;
    }
    .top-header {
        left: 260px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
    .top-header {
        left: 0;
    }
    .top-news-dropdown {
        left: 50%;
        width: calc(100vw - 28px);
        max-width: none;
        padding: 16px;
        transform: translateX(-50%) translateY(-8px);
    }
    .top-news-menu:hover .top-news-dropdown {
        transform: translateX(-50%) translateY(0);
    }
    .top-news-shell-head {
        flex-direction: column;
        align-items: stretch;
    }
    .top-news-tabs {
        width: 100%;
        justify-content: space-between;
    }
    .top-news-tab {
        min-width: 0;
        flex: 1;
    }
    .top-news-panel,
    .top-news-panel.active {
        grid-template-columns: 1fr;
    }
    .top-news-card-featured {
        grid-row: auto;
        min-height: 220px;
    }
    .hero-content {
        padding: 30px;
    }
    .content-section {
        padding: 60px 30px;
    }
    .stats-section {
        padding: 60px 30px;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
    .stat-value {
        font-size: 2rem;
    }
    .footer-content {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    .cta-section {
        padding: 60px 30px;
    }
    .cta-box {
        padding: 40px 30px;
    }
    .cta-box::before,
    .cta-box::after {
        display: none;
    }
}

/* Mobile menu toggle */
.mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 15px;
    z-index: 200;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(26, 15, 10, 0.95) 0%, rgba(45, 24, 16, 0.9) 100%);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-toggle:hover {
    border-color: var(--primary-gold);
    box-shadow: 0 5px 20px rgba(225, 190, 142, 0.3);
}

@media (max-width: 768px) {
    .mobile-toggle {
        display: flex;
    }
}

.mobile-toggle svg {
    color: var(--primary-gold);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* Overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
}

.sidebar-overlay.active {
    display: block;
}

/* ===== NEW SECTIONS - Render + Features Layout ===== */
.render-features-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(20.html).webp') center center / cover no-repeat;
}

.rf-layout {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.rf-layout-reverse {
    flex-direction: row-reverse;
}

.rf-render-box {
    flex: 0 0 340px;
    text-align: center;
    position: relative;
}

.rf-render-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.rf-render-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3), rgba(225, 190, 142, 0.5), rgba(225, 190, 142, 0.3), transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

.rf-text-box {
    flex: 1;
}

.rf-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    background: rgba(15, 12, 10, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 22px;
}

.rf-feat {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.rf-feat-icon {
    color: var(--primary-gold);
    font-size: 7px;
}

@media (max-width: 768px) {
    .render-features-section {
        padding: 50px 30px;
    }
    .rf-layout,
    .rf-layout-reverse {
        flex-direction: column;
        gap: 20px;
    }
    .rf-render-box {
        flex: none;
        width: 100%;
        max-width: 350px;
    }
    .rf-features-list {
        grid-template-columns: 1fr;
    }
}

/* ===== Tabbed Sections (Switchbot, Title, Guild, PvP) ===== */
.switchbot-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(16.html).webp') center center / cover no-repeat;
}

.title-rank-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(17.html).webp') center center / cover no-repeat;
}

.guild-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/Guild%20System.png') center center / cover no-repeat;
}

.pvp-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.89) 0%, rgba(15, 8, 5, 0.82) 50%, rgba(10, 5, 4, 0.91) 100%),
        url('../pres-assets/images/Backgrounds/image%20(19.html).webp') center center / cover no-repeat;
}

.switchbot-tabs-container,
.title-tabs-container,
.guild-tabs-container,
.pvp-tabs-container {
    background: rgba(15, 12, 10, 0.7);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.switchbot-tabs,
.title-tabs,
.guild-tabs,
.pvp-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.switchbot-tab,
.title-tab,
.guild-tab,
.pvp-tab {
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(26, 21, 18, 0.8);
    border: 1px solid rgba(225, 190, 142, 0.2);
    color: rgba(232, 220, 200, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.switchbot-tab-number,
.title-tab-number,
.guild-tab-number,
.pvp-tab-number {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.7;
}

.switchbot-tab:hover,
.title-tab:hover,
.guild-tab:hover,
.pvp-tab:hover {
    border-color: rgba(225, 190, 142, 0.5);
    color: var(--text-gold);
    background: rgba(225, 190, 142, 0.1);
}

.switchbot-tab:hover .switchbot-tab-number,
.title-tab:hover .title-tab-number,
.guild-tab:hover .guild-tab-number,
.pvp-tab:hover .pvp-tab-number {
    opacity: 1;
}

.switchbot-tab.active,
.title-tab.active,
.guild-tab.active,
.pvp-tab.active {
    background: rgba(225, 190, 142, 0.15);
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.switchbot-tab.active .switchbot-tab-number,
.title-tab.active .title-tab-number,
.guild-tab.active .guild-tab-number,
.pvp-tab.active .pvp-tab-number {
    opacity: 1;
    color: #fff;
}

.switchbot-ui-row {
    max-width: 850px;
    margin: 25px auto 0;
    position: relative;
    z-index: 1;
}

.switchbot-ui-row img {
    width: 100%;
    display: block;
}

.switchbot-feature-display,
.title-feature-display,
.guild-feature-display,
.pvp-feature-display {
    display: flex;
    gap: 20px;
    max-width: 850px;
    margin: 0 auto;
    min-height: 200px;
    position: relative;
    z-index: 1;
}

.switchbot-icon-box,
.title-icon-box,
.guild-icon-box,
.pvp-icon-box {
    flex: 0 0 220px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    padding: 25px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.switchbot-icon-wrapper img,
.title-icon-wrapper img,
.guild-icon-wrapper img,
.pvp-icon-wrapper img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

.guild-feature-display {
    flex-direction: column;
    max-width: 700px;
}

.guild-icon-box {
    flex: none;
    width: 100%;
    padding: 12px;
}

.guild-icon-box img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.guild-main-image {
    margin-top: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.guild-main-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.switchbot-details-box,
.title-details-box,
.guild-details-box,
.pvp-details-box {
    flex: 1;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    padding: 25px 30px;
    transition: all 0.3s ease;
}

.switchbot-details-title,
.title-details-title,
.guild-details-title,
.pvp-details-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 16px;
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.2);
}

.switchbot-details-content,
.title-details-content,
.guild-details-content,
.pvp-details-content {
    font-family: 'Inter', sans-serif;
}

.switchbot-details-content p,
.title-details-content p,
.guild-details-content p,
.pvp-details-content p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 12px;
    line-height: 1.6;
    opacity: 0.9;
}

.switchbot-details-content ul,
.title-details-content ul,
.guild-details-content ul,
.pvp-details-content ul {
    list-style: none;
    padding: 0;
}

.switchbot-details-content li,
.title-details-content li,
.guild-details-content li,
.pvp-details-content li {
    padding: 6px 0;
    padding-left: 18px;
    position: relative;
    font-size: 0.8rem;
    color: rgba(232, 220, 200, 0.8);
    border-bottom: 1px solid rgba(225, 190, 142, 0.08);
}

.switchbot-details-content li::before,
.title-details-content li::before,
.guild-details-content li::before,
.pvp-details-content li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--primary-gold);
    font-size: 7px;
    top: 50%;
    transform: translateY(-50%);
}

.ui-placeholder-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(225, 190, 142, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.guild-ui-row {
    max-width: 850px;
    margin: 25px auto 0;
    position: relative;
    z-index: 1;
}

.guild-ui-scene img {
    width: 100%;
    display: block;
}

@media (max-width: 768px) {
    .switchbot-section,
    .title-rank-section,
    .guild-section,
    .pvp-section {
        padding: 50px 30px;
    }
    .switchbot-feature-display,
    .title-feature-display,
    .guild-feature-display,
    .pvp-feature-display {
        flex-direction: column;
    }
    .switchbot-icon-box,
    .title-icon-box,
    .guild-icon-box,
    .pvp-icon-box {
        flex: none;
        width: 100%;
    }
    .switchbot-tab,
    .title-tab,
    .guild-tab,
    .pvp-tab {
        font-size: 10px;
        padding: 8px 12px;
    }
}

@media (max-width: 500px) {
    .switchbot-section,
    .title-rank-section,
    .guild-section,
    .pvp-section {
        padding: 40px 15px;
    }
    .switchbot-tab,
    .title-tab,
    .guild-tab,
    .pvp-tab {
        font-size: 9px;
        padding: 7px 10px;
    }
    .switchbot-details-box,
    .title-details-box,
    .guild-details-box,
    .pvp-details-box {
        padding: 15px;
    }
}

/* ===== Weekly Ranking Cards Grid ===== */
.weekly-ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.weekly-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.weekly-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(225, 190, 142, 0.15);
}

.weekly-card-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.weekly-card h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-gold);
    margin-bottom: 5px;
}

.weekly-card p {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.6);
}

/* ===== Horse System — Evolution Stages ===== */
.horse-evolution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 900px;
    margin: 0 auto 25px;
    padding: 0 20px;
}

.horse-stage {
    flex: 1;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 20px 18px 12px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.horse-stage:hover {
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(225, 190, 142, 0.12);
}

.horse-stage-rank {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-brown);
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horse-stage-content h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: var(--text-gold);
    margin-bottom: 4px;
}

.horse-stage-content p {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.6);
    margin-bottom: 8px;
}

.horse-stage-stats {
    margin-bottom: 10px;
}

.horse-stat {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: var(--primary-gold);
    background: rgba(225, 190, 142, 0.1);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(225, 190, 142, 0.2);
}

.horse-stage-bar {
    height: 4px;
    background: rgba(225, 190, 142, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.horse-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-gold), rgba(225, 190, 142, 0.6));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.horse-stage-arrow {
    color: var(--primary-gold);
    font-size: 20px;
    padding: 0 8px;
    opacity: 0.5;
}

.horse-bonus-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(15, 12, 10, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 8px;
    padding: 14px 20px;
    flex-wrap: wrap;
}

.horse-bonus-item {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.7);
    padding: 0 18px;
    text-align: center;
}

.horse-bonus-val {
    color: var(--primary-gold);
    font-weight: 700;
}

.horse-bonus-divider {
    width: 1px;
    height: 20px;
    background: rgba(225, 190, 142, 0.2);
}

@media (max-width: 768px) {
    .horse-evolution {
        flex-direction: column;
        gap: 25px;
    }
    .horse-stage-arrow {
        transform: rotate(90deg);
        padding: 0;
    }
    .horse-bonus-strip {
        flex-direction: column;
        gap: 8px;
    }
    .horse-bonus-divider {
        width: 60px;
        height: 1px;
    }
}

/* ===== Rankings — Podium Layout ===== */
.ranking-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto 25px;
    padding: 0 20px;
}

.podium-place {
    text-align: center;
    flex: 1;
}

.podium-crown {
    font-size: 22px;
    margin-bottom: 4px;
    animation: crown-float 2s ease-in-out infinite;
}

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

.podium-medal {
    font-size: 28px;
    margin-bottom: 6px;
}

.podium-label {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-gold);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.podium-block {
    background: rgba(26, 21, 18, 0.7);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 8px 8px 0 0;
    padding: 18px 12px;
    transition: all 0.3s ease;
}

.podium-1st .podium-block {
    min-height: 100px;
    border-color: rgba(225, 190, 142, 0.4);
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.12) 0%, rgba(26, 21, 18, 0.7) 100%);
}

.podium-2nd .podium-block {
    min-height: 75px;
}

.podium-3rd .podium-block {
    min-height: 55px;
}

.podium-place:hover .podium-block {
    border-color: var(--primary-gold);
    box-shadow: 0 -5px 20px rgba(225, 190, 142, 0.1);
}

.podium-reward {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.7);
    line-height: 1.5;
}

.ranking-categories-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.ranking-cat-tag {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.6);
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.12);
    padding: 6px 14px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.ranking-cat-tag:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

@media (max-width: 500px) {
    .ranking-podium {
        gap: 6px;
    }
    .podium-medal {
        font-size: 22px;
    }
}

/* ===== BattlePass — Reward Track ===== */
.bp-track {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 900px;
    margin: 0 auto 25px;
    padding: 0 20px;
    position: relative;
}

.bp-track-line {
    position: absolute;
    top: 14px;
    left: 60px;
    right: 60px;
    height: 3px;
    background: rgba(225, 190, 142, 0.15);
    border-radius: 2px;
    z-index: 0;
}

.bp-tier {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.bp-tier-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dark-brown);
    border: 3px solid rgba(225, 190, 142, 0.3);
    margin: 0 auto 12px;
    position: relative;
}

.bp-tier-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: rgba(225, 190, 142, 0.4);
    border-radius: 50%;
}

.bp-dot-premium {
    border-color: var(--primary-gold);
    box-shadow: 0 0 12px rgba(225, 190, 142, 0.3);
}

.bp-dot-premium::after {
    background: var(--primary-gold);
}

.bp-tier-box {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 8px;
    padding: 14px 10px;
    transition: all 0.3s ease;
}

.bp-box-premium {
    border-color: rgba(225, 190, 142, 0.3);
    background: linear-gradient(180deg, rgba(225, 190, 142, 0.08) 0%, rgba(26, 21, 18, 0.6) 100%);
}

.bp-tier:hover .bp-tier-box {
    border-color: var(--primary-gold);
    transform: translateY(-2px);
}

.bp-tier-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(232, 220, 200, 0.5);
    margin-bottom: 4px;
}

.bp-box-premium .bp-tier-label {
    color: var(--primary-gold);
}

.bp-tier-name {
    display: block;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-gold);
    font-weight: 600;
    margin-bottom: 4px;
}

.bp-tier-desc {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
}

.bp-info-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.bp-info-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    flex: 1;
}

.bp-badge-premium {
    border-color: rgba(225, 190, 142, 0.25);
}

.bp-badge-icon {
    font-size: 18px;
    color: var(--primary-gold);
}

.bp-tier-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    margin-bottom: 4px;
}

.bp-badge-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.bp-info-badge strong {
    display: block;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    color: var(--text-gold);
    margin-bottom: 2px;
}

.bp-info-badge p {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
    margin: 0;
}

@media (max-width: 768px) {
    .bp-track {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .bp-track-line {
        display: none;
    }
    .bp-info-row {
        flex-direction: column;
    }
}

/* ===== World Maps — Tabs ===== */
#maps .section-header {
    margin-bottom: 20px;
}

.map-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 0 20px;
}

.map-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 8px;
    background: rgba(26, 21, 18, 0.4);
    color: rgba(232, 220, 200, 0.5);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-tab:hover {
    border-color: rgba(225, 190, 142, 0.3);
    color: var(--text-light);
}

.map-tab--active {
    border-color: rgba(225, 190, 142, 0.4);
    background: rgba(225, 190, 142, 0.08);
    color: var(--text-light);
}

.map-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zone-safe-dot { background: #4ade80; }
.zone-pvm-dot { background: #60a5fa; }
.zone-pvp-dot { background: #f87171; }

.map-tab-panel {
    display: none;
}

.map-tab-panel--active {
    display: block;
}

.map-tab-desc {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: rgba(232, 220, 200, 0.5);
    margin-bottom: 8px;
    padding: 0 20px;
}

.map-level {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: rgba(232, 220, 200, 0.45);
    margin-top: 2px;
    display: block;
}

/* ===== World Maps — Region Grid ===== */
.map-regions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 900px;
    margin: 0 auto 10px;
    padding: 0 20px;
}

.map-region-card {
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.map-region-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 8px 0 0 8px;
}

.map-region-card[data-zone="safe"]::before { background: #4ade80; }
.map-region-card[data-zone="pvm"]::before { background: #60a5fa; }
.map-region-card[data-zone="pvp"]::before { background: #f87171; }
.map-region-card[data-zone="special"]::before { background: var(--primary-gold); }

.map-region-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.map-region-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.map-zone-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.zone-safe { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.zone-pvm { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.zone-pvp { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.zone-special { background: rgba(225, 190, 142, 0.15); color: var(--primary-gold); }

.map-region-header h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 600;
    margin: 0;
}

.map-region-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
}

.map-dot {
    width: 3px;
    height: 3px;
    background: rgba(225, 190, 142, 0.3);
    border-radius: 50%;
}

.map-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    flex-wrap: wrap;
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
}

.map-zone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.map-zone-dot.zone-safe { background: #4ade80; }
.map-zone-dot.zone-pvm { background: #60a5fa; }
.map-zone-dot.zone-pvp { background: #f87171; }
.map-zone-dot.zone-special { background: var(--primary-gold); }

@media (max-width: 768px) {
    .map-regions {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .map-regions {
        grid-template-columns: 1fr 1fr;
    }
}

/* Interactive Map Embed */
.interactive-map-wrap {
    max-width: 560px;
    margin: 15px auto 0;
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(14, 10, 4, 0.4);
    -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}

.imap-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    background: url('../pres-assets/Ui-Pres/worldmap/bg1.png') center center / cover no-repeat;
}

.imap-wrap {
    position: relative;
    width: 526px;
    height: 411px;
}

.imap-zone {
    position: absolute;
    cursor: pointer;
}

.imap-zone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.imap-zone .imap-hover,
.imap-zone .imap-down { display: none; }
.imap-zone:hover .imap-norm { display: none; }
.imap-zone:hover .imap-hover { display: block; }
.imap-zone:active .imap-hover { display: none; }
.imap-zone:active .imap-down { display: block; }

.imap-tip {
    position: fixed;
    background: rgba(10, 6, 1, 0.96);
    border: 1px solid #c9a84c;
    color: #e8d5a3;
    padding: 5px 14px;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    pointer-events: none;
    display: none;
    z-index: 999;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    white-space: nowrap;
}

.imap-info {
    margin-top: 8px;
    height: 22px;
    color: #c9a84c;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
    opacity: 0.5;
    transition: opacity 0.15s;
}

@media (max-width: 600px) {
    .interactive-map-wrap {
        max-width: 100%;
    }
    .imap-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 526 / 411;
    }
}

/* ===== Mining — Stats & Progress Bars ===== */
.mining-stats {
    max-width: 700px;
    margin: 0 auto 20px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mining-stat-row {
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 8px;
    padding: 14px 18px;
}

.mining-stat-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mining-stat-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-light);
    font-weight: 600;
}

.mining-stat-value {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--primary-gold);
    font-weight: 600;
}

.mining-progress-bar {
    height: 22px;
    background: rgba(15, 12, 10, 0.6);
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid rgba(225, 190, 142, 0.08);
}

.mining-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(225, 190, 142, 0.4), var(--primary-gold));
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    transition: width 0.8s ease;
}

.mining-fill-blue {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.4), #60a5fa);
}

.mining-fill-green {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.4), #4ade80);
}

.mining-progress-text {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: rgba(15, 13, 11, 0.9);
}

.mining-ore-strip {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.mining-ore {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.6);
    background: rgba(26, 21, 18, 0.4);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(225, 190, 142, 0.08);
}

.ore-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ore-common { background: #9ca3af; }
.ore-uncommon { background: #4ade80; }
.ore-rare { background: #60a5fa; }
.ore-epic { background: #c084fc; }
.ore-legendary { background: var(--primary-gold); box-shadow: 0 0 6px rgba(225, 190, 142, 0.5); }

/* Mining Detail Cards */
.mining-detail-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 800px;
    margin: 25px auto -60px;
    position: relative;
    z-index: 2;
}

.mining-detail-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.18);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.3s ease;
}

.mining-detail-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.mining-detail-num {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-gold);
    opacity: 0.5;
    flex-shrink: 0;
    padding-top: 2px;
}

.mining-detail-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 0.9rem;
    color: var(--text-gold);
    margin: 0 0 4px;
}

.mining-detail-desc {
    font-size: 0.78rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .mining-detail-cards {
        grid-template-columns: 1fr;
    }
}

/* Mining Image Showcase */
.mining-image-showcase {
    max-width: 900px;
    margin: 0 auto;
}

/* Fishing Image Showcase */
.fishing-image-showcase {
    max-width: 900px;
    margin: 0 auto;
}

/* ===== Fishing — Rarity Tiers ===== */
.fishing-tiers {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 800px;
    margin: 0 auto -80px;
    position: relative;
    z-index: 2;
}

.fishing-tier {
    background: rgba(26, 21, 18, 0.5);
    border-radius: 10px;
    padding: 18px 22px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.fishing-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.tier-common { border: 1px solid rgba(156, 163, 175, 0.2); }
.tier-common::before { background: #9ca3af; }
.tier-uncommon { border: 1px solid rgba(74, 222, 128, 0.2); }
.tier-uncommon::before { background: #4ade80; }
.tier-rare { border: 1px solid rgba(96, 165, 250, 0.2); }
.tier-rare::before { background: #60a5fa; }

.fishing-tier:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.tier-common:hover { border-color: #9ca3af; }
.tier-uncommon:hover { border-color: #4ade80; }
.tier-rare:hover { border-color: #60a5fa; }

.fishing-tier-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tier-rarity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tier-common .tier-rarity-dot { background: #9ca3af; }
.tier-uncommon .tier-rarity-dot { background: #4ade80; }
.tier-rare .tier-rarity-dot { background: #60a5fa; }

.fishing-tier-header h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.tier-common h4 { color: #9ca3af; }
.tier-uncommon h4 { color: #4ade80; }
.tier-rare h4 { color: #60a5fa; }

.fishing-tier p {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
    margin-bottom: 8px;
}

.tier-chance {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 20px;
    font-style: normal;
}

.tier-common .tier-chance {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.2);
}

.tier-uncommon .tier-chance {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.tier-rare .tier-chance {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.fish-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.fish-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease;
    border-radius: 6px;
    background: rgba(10, 8, 6, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.08);
    padding: 3px;
}

.fish-icon:hover {
    transform: scale(1.35);
    filter: drop-shadow(0 2px 8px rgba(225, 190, 142, 0.4)) brightness(1.2);
    z-index: 2;
    position: relative;
    border-color: rgba(225, 190, 142, 0.3);
}

/* Fish tooltip */
.fish-tooltip {
    position: fixed;
    background: rgba(15, 10, 8, 0.95);
    border: 1px solid rgba(225, 190, 142, 0.2);
    color: #e8d5a3;
    padding: 6px 14px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 9999;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    display: none;
}

.fishing-req-strip {
    display: flex;
    justify-content: center;
    gap: 15px;
    max-width: 700px;
    margin: 0 auto 20px;
    padding: 0 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

#fishing .section-header {
    margin-bottom: 15px;
    position: relative;
    z-index: 3;
}

.fishing-req {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(26, 21, 18, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 10px 16px;
    flex: 1;
    min-width: 160px;
}

.fishing-req-icon {
    font-size: 20px;
}

.fishing-req-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.fishing-req strong {
    display: block;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    color: var(--text-gold);
    margin-bottom: 1px;
}

.fishing-req p {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
    margin: 0;
}

@media (max-width: 768px) {
    .fishing-tiers {
        grid-template-columns: 1fr 1fr;
    }
    .fishing-req-strip {
        flex-direction: column;
    }
}
@media (max-width: 500px) {
    .fishing-tiers {
        grid-template-columns: 1fr;
    }
}

/* ===== Kingdom Blessing Section ===== */
.kingdom-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/Kingdom%20blessing.png') center center / cover no-repeat;
}

.kingdom-layout {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Kingdom Maps — Modern Combine Layout */
.kingdom-maps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 35px;
    position: relative;
}

.kingdom-map {
    position: relative;
    width: 260px;
    height: 260px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kingdom-map img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2;
}

.kingdom-map-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

.kingdom-map--shinsoo .kingdom-map-glow {
    background: radial-gradient(circle, rgba(197, 58, 58, 0.35) 0%, rgba(197, 58, 58, 0) 70%);
}

.kingdom-map--jinno .kingdom-map-glow {
    background: radial-gradient(circle, rgba(59, 107, 197, 0.35) 0%, rgba(59, 107, 197, 0) 70%);
}

.kingdom-map:hover {
    transform: scale(1.15);
    z-index: 10;
}

.kingdom-map:hover .kingdom-map-glow {
    opacity: 1;
    width: 220px;
    height: 220px;
}

.kingdom-map:hover img {
    filter: drop-shadow(0 8px 35px rgba(0, 0, 0, 0.6)) brightness(1.1);
}

.kingdom-map--shinsoo {
    margin-right: 10px;
}

.kingdom-map--jinno {
    margin-left: 10px;
}

/* Center VS with merge ring */
.kingdom-maps-center {
    position: relative;
    z-index: 5;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kingdom-merge-ring {
    position: absolute;
    width: 56px;
    height: 56px;
    border: 2px solid rgba(225, 190, 142, 0.25);
    border-radius: 50%;
    animation: kingdom-ring-pulse 3s ease-in-out infinite;
}

.kingdom-merge-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 50%;
}

.kingdom-vs-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: var(--primary-gold);
    text-shadow: 0 0 15px rgba(225, 190, 142, 0.4);
    letter-spacing: 3px;
    z-index: 2;
}

@keyframes kingdom-ring-pulse {
    0%, 100% { transform: scale(1); border-color: rgba(225, 190, 142, 0.25); }
    50% { transform: scale(1.1); border-color: rgba(225, 190, 142, 0.45); }
}

/* Combined state — maps overlap */
.kingdom-maps.combined .kingdom-map--shinsoo {
    transform: translateX(40px);
}

.kingdom-maps.combined .kingdom-map--jinno {
    transform: translateX(-40px);
}

.kingdom-maps.combined .kingdom-map--shinsoo img {
    opacity: 0.8;
    mix-blend-mode: screen;
}

.kingdom-maps.combined .kingdom-map--jinno img {
    opacity: 0.8;
    mix-blend-mode: screen;
}

.kingdom-maps.combined .kingdom-merge-ring {
    animation: kingdom-ring-active 1.5s ease-in-out infinite;
    border-color: var(--primary-gold);
    box-shadow: 0 0 20px rgba(225, 190, 142, 0.3);
}

@keyframes kingdom-ring-active {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(225, 190, 142, 0.3); }
    50% { transform: scale(1.15); box-shadow: 0 0 35px rgba(225, 190, 142, 0.5); }
}

.kingdom-blessings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.kingdom-blessing-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.kingdom-blessing-card:hover {
    border-color: rgba(225, 190, 142, 0.35);
    transform: translateY(-2px);
}

.kingdom-blessing--active {
    border-color: rgba(225, 190, 142, 0.35);
    background: rgba(225, 190, 142, 0.1);
}

.kb-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
    opacity: 0.75;
    transition: all 0.3s ease;
}

.kingdom-blessing--active .kb-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(225, 190, 142, 0.4));
}

.kb-card--centered {
    grid-column: 2;
}

.kb-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    color: var(--text-gold);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.kb-value {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
}

.kingdom-blessing--active .kb-value {
    color: var(--primary-gold);
    font-weight: 600;
}

.kingdom-full-bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.06) 0%, rgba(76, 175, 80, 0.12) 50%, rgba(76, 175, 80, 0.06) 100%);
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: 10px;
}

.kingdom-full-badge {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    background: linear-gradient(135deg, #43a047, #2e7d32);
    padding: 5px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
    white-space: nowrap;
}

.kingdom-full-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(200, 230, 200, 0.85);
    font-weight: 500;
}

@media (max-width: 768px) {
    .kingdom-section { padding: 50px 25px; }
    .kingdom-map { width: 200px; height: 200px; }
    .kingdom-map img { height: 170px; }
    .kingdom-blessings { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .kingdom-maps { flex-direction: column; gap: 10px; }
    .kingdom-map--shinsoo { margin-right: 0; }
    .kingdom-map--jinno { margin-left: 0; }
    .kingdom-map { width: 180px; height: 180px; }
    .kingdom-map img { height: 150px; }
    .kingdom-blessings { grid-template-columns: 1fr 1fr; }
    .kingdom-full-bonus { flex-direction: column; text-align: center; }
}

/* ===== Pet System Section ===== */
.pet-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(20.html).webp') center center / cover no-repeat;
}

.pet-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.game-ui-image {
    flex: none;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}

.game-ui-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.game-ui-placeholder {
    flex: none;
    width: 650px;
    max-width: 100%;
    height: 550px;
    border: 2px dashed rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.3);
}

.blacksmith-section .bs-left .game-ui-placeholder {
    width: 280px;
    height: 360px;
    flex: 0 0 280px;
}

.game-ui-placeholder span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(225, 190, 142, 0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pet-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pet-feat-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 10px;
    padding: 14px 16px;
    transition: all 0.3s ease;
}

.pet-feat-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
    transform: translateX(3px);
}

.pet-feat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.pet-feat-num {
    font-size: 16px;
    color: var(--primary-gold);
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    text-shadow: 0 0 8px rgba(225, 190, 142, 0.3);
}

.pet-feat-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-gold);
    font-weight: 600;
    margin: 0;
}

.pet-feat-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.6);
    line-height: 1.5;
    margin: 0;
    padding-left: 32px;
}

/* ── Pet Tables ── */
.pet-data-panel {
    margin-top: 30px;
    padding: 28px 24px;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.pet-data-panel .pet-tables-row {
    margin-top: 0;
}

.pet-data-panel .pet-table-wrap {
    margin-top: 24px;
}

.pet-data-panel .pet-bonuses-wrap {
    max-width: none;
}

.pet-tables-row {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    position: relative;
    z-index: 1;
    justify-content: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pet-tables-row .pet-table-wrap {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.pet-tables-row .horse-bonus-table {
    width: 100%;
    max-width: none;
}

.pet-table-wrap {
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.pet-bonuses-wrap {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pet-bonuses-wrap .horse-bonus-table {
    width: 100%;
    max-width: none;
}

.pet-bonuses-note {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.65);
    line-height: 1.6;
    text-align: center;
    margin: 16px auto 0;
    max-width: 550px;
    font-style: italic;
}

.pet-table-note {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.55);
    line-height: 1.5;
    margin: 0 0 14px;
    padding-left: 2px;
}

.pet-table-note::before {
    content: '▸ ';
    color: var(--primary-gold);
    opacity: 0.6;
}

.pet-item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pet-item-cell img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
    .pet-section { padding: 50px 25px; }
    .pet-features { grid-template-columns: 1fr; }
    .game-ui-placeholder { flex: none; width: 100%; }
    .pet-tables-row { flex-direction: column; }
    .pet-data-panel { padding: 20px 16px; }
}

@media (max-width: 500px) {
    .pet-section { padding: 40px 15px; }
    .pet-feat-card { padding: 12px; }
    .pet-feat-title { font-size: 0.8rem; }
    .pet-feat-desc { font-size: 0.7rem; }
    .pet-item-cell img { width: 22px; height: 22px; }
    .pet-table-note { font-size: 10px; }
}

/* ===== Horse System Section (Redesigned) ===== */
.horse-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(18.html).webp') center center / cover no-repeat;
}

.horse-layout {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.horse-stages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
}

.horse-stage-card {
    flex: 1;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 22px 18px 16px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.horse-stage-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(225, 190, 142, 0.12);
}

.horse-stage-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.horse-stage-rank {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-brown);
    border: 1.5px solid var(--primary-gold);
    color: var(--primary-gold);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 9px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horse-stage-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: var(--text-gold);
    font-weight: 600;
    margin: 0 0 4px;
}

.horse-stage-lvl {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: var(--primary-gold);
    background: rgba(225, 190, 142, 0.1);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(225, 190, 142, 0.2);
    display: inline-block;
    margin-bottom: 6px;
}

.horse-stage-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
    margin: 0;
}

.horse-stage-arrow {
    color: var(--primary-gold);
    font-size: 20px;
    padding: 0 10px;
    opacity: 0.5;
}

.horse-layout .game-ui-placeholder {
    flex: none;
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
}

/* ── Horse Task Info (inside stage card) ── */
.horse-task-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(225, 190, 142, 0.12);
}

.horse-task-label {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-gold);
    opacity: 0.7;
}

.horse-task-line {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.6);
    margin: 2px 0 6px;
    line-height: 1.4;
}

.horse-task-line:last-child {
    margin-bottom: 0;
}

.horse-task-none {
    font-style: italic;
    opacity: 0.5;
}

/* ── Horse Data Panel ── */
.horse-data-panel {
    margin: 30px auto 0;
    padding: 28px 24px;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    position: relative;
    z-index: 1;
    max-width: 750px;
}

.horse-data-panel .horse-bonus-table-wrap {
    margin: 0;
}

.horse-data-panel .horse-special-items {
    margin: 24px 0 0;
}

.horse-data-panel .horse-bonus-table {
    width: 100%;
    max-width: none;
}

.horse-data-panel .horse-special-card {
    background: rgba(26, 21, 18, 0.4);
}

@media (max-width: 768px) {
    .horse-data-panel { padding: 20px 16px; }
}

/* ── Horse Bonus Table ── */
.horse-bonus-table-wrap {
    margin: 30px 0;
}

.horse-bonus-table {
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

.horse-bonus-table thead th {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-gold);
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(225, 190, 142, 0.35);
    background: rgba(26, 21, 18, 0.85);
}

.horse-bonus-table tbody td {
    padding: 9px 14px;
    color: rgba(232, 220, 200, 0.7);
    border-bottom: 1px solid rgba(225, 190, 142, 0.12);
    background: rgba(26, 21, 18, 0.7);
}

.horse-bonus-table tbody tr:hover td {
    background: rgba(26, 21, 18, 0.9);
}

.horse-bonus-table tbody td.horse-bonus-scale {
    color: #89b88d;
}

.horse-bonus-table tbody td.horse-bonus-max {
    color: #89b88d;
    font-weight: 600;
}

@media (max-width: 500px) {
    .horse-bonus-table {
        font-size: 10px;
    }
    .horse-bonus-table thead th {
        font-size: 9px;
        padding: 8px 8px;
    }
    .horse-bonus-table tbody td {
        padding: 7px 8px;
    }
}

/* ── Horse Special Items ── */
.horse-special-items {
    margin: 30px 0;
}

.horse-special-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    justify-content: center;
}

.horse-special-header::before,
.horse-special-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3));
}

.horse-special-header::after {
    background: linear-gradient(90deg, rgba(225, 190, 142, 0.3), transparent);
}

.horse-special-header span {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary-gold);
    white-space: nowrap;
}

.horse-special-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.horse-special-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 18px 16px;
    text-align: center;
    width: 160px;
    transition: all 0.3s ease;
}

.horse-special-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(225, 190, 142, 0.12);
}

.horse-special-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    margin-bottom: 8px;
}

.horse-special-value {
    display: block;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 6px;
}

.horse-special-desc {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .horse-section { padding: 50px 25px; }
    .horse-stages { flex-direction: column; gap: 25px; }
    .horse-stage-arrow { transform: rotate(90deg); padding: 0; }
    .horse-special-card { width: 140px; }
}

@media (max-width: 500px) {
    .horse-section { padding: 40px 15px; }
    .horse-stage-card { padding: 16px 12px 12px; }
    .horse-stage-name { font-size: 12px; }
    .horse-stage-desc { font-size: 10px; }
    .horse-special-card { width: 120px; padding: 14px 10px; }
    .horse-special-card img { width: 32px; height: 32px; }
    .horse-special-value { font-size: 14px; }
}

/* ===== Dungeons Section ===== */
.dungeon-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/dungeon%20info.png') center center / cover no-repeat;
}

.dungeon-section .game-ui-placeholder {
    flex: none;
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Dungeon Slider */
.dg-slider {
    max-width: 900px;
    margin: 24px auto 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.dg-slider-track {
    position: relative;
}

.dg-slide {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 20px;
}

.dg-slide--active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.dg-slide-render {
    flex: 1;
    min-width: 0;
}

.dg-slide-render img {
    width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.dg-slide-details {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dg-slide-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 16px;
    color: var(--primary-gold);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.dg-detail-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dg-detail-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.3s ease;
}

.dg-detail-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.dg-detail-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dg-detail-value {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dg-element-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.dg-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.dg-slider-btn {
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 8px;
    color: var(--text-gold);
    font-size: 20px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.dg-slider-btn:hover {
    border-color: rgba(225, 190, 142, 0.4);
    background: rgba(26, 21, 18, 0.7);
}

.dg-slider-dots {
    display: flex;
    gap: 8px;
}

.dg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(225, 190, 142, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dg-dot--active {
    background: var(--primary-gold);
    box-shadow: 0 0 6px rgba(225, 190, 142, 0.3);
}

@media (max-width: 768px) {
    .dungeon-section { padding: 50px 25px; }
    .dg-slide { flex-direction: column; }
    .dg-slide-details { flex: none; width: 100%; }
}

@media (max-width: 500px) {
    .dungeon-section { padding: 40px 15px; }
    .dg-slide-details { padding: 15px; }
}

/* ===== Wide & Animation Placeholders ===== */
.game-ui-placeholder--wide {
    flex: none;
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
    height: 550px;
}

.game-anim-placeholder {
    width: 650px;
    max-width: 100%;
    height: 550px;
    margin: 0 auto;
    border: 2px dashed rgba(96, 165, 250, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.3);
    position: relative;
    z-index: 1;
}

.game-anim-placeholder span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(96, 165, 250, 0.35);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.guideline-ui-row {
    max-width: 850px;
    margin: 25px auto 0;
    position: relative;
    z-index: 1;
}

.guideline-ui-row img {
    width: 100%;
    display: block;
}

/* ===== Sash Section (Redesigned) ===== */
.sash-section {
    padding: 60px 60px 40px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 5, 4, 0.88) 0%, rgba(20, 12, 8, 0.80) 50%, rgba(10, 5, 4, 0.90) 100%),
        url('../pres-assets/images/Backgrounds/image%20(20.html).webp') center center / cover no-repeat;
}

.sash-layout {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.sash-render-box {
    text-align: center;
    margin-bottom: 20px;
}

.sash-render-img {
    max-width: 100%;
    width: 520px;
    height: auto;
    border-radius: 8px;
}

.sash-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.sash-tier {
    background: rgba(26, 21, 18, 0.6);
    border-radius: 10px;
    padding: 18px 14px 14px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.sash-tier:hover {
    transform: translateY(-3px);
}

.sash-tier--common { border: 1px solid rgba(156, 163, 175, 0.2); }
.sash-tier--rare { border: 1px solid rgba(96, 165, 250, 0.25); }
.sash-tier--epic { border: 1px solid rgba(192, 132, 252, 0.25); }
.sash-tier--legendary { border: 1px solid rgba(225, 190, 142, 0.3); }

.sash-tier--common:hover { border-color: #9ca3af; }
.sash-tier--rare:hover { border-color: #60a5fa; }
.sash-tier--epic:hover { border-color: #c084fc; }
.sash-tier--legendary:hover { border-color: var(--primary-gold); box-shadow: 0 8px 20px rgba(225, 190, 142, 0.15); }

.sash-tier-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.sash-tier-rank {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-brown);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 10px;
    font-weight: 700;
}

.sash-tier--common .sash-tier-rank { border: 2px solid #9ca3af; color: #9ca3af; }
.sash-tier--rare .sash-tier-rank { border: 2px solid #60a5fa; color: #60a5fa; }
.sash-tier--epic .sash-tier-rank { border: 2px solid #c084fc; color: #c084fc; }
.sash-tier--legendary .sash-tier-rank { border: 2px solid var(--primary-gold); color: var(--primary-gold); }

.sash-tier h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
}

.sash-tier--common h4 { color: #9ca3af; }
.sash-tier--rare h4 { color: #60a5fa; }
.sash-tier--epic h4 { color: #c084fc; }
.sash-tier--legendary h4 { color: var(--primary-gold); }

.sash-tier-bonus {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    margin-bottom: 6px;
}

.sash-tier--common .sash-tier-bonus { color: #9ca3af; background: rgba(156, 163, 175, 0.1); }
.sash-tier--rare .sash-tier-bonus { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
.sash-tier--epic .sash-tier-bonus { color: #c084fc; background: rgba(192, 132, 252, 0.1); }
.sash-tier--legendary .sash-tier-bonus { color: var(--primary-gold); background: rgba(225, 190, 142, 0.1); }

.sash-tier p {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
    margin: 0;
}

.sash-features {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.sash-feat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 20px;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.sash-feat:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.sash-feat-icon {
    font-size: 14px;
    color: var(--primary-gold);
    font-weight: 700;
}

.sash-feat span:last-child {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.7);
}

@media (max-width: 768px) {
    .sash-section { padding: 50px 25px; }
    .sash-tiers { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
    .sash-tiers { grid-template-columns: 1fr; }
    .sash-features { flex-direction: column; align-items: center; }
}

/* ===== Title & Rank — Redesigned ===== */
.title-layout {
    display: flex;
    gap: 20px;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    align-items: stretch;
}

.title-card-group {
    flex: 1;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.title-group-label {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    color: var(--text-gold);
    font-weight: 600;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.1);
    letter-spacing: 1px;
}

.title-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 6px;
    align-content: start;
}

.title-chips::-webkit-scrollbar {
    width: 4px;
}

.title-chips::-webkit-scrollbar-track {
    background: rgba(26, 21, 18, 0.5);
    border-radius: 4px;
}

.title-chips::-webkit-scrollbar-thumb {
    background: rgba(225, 190, 142, 0.3);
    border-radius: 4px;
}

.title-chips::-webkit-scrollbar-thumb:hover {
    background: rgba(225, 190, 142, 0.5);
}

.title-chip-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.title-chip {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    transition: all 0.3s ease;
}

.title-chip--red .title-chip-icon { filter: hue-rotate(-30deg) saturate(1.3) drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.title-chip--red { border-color: rgba(248, 113, 113, 0.2); }
.title-chip--red .title-chip-val { color: #89b88d; }
.title-chip--red:hover { border-color: rgba(248, 113, 113, 0.4); }

.title-chip--blue .title-chip-icon { filter: hue-rotate(90deg) saturate(1.2) drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.title-chip--blue { border-color: rgba(96, 165, 250, 0.2); }
.title-chip--blue .title-chip-val { color: #89b88d; }
.title-chip--blue:hover { border-color: rgba(96, 165, 250, 0.4); }

.title-chip--green .title-chip-icon { filter: hue-rotate(150deg) saturate(1.3) drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.title-chip--green { border-color: rgba(74, 222, 128, 0.2); }
.title-chip--green .title-chip-val { color: #89b88d; }
.title-chip--green:hover { border-color: rgba(74, 222, 128, 0.4); }

.title-chip--purple .title-chip-icon { filter: hue-rotate(0deg) saturate(1) drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.title-chip--purple { border-color: rgba(192, 132, 252, 0.2); }
.title-chip--purple .title-chip-val { color: #89b88d; }
.title-chip--purple:hover { border-color: rgba(192, 132, 252, 0.4); }

.title-chip--cyan .title-chip-icon { filter: hue-rotate(120deg) saturate(1.5) brightness(1.1) drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.title-chip--cyan { border-color: rgba(34, 211, 238, 0.2); }
.title-chip--cyan .title-chip-val { color: #89b88d; }
.title-chip--cyan:hover { border-color: rgba(34, 211, 238, 0.4); }

.title-chip--gold .title-chip-icon { filter: hue-rotate(-60deg) saturate(0.8) brightness(1.2) drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.title-chip--gold { border-color: rgba(225, 190, 142, 0.2); }
.title-chip--gold .title-chip-val { color: #89b88d; }
.title-chip--gold:hover { border-color: rgba(225, 190, 142, 0.4); }

.title-chip-name {
    flex: 1;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 600;
}

.title-chip-val {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: var(--primary-gold);
    font-weight: 600;
    white-space: nowrap;
}

.rank-scale {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.rank-end {
    text-align: center;
    min-width: 70px;
}

.rank-label {
    display: block;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}

.rank-end--neg .rank-label { color: #f87171; }
.rank-end--pos .rank-label { color: #4ade80; }

.rank-bonus {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
}

.rank-bar {
    flex: 1;
    height: 6px;
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.3), rgba(225, 190, 142, 0.2) 50%, rgba(74, 222, 128, 0.3));
    border-radius: 3px;
    position: relative;
}

.rank-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--dark-brown);
    border: 2px solid var(--primary-gold);
    border-radius: 50%;
}

.rank-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.rank-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(15, 12, 10, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.08);
    border-radius: 8px;
    padding: 8px 6px;
}

.rank-info-num {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-gold);
}

.rank-info-text {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    color: rgba(232, 220, 200, 0.5);
    text-align: center;
    margin-top: 2px;
}

.title-rank-image {
    text-align: center;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.title-rank-image img:not(.rank-easter-cat) {
    max-width: 850px;
    width: 100%;
    border-radius: 10px;
}

.rank-easter-cat {
    position: absolute;
    bottom: 12px;
    right: 30px;
    width: 36px !important;
    max-width: 36px !important;
    height: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.rank-easter-cat.visible {
    opacity: 0.7;
    transform: translateY(0);
    pointer-events: auto;
}

.rank-easter-cat.visible:hover {
    opacity: 1;
    transform: scale(1.3);
    cursor: pointer;
}

@media (max-width: 768px) {
    .title-layout { flex-direction: column; }
    .title-chips { grid-template-columns: 1fr; }
}

/* ===== Vote4Buff UI Placeholder ===== */
.vb-ui-placeholder {
    margin-top: 12px;
    width: 650px;
    max-width: 100%;
    height: 550px;
    border: 2px dashed rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.2);
}

.vb-ui-placeholder span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(225, 190, 142, 0.25);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ===== Section Separators ===== */
.content-wrapper > .content-section + .content-section,
.content-wrapper > .content-section + [class*="-section"],
.content-wrapper > [class*="-section"] + .content-section,
.content-wrapper > [class*="-section"] + [class*="-section"] {
    border-top: 1px solid rgba(225, 190, 142, 0.2);
}

.section-sep {
    position: relative;
    height: 2px;
    z-index: 10;
    display: flex;
    justify-content: center;
}

.section-sep::before {
    content: '';
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.5), transparent);
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
}

.content-section::after,
.kingdom-section::after,
.sash-section::after,
.pet-section::after,
.horse-section::after,
.dg-section::after,
.graphics-section::after,
.coming-soon-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.5), transparent);
    box-shadow: 0 0 8px rgba(225, 190, 142, 0.15);
    z-index: 3;
}

/* ===== Rankings — Redesigned ===== */
.rankings-section {
    background: url('../pres-assets/images/Backgrounds/Ranking.png') center center / cover no-repeat !important;
    position: relative;
}

.rankings-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 3, 0.92);
    pointer-events: none;
    z-index: 0;
}

.rankings-section > * {
    position: relative;
    z-index: 1;
}

.rankings-section > * {
    position: relative;
    z-index: 1;
}

.ranking-layout {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ranking-podium-new {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.podium-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 12px;
    padding: 20px 24px 16px;
    min-width: 140px;
    transition: all 0.3s ease;
}

.podium-new:hover {
    border-color: rgba(225, 190, 142, 0.3);
}

.podium-new--1st {
    background: rgba(26, 21, 18, 0.6);
    border-color: rgba(225, 190, 142, 0.25);
    padding: 28px 28px 20px;
    min-width: 160px;
}

.podium-new-crown {
    font-size: 22px;
    color: var(--primary-gold);
    text-shadow: 0 0 12px rgba(225, 190, 142, 0.4);
    margin-bottom: 4px;
}

.podium-medal {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.podium-new--1st .podium-medal {
    width: 60px;
    height: 60px;
}

.podium-new-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--text-light);
    margin-top: 6px;
}

.podium-new-reward {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(232, 220, 200, 0.45);
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.ranking-cats {
    background: rgba(26, 21, 18, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 12px;
    padding: 18px 22px;
}

.ranking-cats-label {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: var(--text-gold);
    font-weight: 600;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.08);
    letter-spacing: 1px;
}

.ranking-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ranking-cat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 12, 10, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.ranking-cat-item:hover {
    border-color: rgba(225, 190, 142, 0.25);
}

.ranking-cat-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.ranking-scoring-note {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--text-light);
    opacity: 0.75;
    margin: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .ranking-podium-new { flex-direction: column; align-items: center; }
    .podium-new { min-width: 200px; }
    .ranking-cat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
    .ranking-cat-grid { grid-template-columns: 1fr; }
}

/* ============================================
           SCROLL PROGRESS BAR
           ============================================ */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-gold), var(--light-gold), #fff5e0, var(--primary-gold));
    background-size: 200% 100%;
    animation: progress-shimmer 3s linear infinite;
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px var(--glow-gold), 0 0 20px rgba(225, 190, 142, 0.3);
}

@keyframes progress-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
           SCROLL TO TOP BUTTON
           ============================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: rgba(26, 21, 18, 0.9);
    border: 1px solid rgba(225, 190, 142, 0.4);
    border-radius: 50%;
    color: var(--primary-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: rgba(225, 190, 142, 0.15);
    border-color: var(--primary-gold);
    box-shadow: 0 4px 20px rgba(225, 190, 142, 0.2);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* ── Gaya Market Showcase ── */
.gaya-showcase {
    margin-top: 40px;
    padding: 30px;
    background: rgba(225, 190, 142, 0.03);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    transition: border-color 0.3s ease;
}

.gaya-showcase:hover {
    border-color: rgba(225, 190, 142, 0.22);
}

.gaya-sub-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    justify-content: center;
}

.gaya-sub-header::before,
.gaya-sub-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.3));
}

.gaya-sub-header::after {
    background: linear-gradient(90deg, rgba(225, 190, 142, 0.3), transparent);
}

.gaya-sub-header span {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary-gold);
    white-space: nowrap;
}

.gaya-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.gaya-content {
    display: flex;
    align-items: center;
    gap: 35px;
}

.gaya-info {
    flex: 1;
    min-width: 0;
}

.gaya-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.85;
}

.gaya-visual {
    flex: 0 0 auto;
}

.gaya-visual img {
    width: 360px;
    height: auto;
    border-radius: 8px;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
    .gaya-showcase {
        padding: 20px;
        margin-top: 30px;
    }
    .gaya-content {
        flex-direction: column;
        gap: 20px;
    }
    .gaya-visual img {
        width: 280px;
    }
}

@media (max-width: 500px) {
    .gaya-showcase {
        padding: 15px;
    }
    .gaya-visual img {
        width: 220px;
    }
    .gaya-sub-header span {
        font-size: 11px;
        letter-spacing: 2px;
    }
}

/* ========================================
           Status Points Section
           ======================================== */
.status-points-section {
    padding: 60px 40px;
    background: url('../pres-assets/images/Backgrounds/Stats.png') center center / cover no-repeat !important;
    position: relative;
}

.status-points-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 3, 0.92);
    pointer-events: none;
    z-index: 0;
}


.status-points-section > * {
    position: relative;
    z-index: 1;
}

.sp-showcase {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 850px;
    margin: 0 auto;
    background: rgba(26, 21, 18, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 12px;
    padding: 30px;
}

.sp-image-side {
    flex: 0 0 260px;
    border-radius: 10px;
    overflow: hidden;
}

.sp-image-side img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center 58%;
    border-radius: 10px;
}

.sp-text-side {
    flex: 1;
    min-width: 0;
}

.sp-chinese-icon {
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
    font-size: 28px;
    color: rgba(225, 190, 142, 0.5);
    display: block;
    margin-bottom: 6px;
}

.sp-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 1.4rem;
    color: var(--text-gold);
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.sp-description {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.7;
    opacity: 0.85;
    margin: 0;
}

.sp-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.sp-features li {
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    color: rgba(232, 220, 200, 0.8);
    padding: 5px 0 5px 16px;
    position: relative;
    line-height: 1.5;
}

.sp-features li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--primary-gold);
    font-size: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.sp-showcase--reverse {
    flex-direction: row-reverse;
}

.sp-image-side--large {
    flex: 0 0 500px;
}

/* Options UI — text in box, image free */
.sp-layout {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.sp-text-box {
    flex: 1;
    min-width: 0;
    background: rgba(26, 21, 18, 0.7);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 12px;
    padding: 28px 26px;
    position: relative;
    z-index: 2;
    margin-right: -30px;
}

.sp-text-box .sp-chinese-icon,
.sp-text-box .sp-title,
.sp-text-box .sp-description,
.sp-text-box .sp-features {
    /* inherit from existing sp- styles */
}

.sp-image-free {
    flex: 0 0 280px;
    position: relative;
    z-index: 1;
}

.sp-image-free img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
}

.sp-image-free--large {
    flex: 0 0 540px;
}

.options-ui-section {
    padding: 60px 40px;
    background: url('../pres-assets/images/Backgrounds/Option.png') center center / cover no-repeat !important;
    position: relative;
}

.options-ui-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 3, 0.92);
    pointer-events: none;
    z-index: 0;
}


.options-ui-section > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    .sp-showcase,
    .sp-showcase--reverse,
    .sp-layout {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .sp-showcase {
        padding: 20px;
    }

    .sp-layout {
        padding: 0;
        gap: 20px;
    }

    .sp-text-box {
        margin-right: 0;
    }

    .sp-image-side,
    .sp-image-side--large {
        flex: none;
        width: 100%;
        max-width: 320px;
    }

    .sp-image-free,
    .sp-image-free--large {
        flex: none;
        width: 100%;
        max-width: 360px;
    }

    .status-points-section,
    .options-ui-section {
        padding: 40px 16px;
    }
}

/* ========================================
           PvP Events Slider
           ======================================== */
.pvp-slider {
    max-width: 900px;
    margin: 24px auto 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.pvp-slider-track {
    position: relative;
}

.pvp-slide {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 20px;
}

.pvp-slide--active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.pvp-slide-render {
    flex: 1;
    min-width: 0;
}

.pvp-slide-render img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.pvp-slide-details {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pvp-slide-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 16px;
    color: var(--primary-gold);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.pvp-slide-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    opacity: 0.85;
    line-height: 1.6;
    margin: 0;
}

.pvp-detail-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.pvp-detail-card {
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pvp-detail-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(225, 190, 142, 0.5);
    font-weight: 600;
}

.pvp-detail-value {
    font-size: 12px;
    color: var(--primary-gold);
    font-weight: 600;
    text-align: right;
}

.pvp-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.pvp-slider-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(225, 190, 142, 0.25);
    background: rgba(26, 21, 18, 0.8);
    color: var(--primary-gold);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pvp-slider-btn:hover {
    border-color: var(--primary-gold);
    background: rgba(225, 190, 142, 0.1);
}

.pvp-slider-dots {
    display: flex;
    gap: 8px;
}

.pvp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(225, 190, 142, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pvp-dot--active {
    background: var(--primary-gold);
    box-shadow: 0 0 6px rgba(225, 190, 142, 0.4);
}

@media (max-width: 768px) {
    .pvp-slide {
        flex-direction: column;
    }
    .pvp-slide-details {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .pvp-slide-details {
        padding: 15px;
    }
}

/* ========================================
           Coming Soon Section
           ======================================== */
.coming-soon-section {
    padding: 60px 30px;
    position: relative;
    background: url('../pres-assets/images/Backgrounds/loked.png') center center / cover no-repeat !important;
}

.coming-soon-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 3, 0.92);
    pointer-events: none;
    z-index: 0;
}


.coming-soon-section > * {
    position: relative;
    z-index: 1;
}

/* Locked Cards Grid */
.locked-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 650px;
    margin: 0 auto 50px;
}

.locked-card {
    background: rgba(20, 17, 14, 0.8);
    border: 1.5px dashed rgba(225, 190, 142, 0.3);
    border-radius: 12px;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.locked-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(225, 190, 142, 0.04) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.locked-card:hover {
    border-color: rgba(225, 190, 142, 0.5);
    box-shadow: 0 0 20px rgba(225, 190, 142, 0.08);
}

.locked-card:hover::before {
    opacity: 1;
}

.locked-icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(225, 190, 142, 0.3));
    transition: transform 0.3s ease;
}

.locked-card:hover .locked-icon-img {
    transform: scale(1.1);
}

.locked-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-gold);
    letter-spacing: 0.5px;
}

.locked-subtitle {
    font-size: 11px;
    color: rgba(232, 220, 200, 0.4);
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Milestone Tracker */
.milestone-tracker {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin-top: 10px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.milestone-card {
    flex: 1;
    background: rgba(20, 17, 14, 0.7);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.milestone-card:hover {
    border-color: rgba(225, 190, 142, 0.3);
    box-shadow: 0 0 16px rgba(225, 190, 142, 0.06);
}

.milestone-ring-wrap {
    position: relative;
    width: 120px;
    height: 120px;
}

.milestone-ring {
    display: block;
}

.milestone-progress {
    transition: stroke-dashoffset 1.5s ease-out;
}

.milestone-ring-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.milestone-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-gold);
    line-height: 1;
}

.milestone-target-inner {
    font-size: 11px;
    color: rgba(232, 220, 200, 0.35);
}

.milestone-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.milestone-label {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.milestone-icon {
    flex-shrink: 0;
}

.milestone-icon--discord {
    color: #5865F2;
}

.milestone-icon--accounts {
    color: #43b581;
}

.milestone-bar {
    width: 100%;
    height: 5px;
    background: rgba(225, 190, 142, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.milestone-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1.5s ease-out;
    position: relative;
    overflow: hidden;
}

.milestone-bar-fill--discord {
    background: linear-gradient(90deg, #4752c4, #5865F2, #7289da);
}

.milestone-bar-fill--accounts {
    background: linear-gradient(90deg, #2d8b5e, #43b581, #5bd49e);
}

.milestone-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: barShimmer 2s infinite;
}

@keyframes barShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.milestone-percent {
    font-size: 11px;
    color: rgba(225, 190, 142, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Invite Friends Banner */
.invite-friends-banner {
    margin-top: 48px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.invite-friends-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 30px;
    background: rgba(26, 21, 18, 0.6);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 12px;
}

.invite-friends-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 168, 76, 0.1);
    border-radius: 12px;
    color: var(--primary-gold);
}

.invite-friends-text {
    flex: 1;
}

.invite-friends-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.invite-friends-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.invite-friends-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
}

.invite-btn--gold {
    background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.25));
    border-color: rgba(201, 168, 76, 0.4);
    color: var(--primary-gold);
}

.invite-btn--gold:hover {
    background: linear-gradient(135deg, rgba(201,168,76,0.25), rgba(201,168,76,0.4));
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.15);
    transform: translateY(-1px);
}

.invite-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-top: 10px;
    background: rgba(10, 6, 1, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.invite-copy-row:hover {
    border-color: rgba(225, 190, 142, 0.25);
    background: rgba(10, 6, 1, 0.7);
}

.invite-copy-url {
    flex: 1;
    font-size: 11px;
    color: var(--text-light);
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.2px;
    user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(225, 190, 142, 0.08);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.invite-copy-row:hover .invite-copy-btn {
    background: rgba(225, 190, 142, 0.15);
    color: var(--primary-gold);
}

.invite-copy-btn.copied {
    background: rgba(67, 181, 129, 0.15);
    border-color: rgba(67, 181, 129, 0.3);
    color: #43b581;
}

/* Responsive */
@media (max-width: 768px) {
    .coming-soon-section {
        padding: 50px 20px;
    }
    .milestone-tracker {
        gap: 16px;
    }
    .milestone-card {
        padding: 20px 16px;
    }
}

@media (max-width: 600px) {
    .invite-friends-content {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .invite-friends-btn {
        width: 100%;
        justify-content: center;
    }

    .invite-copy-url {
        font-size: 11px;
    }

    .locked-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .locked-card {
        padding: 24px 16px;
    }

    .milestone-tracker {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .milestone-card {
        width: 100%;
        max-width: 280px;
    }

    .coming-soon-section {
        padding: 40px 16px;
    }
}

@media (max-width: 768px) {
    .qol-details-box {
        flex: 0 1 auto;
        height: auto;
        min-height: 0;
    }

    .qol-feature-display {
        height: auto;
        min-height: 0;
    }
}

/* ========================================
   REGISTER MODAL - Premium Design
   ======================================== */

.register-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 5, 4, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.register-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Loader Animation */
.register-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: opacity 0.3s ease;
}

.loader-ring {
    width: 80px;
    height: 80px;
    border: 3px solid transparent;
    border-top-color: rgba(225, 190, 142, 0.3);
    border-right-color: rgba(225, 190, 142, 0.5);
    border-bottom-color: rgba(225, 190, 142, 0.7);
    border-left-color: rgba(225, 190, 142, 0.9);
    border-radius: 50%;
    animation: loaderSpin 1.5s linear infinite;
    position: relative;
}

.loader-ring-inner {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-top-color: rgba(225, 190, 142, 0.2);
    border-right-color: rgba(225, 190, 142, 0.4);
    border-radius: 50%;
    animation: loaderSpinReverse 1s linear infinite;
}

@keyframes loaderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes loaderSpinReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

.loader-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: var(--text-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Register Container */
.register-container {
    background: linear-gradient(180deg,
        rgba(26, 20, 16, 0.98) 0%,
        rgba(18, 13, 10, 0.95) 100%);
    border: 1px solid rgba(225, 190, 142, 0.25);
    border-radius: 16px;
    padding: 40px 45px;
    min-width: 420px;
    max-width: 480px;
    position: relative;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(225, 190, 142, 0.08),
        inset 0 1px 0 rgba(225, 190, 142, 0.1);
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: none;
}

.register-container.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.register-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(225, 190, 142, 0.05);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 50%;
    color: var(--text-gold);
    cursor: pointer;
    transition: all 0.3s ease;
}

.register-close:hover {
    background: rgba(225, 190, 142, 0.12);
    border-color: rgba(225, 190, 142, 0.3);
    transform: rotate(90deg);
}

/* Header */
.register-header {
    text-align: center;
    margin-bottom: 30px;
}

.register-ornament {
    margin-bottom: 15px;
}

.register-ornament .ornament-icon {
    font-size: 28px;
    color: rgba(225, 190, 142, 0.5);
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
}

.register-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--text-gold);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.register-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(232, 220, 200, 0.6);
}

/* Form */
.register-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(225, 190, 142, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-input {
    padding: 14px 16px;
    background: rgba(10, 5, 4, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 10px;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.form-input::placeholder {
    color: rgba(232, 220, 200, 0.3);
}

.form-input:focus {
    border-color: rgba(225, 190, 142, 0.4);
    background: rgba(10, 5, 4, 0.7);
    box-shadow: 0 0 20px rgba(225, 190, 142, 0.1);
}

/* Submit Button */
.register-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    margin-top: 10px;
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.15) 0%,
        rgba(201, 169, 97, 0.25) 100%);
    border: 1px solid rgba(201, 169, 97, 0.4);
    border-radius: 10px;
    color: var(--primary-gold);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.register-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(201, 169, 97, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.register-submit:hover {
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.25) 0%,
        rgba(201, 169, 97, 0.4) 100%);
    border-color: rgba(201, 169, 97, 0.6);
    box-shadow: 0 5px 25px rgba(201, 169, 97, 0.2);
    transform: translateY(-2px);
}

.register-submit:hover::before {
    left: 100%;
}

.register-submit svg {
    transition: transform 0.3s ease;
}

.register-submit:hover svg {
    transform: translateX(4px);
}

/* Footer */
.register-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(225, 190, 142, 0.1);
    text-align: center;
}

.register-footer p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.6);
}

.register-footer a {
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.register-footer a:hover {
    color: var(--light-gold);
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .register-container {
        min-width: auto;
        width: 90%;
        padding: 30px 25px;
        margin: 20px;
    }

    .register-title {
        font-size: 22px;
    }

    .loader-ring {
        width: 60px;
        height: 60px;
    }

    .loader-ring-inner {
        width: 45px;
        height: 45px;
    }
}

/* ========================================
   PAGE LOADER - Elegant Animation
   ======================================== */

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(10, 5, 4, 0.98) 0%,
        rgba(26, 15, 10, 0.95) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-circle {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.3) 0%, transparent 70%);
    animation: loaderGlow 2s ease-in-out infinite;
}

@keyframes loaderGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

.loader-icon {
    color: var(--primary-gold);
    animation: loaderPulseIcon 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(201, 169, 97, 0.5));
}

@keyframes loaderPulseIcon {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.page-loader .loader-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: var(--text-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: loaderTextPulse 1.5s ease-in-out infinite;
}

@keyframes loaderTextPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* ========================================
   REGISTER PAGE - Full Layout
   ======================================== */

.register-section {
    position: relative;
    min-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.register-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.register-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(10, 5, 4, 0.85) 0%,
        rgba(26, 15, 10, 0.9) 50%,
        rgba(10, 5, 4, 0.85) 100%);
    z-index: 1;
}

.register-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    padding: 40px;
}

.register-box {
    background: linear-gradient(180deg,
        rgba(26, 20, 16, 0.95) 0%,
        rgba(18, 13, 10, 0.92) 100%);
    border: 1px solid rgba(225, 190, 142, 0.2);
    border-radius: 16px;
    padding: 35px 40px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(225, 190, 142, 0.05),
        inset 0 1px 0 rgba(225, 190, 142, 0.1);
    backdrop-filter: blur(10px);
}

.register-box-header {
    text-align: center;
    margin-bottom: 30px;
}

.register-box-header .ornament-icon {
    font-size: 32px;
    color: rgba(225, 190, 142, 0.5);
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
    display: block;
    margin-bottom: 10px;
}

.register-box-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--text-gold);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.register-box-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.5);
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(225, 190, 142, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-input {
    padding: 12px 14px;
    background: rgba(10, 5, 4, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 8px;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: all 0.3s ease;
    outline: none;
}

.form-input::placeholder {
    color: rgba(232, 220, 200, 0.25);
}

.form-input:focus {
    border-color: rgba(225, 190, 142, 0.35);
    background: rgba(10, 5, 4, 0.7);
    box-shadow: 0 0 15px rgba(225, 190, 142, 0.08);
}

.form-terms {
    margin-top: 5px;
}

.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.terms-checkbox input {
    display: none;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(225, 190, 142, 0.3);
    border-radius: 4px;
    background: rgba(10, 5, 4, 0.3);
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: all 0.2s ease;
}

.terms-checkbox input:checked + .checkmark {
    background: rgba(225, 190, 142, 0.2);
    border-color: rgba(225, 190, 142, 0.5);
}

.terms-checkbox input:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-gold);
    font-size: 10px;
}

.terms-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.5);
    line-height: 1.4;
}

.terms-text a {
    color: var(--primary-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-text a:hover {
    color: var(--light-gold);
    text-decoration: underline;
}

.register-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    margin-top: 8px;
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.12) 0%,
        rgba(201, 169, 97, 0.22) 100%);
    border: 1px solid rgba(201, 169, 97, 0.35);
    border-radius: 8px;
    color: var(--primary-gold);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.register-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(201, 169, 97, 0.15),
        transparent);
    transition: left 0.5s ease;
}

.register-submit:hover {
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.22) 0%,
        rgba(201, 169, 97, 0.35) 100%);
    border-color: rgba(201, 169, 97, 0.5);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.15);
    transform: translateY(-1px);
}

.register-submit:hover::before {
    left: 100%;
}

.register-submit svg {
    transition: transform 0.3s ease;
}

.register-submit:hover svg {
    transform: translateX(3px);
}

.register-box-footer {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(225, 190, 142, 0.08);
    text-align: center;
}

.register-box-footer p {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.5);
}

.register-box-footer a {
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.register-box-footer a:hover {
    color: var(--light-gold);
    text-decoration: underline;
}

/* Register Responsive */
@media (max-width: 768px) {
    .register-content {
        padding: 20px;
    }

    .register-box {
        padding: 25px 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .register-box-title {
        font-size: 22px;
    }
}

/* ========================================
   INLINE REGISTER SECTION - Same Page
   ======================================== */

.register-content-wrapper {
    padding: 30px 40px;
    max-width: 700px;
    margin: 0 auto;
}

.register-form-container {
    background: linear-gradient(180deg,
        rgba(26, 20, 16, 0.6) 0%,
        rgba(18, 13, 10, 0.5) 100%);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 12px;
    padding: 30px 35px;
    margin-top: 20px;
}

.register-form-full {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.register-form-full .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.register-form-full .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.register-form-full .form-group.full-width {
    grid-column: 1 / -1;
}

.register-form-full .form-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(225, 190, 142, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.register-form-full .form-input {
    padding: 12px 14px;
    background: rgba(10, 5, 4, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 8px;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: all 0.3s ease;
    outline: none;
}

.register-form-full .form-input::placeholder {
    color: rgba(232, 220, 200, 0.25);
}

.register-form-full .form-input:focus {
    border-color: rgba(225, 190, 142, 0.35);
    background: rgba(10, 5, 4, 0.7);
    box-shadow: 0 0 15px rgba(225, 190, 142, 0.08);
}

.register-form-full .form-terms {
    margin-top: 5px;
}

.register-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    margin-top: 10px;
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.12) 0%,
        rgba(201, 169, 97, 0.22) 100%);
    border: 1px solid rgba(201, 169, 97, 0.35);
    border-radius: 8px;
    color: var(--primary-gold);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.register-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(201, 169, 97, 0.15),
        transparent);
    transition: left 0.5s ease;
}

.register-submit-btn:hover {
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.22) 0%,
        rgba(201, 169, 97, 0.35) 100%);
    border-color: rgba(201, 169, 97, 0.5);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.15);
    transform: translateY(-1px);
}

.register-submit-btn:hover::before {
    left: 100%;
}

.register-submit-btn svg {
    transition: transform 0.3s ease;
}

.register-submit-btn:hover svg {
    transform: translateX(3px);
}

.register-already {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(225, 190, 142, 0.08);
    text-align: center;
}

.register-already p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.5);
}

.register-already a {
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.register-already a:hover {
    color: var(--light-gold);
    text-decoration: underline;
}

/* ========================================
   REGISTER PAGE - Clean & Elegant
   ======================================== */

#registerSection,
#loginSection,
#accountSection,
#adminSection,
#downloadSection,
#rankingSection,
#storeSection,
#coinsSection {
    display: none;
}

#registerSection[style*="block"],
#loginSection[style*="block"],
#accountSection[style*="block"],
#adminSection[style*="block"],
#downloadSection[style*="block"],
#rankingSection[style*="block"],
#storeSection[style*="block"],
#coinsSection[style*="block"] {
    display: block !important;
}

.register-wrapper {
    min-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 50px 20px 40px;
    /* background: linear-gradient(180deg, rgba(10, 5, 4, 0.98) 0%, rgba(18, 10, 6, 0.99) 10%, rgba(15, 8, 5, 1) 50%, rgba(18, 10, 6, 0.99) 90%, rgba(10, 5, 4, 0.98) 100%); */
}

.register-card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    background: linear-gradient(180deg, rgba(26, 20, 16, 0.85) 0%, rgba(18, 13, 10, 0.8) 100%);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 20px;
    padding: 25px 30px 35px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 80px rgba(201, 169, 97, 0.05);
    position: relative;
}

.register-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c9a961, transparent);
    border-radius: 0 0 3px 3px;
}

.register-outside {
    text-align: center;
    margin-bottom: 20px;
}

.register-title-outside {
    font-family: 'Albertus Nova', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: 20px;
}

.register-icon-outside {
    font-size: 20px;
    color: var(--primary-gold);
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(225, 190, 142, 0.4);
    display: block;
    margin-bottom: 10px;
}

.register-subtitle-outside {
    font-family: 'Inter', sans-serif;
    color: var(--text-light);
    font-size: 0.97rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 20px auto 0;
}

.account-layout {
    width: 100%;
    max-width: 1180px;
    display: grid;
    gap: 16px;
}

.account-grid {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-card {
    width: 100%;
    max-width: 1180px;
    text-align: left;
    background: linear-gradient(180deg, rgba(18, 13, 10, 0.9) 0%, rgba(12, 9, 7, 0.86) 100%);
    border: 1px solid rgba(225, 190, 142, 0.10);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(225, 190, 142, 0.03);
}

.account-card-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 17px;
    color: var(--text-gold);
    margin: 0;
}

.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.account-card-note {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(232, 220, 200, 0.42);
}

.account-hero-card {
    padding: 22px 24px;
}

.account-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.account-hero-copy {
    flex: 1;
    min-width: 0;
}

.account-hero-label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(232, 220, 200, 0.5);
}

.account-hero-title {
    margin: 0;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 31px;
    color: #f1d5a1;
}

.account-hero-subtitle {
    margin: 10px 0 0;
    max-width: 620px;
    line-height: 1.7;
    color: rgba(232, 220, 200, 0.66);
}

.account-balance-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 210px;
    padding: 16px 18px;
    border: 1px solid rgba(225, 190, 142, 0.14);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(225, 190, 142, 0.12), transparent 45%),
        rgba(20, 14, 10, 0.86);
    margin-bottom: 0;
}

.account-panel-label,
.account-meta-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(232, 220, 200, 0.5);
}

.account-balance-value {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 38px;
    color: var(--primary-gold);
    margin: 0;
    line-height: 1;
}

.account-inline-link {
    padding: 0;
    background: none;
    border: none;
    color: rgba(241, 213, 161, 0.88);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.account-inline-link:hover {
    color: #f6dfb4;
    opacity: 1;
}

.account-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.account-meta-item {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(225, 190, 142, 0.08);
    background: rgba(12, 9, 7, 0.42);
}

.account-meta-item strong {
    display: block;
    margin-top: 7px;
    font-size: 14px;
    color: var(--text-light);
    overflow-wrap: anywhere;
}

.account-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.account-compact-form {
    align-items: end;
}

.account-input-group {
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-input-group-wide {
    flex-basis: 240px;
}

.account-input-group label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(232, 220, 200, 0.5);
}

.account-input-group input {
    height: 42px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(225, 190, 142, 0.12);
    background: rgba(10, 8, 6, 0.54);
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.account-input-group select {
    height: 42px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(225, 190, 142, 0.12);
    background: rgba(10, 8, 6, 0.54);
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    outline: none;
}

.account-input-group input:focus {
    border-color: rgba(225, 190, 142, 0.34);
    background: rgba(10, 8, 6, 0.74);
}

.account-input-group select:focus {
    border-color: rgba(225, 190, 142, 0.34);
    background: rgba(10, 8, 6, 0.74);
}

.account-action-btn {
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(225, 190, 142, 0.18);
    background: rgba(225, 190, 142, 0.08);
    color: var(--text-gold);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-action-btn:hover {
    border-color: rgba(225, 190, 142, 0.34);
    background: rgba(225, 190, 142, 0.14);
}

.account-panel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(225, 190, 142, 0.12);
    background: rgba(10, 8, 6, 0.34);
    color: var(--text-light);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.account-panel-toggle:hover,
.account-panel-toggle.active {
    border-color: rgba(225, 190, 142, 0.28);
    background: rgba(225, 190, 142, 0.08);
    transform: translateY(-1px);
}

.account-panel-toggle-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(225, 190, 142, 0.08);
    font-size: 18px;
}

.account-panel-toggle-icon-cn {
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
    font-size: 19px;
    font-weight: 700;
}

.account-panel-toggle-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.account-panel-toggle-copy strong {
    font-size: 14px;
    color: var(--text-gold);
}

.account-panel-toggle-copy small {
    font-size: 12px;
    color: rgba(232, 220, 200, 0.58);
}

.account-panel-body {
    display: none;
    margin-top: 14px;
}

.account-panel-body.active {
    display: block;
}

.register-disabled-banner {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(225, 190, 142, 0.14);
    background: rgba(225, 190, 142, 0.07);
    color: var(--text-gold);
    font-size: 13px;
    line-height: 1.6;
}

.account-secondary-btn {
    background: transparent;
    border-color: rgba(225, 190, 142, 0.22);
}

.account-empty-state {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    align-items: center;
}

.account-empty-state h3 {
    margin: 0;
    font-family: 'Albertus Nova', sans-serif;
    color: var(--text-gold);
    font-size: 26px;
}

.account-empty-state p {
    max-width: 560px;
    color: rgba(232, 220, 200, 0.7);
}

.account-empty-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.account-characters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.account-character-count {
    font-size: 12px;
    color: rgba(232, 220, 200, 0.55);
}

.account-characters-panel {
    padding: 22px 24px;
}

.account-characters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.account-character-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 148px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(225, 190, 142, 0.09);
    background:
        radial-gradient(circle at top right, rgba(225, 190, 142, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(15, 11, 8, 0.8) 0%, rgba(10, 8, 6, 0.86) 100%);
    color: rgba(232, 220, 200, 0.72);
}

.account-character-card strong {
    color: var(--text-gold);
    font-size: 16px;
}

.account-character-visual {
    width: 74px;
    height: 108px;
    flex: 0 0 74px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(38, 24, 18, 0.9) 0%, rgba(18, 12, 9, 0.3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.account-character-art {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

.account-character-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-character-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.account-character-level {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(241, 213, 161, 0.8);
}

.account-character-subline {
    font-size: 13px;
    color: rgba(232, 220, 200, 0.62);
}

.account-character-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.account-character-tag {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(225, 190, 142, 0.08);
    border: 1px solid rgba(225, 190, 142, 0.08);
    font-size: 11px;
    color: rgba(232, 220, 200, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-character-empire-flag {
    width: 16px;
    height: 10px;
    border-radius: 2px;
    object-fit: cover;
}

.account-character-card-empty {
    justify-content: center;
    align-items: center;
    min-height: 120px;
    grid-column: 1 / -1;
    text-align: center;
}

.account-history-list {
    display: grid;
    gap: 10px;
}

.account-history-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(225, 190, 142, 0.08);
    background: rgba(12, 9, 7, 0.38);
    color: rgba(232, 220, 200, 0.72);
}

.account-history-item strong {
    color: var(--text-gold);
    font-size: 15px;
}

.account-grid-actions .account-card,
.account-grid-history .account-card {
    padding: 20px 22px;
}

.admin-layout {
    width: 100%;
    max-width: 1180px;
    display: grid;
    gap: 16px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-card {
    padding: 20px 22px;
}

.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.admin-form textarea {
    width: 100%;
    padding: 12px 13px;
    border-radius: 12px;
    border: 1px solid rgba(225, 190, 142, 0.12);
    background: rgba(10, 8, 6, 0.54);
    color: var(--text-light);
    resize: vertical;
    min-height: 100px;
}

.admin-input-full {
    flex-basis: 100%;
}

.admin-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: rgba(232, 220, 200, 0.72);
    font-size: 13px;
}

.admin-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.admin-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(12, 9, 7, 0.38);
    border: 1px solid rgba(225, 190, 142, 0.08);
}

.admin-list-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-list-copy strong {
    color: var(--text-gold);
}

.admin-list-copy span {
    color: rgba(232, 220, 200, 0.62);
    font-size: 12px;
    line-height: 1.5;
}

.admin-list-actions {
    display: flex;
    gap: 8px;
}

.admin-list-btn {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(225, 190, 142, 0.14);
    background: rgba(225, 190, 142, 0.06);
    color: var(--text-gold);
    cursor: pointer;
    font-size: 12px;
}

.account-history-empty {
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 110px;
}

.register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    text-align: left;
}

.register-field {
    margin-bottom: 16px;
}

.register-field.full {
    grid-column: 1 / -1;
}

.register-field label {
    display: block;
    font-size: 11px;
    color: rgba(232, 220, 200, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.register-field label span {
    color: rgba(201, 169, 97, 0.7);
    font-weight: 500;
}

.register-field input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(10, 8, 6, 0.5);
    border: 1px solid rgba(225, 190, 142, 0.12);
    border-radius: 10px;
    color: #e1be8e;
    font-size: 14px;
    transition: all 0.2s ease;
}

.register-field input:focus {
    outline: none;
    border-color: rgba(201, 169, 97, 0.4);
    background: rgba(10, 8, 6, 0.7);
}

.register-terms {
    margin: 20px 0;
    text-align: left;
}

.register-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.register-checkbox input {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 4px;
    background: rgba(10, 8, 6, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.register-checkbox input:checked + .checkmark {
    background: rgba(201, 169, 97, 0.2);
    border-color: #c9a961;
}

.checkmark::after {
    content: '✓';
    font-size: 11px;
    color: #c9a961;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.register-checkbox input:checked + .checkmark::after {
    opacity: 1;
}

.terms-label {
    font-size: 13px;
    color: rgba(232, 220, 200, 0.6);
}

.terms-label a {
    color: #c9a961;
    text-decoration: none;
}

.register-submit-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.2) 0%, rgba(225, 190, 142, 0.1) 100%);
    border: 1px solid #c9a961;
    border-radius: 10px;
    color: #e1be8e;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.register-submit-btn:hover {
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.3) 0%, rgba(225, 190, 142, 0.2) 100%);
    box-shadow: 0 8px 25px rgba(201, 169, 97, 0.3);
    transform: translateY(-2px);
}

.register-footer {
    text-align: center;
    margin-top: 24px;
}

.register-footer p {
    font-size: 14px;
    color: rgba(232, 220, 200, 0.5);
}

.register-footer a {
    color: #c9a961;
    text-decoration: none;
    font-weight: 500;
}

/* Login Section */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.login-forgot {
    font-size: 13px;
    color: rgba(201, 169, 97, 0.8);
    text-decoration: none;
}

.login-forgot:hover {
    color: #c9a961;
    text-decoration: underline;
}

/* Download Section */
.download-card {
    padding: 30px;
}

.download-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(10, 8, 6, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.download-item:hover {
    border-color: rgba(201, 169, 97, 0.2);
    background: rgba(10, 8, 6, 0.5);
}

.download-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    background: rgba(201, 169, 97, 0.1);
    border: 1px solid rgba(201, 169, 97, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a961;
}

.download-info {
    flex: 1;
    text-align: left;
}

.download-info h3 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 16px;
    color: #e1be8e;
    margin-bottom: 4px;
}

.download-info p {
    font-size: 13px;
    color: rgba(232, 220, 200, 0.5);
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.2) 0%, rgba(225, 190, 142, 0.1) 100%);
    border: 1px solid #c9a961;
    border-radius: 8px;
    color: #e1be8e;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background: linear-gradient(135deg, rgba(225, 190, 142, 0.3) 0%, rgba(225, 190, 142, 0.2) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(201, 169, 97, 0.3);
}

.download-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 190, 142, 0.2), transparent);
    margin: 5px 0;
}

.download-requirements {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(225, 190, 142, 0.1);
    text-align: left;
}

.download-requirements h4 {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: #e1be8e;
    margin-bottom: 15px;
}

.download-requirements ul {
    list-style: none;
    padding: 0;
}

.download-requirements li {
    font-size: 13px;
    color: rgba(232, 220, 200, 0.5);
    padding: 5px 0;
    padding-left: 15px;
    position: relative;
}

.download-requirements li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #c9a961;
}

/* Ranking Section */
.rank.coins-card {
    padding: 35px 30px;
    max-width: 850px;
    background: linear-gradient(135deg, rgba(10, 8, 6, 0.6) 0%, rgba(18, 14, 10, 0.5) 100%);
    border: 1px solid rgba(225, 190, 142, 0.15);
}

.ranking-tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.1);
}

.ranking-tab {
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(232, 220, 200, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ranking-tab:hover {
    color: rgba(232, 220, 200, 0.8);
}

.ranking-tab.active {
    color: #c9a961;
}

.ranking-tab.active .tab-icon {
    text-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
}

.tab-icon {
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
}

.tab-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
}

/* Ranking Table */
.ranking-table {
    width: 100%;
}

.ranking-table-header {
    display: grid;
    grid-template-columns: 40px minmax(100px, 1fr) 60px 40px 50px minmax(80px, 1fr);
    align-items: center;
    justify-items: center;
    gap: 8px;
    padding: 12px 15px;
    background: rgba(10, 8, 6, 0.6);
    border-bottom: 1px solid rgba(225, 190, 142, 0.15);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    color: rgba(232, 220, 200, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ranking-table-body {
    display: flex;
    flex-direction: column;
}

.ranking-table-row {
    display: grid;
    grid-template-columns: 40px minmax(100px, 1fr) 60px 40px 50px minmax(80px, 1fr);
    align-items: center;
    justify-items: center;
    gap: 8px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.05);
    transition: all 0.2s ease;
}

.ranking-table-row:hover {
    background: rgba(10, 8, 6, 0.4);
}

/* Top 3 colors */
.ranking-table-row.top-1 {
    background: linear-gradient(90deg, rgba(201, 169, 97, 0.15) 0%, transparent 100%);
}

.ranking-table-row.top-1 .ranking-col.rank {
    color: #c9a961;
    font-weight: 700;
    font-size: 16px;
}

.ranking-table-row.top-1 .ranking-col.name {
    color: #c9a961;
    font-weight: 600;
}

.ranking-table-row.top-1 .ranking-col.level {
    color: #c9a961;
    font-weight: 600;
}

.ranking-table-row.top-1 .ranking-col.guild {
    color: #c9a961;
}

.ranking-table-row.top-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, transparent 100%);
}

.ranking-table-row.top-2 .ranking-col.rank {
    color: rgba(192, 192, 192, 0.9);
    font-weight: 700;
}

.ranking-table-row.top-2 .ranking-col.name {
    color: rgba(232, 220, 200, 0.95);
}

.ranking-table-row.top-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, transparent 100%);
}

.ranking-table-row.top-3 .ranking-col.rank {
    color: rgba(205, 127, 50, 0.9);
    font-weight: 700;
}

.ranking-table-row.top-3 .ranking-col.name {
    color: rgba(205, 127, 50, 0.9);
}

.ranking-col {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 1;
}

.ranking-col.rank {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: rgba(232, 220, 200, 0.5);
}

.ranking-col.name {
    font-size: 13px;
    color: #e1be8e;
    text-align: left;
    justify-content: flex-start;
    padding-left: 5px;
}

.ranking-col.level {
    font-size: 13px;
    color: rgba(232, 220, 200, 0.7);
}

.ranking-col.class {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

.class-icon {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.class-fallback {
    font-size: 16px;
    color: var(--primary-gold);
    font-family: "Microsoft YaHei", sans-serif;
    line-height: 1;
    flex-shrink: 0;
}

.ranking-col.kingdom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

.kingdom-icon {
    width: 32px;
    height: 20px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: block;
    flex-shrink: 0;
}

.ranking-col.guild {
    font-size: 12px;
    color: rgba(232, 220, 200, 0.6);
    text-align: left;
    justify-content: flex-start;
    padding-left: 5px;
}

.ranking-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(225, 190, 142, 0.1);
}

.ranking-info p {
    font-size: 12px;
    color: rgba(232, 220, 200, 0.4);
    text-align: center;
}

/* Store Section */
.store-card {
    padding: 22px 18px;
    max-width: 1180px;
}

.store-categories {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(225, 190, 142, 0.1);
    flex-wrap: wrap;
}

.store-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(232, 220, 200, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.store-category:hover {
    color: rgba(232, 220, 200, 0.8);
}

.store-category.active {
    color: #c9a961;
}

.store-category.active .category-icon {
    text-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
}

.store-category .category-icon {
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
}

.store-category .category-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 25px;
}

.store-item {
    background: rgba(10, 8, 6, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.08);
    border-radius: 10px;
    padding: 9px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.store-item:hover {
    background: rgba(10, 8, 6, 0.5);
    border-color: rgba(225, 190, 142, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.store-item-image {
    width: 100%;
    aspect-ratio: 0.68;
    background:
        radial-gradient(circle at 50% 40%, rgba(225, 190, 142, 0.08), transparent 45%),
        rgba(10, 8, 6, 0.68);
    border: 1px solid rgba(225, 190, 142, 0.09);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
}

.store-item-image img {
    width: 28%;
    height: 28%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.store-item-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    color: #c9a961;
}

.store-item-price .coin-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.item-fallback {
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
    font-size: 28px;
    color: rgba(201, 169, 97, 0.4);
    display: none;
}

.store-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.store-item-name {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    color: #e1be8e;
    margin: 0 0 5px 0;
    text-align: center;
}

.store-item-desc {
    font-size: 10px;
    color: rgba(232, 220, 200, 0.5);
    margin: 0 0 10px 0;
    text-align: center;
    line-height: 1.35;
    flex: 1;
}

.store-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(225, 190, 142, 0.08);
}

.store-item-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #c9a961;
    white-space: nowrap;
}

.price-icon {
    display: none;
}

.store-buy-btn {
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(120, 89, 45, 0.45) 0%, rgba(225, 190, 142, 0.2) 100%);
    border: 1px solid rgba(225, 190, 142, 0.34);
    border-radius: 6px;
    color: #e1be8e;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}

.store-buy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.store-buy-btn:hover {
    background: linear-gradient(135deg, rgba(140, 104, 54, 0.58) 0%, rgba(225, 190, 142, 0.28) 100%);
    box-shadow: 0 8px 25px rgba(201, 169, 97, 0.3);
    transform: translateY(-1px);
    border-color: rgba(225, 190, 142, 0.5);
}

.store-buy-btn:hover::before {
    left: 100%;
}

.store-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(225, 190, 142, 0.1);
}

.pagination-btn {
    padding: 8px 16px;
    background: rgba(10, 8, 6, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.15);
    border-radius: 6px;
    color: rgba(232, 220, 200, 0.7);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    border-color: rgba(201, 169, 97, 0.3);
    color: #e1be8e;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 6px;
    color: rgba(232, 220, 200, 0.6);
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page:hover {
    border-color: rgba(201, 169, 97, 0.3);
    color: #e1be8e;
}

.page.active {
    background: rgba(201, 169, 97, 0.2);
    border-color: #c9a961;
    color: #e1be8e;
}

.page-dots {
    color: rgba(232, 220, 200, 0.4);
    font-size: 14px;
}

@media (max-width: 600px) {
    .register-wrapper {
        padding: 40px 16px;
    }
    
    .register-title {
        font-size: 26px;
    }
    
    .register-icon {
        font-size: 48px;
    }
    
    .register-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* Ranking mobile */
    .ranking-table-header {
        grid-template-columns: 30px minmax(60px, 1fr) 45px 35px 40px minmax(50px, 1fr);
        gap: 5px;
        padding: 8px 6px;
        font-size: 9px;
    }
    
    .ranking-table-row {
        grid-template-columns: 30px minmax(60px, 1fr) 45px 35px 40px minmax(50px, 1fr);
        gap: 5px;
        padding: 8px 6px;
    }
    
    .ranking-col.name {
        font-size: 11px;
    }
    
    .ranking-col.level {
        font-size: 10px;
    }
    
    .ranking-col.guild {
        font-size: 9px;
    }
    
    .ranking-col.class {
        width: 35px;
        min-width: 35px;
        max-width: 35px;
    }
    
    .class-icon {
        width: 22px;
        height: 22px;
    }
    
    .ranking-col.kingdom {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
    }
    
    .kingdom-icon {
        width: 24px;
        height: 15px;
    }
    
    .ranking-tabs {
        gap: 20px;
    }
    
    .tab-icon {
        font-size: 16px;
    }
    
    .tab-text {
        font-size: 9px;
    }
    
    /* Coins mobile */
    .coins-title {
        font-size: 20px;
    }
    
    .coins-subtitle {
        font-size: 12px;
    }
    
    .coins-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .coin-package {
        padding: 20px 15px;
    }
    
    .coin-number {
        font-size: 24px;
    }
    
    .real-price {
        font-size: 16px;
    }
    
    .coin-buy-btn {
        padding: 8px 16px;
        font-size: 11px;
    }
    
    /* Store mobile */
    .store-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .store-item {
        padding: 8px;
    }
    
    .store-item-name {
        font-size: 11px;
    }
    
    .store-item-desc {
        font-size: 9px;
    }
    
    .store-item-price {
        font-size: 11px;
    }
    
    .store-buy-btn {
        padding: 5px 10px;
        font-size: 9px;
    }
    
    .store-categories {
        gap: 20px;
    }
    
    .store-category {
        padding: 0;
    }
    
    .category-icon {
        font-size: 16px;
    }
    
    .category-text {
        font-size: 9px;
    }

    .account-grid,
    .account-meta-grid,
    .account-characters-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .account-hero,
    .account-balance-panel,
    .account-characters-head,
    .account-section-head,
    .account-character-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-character-card {
        min-height: 0;
    }
}

/* Coins Section */
.coins-section {
    padding: 10px 0;
}

.coins-card {
    padding: 35px 30px;
    max-width: 850px;
    background: linear-gradient(135deg, rgba(10, 8, 6, 0.6) 0%, rgba(18, 14, 10, 0.5) 100%);
    border: 1px solid rgba(225, 190, 142, 0.15);
}

.coins-title {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 24px;
    color: #e1be8e;
    text-align: center;
    margin: 0 0 8px 0;
}

.coins-subtitle {
    font-size: 14px;
    color: rgba(232, 220, 200, 0.6);
    text-align: center;
    margin: 0 0 30px 0;
}

.coins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.coin-package {
    background: rgba(10, 8, 6, 0.4);
    border: 1px solid rgba(225, 190, 142, 0.1);
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.coin-package:hover {
    background: rgba(10, 8, 6, 0.5);
    border-color: rgba(225, 190, 142, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(201, 169, 97, 0.15);
}

.coin-package.popular {
    border-color: rgba(201, 169, 97, 0.5);
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.2) 0%, rgba(10, 8, 6, 0.4) 100%);
    box-shadow: 0 0 20px rgba(201, 169, 97, 0.1);
}

.coin-package.best {
    border-color: rgba(201, 169, 97, 0.6);
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.25) 0%, rgba(10, 8, 6, 0.4) 100%);
    box-shadow: 0 0 25px rgba(201, 169, 97, 0.15);
}

.popular-tag,
.best-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: linear-gradient(135deg, #c9a961 0%, #ae9159 100%);
    color: #0a0504;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 20px;
    white-space: nowrap;
}

.coin-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.coin-icon {
    font-size: 28px;
}

.coin-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(201, 169, 97, 0.3));
}

.coin-price-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.coin-price-inline .coin-icon-img {
    width: 18px;
    height: 18px;
}

.coin-number {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #e1be8e;
    text-shadow: 0 0 10px rgba(201, 169, 97, 0.2);
}

.coin-price {
    margin: 5px 0;
}

.real-price {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 20px;
    color: #c9a961;
    text-shadow: 0 0 8px rgba(201, 169, 97, 0.3);
}

.coin-buy-btn {
    padding: 12px 28px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(174, 145, 89, 0.1) 100%);
    border: 1px solid rgba(201, 169, 97, 0.4);
    border-radius: 8px;
    color: #c9a961;
    font-family: 'Albertus Nova', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 5px;
}

.coin-buy-btn:hover {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.25) 0%, rgba(174, 145, 89, 0.2) 100%);
    box-shadow: 0 8px 25px rgba(201, 169, 97, 0.3);
    transform: translateY(-2px);
}

.coins-info {
    text-align: center;
    font-size: 13px;
    color: rgba(232, 220, 200, 0.5);
    margin: 20px 0 0 0;
}

/* ========================================
   RESPONSIVE - Register Section
   ======================================== */

.page-dots {
    color: rgba(232, 220, 200, 0.4);
    font-size: 14px;
}

.section-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(10, 5, 4, 0.98) 0%,
        rgba(26, 15, 10, 0.96) 50%,
        rgba(10, 5, 4, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.section-loader.active {
    opacity: 1;
    visibility: visible;
}

.section-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.section-loader-icon {
    font-size: 80px;
    color: rgba(225, 190, 142, 0.6);
    font-family: "Microsoft YaHei", "SimHei", "Heiti SC", sans-serif;
    line-height: 1;
}

.section-loader-text {
    font-family: 'Albertus Nova', sans-serif;
    font-size: 14px;
    color: var(--text-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-loader-text::after {
    content: '';
    animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}