/* Dark Deep-Space Theme — مطابق لثيم العشيرة */
:root {
    --bg-color: #02080f;
    --card-bg: rgba(4, 14, 34, 0.78);
    --card-border: rgba(0, 191, 255, 0.14);

    --royal-blue: #00BFFF;
    --royal-blue-light: rgba(0, 191, 255, 0.09);
    --royal-blue-medium: rgba(0, 191, 255, 0.18);

    --text-primary: #DCF0FF;
    --text-secondary: rgba(160, 205, 240, 0.70);
    --text-light: #FFFFFF;

    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 6px 28px rgba(0, 191, 255, 0.18);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* خلفية الفضاء العميق — سديم كوني */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(0, 80, 200, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(0, 30, 100, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 5, 20, 0.95) 0%, transparent 80%),
        radial-gradient(ellipse at 30% 70%, rgba(50, 0, 120, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 15%, rgba(0, 120, 220, 0.10) 0%, transparent 40%),
        linear-gradient(180deg, #02080f 0%, #000c1e 60%, #010610 100%);
    opacity: 1;
}

#app-container {
    padding: 24px 20px 100px 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* -------------------------------------
   Profile Section Styling (Top Section)
------------------------------------- */
.user-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    animation: fadeInDown 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-container {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 3px;
    background: var(--royal-blue);
    margin-bottom: 12px;
    box-shadow: 0 8px 16px rgba(15, 76, 129, 0.2);
    position: relative;
}

.avatar-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--card-bg);
}

.name-rank-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    width: 100%;
}

#user-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    color: var(--royal-blue);
}

/* Rank Badge */
.rank-badge {
    display: flex;
    align-items: center;
    background-color: var(--royal-blue);
    border: 1px solid var(--royal-blue-medium);
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(15, 76, 129, 0.2);
    color: var(--text-light);
}

.rank-text {
    font-size: 0.8rem;
    font-weight: 700;
    margin-right: 6px; 
}

.rank-icon {
    font-size: 1.1rem;
}

.global-rank-text {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
}

/* XP Progress Bar */
.xp-container {
    width: 100%;
    padding: 0 10px;
}

.xp-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.xp-title { color: var(--text-secondary); }
.xp-text { color: var(--royal-blue); font-weight: 700; }

.xp-bar-bg {
    width: 100%;
    height: 8px;
    background-color: var(--royal-blue-light);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.xp-bar-fill {
    height: 100%;
    background: var(--royal-blue);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(15, 76, 129, 0.4);
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------
   Stats Cards Styling (Grid 2x3)
------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    animation: fadeInUp 0.7s ease-out;
}

.stat-card.compact {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--royal-blue-light);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

.stat-card.compact:active {
    transform: scale(0.97);
    box-shadow: inset 0 2px 5px rgba(15, 76, 129, 0.05);
}

.stat-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--royal-blue-light);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--royal-blue);
}

.stat-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 600;
}

.stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--royal-blue);
}

/* -------------------------------------
   Shop View Styling (Minimalist & Glassmorphism)
------------------------------------- */

/* Corner Balance */
.shop-balance-corner {
    position: absolute;
    top: 15px;
    right: 20px; /* أعلى اليمين */
    background: rgba(4, 14, 34, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 191, 255, 0.18);
    border-radius: 16px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 100;
}

.balance-icon-small {
    color: #F1C40F;
    filter: drop-shadow(0 2px 3px rgba(241, 196, 15, 0.4));
}

#shop-balance {
    font-size: 1rem;
    font-weight: 800;
    color: var(--royal-blue);
    letter-spacing: 0.5px;
}

/* Royal Switch (Shop / Inventory) */
.royal-switch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 20px;
    position: relative;
    z-index: 10;
}

.royal-pill {
    background: rgba(4, 14, 34, 0.80);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 191, 255, 0.18);
    padding: 6px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 4px;
    min-width: 100px;
    text-align: center;
}

#royal-pill-text {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--royal-blue);
    transition: opacity 0.3s ease;
}

.royal-connector {
    width: 2px;
    height: 12px;
    background: linear-gradient(to bottom, rgba(15, 76, 129, 0.3), rgba(15, 76, 129, 0.05));
    margin-bottom: 4px;
    border-radius: 2px;
}

.royal-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.royal-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.royal-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(4, 14, 34, 0.80);
    border: 1px solid rgba(0, 191, 255, 0.20);
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
    backdrop-filter: blur(10px);
}

.royal-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--royal-blue);
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(15, 76, 129, 0.3);
}

input:checked + .royal-toggle-slider {
    background-color: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.2);
}

input:checked + .royal-toggle-slider:before {
    transform: translateX(22px);
    background-color: #D4AF37;
    box-shadow: 0 2px 5px rgba(212, 175, 55, 0.3);
}

/* -------------------------------------
   Two-Tier Filtering (Leaderboard Master Selector)
------------------------------------- */
.lb-master-selector {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px 4px; /* Reduced padding for compact layout */
    z-index: 100;
}

.glass-btn {
    background: rgba(4, 14, 34, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 191, 255, 0.18);
    border-radius: 16px; /* Compact chip shape */
    padding: 6px 16px; /* Reduced padding */
    font-size: 13px; /* Smaller iOS style font */
    font-weight: 700;
    color: var(--royal-blue);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px; /* Closer to time pills */
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: auto;
}

.glass-btn:active {
    transform: scale(0.95);
    background: rgba(0, 191, 255, 0.12);
}

.glass-btn i {
    font-size: 14px;
}

.drop-icon {
    margin-right: 4px; /* Arabic layout adjust */
    transition: transform 0.3s ease;
}

.glass-btn.dropdown-open .drop-icon {
    transform: rotate(180deg);
}

.glass-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(3, 10, 25, 0.92);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 191, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    padding: 6px;
    width: 170px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-dropdown:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-item {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropdown-item i {
    font-size: 14px;
}

.dropdown-item:active {
    background: rgba(0, 191, 255, 0.08);
    transform: scale(0.98);
}

.dropdown-item.active {
    background: rgba(0, 191, 255, 0.18);
    color: var(--royal-blue);
    box-shadow: 0 2px 8px rgba(0, 191, 255, 0.2);
}

/* Pill Tabs (Redesigned Container) */
.shop-tabs-container,
.leaderboard-tabs-container {
    padding: 0 20px 10px; /* Reduced bottom padding */
    margin-top: -10px;
    display: flex;
    justify-content: center;
}

.leaderboard-tabs-container {
    margin-top: 5px; /* Compact margin */
}

/* Base styles for shop tabs (preserve original look) */
.shop-tabs {
    display: flex;
    background: rgba(4, 14, 34, 0.80);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 191, 255, 0.14);
    border-radius: 30px;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.shop-tabs::-webkit-scrollbar {
    display: none;
}

/* Redesigned Compact UI for Leaderboard Time Pills with Smooth Transition Magic */
#time-pills-container {
    display: inline-flex;
    background: rgba(4, 14, 34, 0.80);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 191, 255, 0.14);
    border-radius: 18px; /* Compact rounded corners */
    padding: 3px;
    width: auto; /* Fit to content so it shrinks seamlessly */
    height: 36px; /* Strict compact height */
    justify-content: center;
    align-items: center;
}

/* Base style for individual items */
.tab-pill {
    flex: 1;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

/* Special overrides for the dynamically changing time pills avoiding JS edits */
#time-pills-container .pill-tab {
    display: inline-flex !important; /* Force flex to ignore inline "display: none" from JS */
    align-items: center;
    justify-content: center;
    max-width: 80px; /* Max safe width to smoothly animate from */
    height: 100%;
    white-space: nowrap;
    padding: 0 10px !important; /* Compact padding */
    border-radius: 14px !important;
    font-size: 12px !important; /* Smaller iOS style */
    font-weight: 700;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;
    opacity: 1;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* When JS puts style="display: none", this rule kicks in to animate width and opacity to 0 instead of snapping */
#time-pills-container .pill-tab[style*="none"] {
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    border: none !important;
}

.tab-pill.active,
.pill-tab.active {
    background: var(--royal-blue);
    color: #000c18;
    box-shadow: 0 4px 12px rgba(0, 191, 255, 0.25);
}

/* =========================================
   The Podium (Honorary Board Phase 1)
========================================= */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align bases to the bottom */
    gap: 15px; /* Spacing between columns */
    margin-top: 25px;
    padding: 0 20px 20px; /* Added bottom padding for shadow */
    position: relative;
    z-index: 1; /* Establish stacking context */
}

/* Ground shadow to remove floating effect */
.podium-container::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Centers perfectly under the bases since padding-bottom is 20px and height is 20px */
    left: 50%;
    transform: translateX(-50%) scaleX(0.5);
    width: 320px; /* Span across all 3 bases */
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    z-index: -1; /* Behind bases */
    pointer-events: none;
    filter: blur(4px);
    opacity: 0; /* Hidden initially */
}

@keyframes shadowFade {
    0% { opacity: 0; transform: translateX(-50%) scaleX(0.5); }
    100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

.animate-podium.podium-container::after {
    animation: shadowFade 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.6s;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Phase 2: Ordering the Podiums */
.podium-item.first {
    order: 2;
    z-index: 10;
}

.podium-item.second {
    order: 1;
    z-index: 5;
}

.podium-item.third {
    order: 3;
    z-index: 5;
}

.podium-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2px;
    position: relative;
}

/* Phase 4: 3D Avatars (Metallic Coins) */
.podium-avatar {
    position: relative;
    border-radius: 50%;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 10px rgba(15, 76, 129, 0.15); /* Fallback */
    overflow: hidden;
}

/* 1st Place — Electric Gold Coin 👑 */
.gold-coin {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFE566 0%, #FFB800 50%, #E67C00 100%);
    border: 3px solid rgba(255, 230, 100, 0.90);
    box-shadow:
        0 0 14px rgba(255, 210, 0, 0.80),
        0 0 30px rgba(255, 180, 0, 0.35),
        inset 0 2px 6px rgba(255,255,255,0.50);
    color: #FFF;
    font-size: 2.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* 2nd Place — Electric Cyan Coin */
.silver-coin {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #40E0FF 0%, #00BFFF 50%, #0080CC 100%);
    border: 2px solid rgba(100, 230, 255, 0.90);
    box-shadow:
        0 0 11px rgba(0, 191, 255, 0.75),
        0 0 22px rgba(0, 191, 255, 0.28),
        inset 0 1px 5px rgba(255,255,255,0.40);
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* 3rd Place — Electric Violet Coin */
.bronze-coin {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #D080FF 0%, #9B2FFF 50%, #6600BB 100%);
    border: 2px solid rgba(200, 100, 255, 0.88);
    box-shadow:
        0 0 11px rgba(170, 50, 255, 0.70),
        0 0 22px rgba(170, 50, 255, 0.24),
        inset 0 1px 5px rgba(255,255,255,0.30);
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.podium-crown {
    position: absolute;
    top: -12px;
    left: -8px;
    transform: rotate(-18deg);
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    z-index: 10;
}

.podium-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
    unicode-bidi: isolate;
}

.podium-points {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--royal-blue);
}

.podium-base {
    width: 85px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 15px;
    border-radius: 12px 12px 0 0;
    position: relative;
    border: none;
    border-bottom: none;
    transform-origin: bottom;
}

/* Phase 3: Neon Glowing Bases */
.first .podium-base {
    height: 140px;
    width: 100px;
    background: linear-gradient(180deg, #FFE566 0%, #FFB800 55%, #CC7A00 100%);
    border: 1px solid rgba(255, 230, 80, 0.75);
    border-bottom: none;
    box-shadow:
        0 0 22px rgba(255, 200, 0, 0.65),
        0 0 50px rgba(255, 200, 0, 0.22),
        inset 0 2px 8px rgba(255,255,255,0.35),
        inset 0 -2px 8px rgba(0,0,0,0.35);
}

.second .podium-base {
    height: 100px;
    background: linear-gradient(180deg, #40E0FF 0%, #00BFFF 55%, #006FA8 100%);
    border: 1px solid rgba(0, 220, 255, 0.65);
    border-bottom: none;
    box-shadow:
        0 0 16px rgba(0, 191, 255, 0.55),
        0 0 36px rgba(0, 191, 255, 0.20),
        inset 0 2px 6px rgba(255,255,255,0.25),
        inset 0 -2px 6px rgba(0,0,0,0.30);
}

.third .podium-base {
    height: 75px;
    background: linear-gradient(180deg, #CC80FF 0%, #9B2FFF 55%, #6200B3 100%);
    border: 1px solid rgba(200, 100, 255, 0.60);
    border-bottom: none;
    box-shadow:
        0 0 14px rgba(170, 60, 255, 0.50),
        0 0 30px rgba(170, 60, 255, 0.18),
        inset 0 2px 6px rgba(255,255,255,0.20),
        inset 0 -2px 6px rgba(0,0,0,0.35);
}

.podium-rank {
    font-size: 3rem;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.first .podium-rank  { color: #FFF8DC; }
.second .podium-rank { color: #D0F5FF; }
.third .podium-rank  { color: #F0DEFF; }

/* =========================================
   Phase 4: Cinematic Reveal Sequence & Loops
========================================= */

@keyframes sequenceGrowUp {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}

@keyframes sequenceFadeInScale {
    0% { transform: scale(0.6) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes sequencePopCrown {
    0% { transform: scale(0) rotate(-18deg); opacity: 0; }
    80% { transform: scale(1.4) rotate(-18deg); opacity: 1; }
    100% { transform: scale(1) rotate(-18deg); opacity: 1; }
}

@keyframes continuousFloatCrown {
    0%, 100% {
        transform: scale(1) rotate(-18deg) translateY(0);
    }
    50% {
        transform: scale(1) rotate(-18deg) translateY(-8px);
    }
}

@keyframes continuousFloatGlow {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 14px rgba(255,210,0,0.80), 0 0 30px rgba(255,180,0,0.35), inset 0 2px 6px rgba(255,255,255,0.50);
    }
    50% {
        transform: translateY(-8px);
        box-shadow: 0 0 24px rgba(255,215,0,1.0), 0 0 50px rgba(255,200,0,0.60), inset 0 2px 6px rgba(255,255,255,0.55);
    }
}

/* Initial States */
.podium-base, .podium-player, .podium-crown {
    opacity: 0; /* Hidden before sequence starts */
}

/* Step A: Bases Grow (Staggered: 3rd -> 2nd -> 1st) */
.animate-podium .third .podium-base { animation: sequenceGrowUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.2s; }
.animate-podium .second .podium-base { animation: sequenceGrowUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.6s; }
.animate-podium .first .podium-base { animation: sequenceGrowUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1.0s; }

/* Step B: Players Fade-in Scale (Matches base completion) */
.animate-podium .third .podium-player { animation: sequenceFadeInScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: 0.8s; }
.animate-podium .second .podium-player { animation: sequenceFadeInScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: 1.2s; }
.animate-podium .first .podium-player { animation: sequenceFadeInScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: 1.6s; }

/* Step C: The Crowning Moment */
.animate-podium .podium-crown {
    animation: sequencePopCrown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
    animation-delay: 2.1s;
}

/* Loop: The Radiant King */
.animate-podium .first .floating-avatar {
    /* Safe delay so loop starts exactly when reveal finishes seamlessly */
    animation: continuousFloatGlow 3s ease-in-out infinite;
    animation-delay: 2.6s; 
}

.animate-podium .first .floating-crown {
    animation: continuousFloatCrown 3s ease-in-out infinite;
    animation-delay: 2.6s; 
}

/* =========================================
   External Profile View Styles
========================================= */
.external-profile-nav {
    display: flex;
    justify-content: flex-start;
    padding: 10px 20px;
    margin-bottom: 10px;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 191, 255, 0.08);
    color: var(--royal-blue);
    border: 1px solid rgba(0, 191, 255, 0.18);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.back-btn i {
    font-size: 1.2rem;
}

.back-btn:active {
    transform: scale(0.95);
    background: rgba(0, 191, 255, 0.15);
}

.friend-action-btn {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.friend-action-btn:active {
    transform: scale(0.95);
}

.friend-action-btn.pending {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.friend-action-btn.is-friend {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    box-shadow: none;
    border: 1.5px solid rgba(16, 185, 129, 0.3);
}

.friend-action-btn.accept-friend {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

/* زر المقارنة */
.compare-action-btn {
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 25px;
    font-weight: 800;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
    transition: all 0.3s ease;
}
.compare-action-btn:active { transform: scale(0.95); }

/* =========================================
   صفحة المقارنة
========================================= */
.compare-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 8px;
}
.compare-nav-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
}

.compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
    gap: 10px;
}
.compare-player {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.compare-avatar-wrap {
    position: relative;
    width: 70px;
    height: 70px;
}
.compare-avatar-wrap img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--card-border);
    background: var(--card-bg);
}
.compare-crown {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.compare-player-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compare-player-rank {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}
.compare-vs-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(124,58,237,0.4);
}

/* قائمة الإحصائيات */
.compare-stats-list {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.compare-stat-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 10px 14px;
}
.compare-stat-label {
    grid-column: 2;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.compare-stat-me,
.compare-stat-them {
    font-weight: 800;
    font-size: 1rem;
}
.compare-stat-me   { text-align: right; }
.compare-stat-them { text-align: left;  }
.compare-stat-me.winner   { color: #10B981; }
.compare-stat-them.winner { color: #10B981; }
.compare-stat-me.loser,
.compare-stat-them.loser  { color: var(--text-secondary); font-weight: 600; opacity: 0.7; }

/* شريط المقارنة داخل كل صف */
.compare-bar-wrap {
    grid-column: 1 / -1;
    height: 5px;
    border-radius: 3px;
    background: var(--card-border);
    overflow: hidden;
    margin-top: 4px;
}
.compare-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #10B981, #059669);
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* بطاقة الفائز */
.compare-winner-card {
    margin: 14px 16px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(236,72,153,0.12) 100%);
    border: 1.5px solid rgba(124,58,237,0.3);
    padding: 22px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.winner-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(124,58,237,0.25), transparent 65%);
    pointer-events: none;
}
.winner-trophy {
    font-size: 2.8rem;
    margin-bottom: 4px;
    animation: trophy-bounce 0.6s ease 0.2s both;
}
@keyframes trophy-bounce {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}
.winner-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 4px;
}
.winner-name {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.winner-score {
    font-size: 0.9rem;
    color: #7C3AED;
    font-weight: 700;
    margin: 0;
}

/* =========================================
   Phase 6: Leaderboard List (Ranks 4-10)
========================================= */
.leaderboard-extension {
    margin: 10px 0 0 0; /* Stretches edge-to-edge and raised closer to podium */
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    
    /* Elegant Container Styling */
    background: rgba(2, 10, 25, 0.88);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 191, 255, 0.14);
    border-radius: 28px 28px 0 0; /* Huge rounded top corners anchoring to bottom */
    padding: 24px 16px 30px 16px; /* Breathing room for inner cards */
    
    /* Scrollable Layout Logic */
    height: calc(100vh - 380px); /* Fill remaining space perfectly */
    min-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Smooth touch scrolling for iOS */
    -webkit-overflow-scrolling: touch;
    
    /* Hide scrollbars for absolute clean look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.leaderboard-extension::-webkit-scrollbar {
    display: none;
}

.list-item.glass-panel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: ltr; /* Force LTR */
    background: rgba(4, 14, 34, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 191, 255, 0.14);
    border-radius: 16px; /* Cards look best rounded */
    padding: 12px 16px; /* Internal padding */
    opacity: 0;
    /* Soft lifted shadow, separated details */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.list-rank {
    font-size: 0.95rem; /* صغير جداً */
    font-weight: 800;
    color: rgba(160, 205, 240, 0.70);
    min-width: 25px; /* Reduced width to push avatar left */
    text-align: left;
    margin-right: 8px; /* Closer to avatar */
    text-shadow: none; /* No engraving */
}

.list-avatar {
    width: 46px; /* Increased size */
    height: 46px; /* Increased size */
    border-radius: 50%;
    margin-right: 15px; /* Spacing before name */
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Separation pop */
    overflow: hidden;
    flex-shrink: 0;
}

.list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-name {
    flex-grow: 1;
    font-size: 1.0rem;
    font-weight: 700;
    color: #DCF0FF;
    text-align: left;
    unicode-bidi: isolate;
}

.list-points {
    font-size: 1.0rem;
    font-weight: 800;
    color: #00BFFF;
    margin-left: auto; /* Push points to absolute right edge */
}

/* Staggered Animation */
@keyframes listFadeSlideIn {
    0% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateX(0); }
}

.animate-list .list-item {
    animation: listFadeSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-list .list-item:nth-child(1) { animation-delay: 2.0s; }
.animate-list .list-item:nth-child(2) { animation-delay: 2.1s; }
.animate-list .list-item:nth-child(3) { animation-delay: 2.2s; }
.animate-list .list-item:nth-child(4) { animation-delay: 2.3s; }
.animate-list .list-item:nth-child(5) { animation-delay: 2.4s; }
.animate-list .list-item:nth-child(6) { animation-delay: 2.5s; }
.animate-list .list-item:nth-child(7) { animation-delay: 2.6s; }

/* =========================================
   Phase 7: Sticky Player Bar
========================================= */
.sticky-player-bar {
    position: fixed;
    bottom: 85px; /* Above the standard bottom navigation */
    left: 15px;
    right: 15px;
    z-index: 100;
    
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: ltr; /* Force LTR */
    
    background: rgba(4, 14, 34, 0.90);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(212, 175, 55, 0.5); /* Golden VIP touch */
    border-radius: 16px;
    padding: 12px 18px;
    
    /* Strong lift shadow to separate it entirely */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 15px rgba(212, 175, 55, 0.08);
    
    /* Hidden initially */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(50px);
}

.sticky-player-bar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sticky-points {
    font-size: 1.1rem;
    font-weight: 900;
    color: #DCF0FF;
    margin-left: auto;
}

/* Gallery Grid */
.shop-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 20px 100px; /* 100px مسافة سفلية لتجنب شريط التنقل */
}

.product-card {
    background: rgba(4, 14, 34, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 191, 255, 0.13);
    border-radius: 24px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    position: relative; /* أضيف لتمركز الشارة */
}

.qty-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--royal-blue);
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(15, 76, 129, 0.3);
    border: 2px solid var(--bg-color);
    z-index: 10;
}

.equipped-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #F1C40F; /* لون ذهبي */
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
    border: 2px solid var(--bg-color);
    z-index: 10;
    white-space: nowrap;
}

.product-card.equipped {
    border-color: #F1C40F;
    box-shadow: 0 4px 20px rgba(241, 196, 15, 0.15);
}

.product-card:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--royal-blue);
    background: rgba(4, 14, 34, 0.80);
    border-radius: 20px;
    margin-bottom: 30px;
}

.product-icon svg {
    width: 100%;
    height: 100%;
}

.product-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

/* ---- Shop Skeleton Loader ---- */
@keyframes shop-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.shop-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 20px 100px;
}
.shop-skel-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 18px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.shop-skel-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(90deg,rgba(255,255,255,0.06) 25%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0.06) 75%);
    background-size: 400px 100%;
    animation: shop-shimmer 1.4s infinite linear;
}
.shop-skel-line {
    height: 11px;
    border-radius: 8px;
    background: linear-gradient(90deg,rgba(255,255,255,0.06) 25%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0.06) 75%);
    background-size: 400px 100%;
    animation: shop-shimmer 1.4s infinite linear;
    animation-delay: 0.1s;
}
.shop-skel-line.wide   { width: 80%; }
.shop-skel-line.narrow { width: 50%; height: 9px; }
.shop-skel-btn {
    width: 90%;
    height: 34px;
    border-radius: 10px;
    margin-top: 4px;
    background: linear-gradient(90deg,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.10) 50%,rgba(255,255,255,0.05) 75%);
    background-size: 400px 100%;
    animation: shop-shimmer 1.4s infinite linear;
    animation-delay: 0.2s;
}

/* -------------------------------------
   Coming Soon / Tasks View
------------------------------------- */
.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    text-align: center;
    padding: 0 20px;
    animation: zoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.coming-soon-icon {
    width: 100px;
    height: 100px;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--royal-blue-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft);
}

.coming-soon i {
    font-size: 3.5rem;
    color: var(--royal-blue);
}

.coming-soon h2 {
    font-size: 1.6rem;
    color: var(--royal-blue);
    margin-bottom: 12px;
    font-weight: 800;
}

.coming-soon p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* -----------------------------------------
   Bottom Navigation — Floating Glassmorphic
------------------------------------------ */
#bottom-navigation {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 460px;
    height: 64px;
    background: rgba(5, 11, 26, 0.84);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 28px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    overflow: visible;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* زر تنقل عادي */
.nav-item {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    transition: color 0.22s ease;
    position: relative;
    padding: 0;
    gap: 5px;
    font-family: inherit;
}

/* أيقونة SVG */
.nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease;
}

/* النص */
.nav-item > span:not(.nav-center-name) {
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    transition: opacity 0.22s ease;
    opacity: 0.7;
}

/* تفعيل الزر العادي */
.nav-item.active {
    color: #00BFFF;
}
.nav-item.active .nav-icon {
    transform: translateY(-3px) scale(1.12);
    filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.55));
}
.nav-item.active > span:not(.nav-center-name) {
    opacity: 1;
}

/* ضغط */
.nav-item:active:not(.nav-center-btn) {
    transform: scale(0.88);
    transition: transform 0.1s ease;
}

/* نقطة المؤشر السفلية */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00BFFF;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: scale(0);
}
.nav-item.active::after {
    opacity: 1;
    transform: scale(1);
}
.nav-center-btn::after { display: none; }

/* ── زر المنتصف — البروفايل ── */
.nav-center-btn {
    flex: 1.3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 7px;
    gap: 0;
    overflow: visible;
}

/* حلقة الصورة البارزة */
.nav-center-avatar-ring {
    position: absolute;
    top: -10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(135deg, #00BFFF 0%, #6A00DC 100%);
    box-shadow:
        0 0 0 2.5px rgba(5, 11, 26, 0.95),
        0 4px 14px rgba(0, 191, 255, 0.18);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
    flex-shrink: 0;
}
/* ضغط — ترتفع قليلاً */
.nav-center-btn:active .nav-center-avatar-ring {
    transform: translateY(-10px) scale(1.04);
    transition: transform 0.14s ease;
}
/* تفعيل — ترتفع وتتوهج */
.nav-center-btn.active .nav-center-avatar-ring {
    transform: translateY(-12px) scale(1.07);
    box-shadow:
        0 0 0 2.5px rgba(5, 11, 26, 0.95),
        0 0 22px rgba(0, 191, 255, 0.5),
        0 6px 20px rgba(0, 191, 255, 0.3);
}

/* صورة اللاعب */
.nav-center-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: rgba(0, 30, 60, 0.8);
}

/* اسم اللاعب */
.nav-center-name {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76px;
    line-height: 1;
    transition: color 0.22s ease;
    margin-top: 16px;
}
.nav-center-btn.active .nav-center-name {
    color: #00BFFF;
}

/* -------------------------------------
   Bottom Sheet & Overlay Styling
------------------------------------- */
.sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sheet-overlay.active {
    opacity: 1;
    visibility: visible;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65vh; /* ارتفاع النافذة */
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid var(--royal-blue-light);
    border-radius: 32px 32px 0 0;
    z-index: 2000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
}

.bottom-sheet.active {
    transform: translateY(0);
}

.sheet-drag-handle {
    width: 40px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    margin: 12px auto;
}

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
}

.sheet-header h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 800;
    margin: 0;
}

.sheet-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sheet-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.sheet-content {
    flex: 1;
    overflow-y: auto;
    /* Hide scrollbar for clean UI */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sheet-content::-webkit-scrollbar {
    display: none;
}

/* -------------------------------------

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

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* -------------------------------------
   Bottom Sheet Inner Content
------------------------------------- */

/* 1. Mini Leaderboard (Points) */
.mini-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    background: rgba(4, 14, 34, 0.75);
    border-radius: 14px;
    padding: 12px 16px;
    transition: transform 0.2s ease;
}

.leaderboard-row.current-user {
    background: rgba(0, 191, 255, 0.15);
    color: var(--text-light);
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2);
    transform: scale(1.02);
    border: 1px solid rgba(0, 191, 255, 0.4);
}

.leaderboard-row.current-user .lb-name,
.leaderboard-row.current-user .lb-points {
    color: var(--text-light);
}

.lb-rank {
    font-size: 1.1rem;
    font-weight: 800;
    width: 30px;
    color: var(--text-secondary);
}

.leaderboard-row.current-user .lb-rank {
    color: rgba(255, 255, 255, 0.9);
}

.lb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 12px;
    border: 2px solid var(--card-bg);
}

.lb-name {
    flex: 1;
    font-weight: 700;
    color: var(--text-primary);
}

.lb-points {
    font-weight: 800;
    color: var(--royal-blue);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 2. Accuracy Donut Chart */
.accuracy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.donut-chart-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 24px;
}

.donut-chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--royal-blue) 0%, var(--royal-blue-medium) 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-soft);
    transition: background 1s ease-out;
}

.donut-inner {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}

.donut-text {
    font-size: 2rem;
    font-weight: 900;
    color: var(--royal-blue);
}

.accuracy-legend {
    display: flex;
    gap: 20px;
    background: rgba(15, 76, 129, 0.05);
    padding: 12px 24px;
    border-radius: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.legend-item strong {
    color: var(--text-primary);
    font-size: 1.1rem;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-color.correct { background: var(--royal-blue); }
.legend-color.wrong { background: var(--royal-blue-medium); }

/* 3. Invites (Referral) */
.invites-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    text-align: center;
}

.invites-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.referral-box {
    width: 100%;
    background: rgba(15, 76, 129, 0.05);
    border: 1px dashed var(--royal-blue-medium);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

#referral-link-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--royal-blue);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    outline: none;
    direction: ltr;
}

.invites-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.invites-actions button {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.invites-actions button:active {
    transform: scale(0.95);
}

.clickable-balance {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.clickable-balance:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.clickable-balance:active {
    transform: scale(0.95);
}

.btn-royal {
    background: var(--royal-blue);
    color: var(--text-light);
    box-shadow: 0 4px 15px rgba(15, 76, 129, 0.3);
}

.btn-telegram {
    background: #2AABEE;
    color: var(--text-light);
    box-shadow: 0 4px 15px rgba(42, 171, 238, 0.3);
}

/* 4. Clan Info Card */
.clan-container {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.clan-card-large {
    width: 100%;
    background: linear-gradient(145deg, rgba(0, 191, 255, 0.05) 0%, rgba(0, 60, 120, 0.18) 100%);
    border: 1px solid var(--royal-blue-light);
    border-radius: 24px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.clan-logo-wrapper {
    width: 80px;
    height: 80px;
    background: var(--royal-blue);
    color: var(--text-light);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px rgba(15, 76, 129, 0.2);
    transform: rotate(45deg);
}

.clan-logo-wrapper svg {
    transform: rotate(-45deg);
}

.clan-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--royal-blue);
    margin-bottom: 24px;
}

.clan-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 12px;
}

.clan-info-item {
    background: var(--card-bg);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-soft);
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.info-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* 6. Grid-level Flash Sale Styles */
.product-card.flash-sale-active {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15), inset 0 0 15px rgba(212, 175, 55, 0.05);
    position: relative;
    overflow: visible; /* To allow timer to overlap slightly if needed */
}

/* Evaporation effect for flash sale completion */
.product-card.flash-sale-evaporate .flash-radial-timer {
    animation: evaporateEffect 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.flash-radial-timer {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 34px;
    height: 34px;
    background: var(--card-bg);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(15, 76, 129, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 250px;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: rgba(15, 76, 129, 0.05);
    stroke-width: 2.5;
}

.circle {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke: #D4AF37; /* Royal Gold */
    transition: stroke-dasharray 1s linear;
}

.timer-text {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: monospace;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Evaporation Animation */
.evaporate-animation {
    animation: evaporateEffect 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none; /* Prevent clicks during animation */
}

@keyframes evaporateEffect {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        filter: blur(5px);
    }
}

/* 7. Product Details (Shop) */
.product-details-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 10px;
}

.product-details-icon {
    width: 90px;
    height: 90px;
    background: rgba(15, 76, 129, 0.05);
    border: 1px solid rgba(15, 76, 129, 0.1);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--royal-blue);
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(15, 76, 129, 0.08);
}

.product-details-icon svg {
    width: 60%;
    height: 60%;
    filter: drop-shadow(0 2px 8px rgba(15, 76, 129, 0.3));
}

.product-details-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.product-details-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 90%;
}

.product-price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(15, 76, 129, 0.05);
    padding: 12px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    min-width: 200px;
}

.price-details-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.original-price {
    font-size: 1rem;
    color: var(--text-secondary);
    text-decoration: line-through;
    opacity: 0.6;
}

.current-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.current-price-row span#sheet-product-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--royal-blue);
}

.discount-badge {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    background: #ff4757;
    padding: 2px 8px;
    border-radius: 8px;
    margin-right: 8px;
    box-shadow: 0 2px 6px rgba(255, 71, 87, 0.3);
}

.price-icon {
    width: 28px;
    height: 28px;
}

.full-width-btn {
    width: 100%;
    padding: 16px;
    border-radius: 18px;
    font-size: 1.1rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}

.full-width-btn:active {
    transform: scale(0.97);
}

/* Quantity Selector (Bulk Purchase) */
.quantity-selector-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(15, 76, 129, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(15, 76, 129, 0.1);
}

.qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--royal-blue);
    border: 1px solid rgba(15, 76, 129, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 76, 129, 0.05);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.qty-btn:active {
    transform: scale(0.9);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.qty-display {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-primary);
    min-width: 40px;
    text-align: center;
}

/* Purchase Button States */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.btn-error {
    background: #B03A2E !important; /* لون أحمر مطفأ */
    box-shadow: 0 4px 15px rgba(176, 58, 46, 0.3) !important;
}

.shake-animation {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

.btn-success {
    background: #27AE60 !important; /* أخضر ملكي */
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Spinner Animation for Loading State */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.spinner {
    animation: spin 2s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

.spinner .path {
    stroke: currentColor;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

/* =====================================
   نظام الأكواد الترويجية (Promo Codes)
   ===================================== */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
}

.promo-code-section {
    grid-column: 1 / -1;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 76, 129, 0.1);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
    margin-top: 4px;
}

.promo-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.promo-section-icon {
    width: 36px;
    height: 36px;
    background: var(--royal-blue-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.promo-section-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--royal-blue);
}

.promo-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.promo-section-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.promo-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.promo-input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid rgba(0, 191, 255, 0.18);
    border-radius: 12px;
    background: rgba(4, 14, 34, 0.80);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    direction: ltr;
    text-align: center;
    min-width: 0;
}

.promo-input:focus {
    border-color: var(--royal-blue);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.12);
}

.promo-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #A0AEC0;
    font-size: 0.82rem;
}

.promo-btn {
    padding: 12px 16px;
    background: var(--royal-blue);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.15s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100px;
    flex-shrink: 0;
}

.promo-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.promo-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.promo-btn.shake-error {
    animation: shake 0.4s ease-in-out;
    background-color: #E53E3E !important;
}

.promo-btn.success-state {
    background-color: #38A169 !important;
}

/* ══════════════════════════════════════════
   Skeleton-line (shared across all sections)
   ══════════════════════════════════════════ */
.skeleton-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.04) 80%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite linear;
    border-radius: 8px;
}

/* سكيليتون قسم البروفايل */
#profile-skeleton {
    position: absolute;
    inset: 0;
    background: var(--main-bg, #040a1a);
    z-index: 5;
    padding: 20px 16px;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
#profile-skeleton.hidden {
    opacity: 0;
    pointer-events: none;
}
.profile-skel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.profile-skel-meta { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.profile-skel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* سكيليتون قسم العشيرة */
#clan-skeleton {
    padding: 24px 16px;
    display: none;
}
#clan-skeleton.active { display: block; }
.clan-skel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.clan-skel-em {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 18px;
}
.clan-skel-rows { display: flex; flex-direction: column; gap: 10px; }

/* ==========================================
   Skeleton Loaders & Error States (Leaderboard)
   ========================================== */

/* Skeleton Base Animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton-avatar, .skeleton-text, .skeleton-base {
    background: #e2e8f0;
    background-image: linear-gradient(90deg, #e2e8f0 0px, #edf2f7 40px, #e2e8f0 80px);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 8px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.skeleton-avatar.small {
    width: 32px;
    height: 32px;
    margin: 0 12px 0 0;
}

.skeleton-avatar.large {
    width: 55px;
    height: 55px;
}

.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
}

.skeleton-text.skeleton-name { width: 60%; margin-left: auto; margin-right: auto; }
.skeleton-text.skeleton-points { width: 40%; margin-left: auto; margin-right: auto; height: 10px; }
.skeleton-text.stretch { width: 100%; height: 16px; margin: 0; }

/* Podium Skeleton */
.skeleton-podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 40px;
    height: 180px;
}

.skeleton-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.skeleton-base {
    width: 100%;
    border-radius: 12px 12px 0 0;
    margin-top: 10px;
}

.skeleton-base.short { height: 40px; }
.skeleton-base { height: 60px; } /* Medium */
.skeleton-base.tall { height: 80px; }

/* List Skeleton */
.skeleton-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
}

.skeleton-list-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(4, 14, 34, 0.70);
    border-radius: 16px;
    border: 1px solid rgba(0, 191, 255, 0.08);
}

/* Error State */
.leaderboard-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: rgba(4, 14, 34, 0.80);
    border-radius: 20px;
    margin: 20px;
    border: 1px solid rgba(229, 62, 62, 0.3);
}

.error-icon {
    font-size: 3rem;
    color: #E53E3E;
    margin-bottom: 15px;
}

.leaderboard-error-state h3 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.leaderboard-error-state p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.retry-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--royal-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.retry-btn:active {
    transform: scale(0.95);
}

/* =========================================
   نظام الأصدقاء
========================================= */

/* صف الرتبة + أيقونة الأصدقاء */
.rank-friends-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* زر أيقونة الأصدقاء الصغير */
.friends-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.friends-icon-btn:active { transform: scale(0.9); }
.friends-icon-btn i { font-size: 1rem; line-height: 1; }

.friends-count-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #EF4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ---- Overlay خلف اللوحة ---- */
.friends-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 900;
    backdrop-filter: blur(2px);
}

/* ---- لوحة الأصدقاء الرئيسية ---- */
.friends-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 901;
    background: var(--bg-primary, #0A1628);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.friends-panel.open {
    transform: translateY(0);
}

.friends-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.06));
    flex-shrink: 0;
}
.friends-panel-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.friends-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--card-bg, rgba(255,255,255,0.06));
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
}
.friends-close-btn:active { transform: scale(0.9); }

/* ---- شريط البحث ---- */
.friends-search-wrap {
    padding: 12px 16px 0;
    flex-shrink: 0;
    position: relative;
}
.friends-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg, rgba(255,255,255,0.06));
    border: 1px solid var(--card-border, rgba(255,255,255,0.08));
    border-radius: 14px;
    padding: 10px 14px;
}
.friends-search-icon { color: var(--text-secondary); font-size: 1.1rem; flex-shrink: 0; }
.friends-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    direction: rtl;
}
.friends-search-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.friends-search-clear {
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.friends-search-clear:active { transform: scale(0.9); }

/* نتائج البحث */
.friends-search-results {
    margin-top: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    transition: background 0.15s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:active { background: rgba(124,58,237,0.1); }
.search-result-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border);
    flex-shrink: 0;
}
.search-result-info { flex: 1; }
.search-result-name { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); }
.search-result-points { font-size: 0.75rem; color: var(--text-secondary); }
.search-result-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(124,58,237,0.15);
    color: #7C3AED;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
}
.search-result-add:active { transform: scale(0.9); }
.search-result-add.sent { background: rgba(245,158,11,0.15); color: #F59E0B; }
.search-result-add.friend { background: rgba(16,185,129,0.15); color: #10B981; cursor: default; }

/* ---- قائمة الأصدقاء ---- */
.friends-list-section {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}
.friends-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
}
.friends-list { display: flex; flex-direction: column; gap: 8px; }
.friend-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.friend-list-item:active {
    background: rgba(124,58,237,0.1);
    border-color: rgba(124,58,237,0.3);
    transform: scale(0.98);
}
.friend-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border);
    flex-shrink: 0;
}
.friend-list-info { flex: 1; }
.friend-list-name { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.friend-list-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.friend-list-arrow { color: var(--text-secondary); font-size: 1.1rem; }

.friends-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ---- نافذة تفاصيل الصديق ---- */
.friend-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.friend-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.friend-modal-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--bg-secondary, #0D1F3C);
    border-radius: 24px 24px 0 0;
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: slide-up-modal 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slide-up-modal {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.friend-modal-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(124,58,237,0.4);
    object-fit: cover;
    margin-bottom: 4px;
}
.friend-modal-name {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}
.friend-modal-rank {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 14px;
}
.friend-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}
.fmd-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 14px;
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.fmd-btn:active { transform: scale(0.97); }
.fmd-btn-invite {
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
.fmd-btn-profile {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}
.fmd-btn-remove {
    background: rgba(239,68,68,0.1);
    color: #EF4444;
    border: 1px solid rgba(239,68,68,0.2);
}

/* زر طلبات الصداقة */
.pending-requests-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(217,119,6,0.1) 100%);
    border: 1.5px solid rgba(245,158,11,0.3);
    border-radius: 14px;
    color: #F59E0B;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.pending-requests-btn i { font-size: 1.1rem; }
.pending-requests-btn:active { transform: scale(0.98); }

.pending-count-chip {
    margin-right: auto;
    background: #F59E0B;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* النقطة الحمراء على أيقونة الأصدقاء */
.friends-icon-btn .friends-pending-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #EF4444;
    border: 2px solid var(--bg-primary, #0A1628);
}

/* بطاقة طلب الصداقة */
.pending-req-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border);
    width: 100%;
}
.pending-req-item:last-child { border-bottom: none; }
.pending-req-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border);
    flex-shrink: 0;
}
.pending-req-info { flex: 1; }
.pending-req-name { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); }
.pending-req-time { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
.pending-req-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pending-req-accept, .pending-req-reject {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.15s;
}
.pending-req-accept:active, .pending-req-reject:active { transform: scale(0.88); }
.pending-req-accept { background: rgba(16,185,129,0.15); color: #10B981; }
.pending-req-reject { background: rgba(239,68,68,0.12); color: #EF4444; }

/* =========================================
   منصة الفخر — Showcase Slots
========================================= */
.showcase-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 14px;
    margin: 0 16px 20px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    position: relative;
}
.showcase-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    opacity: 0.7;
}
.showcase-slots {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

/* الخانة الواحدة */
.showcase-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    cursor: pointer;
}

/* الشكل السداسي (clip-path hexagon) */
.showcase-slot-hex {
    width: 58px;
    height: 58px;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: rgba(255,255,255,0.05);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* الخانة الممتلئة — إطار ذهبي فخم */
.showcase-slot.filled {
    padding: 0;
    background: transparent;
    clip-path: none;
}
.showcase-slot.filled .showcase-slot-hex {
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    width: 58px;
    height: 58px;
    border-radius: 0;
    border: 2px solid #FFD700;
    box-shadow: 0 0 10px rgba(255,215,0,0.5), inset 0 0 8px rgba(255,215,0,0.08);
    background: rgba(255,215,0,0.06);
}
.showcase-slot {
    width: auto;
    height: auto;
}

/* خانة فارغة */
.showcase-slot.empty .showcase-slot-hex {
    background: rgba(255,255,255,0.04);
}
.showcase-slot.empty .showcase-slot-icon {
    font-size: 1.1rem;
    color: var(--text-secondary);
    opacity: 0.35;
    font-style: normal;
}

/* خانة ممتلئة — أيقونة كبيرة */
.showcase-slot.filled .showcase-slot-icon {
    font-size: 1.65rem;
    line-height: 1;
}
/* نبض الإطار الذهبي */
@keyframes gold-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.45), inset 0 0 6px rgba(255,215,0,0.06); }
    50%       { box-shadow: 0 0 18px rgba(255,215,0,0.75), inset 0 0 12px rgba(255,215,0,0.12); }
}
.showcase-slot.filled .showcase-slot-hex {
    animation: gold-glow-pulse 3s ease-in-out infinite;
}

.showcase-slot-name {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.75;
}

/* تأثير النقر */
.showcase-slot:active .showcase-slot-hex {
    transform: scale(0.9);
}

/* Tooltip — mini popup */
.showcase-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    background: var(--bg-secondary, #0D1F3C);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 160px;
    max-width: 200px;
    z-index: 400;
    pointer-events: none;
    opacity: 0;
    transition: all 0.22s ease;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.showcase-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.showcase-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--card-border);
}
.showcase-tooltip-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.showcase-tooltip-desc {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.showcase-tooltip-unpin {
    font-size: 0.6rem;
    color: rgba(239,68,68,0.7);
    margin-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 5px;
}

/* Toast notification */
.showcase-toast {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-secondary, #0D1F3C);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    text-align: center;
    max-width: 280px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    white-space: nowrap;
}
.showcase-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.showcase-toast.error { border-color: rgba(239,68,68,0.4); color: #FCA5A5; }
.showcase-toast.success { border-color: rgba(16,185,129,0.4); color: #6EE7B7; }

/* =========================================
   iOS Toggle — المهام / الإنجازات
========================================= */
.ios-toggle-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 16px 0;
    flex-shrink: 0;
}
.ios-toggle {
    position: relative;
    display: flex;
    background: rgba(255,255,255,0.055);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 50px;
    padding: 4px;
    width: 96px;
    height: 44px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
}
/* الـ thumb المتحرك */
.ios-toggle-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
    border-radius: 50px;
    transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
    box-shadow: 0 2px 10px rgba(124,58,237,0.55), 0 0 0 0.5px rgba(168,85,247,0.3);
    will-change: transform;
}
.ios-toggle-thumb.slide-right {
    transform: translateX(100%);
}
/* أزرار الأيقونات */
.ios-toggle-btn {
    flex: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: color 0.25s ease, transform 0.15s ease;
    color: rgba(255,255,255,0.35);
    font-size: 1.15rem;
    line-height: 1;
}
.ios-toggle-btn.active {
    color: #FFFFFF;
}
.ios-toggle-btn:active { transform: scale(0.88); }
.ios-toggle-btn i { pointer-events: none; }

.section-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* =========================================
   ملخص الإنجازات
========================================= */
.ach-summary-bar {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 14px 20px 8px;
    flex-shrink: 0;
}
.ach-summary-unlocked {
    font-size: 1.6rem;
    font-weight: 900;
    color: #A78BFA;
    line-height: 1;
}
.ach-summary-sep { font-size: 1rem; color: var(--text-secondary); }
.ach-summary-total { font-size: 1rem; font-weight: 700; color: var(--text-secondary); }
.ach-summary-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-right: 4px;
}

/* =========================================
   تبويبات الفئات
========================================= */
.ach-tabs-wrapper {
    overflow-x: auto;
    padding: 0 16px 12px;
    flex-shrink: 0;
    scrollbar-width: none;
}
.ach-tabs-wrapper::-webkit-scrollbar { display: none; }
.ach-tabs {
    display: flex;
    gap: 6px;
    width: max-content;
}
.ach-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--card-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.ach-tab.active {
    background: rgba(124,58,237,0.18);
    border-color: rgba(124,58,237,0.55);
    color: #A78BFA;
}

/* =========================================
   شبكة الإنجازات
========================================= */
.ach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 16px 80px;
    overflow-y: auto;
    flex: 1;
}

/* بطاقة الإنجاز الواحد */
.ach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 6px 10px;
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.2s;
    position: relative;
    text-align: center;
}
.ach-item:active { transform: scale(0.94); }

/* أيقونة الإنجاز */
.ach-item-icon-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: all 0.3s ease;
}

/* حالة مقفل */
.ach-item.locked .ach-item-icon-wrap {
    filter: grayscale(1) brightness(0.45);
}
.ach-lock-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 17px;
    height: 17px;
    background: var(--bg-secondary, #0D1F3C);
    border: 1.5px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: var(--text-secondary);
}

.ach-item-name {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ach-item.unlocked .ach-item-name { color: var(--text-primary); }

.ach-item-date {
    font-size: 0.6rem;
    color: var(--text-secondary);
    opacity: 0.7;
    line-height: 1;
}

/* حالة مفتوحة — glow */
.ach-item.unlocked {
    border-color: rgba(124,58,237,0.3);
    background: rgba(124,58,237,0.06);
}
.ach-item.unlocked .ach-item-icon-wrap {
    box-shadow: 0 0 14px rgba(124,58,237,0.4);
    background: rgba(124,58,237,0.1);
    border: 1px solid rgba(124,58,237,0.3);
}

/* ألوان glow لبعض الفئات */
.ach-item.unlocked[data-cat="victories"] .ach-item-icon-wrap {
    box-shadow: 0 0 14px rgba(245,158,11,0.45);
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
}
.ach-item.unlocked[data-cat="wealth"] .ach-item-icon-wrap {
    box-shadow: 0 0 14px rgba(16,185,129,0.4);
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.3);
}
.ach-item.unlocked[data-cat="special"] .ach-item-icon-wrap {
    box-shadow: 0 0 14px rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.07);
    border-color: rgba(239,68,68,0.25);
}

/* إنجاز Master يأخذ عرض الصف بالكامل */
.ach-item.master {
    grid-column: span 3;
    flex-direction: row;
    gap: 12px;
    padding: 12px 16px;
}
.ach-item.master .ach-item-icon-wrap {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    font-size: 1.4rem;
}
.ach-item.master .ach-item-name {
    font-size: 0.82rem;
    text-align: right;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-height: 1.2em;
}
.ach-item.master.unlocked {
    border-color: rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.07);
}
.ach-item.master.unlocked .ach-item-icon-wrap {
    box-shadow: 0 0 18px rgba(245,158,11,0.55);
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.4);
    animation: master-pulse 3s ease-in-out infinite;
}
@keyframes master-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(245,158,11,0.4); }
    50%       { box-shadow: 0 0 24px rgba(245,158,11,0.7), 0 0 0 3px rgba(245,158,11,0.1); }
}

/* Skeleton شبكة */
.ach-item-skeleton {
    height: 105px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--card-bg) 0%, rgba(255,255,255,0.04) 40%, var(--card-bg) 80%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    border: 1px solid var(--card-border);
}

/* =========================================
   Bottom Sheet الإنجاز
========================================= */
.ach-bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.ach-bs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ach-bs-card {
    position: relative;
    background: var(--bg-secondary, #0D1F3C);
    border-radius: 24px 24px 0 0;
    padding: 8px 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.34,1.4,0.64,1);
    max-height: 70vh;
    overflow-y: auto;
    border-top: 1px solid var(--card-border);
}
.ach-bottom-sheet.open .ach-bs-backdrop { opacity: 1; }
.ach-bottom-sheet.open .ach-bs-card { transform: translateY(0); }

.ach-bs-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--card-border);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.ach-bs-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: rgba(124,58,237,0.12);
    border: 2px solid rgba(124,58,237,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.ach-bs-icon-wrap.unlocked {
    box-shadow: 0 0 24px rgba(124,58,237,0.45);
}
.ach-bs-icon { font-size: 2.4rem; }
.ach-bs-name {
    font-size: 1rem;
    font-weight: 900;
    color: #FFFFFF;
    text-align: center;
    margin: 2px 0 0;
}
.ach-bs-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    margin: 0;
    padding: 0 8px;
}

.ach-bs-progress-section {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.ach-bs-progress-bar-bg {
    flex: 1;
    height: 7px;
    background: var(--card-border);
    border-radius: 4px;
    overflow: hidden;
}
.ach-bs-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #7C3AED, #A855F7);
    width: 0%;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
.ach-bs-progress-fill.complete {
    background: linear-gradient(90deg, #10B981, #34D399);
}
.ach-bs-progress-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 40px;
    direction: ltr;
}
.ach-bs-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #F59E0B;
    margin-top: 2px;
}
.ach-bs-date {
    font-size: 0.72rem;
    color: #10B981;
    font-weight: 600;
    margin: 0;
    padding: 4px 12px 0;
}
.ach-bs-pin-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 11px 20px;
    border-radius: 13px;
    border: 1.5px solid rgba(124,58,237,0.35);
    background: rgba(124,58,237,0.1);
    color: #A78BFA;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    justify-content: center;
    transition: all 0.22s ease;
    margin-top: 2px;
}
.ach-bs-pin-btn:active { transform: scale(0.96); }
.ach-bs-pin-btn.pinned {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.35);
    color: #FCA5A5;
}
.ach-bs-pin-btn i { font-size: 1.1rem; }

/* =========================================
   قسم المهام اليومية
========================================= */

/* رأس القسم */
.tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
    flex-shrink: 0;
}
.tasks-header-text { flex: 1; }
.tasks-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.tasks-date {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
}
.tasks-header-count {
    display: flex;
    align-items: baseline;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 6px 14px;
    font-weight: 800;
}
.tasks-header-count > span:first-child {
    font-size: 1.3rem;
    color: #7C3AED;
    transition: all 0.4s ease;
}
.tasks-count-sep { font-size: 0.9rem; color: var(--text-secondary); margin: 0 1px; }
.tasks-header-count > span:last-child { font-size: 0.9rem; color: var(--text-secondary); }

/* =========================================
   شريط المكافآت المرحلية — mbar (تصميم البطاقات)
========================================= */
.mbar-wrap {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 14px 16px 16px;
    margin: 0 16px 18px;
    flex-shrink: 0;
}
.mbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.mbar-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.mbar-count {
    font-size: 0.75rem;
    font-weight: 800;
    color: #A78BFA;
    direction: ltr;
}

/* الشريط الرفيع العلوي */
.mbar-track {
    position: relative;
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    margin-bottom: 12px;
    direction: ltr;
    overflow: hidden;
}

/* نقاط الفصل على الشريط */
.mbar-tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,0.15);
    transform: translateX(-50%);
    z-index: 1;
}

/* شريط التقدم المتحرك */
.mbar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, #6D28D9, #A855F7, #C084FC);
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(168,85,247,0.6);
}

/* صف البطاقات الثلاث */
.mbar-cards-row {
    display: flex;
    gap: 8px;
    direction: ltr;
}

/* بطاقة مكافأة — الحالة الافتراضية (مغلقة) */
.mbar-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 11px 6px 9px;
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    cursor: default;
    user-select: none;
    transition: background 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, transform 0.2s ease;
}
.mbar-node:active { transform: scale(0.96); }

/* أيقونة دائرة داخل البطاقة */
.mbar-icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    filter: grayscale(1) brightness(0.45);
    transition: filter 0.4s ease, border-color 0.4s ease,
                box-shadow 0.4s ease, background 0.4s ease;
}
.mbar-emoji { pointer-events: none; display: block; }

/* تسمية البطاقة */
.mbar-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: rgba(255,255,255,0.28);
    transition: color 0.35s ease;
    text-align: center;
    letter-spacing: 0.3px;
}

/* ===== حالة: مفتوحة — بنفسجي ===== */
.mbar-node.unlocked:not(.claimed) {
    cursor: pointer;
}
.mbar-node.unlocked:not(.claimed):active {
    transform: scale(0.93);
}
.mbar-node.unlocked {
    background: rgba(124,58,237,0.1);
    border-color: rgba(168,85,247,0.4);
    box-shadow: 0 0 14px rgba(168,85,247,0.15);
}
.mbar-node.unlocked .mbar-icon-wrap {
    filter: grayscale(0) brightness(1);
    background: rgba(124,58,237,0.2);
    border-color: rgba(168,85,247,0.7);
    animation: mbar-glow-gift 1.8s ease-in-out infinite;
}
.mbar-node.unlocked .mbar-label { color: #C4B5FD; }

@keyframes mbar-glow-gift {
    0%, 100% { box-shadow: 0 0 8px rgba(168,85,247,0.55), 0 0 16px rgba(168,85,247,0.2); }
    50%       { box-shadow: 0 0 18px rgba(168,85,247,0.95), 0 0 34px rgba(168,85,247,0.4); }
}

/* ===== المحطة 3 (كنز) — ذهبي ===== */
.mbar-node[id="milestone-2"].unlocked {
    background: rgba(245,158,11,0.09);
    border-color: rgba(245,158,11,0.45);
    box-shadow: 0 0 14px rgba(245,158,11,0.14);
}
.mbar-node[id="milestone-2"].unlocked .mbar-icon-wrap {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.75);
    animation: mbar-glow-treasure 1.8s ease-in-out infinite;
}
.mbar-node[id="milestone-2"].unlocked .mbar-label { color: #FCD34D; }

@keyframes mbar-glow-treasure {
    0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.6), 0 0 20px rgba(245,158,11,0.22); }
    50%       { box-shadow: 0 0 22px rgba(245,158,11,1),   0 0 40px rgba(245,158,11,0.42); }
}

/* ===== حالة: تم الاستلام — أخضر ===== */
.mbar-node.claimed {
    background: rgba(16,185,129,0.07);
    border-color: rgba(16,185,129,0.32);
    box-shadow: none;
}
.mbar-node.claimed .mbar-icon-wrap {
    filter: none;
    background: rgba(16,185,129,0.13);
    border-color: rgba(16,185,129,0.5);
    animation: none;
    box-shadow: none;
}
.mbar-node.claimed .mbar-icon-wrap::after {
    content: '✓';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(16,185,129,0.84);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    font-weight: 900;
}
.mbar-node.claimed .mbar-label { color: rgba(52,211,153,0.7); }

/* pop-in عند الفتح */
@keyframes mbar-pop {
    0%   { transform: scale(0.5) rotate(-15deg); }
    65%  { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.mbar-node.unlocked .mbar-emoji {
    animation: mbar-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* ---- Bottom Sheet تفاصيل المهمة ---- */
.quest-bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.quest-bs-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.quest-bs-card {
    position: relative;
    background: var(--bg-secondary, #0D1F3C);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid var(--card-border);
    padding: 8px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 0.36s cubic-bezier(0.34,1.3,0.64,1);
}
.quest-bottom-sheet.open .quest-bs-backdrop { opacity: 1; }
.quest-bottom-sheet.open .quest-bs-card    { transform: translateY(0); }
.quest-bs-handle {
    width: 36px; height: 4px;
    background: var(--card-border);
    border-radius: 2px;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.quest-bs-icon { font-size: 2.6rem; line-height: 1; }
.quest-bs-name {
    font-size: 1rem;
    font-weight: 900;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}
.quest-bs-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    margin: 0;
    padding: 0 8px;
}
.quest-bs-progress-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.quest-bs-bar-bg {
    flex: 1;
    height: 7px;
    background: var(--card-border);
    border-radius: 4px;
    overflow: hidden;
}
.quest-bs-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7C3AED, #A855F7);
    border-radius: 4px;
    width: 0%;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
.quest-bs-bar-txt {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 40px;
    direction: ltr;
}
.quest-bs-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #F59E0B;
    margin-top: 2px;
}

/* ---- قسم المهام النشطة ---- */
.quests-section {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 20px;
    display: flex;
    flex-direction: column;
}
.quests-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    padding-top: 4px;
}

/* رأس قسم المهام النشطة (العنوان + زر تبديل الكل) */
.quests-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* زر تبديل الكل */
.tasks-swap-all-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,100,50,0.1);
    border: 1px solid rgba(255,100,50,0.25);
    border-radius: 10px;
    color: #FF6A3D;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 11px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    letter-spacing: 0.01em;
}
.tasks-swap-all-btn:active  { background: rgba(255,100,50,0.22); }
.tasks-swap-all-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* زر تبديل المهمة الواحدة (داخل بطاقة) */
.task-swap-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.15s;
    flex-shrink: 0;
}
.task-swap-btn:active {
    background: rgba(255,165,0,0.18);
    color: #FBBF24;
    transform: scale(0.9);
}
.quests-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* بطاقة المهمة الواحدة */
.quest-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.45s ease, transform 0.45s ease, max-height 0.45s ease;
    overflow: hidden;
    max-height: 200px;
}
.quest-card.fading-out {
    opacity: 0;
    transform: translateX(30px);
    max-height: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
}

.quest-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.quest-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(124,58,237,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid rgba(124,58,237,0.2);
}
.quest-info { flex: 1; }
.quest-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0 0 4px;
}
.quest-reward {
    font-size: 0.78rem;
    color: #F59E0B;
    font-weight: 700;
}

.quest-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.quest-progress-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}
.quest-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #7C3AED, #A855F7);
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
    width: 0%;
}
.quest-progress-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 36px;
    text-align: left;
    direction: ltr;
}

/* Skeleton loading */
.quest-skeleton {
    height: 82px;
    border-radius: 16px;
    background: linear-gradient(90deg,
        var(--card-bg) 0%,
        rgba(255,255,255,0.04) 40%,
        var(--card-bg) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    border: 1px solid var(--card-border);
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* حالة إتمام جميع المهام */
.quests-all-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}
.quests-done-emoji { font-size: 3rem; }
.quests-all-done h3 {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}
.quests-all-done p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* =====================================================
   بوابة القدر — Clan Gate Premium (cg-*)
===================================================== */

/* Section — fixed overlay يكسر قيود #app-container */
.clan-view-full {
    position: fixed !important;
    inset: 0 !important;
    bottom: 78px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10;
    width: 100% !important;
    height: auto !important;
}

/* الحاوية الرئيسية */
.cg-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 64px);
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

/* كل نصف — يغطي الحاوية كاملاً ويُقطع بـ clip-path */
.cg-half {
    position: absolute;
    inset: 0;
    display: flex;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: clip-path;
}

/* طبقة الخلفية */
.cg-bg {
    position: absolute;
    inset: 0;
}

/* ── النصف العلوي / مسار الملوك (تأسيس) ── */
.cg-top {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2;
}

/* ── النصف السفلي / مسار الفرسان (انضمام) ── */
.cg-bottom {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

/* ── خلفية ذهبية عميقة — تأسيس ── */
.cg-bg-gold {
    background:
        radial-gradient(circle at 25% 28%, #5a4000 0%, #2a1e00 40%, #0e0900 75%, #000 100%);
}

/* ── خلفية زرقاء ملكية — انضمام ── */
.cg-bg-blue {
    background:
        radial-gradient(circle at 75% 72%, #001f3f 0%, #000d1f 40%, #080810 75%, #000 100%);
}

/* محتوى كل نصف — absolute لتجنب تأثير RTL تماماً */
.cg-content {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
    direction: rtl;
}

/* تأسيس — أعلى يسار المثلث الذهبي (الجانب الأيسر الفيزيائي) */
.cg-content-top {
    top: 13%;
    left: 8%;
    right: auto;
}

/* انضمام — أسفل يمين المثلث الأزرق (الجانب الأيمن الفيزيائي) */
.cg-content-bottom {
    bottom: 11%;
    right: 8%;
    left: auto;
}

/* الأيقونة الضخمة */
.cg-icon {
    display: block;
    line-height: 1;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.7));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease;
}

/* الكرت الزجاجي الفخم */
.cg-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 14px;
    padding: 10px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cg-card-gold {
    border: 1.5px solid rgba(255, 215, 0, 0.85);
    box-shadow:
        0 0 14px rgba(255, 215, 0, 0.25),
        inset 0 0 24px rgba(255, 165, 0, 0.06);
}

.cg-card-blue {
    border: 1.5px solid rgba(0, 191, 255, 0.85);
    box-shadow:
        0 0 14px rgba(0, 191, 255, 0.25),
        inset 0 0 24px rgba(0, 100, 220, 0.06);
}

/* العنوان المتوهج */
.cg-title {
    font-size: 2.1rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: 0.1em;
    line-height: 1;
}

.cg-title-gold {
    color: #FFD700;
    text-shadow:
        0 0 8px  rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 165, 0, 0.45),
        0 0 40px rgba(255, 100, 0, 0.2);
}

.cg-title-blue {
    color: #00BFFF;
    text-shadow:
        0 0 8px  rgba(0, 191, 255, 0.8),
        0 0 20px rgba(0, 140, 255, 0.45),
        0 0 40px rgba(0, 60, 220, 0.2);
}

/* النص الصغير */
.cg-sub {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── خط النار الفاصل (SVG يتتبع الحد الفعلي بدقة) ── */
.cg-fire-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
    filter:
        drop-shadow(0 0  4px #FF4500)
        drop-shadow(0 0 10px #FF8C00)
        drop-shadow(0 0 22px rgba(255,215,0,0.65))
        drop-shadow(0 0 40px rgba(255,100,0,0.28));
    animation: cg-fire-flicker 2.2s ease-in-out infinite;
}

@keyframes cg-fire-flicker {
    0%, 100% {
        filter:
            drop-shadow(0 0 4px #FF4500)
            drop-shadow(0 0 10px #FF8C00)
            drop-shadow(0 0 22px rgba(255,215,0,0.6));
        opacity: 0.92;
    }
    40% {
        filter:
            drop-shadow(0 0 8px #FF4500)
            drop-shadow(0 0 18px #FF8C00)
            drop-shadow(0 0 38px rgba(255,215,0,0.9))
            drop-shadow(0 0 55px rgba(255,80,0,0.35));
        opacity: 1;
    }
    70% {
        filter:
            drop-shadow(0 0 3px #FF4500)
            drop-shadow(0 0 8px #FF8C00)
            drop-shadow(0 0 18px rgba(255,215,0,0.5));
        opacity: 0.85;
    }
}

/* إخفاء خط النار عند التوسع */
.cg-container:has(.cg-half.expanded) .cg-fire-line {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* ── Hover — توسع بصري خفيف ── */
.cg-top:hover    { clip-path: polygon(0 0, 100% 0, 0 107%); }
.cg-bottom:hover { clip-path: polygon(107% 0, 100% 100%, 0 100%); }
.cg-top:active    { clip-path: polygon(0 0, 100% 0, 0 112%); }
.cg-bottom:active { clip-path: polygon(112% 0, 100% 100%, 0 100%); }

.cg-half:hover .cg-icon {
    transform: scale(1.14);
    filter: drop-shadow(0 6px 22px rgba(255, 255, 255, 0.4));
}
.cg-icon svg {
    width: 56px;
    height: 56px;
    display: block;
    color: currentColor;
}
.cg-half:hover .cg-card-gold {
    box-shadow:
        0 0 24px rgba(255, 215, 0, 0.55),
        inset 0 0 32px rgba(255, 165, 0, 0.1);
}
.cg-half:hover .cg-card-blue {
    box-shadow:
        0 0 24px rgba(0, 191, 255, 0.55),
        inset 0 0 32px rgba(0, 100, 220, 0.1);
}

/* ── التوسع الكامل عند النقر ── */
.cg-half.expanded {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 20;
}
.cg-half.collapsed {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0) !important;
    transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
    z-index: 1;
}
.cg-half.expanded .cg-content {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ── رسالة التحميل (Placeholder) ── */
.expanded-message {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.4s ease 0.45s;
    pointer-events: none;
}
.expanded-message.visible {
    display: flex;
    opacity: 1;
}

.loading-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.75);
    animation: spin-ring 0.9s linear infinite;
}
@keyframes spin-ring {
    to { transform: rotate(360deg); }
}

/* =====================================================
   نموذج مرسوم التأسيس — fd-*
===================================================== */

/* Overlay — يغطي الشاشة فوق النصف الذهبي الموسّع */
.cg-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease 0.5s;
    direction: rtl;
}
.cg-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* الكرت الزجاجي المركزي */
.fd-card {
    width: 100%;
    max-width: 360px;
    background: rgba(20, 15, 0, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 32px 24px 24px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(255, 215, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fd-slide-up 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes fd-slide-up {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── الترويسة ── */
.fd-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.fd-crown {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5));
    animation: fd-crown-pulse 2.5s ease-in-out infinite;
}
.fd-crown svg {
    width: 48px;
    height: 48px;
    color: #FFD700;
}
@keyframes fd-crown-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255,215,0,0.45)); }
    50%       { filter: drop-shadow(0 0 22px rgba(255,215,0,0.75)); }
}
.fd-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0;
    letter-spacing: 0.05em;
}
.fd-subtitle {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    letter-spacing: 0.03em;
}

/* ── حقول الإدخال ── */
.fd-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.fd-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.7);
    letter-spacing: 0.06em;
}
.fd-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 11px 14px;
    color: #fff;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    direction: rtl;
}
.fd-input::placeholder { color: rgba(255,255,255,0.3); }
.fd-input:focus {
    border-color: #FFD700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15),
                0 0 10px rgba(255, 215, 0, 0.25);
}
.fd-textarea {
    resize: none;
    min-height: 80px;
    line-height: 1.55;
}
.fd-char-count {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.28);
    text-align: left;
    direction: ltr;
    align-self: flex-end;
    margin-top: -2px;
}

/* ── زر التتويج ── */
.fd-crown-btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(45deg, #B8860B 0%, #DAA520 40%, #FFD700 70%, #FFF176 100%);
    color: #1a0f00;
    font-size: 0.95rem;
    font-weight: 900;
    font-family: inherit;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow:
        0 4px 16px rgba(184, 134, 11, 0.45),
        0 0 24px rgba(255, 215, 0, 0.2);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                filter 0.22s ease;
    position: relative;
    overflow: hidden;
}
.fd-crown-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.22) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.fd-crown-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(184, 134, 11, 0.55),
        0 0 36px rgba(255, 215, 0, 0.35);
    filter: brightness(1.08);
}
.fd-crown-btn:hover::before { transform: translateX(100%); }
.fd-crown-btn:active {
    transform: translateY(0px) scale(0.98);
    filter: brightness(0.95);
}
.fd-crown-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* ── زر الرجوع ── */
.fd-back-btn {
    width: 100%;
    padding: 9px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.fd-back-btn:hover {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
}

/* ── حالة التحميل على الزر ── */
.fd-crown-btn.loading .fd-btn-text::after {
    content: ' ...';
}
.fd-crown-btn.loading { opacity: 0.7; pointer-events: none; }

/* ── حقل TAG ── */
.fd-tag-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.fd-tag-prefix {
    position: absolute;
    right: 14px;
    color: #FFD700;
    font-size: 1rem;
    font-weight: 900;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}
.fd-tag-input {
    padding-right: 30px;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.fd-hint {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.25);
    margin-top: -2px;
    direction: rtl;
}

/* =====================================================
   نهاية نموذج التأسيس
===================================================== */

/* =====================================================
   معسكر التجنيد — rc-*
===================================================== */

/* الكرت الزجاجي الأزرق */
.rc-card {
    width: 100%;
    max-width: 360px;
    background: rgba(0, 15, 30, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 191, 255, 0.28);
    border-radius: 20px;
    padding: 28px 22px 20px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(0, 191, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fd-slide-up 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── الترويسة ── */
.rc-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}
.rc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 12px rgba(0, 191, 255, 0.55));
    animation: rc-icon-pulse 2.5s ease-in-out infinite;
}
.rc-icon svg {
    width: 44px;
    height: 44px;
    color: #00BFFF;
}
@keyframes rc-icon-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(0,191,255,0.45)); }
    50%       { filter: drop-shadow(0 0 22px rgba(0,191,255,0.8));  }
}
.rc-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #00BFFF;
    text-shadow: 0 0 14px rgba(0, 191, 255, 0.5);
    margin: 0;
    letter-spacing: 0.04em;
}
.rc-subtitle {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* ── شريط البحث ── */
.rc-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.rc-search-icon {
    position: absolute;
    right: 13px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    opacity: 0.55;
}
.rc-search {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 12px 40px 12px 14px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    direction: rtl;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.rc-search::placeholder { color: rgba(255,255,255,0.28); }
.rc-search:focus {
    border-color: #00BFFF;
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15),
                0 0 10px rgba(0, 191, 255, 0.2);
}

/* ── الفاصل ── */
.rc-divider {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rc-divider::before,
.rc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 191, 255, 0.18);
}
.rc-divider-text {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    letter-spacing: 0.04em;
}

/* ── بطاقة العشيرة الداخلية ── */
.rc-clan-card {
    background: rgba(0, 8, 22, 0.8);
    border: 1px solid rgba(0, 191, 255, 0.18);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rc-clan-top {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: rtl;
}
.rc-clan-shield {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 8px rgba(0,191,255,0.35));
}
.rc-clan-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.rc-clan-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #e0f4ff;
    line-height: 1.2;
}
.rc-clan-level {
    font-size: 0.7rem;
    color: rgba(0, 191, 255, 0.7);
}
.rc-clan-members {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}
.rc-members-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7ee8ff;
}
.rc-members-icon {
    width: 18px;
    height: 18px;
    color: rgba(0,191,255,0.6);
    flex-shrink: 0;
}

/* ── أزرار القرار ── */
.rc-action-row {
    display: flex;
    gap: 10px;
    direction: ltr;
}
.rc-btn {
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                filter 0.2s ease,
                box-shadow 0.2s ease;
}
.rc-btn:active { transform: scale(0.94); filter: brightness(0.9); }

.rc-btn-skip {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: rgba(239,68,68,0.85);
    border-radius: 10px;
}
.rc-btn-skip svg { width: 18px; height: 18px; }
.rc-btn-skip:hover {
    background: rgba(239, 68, 68, 0.28);
    box-shadow: 0 0 14px rgba(239,68,68,0.3);
}

.rc-btn-join {
    flex: 1;
    height: 46px;
    font-size: 0.88rem;
    background: linear-gradient(135deg, #00704a 0%, #00c97a 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,201,122,0.35);
}
.rc-btn-join:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,201,122,0.45);
    filter: brightness(1.08);
}

/* ── SVG الجديدة في نموذج الانضمام ── */
.rc-clan-shield svg {
    width: 28px;
    height: 28px;
    color: #00BFFF;
}
.rc-clan-level {
    font-size: 0.7rem;
    color: rgba(0, 191, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
}
.rc-star-svg {
    width: 11px;
    height: 11px;
    color: #FFD700;
    flex-shrink: 0;
}
.rc-join-svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #fff;
}
.rc-btn-join {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.rc-megaphone-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: currentColor;
    vertical-align: middle;
}
.rc-mercenary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── SVG عملة في زر التتويج ── */
.fd-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fd-coin-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
}

/* ── رابط/زر سوق المرتزقة ── */
button.rc-mercenary-link {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.rc-mercenary-link {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    color: #FF9900;
    text-shadow: 0 0 10px rgba(255,153,0,0.4);
    text-decoration: none;
    letter-spacing: 0.03em;
    line-height: 1.5;
    padding: 2px 0;
    transition: text-shadow 0.25s ease, color 0.25s ease;
}
.rc-mercenary-link:hover {
    color: #FFB733;
    text-shadow: 0 0 18px rgba(255,153,0,0.65);
}

/* =====================================================
   نهاية معسكر التجنيد
===================================================== */

/* =====================================================
   لوحة قيادة العشيرة — cd-*
===================================================== */

/* الشاشة الكاملة */
.cd-screen {
    position: absolute;
    inset: 0;
    background: #0a0d14;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;
    padding: 0 0 90px;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
}
.cd-screen::-webkit-scrollbar { display: none; }

/* ── زر التنقل Pill ── */
.cd-nav-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 200;
    padding: 16px 14px 0;
    flex-shrink: 0;
}
.cd-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.86rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.cd-pill-btn:hover,
.cd-pill-btn[aria-expanded="true"] {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.12);
}
.cd-pill-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgba(255, 215, 0, 0.75);
    pointer-events: none;
}
.cd-pill-label { pointer-events: none; }
.cd-pill-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-block;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.5);
}
.cd-pill-btn[aria-expanded="true"] .cd-pill-arrow {
    transform: rotate(180deg);
}

/* القائمة المنسدلة */
.cd-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 210px;
    background: rgba(8, 11, 22, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
    z-index: 300;
    direction: rtl;
}
.cd-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.cd-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    text-align: right;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.84rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
    direction: rtl;
}
.cd-dd-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.cd-dd-item.cd-dd-active {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
}
.cd-dd-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
}

/* ── Wrapper — يمنع التداخل بين البطاقات ── */
.cd-hq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 14px 0;
    flex: 1;
}

/* ── مشترك — بطاقة زجاجية cd-card ── */
.cd-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}

/* ══════════════════════════════
   1. بطاقة هوية العشيرة
══════════════════════════════ */
.cd-identity-card {
    border-color: rgba(255, 215, 0, 0.18);
    box-shadow: 0 2px 30px rgba(255, 215, 0, 0.06);
}
.cd-identity-top {
    display: flex;
    align-items: center;
    gap: 14px;
    direction: rtl;
}

/* درع SVG */
.cd-shield-wrap {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cd-shield-svg {
    width: 30px;
    height: 30px;
    color: #FFD700;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.55));
}
.cd-clan-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cd-clan-name {
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.22);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-clan-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.6);
    letter-spacing: 0.12em;
}

/* عداد الأعضاء */
.cd-members-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.cd-members-svg {
    width: 20px;
    height: 20px;
    color: rgba(0, 191, 255, 0.65);
}
.cd-members-num {
    font-size: 0.8rem;
    font-weight: 800;
    color: #e0f4ff;
    white-space: nowrap;
}

/* شريط المستوى */
.cd-level-row {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: rtl;
}
.cd-level-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.38);
    flex-shrink: 0;
    white-space: nowrap;
}
.cd-level-num {
    font-size: 0.82rem;
    font-weight: 900;
    color: #FFD700;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}
.cd-level-bar-wrap { flex: 1; }
.cd-level-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 99px;
    overflow: hidden;
}
.cd-level-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #b8860b 0%, #FFD700 65%, #fff176 100%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══════════════════════════════
   2. توجيهات القيادة
══════════════════════════════ */
.cd-notice-card {
    border-color: rgba(255, 215, 0, 0.12);
    border-right: 3px solid #FFD700;
    padding-right: 14px;
    gap: 9px;
}
.cd-notice-header {
    display: flex;
    align-items: center;
    gap: 9px;
    direction: rtl;
}
.cd-notice-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #FFD700;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}
.cd-notice-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(255, 215, 0, 0.85);
    letter-spacing: 0.04em;
}
.cd-notice-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
    margin: 0;
    direction: rtl;
}

/* ══════════════════════════════
   3. التحدي الأسبوعي
══════════════════════════════ */
.cd-chest-card {
    border-color: rgba(0, 191, 255, 0.15);
    box-shadow: 0 2px 24px rgba(0, 191, 255, 0.05);
    gap: 12px;
}
.cd-chest-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    direction: rtl;
}
.cd-chest-icon-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: rgba(0, 191, 255, 0.08);
    border: 1px solid rgba(0, 191, 255, 0.2);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cd-target-pulse 2.8s ease-in-out infinite;
}
@keyframes cd-target-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0,191,255,0.2); }
    50%       { box-shadow: 0 0 20px rgba(0,191,255,0.45); }
}
.cd-chest-svg {
    width: 26px;
    height: 26px;
    color: #00BFFF;
    filter: drop-shadow(0 0 6px rgba(0,191,255,0.5));
}
.cd-chest-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.cd-chest-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(0, 191, 255, 0.9);
    letter-spacing: 0.04em;
}
.cd-chest-mission {
    font-size: 0.77rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
}

/* نص التقدم */
.cd-progress-header {
    display: flex;
    align-items: baseline;
    gap: 4px;
    direction: ltr;
    justify-content: flex-end;
}
.cd-progress-val {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
}
.cd-progress-sep {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.28);
}
.cd-progress-total {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.42);
}

/* شريط التقدم — نظيف بالكامل */
.cd-progress-track {
    height: 13px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.cd-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #1565c0 0%, #00BFFF 60%, #7ee8ff 100%);
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.55);
    position: relative;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 0;
}
.cd-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: cd-shine 2.2s ease-in-out infinite;
    border-radius: 99px;
    right: -40px;
}
@keyframes cd-shine {
    0%   { right: 110%; }
    100% { right: -10%; }
}

/* تذييل المكافأة */
.cd-progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: rtl;
}
.cd-reward-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cd-reward-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #FF9900;
    filter: drop-shadow(0 0 5px rgba(255,153,0,0.5));
}
.cd-progress-reward {
    font-size: 0.7rem;
    color: #FF9900;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.cd-progress-pct {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(0, 191, 255, 0.65);
}

/* =====================================================
   قائمة النخبة — em-*
===================================================== */

/* حاوية الشاشة الكاملة */
.cd-elite-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 14px 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,215,0,0.2) transparent;
}
.cd-elite-wrapper::-webkit-scrollbar {
    width: 3px;
}
.cd-elite-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.cd-elite-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.25);
    border-radius: 99px;
}

/* ── رأس القائمة ── */
.em-header {
    display: flex;
    align-items: center;
    gap: 14px;
    direction: rtl;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
    flex-shrink: 0;
}
.em-header-icon-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.em-trophy-svg {
    width: 26px;
    height: 26px;
    color: #FFD700;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.55));
}
.em-header-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.em-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.2);
}
.em-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.04em;
}

/* ── قائمة الأعضاء ── */
.em-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

/* ── بطاقة العضو ── */
.em-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    direction: rtl;
    transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.em-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    opacity: 0;
    background: linear-gradient(120deg, rgba(0,191,255,0.04), transparent 60%);
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.em-card:hover,
.em-card:focus-within {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 18px rgba(0, 191, 255, 0.18);
    border-color: rgba(0, 191, 255, 0.15);
}
.em-card:hover::before { opacity: 1; }

/* الرتبة الأولى لها توهج ذهبي */
.em-card.em-rank-1 {
    border-color: rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.04);
}
.em-card.em-rank-1:hover {
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.22);
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.07);
}
.em-card.em-rank-2 {
    border-color: rgba(192, 192, 192, 0.15);
}
.em-card.em-rank-3 {
    border-color: rgba(205, 127, 50, 0.15);
}

/* ── الجانب الأيمن: رقم + صورة ── */
.em-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.em-rank {
    font-size: 0.85rem;
    font-weight: 900;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.em-rank-1 .em-rank { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.6); }
.em-rank-2 .em-rank { color: #C0C0C0; text-shadow: 0 0 6px rgba(192,192,192,0.5); }
.em-rank-3 .em-rank { color: #CD7F32; text-shadow: 0 0 6px rgba(205,127,50,0.5); }
.em-card:not(.em-rank-1):not(.em-rank-2):not(.em-rank-3) .em-rank {
    color: rgba(255, 255, 255, 0.35);
}

/* أيقونة رقم للمراكز 1/2/3 */
.em-rank-icon {
    width: 18px;
    height: 18px;
    display: block;
    margin: 0 auto;
}

/* الصورة الشخصية */
.em-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.em-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00BFFF;
    display: block;
    background: rgba(0,191,255,0.1);
}
.em-rank-1 .em-avatar { border-color: #FFD700; box-shadow: 0 0 10px rgba(255,215,0,0.4); }
.em-rank-2 .em-avatar { border-color: #C0C0C0; }
.em-rank-3 .em-avatar { border-color: #CD7F32; }

/* ══════════════════════════════════════════════════════════════════
   حلقات الإطار المصغّرة — نهج مزدوج:
   A) podium-avatar + list-avatar + lb-avatar → overflow:visible + ::after (ring)
   B) em-avatar-wrap + nav-center-avatar-ring → box-shadow (أبسط، بدون تعارض)
   التاج 👑 → ::before على كل الحاويات (ما عدا podium الذي له تاج HTML)
══════════════════════════════════════════════════════════════════ */

/* ── (A) تهيئة الحاويات ذات overflow:hidden ── */
.podium-avatar[class*="frame-"],
.list-avatar[class*="frame-"] { overflow: visible; }

.list-avatar[class*="frame-"],
.lb-avatar[class*="frame-"]   { position: relative; }

.list-avatar[class*="frame-"] img { border-radius: 50%; }
.em-avatar-wrap[class*="frame-"]  { border-radius: 50%; }

/* ── (A) حلقة ::after — Welcome ── */
.podium-avatar.frame-welcome::after,
.list-avatar.frame-welcome::after,
.lb-avatar.frame-welcome::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid #00BFFF;
    box-shadow: 0 0 8px rgba(0,191,255,0.45);
    pointer-events: none;
    z-index: 10;
}
/* ── (A) حلقة ::after — Gold ── */
.podium-avatar.frame-global-top1::after,
.list-avatar.frame-global-top1::after,
.lb-avatar.frame-global-top1::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid #FFD700;
    box-shadow: 0 0 10px rgba(255,215,0,0.60);
    pointer-events: none;
    z-index: 10;
}
/* ── (A) حلقة ::after — Silver ── */
.podium-avatar.frame-global-top2::after,
.list-avatar.frame-global-top2::after,
.lb-avatar.frame-global-top2::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid #C0C0C0;
    box-shadow: 0 0 9px rgba(192,192,192,0.50);
    pointer-events: none;
    z-index: 10;
}
/* ── (A) حلقة ::after — Royal ── */
.podium-avatar.frame-global-top3::after,
.list-avatar.frame-global-top3::after,
.lb-avatar.frame-global-top3::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid #BF5FFF;
    box-shadow: 0 0 9px rgba(191,95,255,0.45);
    pointer-events: none;
    z-index: 10;
}

/* ── (B) box-shadow ring لـ em-avatar-wrap + nav-center-avatar-ring ── */
.em-avatar-wrap.frame-welcome,
.nav-center-avatar-ring.frame-welcome {
    box-shadow: 0 0 0 2.5px #00BFFF, 0 0 9px rgba(0,191,255,0.45) !important;
}
.em-avatar-wrap.frame-global-top1,
.nav-center-avatar-ring.frame-global-top1 {
    box-shadow: 0 0 0 2.5px #FFD700, 0 0 10px rgba(255,215,0,0.55) !important;
}
.em-avatar-wrap.frame-global-top2,
.nav-center-avatar-ring.frame-global-top2 {
    box-shadow: 0 0 0 2.5px #C0C0C0, 0 0 9px rgba(192,192,192,0.50) !important;
}
.em-avatar-wrap.frame-global-top3,
.nav-center-avatar-ring.frame-global-top3 {
    box-shadow: 0 0 0 2.5px #BF5FFF, 0 0 9px rgba(191,95,255,0.45) !important;
}

/* ── التاج الذهبي SVG — يظهر فوق الأفاتار لكل حاملي frame-global-top1 ── */
/* (ما عدا podium-avatar الذي لديه تاج HTML بالفعل عند المركز الأول) */
.list-avatar.frame-global-top1::before,
.lb-avatar.frame-global-top1::before,
.em-avatar-wrap.frame-global-top1::before,
.nav-center-avatar-ring.frame-global-top1::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 22 L9 8 L17 16 L20 4 L23 16 L31 8 L36 22 Z' fill='%23FFD700' stroke='%23B8860B' stroke-width='1.4' stroke-linejoin='round'/%3E%3Crect x='4' y='20' width='32' height='4' rx='2' fill='%23B8860B'/%3E%3Ccircle cx='20' cy='6' r='2.2' fill='%23FF6060'/%3E%3Ccircle cx='11' cy='15' r='1.6' fill='%2360B0FF'/%3E%3Ccircle cx='29' cy='15' r='1.6' fill='%2360B0FF'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 11;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.80)) drop-shadow(0 1px 3px rgba(0,0,0,0.50));
}

/* Fallback SVG داخل حاوية الصورة */
.em-avatar-fallback {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #00BFFF;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.em-avatar-fallback svg {
    width: 22px;
    height: 22px;
    color: rgba(0, 191, 255, 0.55);
}

/* ── الوسط: معلومات اللاعب ── */
.em-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    direction: rtl;
}
.em-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.em-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.em-role-svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
/* ألوان الأدوار */
.em-role-leader  .em-role-svg { color: #FFD700; }
.em-role-officer .em-role-svg { color: #C0C0C0; }
.em-role-member  .em-role-svg { color: #88a4c0;  }

.em-role-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.em-role-leader  .em-role-label { color: rgba(255, 215, 0, 0.75); }
.em-role-officer .em-role-label { color: rgba(192, 192, 192, 0.75); }
.em-role-member  .em-role-label { color: rgba(136, 164, 192, 0.65); }

/* ── الجانب الأيسر: نقاط المساهمة ── */
.em-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.em-points-row {
    display: flex;
    align-items: center;
    gap: 5px;
    direction: ltr;
}
.em-points-svg {
    width: 13px;
    height: 13px;
    color: #FFD700;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
    flex-shrink: 0;
}
.em-points {
    font-size: 0.82rem;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
}
.em-points-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── حالة التحميل ── */
.em-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 0;
    color: rgba(255,255,255,0.35);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.em-spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid rgba(0,191,255,0.15);
    border-top-color: #00BFFF;
    border-radius: 50%;
    animation: em-spin 0.8s linear infinite;
}
@keyframes em-spin {
    to { transform: rotate(360deg); }
}

/* ── حالة فارغة ── */
.em-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: rgba(255,255,255,0.28);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.em-empty svg {
    width: 44px;
    height: 44px;
    opacity: 0.3;
}

/* =====================================================
   غرفة الحرب — wr-*
===================================================== */

.wr-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 14px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(220,20,60,0.2) transparent;
}
.wr-wrapper::-webkit-scrollbar { width: 3px; }
.wr-wrapper::-webkit-scrollbar-thumb {
    background: rgba(220,20,60,0.25);
    border-radius: 99px;
}

/* ── رأس غرفة الحرب ── */
.wr-header {
    display: flex;
    align-items: center;
    gap: 14px;
    direction: rtl;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.wr-header-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: rgba(220,20,60,0.1);
    border: 1px solid rgba(220,20,60,0.3);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(220,20,60,0.15);
}
.wr-swords-svg {
    width: 26px;
    height: 26px;
    color: #FF4500;
    filter: drop-shadow(0 0 8px rgba(255,69,0,0.6));
    animation: wr-swords-pulse 3s ease-in-out infinite;
}
@keyframes wr-swords-pulse {
    0%,100% { filter: drop-shadow(0 0 6px rgba(255,69,0,0.5)); }
    50%      { filter: drop-shadow(0 0 16px rgba(255,69,0,0.9)); }
}
.wr-header-text { display: flex; flex-direction: column; gap: 2px; }
.wr-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 12px rgba(255,69,0,0.25);
}
.wr-subtitle {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── بطاقة المركز العالمي ── */
.wr-rank-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px 24px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.4),
        inset 0 0 40px rgba(255,215,0,0.03);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.wr-rank-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -10%, rgba(255,215,0,0.08) 0%, transparent 65%);
    pointer-events: none;
}

/* الكرة الأرضية */
.wr-globe-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wr-globe-svg {
    width: 56px;
    height: 56px;
    color: #FFD700;
    filter: drop-shadow(0 0 12px rgba(255,215,0,0.6));
    animation: wr-globe-spin 20s linear infinite;
    position: relative;
    z-index: 1;
}
@keyframes wr-globe-spin {
    to { transform: rotate(360deg); }
}
.wr-globe-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,215,0,0.2);
    box-shadow: 0 0 20px rgba(255,215,0,0.15);
    animation: wr-ring-pulse 2.5s ease-in-out infinite;
}
@keyframes wr-ring-pulse {
    0%,100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 1;   }
}

.wr-rank-label {
    font-size: 0.72rem;
    color: rgba(255,215,0,0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.wr-rank-number {
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
    color: #FFD700;
    text-shadow:
        0 0 20px rgba(255,215,0,0.7),
        0 0 50px rgba(255,215,0,0.3);
    letter-spacing: -2px;
}
.wr-rank-pts-row {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    margin-top: 4px;
}
.wr-pts-star {
    width: 13px;
    height: 13px;
    color: rgba(255,215,0,0.6);
    flex-shrink: 0;
}
.wr-rank-pts-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}
.wr-rank-pts-val {
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(255,215,0,0.85);
}

/* ── بطاقة رادار الخصم ── */
.wr-rival-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(220,20,60,0.35);
    border-radius: 18px;
    box-shadow:
        0 0 20px rgba(220,20,60,0.1),
        0 8px 28px rgba(0,0,0,0.35),
        inset 0 0 30px rgba(220,20,60,0.03);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    direction: rtl;
}
.wr-rival-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(220,20,60,0.07) 0%, transparent 60%);
    pointer-events: none;
}

/* رأس الرادار */
.wr-rival-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wr-radar-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(220,20,60,0.12);
    border: 1px solid rgba(220,20,60,0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wr-radar-svg {
    width: 20px;
    height: 20px;
    color: #DC143C;
    animation: wr-radar-blink 1.8s ease-in-out infinite;
}
@keyframes wr-radar-blink {
    0%,100% { opacity: 1;   filter: drop-shadow(0 0 4px rgba(220,20,60,0.5)); }
    50%      { opacity: 0.5; filter: none; }
}
.wr-rival-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.05em;
    flex: 1;
}
.wr-rival-rank {
    font-size: 0.88rem;
    font-weight: 900;
    color: #FF6347;
    background: rgba(255,99,71,0.12);
    border: 1px solid rgba(255,99,71,0.3);
    border-radius: 8px;
    padding: 2px 10px;
}

/* صف اسم الخصم */
.wr-rival-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wr-rival-shield {
    width: 20px;
    height: 20px;
    color: rgba(220,20,60,0.65);
    flex-shrink: 0;
}
.wr-rival-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.02em;
}

/* صف نقاط الخصم */
.wr-rival-pts-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(220,20,60,0.07);
    border: 1px solid rgba(220,20,60,0.15);
    border-radius: 10px;
}
.wr-rival-pts-icon {
    width: 13px;
    height: 13px;
    color: #FF6347;
    flex-shrink: 0;
}
.wr-rival-pts {
    font-size: 0.92rem;
    font-weight: 900;
    color: #FF6347;
}
.wr-rival-pts-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}

/* قسم الفارق */
.wr-gap-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wr-gap-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wr-gap-bolt {
    width: 14px;
    height: 14px;
    color: #FF8C00;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255,140,0,0.6));
}
.wr-gap-text {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    flex: 1;
}
.wr-gap-val {
    font-size: 0.82rem;
    font-weight: 900;
    color: #FF8C00;
    text-shadow: 0 0 8px rgba(255,140,0,0.4);
}

/* شريط التوتر */
.wr-tension-track {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 99px;
    overflow: visible;
    position: relative;
}
.wr-tension-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #DC143C 0%, #FF4500 60%, #FF8C00 100%);
    transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}
.wr-tension-fill::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #FF8C00;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,140,0,0.8);
}
.wr-tension-glow {
    position: absolute;
    inset: -3px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(220,20,60,0.3), rgba(255,140,0,0.3));
    filter: blur(4px);
    pointer-events: none;
}
.wr-tension-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    direction: rtl;
}

/* ── زر الهجوم ── */
.wr-attack-btn {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 45%, #FF4500 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    direction: rtl;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 6px 20px rgba(220,20,60,0.45),
        0 0 30px rgba(255,69,0,0.2);
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.22s ease,
                filter 0.22s ease;
    margin-top: 4px;
}
.wr-attack-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-100%);
    transition: transform 0.55s ease;
}
.wr-attack-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 32px rgba(220,20,60,0.65),
        0 0 50px rgba(255,69,0,0.4);
    filter: brightness(1.1);
}
.wr-attack-btn:hover::before { transform: translateX(100%); }
.wr-attack-btn:active {
    transform: translateY(0) scale(0.97);
    filter: brightness(0.92);
}
.wr-attack-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #FFD700;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.7));
}
.wr-attack-text {
    font-size: 0.95rem;
    font-weight: 900;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ── حالة التحميل ── */
.wr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 50px 0;
    color: rgba(255,255,255,0.35);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.wr-spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid rgba(220,20,60,0.15);
    border-top-color: #DC143C;
    border-radius: 50%;
    animation: wr-spin 0.85s linear infinite;
}
@keyframes wr-spin { to { transform: rotate(360deg); } }

/* =====================================================
   إعدادات العشيرة — cs-*
===================================================== */

.cs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 14px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,191,255,0.15) transparent;
}
.cs-wrapper::-webkit-scrollbar { width: 3px; }
.cs-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,191,255,0.2);
    border-radius: 99px;
}

/* ── حالة الرفض ── */
.cs-denied {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 300px;
}
.cs-denied-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 28px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(220,20,60,0.3);
    border-radius: 22px;
    box-shadow:
        0 0 30px rgba(220,20,60,0.08),
        0 10px 36px rgba(0,0,0,0.4);
    text-align: center;
    width: 100%;
    max-width: 320px;
    position: relative;
    overflow: hidden;
}
.cs-denied-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -10%, rgba(220,20,60,0.09) 0%, transparent 65%);
    pointer-events: none;
}
.cs-denied-icon {
    width: 72px;
    height: 72px;
    background: rgba(220,20,60,0.1);
    border: 1px solid rgba(220,20,60,0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(220,20,60,0.2);
    animation: cs-lock-pulse 2.8s ease-in-out infinite;
}
@keyframes cs-lock-pulse {
    0%,100% { box-shadow: 0 0 18px rgba(220,20,60,0.2); }
    50%      { box-shadow: 0 0 36px rgba(220,20,60,0.4); }
}
.cs-lock-svg {
    width: 32px;
    height: 32px;
    color: #DC143C;
    filter: drop-shadow(0 0 8px rgba(220,20,60,0.6));
}
.cs-denied-title {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 12px rgba(220,20,60,0.3);
}
.cs-denied-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
    line-height: 1.5;
}
.cs-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: rgba(0,191,255,0.08);
    border: 1px solid rgba(0,191,255,0.3);
    border-radius: 12px;
    color: #00BFFF;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 6px;
    direction: rtl;
}
.cs-back-btn:hover {
    background: rgba(0,191,255,0.15);
    box-shadow: 0 0 16px rgba(0,191,255,0.2);
}
.cs-back-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── الإعدادات الكاملة ── */
.cs-full {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* رأس الإعدادات */
.cs-header {
    display: flex;
    align-items: center;
    gap: 14px;
    direction: rtl;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.cs-header-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: rgba(0,191,255,0.08);
    border: 1px solid rgba(0,191,255,0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-gear-svg {
    width: 22px;
    height: 22px;
    color: #00BFFF;
    animation: cs-gear-spin 12s linear infinite;
}
@keyframes cs-gear-spin { to { transform: rotate(360deg); } }
.cs-header-text { display: flex; flex-direction: column; gap: 2px; }
.cs-title {
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
}
.cs-subtitle {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.32);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ── بطاقة إعداد ── */
.cs-card {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    direction: rtl;
    position: relative;
    overflow: hidden;
}
.cs-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -15%, rgba(255,255,255,0.03) 0%, transparent 65%);
    pointer-events: none;
}

/* رأس البطاقة */
.cs-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-card-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-card-icon svg { width: 18px; height: 18px; }
.cs-card-icon--blue  { background: rgba(0,191,255,0.12);  border: 1px solid rgba(0,191,255,0.25);  color: #00BFFF; }
.cs-card-icon--gold  { background: rgba(255,215,0,0.1);   border: 1px solid rgba(255,215,0,0.25);  color: #FFD700; }
.cs-card-icon--red   { background: rgba(220,20,60,0.12);  border: 1px solid rgba(220,20,60,0.3);   color: #DC143C; }
.cs-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.03em;
}
.cs-danger-title { color: #FF6347; }

/* زر الشعار */
.cs-logo-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 12px;
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: not-allowed;
    direction: rtl;
    transition: all 0.2s;
}
.cs-img-svg { width: 18px; height: 18px; flex-shrink: 0; }
.cs-soon-badge {
    margin-right: auto;
    font-size: 0.62rem;
    font-weight: 800;
    color: #FFD700;
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 0.04em;
}

/* حقل نصي */
.cs-field-group { display: flex; flex-direction: column; gap: 6px; }
.cs-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.05em;
}
.cs-textarea {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.85);
    font-size: 0.83rem;
    line-height: 1.55;
    padding: 12px 14px;
    resize: none;
    direction: rtl;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.cs-textarea:focus {
    outline: none;
    border-color: rgba(0,191,255,0.45);
    box-shadow: 0 0 0 3px rgba(0,191,255,0.08);
}
.cs-textarea::placeholder { color: rgba(255,255,255,0.2); }
.cs-char-count {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.25);
    text-align: left;
}

/* زر الحفظ */
.cs-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    background: linear-gradient(135deg, rgba(0,100,180,0.5), rgba(0,191,255,0.35));
    border: 1px solid rgba(0,191,255,0.35);
    border-radius: 12px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    direction: rtl;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.cs-save-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.cs-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,191,255,0.25);
    background: linear-gradient(135deg, rgba(0,120,210,0.6), rgba(0,191,255,0.45));
}
.cs-save-btn:active { transform: scale(0.97); }
.cs-save-btn--gold {
    background: linear-gradient(135deg, rgba(160,120,0,0.5), rgba(255,215,0,0.3));
    border-color: rgba(255,215,0,0.3);
}
.cs-save-btn--gold:hover {
    box-shadow: 0 6px 20px rgba(255,215,0,0.2);
    background: linear-gradient(135deg, rgba(180,140,0,0.6), rgba(255,215,0,0.4));
}

/* ── Toggle Switch ── */
.cs-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
}
.cs-toggle-info { display: flex; flex-direction: column; gap: 3px; }
.cs-toggle-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}
.cs-toggle-sub {
    font-size: 0.68rem;
    color: rgba(0,191,255,0.7);
    font-weight: 600;
}
.cs-toggle-switch {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}
.cs-toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-toggle-track {
    display: block;
    width: 48px;
    height: 26px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 99px;
    position: relative;
    transition: background 0.25s, border-color 0.25s;
}
.cs-toggle-thumb {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.25s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.cs-toggle-switch input:checked + .cs-toggle-track {
    background: rgba(0,191,255,0.3);
    border-color: rgba(0,191,255,0.5);
}
.cs-toggle-switch input:checked + .cs-toggle-track .cs-toggle-thumb {
    transform: translateX(-22px);
    background: #00BFFF;
    box-shadow: 0 0 8px rgba(0,191,255,0.6);
}

/* ── حقل رقمي ── */
.cs-field-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.cs-number-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.cs-num-btn {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.05);
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s;
    flex-shrink: 0;
}
.cs-num-btn svg { width: 14px; height: 14px; }
.cs-num-btn:hover { background: rgba(0,191,255,0.15); color: #00BFFF; }
.cs-number-input {
    width: 46px;
    text-align: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.cs-number-input::-webkit-outer-spin-button,
.cs-number-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* ── منطقة الخطر ── */
.cs-danger-card {
    border-color: rgba(220,20,60,0.25);
    box-shadow: 0 0 20px rgba(220,20,60,0.07), 0 8px 28px rgba(0,0,0,0.3);
}
.cs-danger-card::before {
    background: radial-gradient(ellipse at 50% -10%, rgba(220,20,60,0.07) 0%, transparent 60%);
}
.cs-leave-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(220,20,60,0.4);
    border-radius: 12px;
    color: #FF6347;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    direction: rtl;
    transition: all 0.2s ease;
    width: 100%;
}
.cs-leave-btn:hover {
    background: rgba(220,20,60,0.1);
    box-shadow: 0 0 16px rgba(220,20,60,0.2);
}
.cs-leave-icon { width: 18px; height: 18px; flex-shrink: 0; }
.cs-dissolve-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #5C0000 0%, #8B0000 45%, #DC143C 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 900;
    cursor: pointer;
    direction: rtl;
    width: 100%;
    box-shadow:
        0 4px 18px rgba(220,20,60,0.4),
        0 0 24px rgba(139,0,0,0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.22s ease,
                filter 0.22s ease;
}
.cs-dissolve-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.55s ease;
}
.cs-dissolve-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(220,20,60,0.55), 0 0 40px rgba(139,0,0,0.3);
    filter: brightness(1.08);
}
.cs-dissolve-btn:hover::before { transform: translateX(100%); }
.cs-dissolve-btn:active { transform: scale(0.97); }
.cs-skull-svg { width: 18px; height: 18px; flex-shrink: 0; color: #FFD700; }

/* =====================================================
   تحديثات نظام العشائر — tabs, search results, invites, mercs, requests
===================================================== */

/* ── تبويبات نموذج الانضمام ── */
.rc-tabs {
    display: flex;
    gap: 8px;
    padding: 0 0 2px;
}
.rc-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: rgba(255,255,255,0.45);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    direction: rtl;
    transition: all 0.2s ease;
    position: relative;
}
.rc-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.rc-tab.rc-tab-active {
    background: rgba(0,191,255,0.15);
    border-color: rgba(0,191,255,0.4);
    color: #00BFFF;
    box-shadow: 0 0 12px rgba(0,191,255,0.12);
}
.rc-invite-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 18px;
    height: 18px;
    background: #DC143C;
    border-radius: 99px;
    font-size: 0.6rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 8px rgba(220,20,60,0.5);
}

/* ── زر مسح البحث ── */
.rc-search-clear {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s;
}
.rc-search-clear svg { width: 14px; height: 14px; }
.rc-search-clear:hover { color: rgba(255,255,255,0.7); }

/* ── قائمة نتائج البحث ── */
.rc-results-list {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,191,255,0.15) transparent;
}
.rc-results-list::-webkit-scrollbar { width: 3px; }
.rc-results-list::-webkit-scrollbar-thumb { background: rgba(0,191,255,0.2); border-radius: 99px; }

.rc-results-loading,
.rc-results-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    color: rgba(255,255,255,0.3);
    font-size: 0.78rem;
    direction: rtl;
}
.rc-results-empty svg { width: 18px; height: 18px; flex-shrink: 0; }

/* بطاقة نتيجة واحدة */
.rc-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    direction: rtl;
    transition: background 0.15s;
}
.rc-result-item:last-child { border-bottom: none; }
.rc-result-item:hover { background: rgba(0,191,255,0.07); }
.rc-result-item.rc-result-selected { background: rgba(0,191,255,0.12); border-right: 2px solid #00BFFF; }
.rc-result-shield {
    width: 36px;
    height: 36px;
    background: rgba(0,191,255,0.1);
    border: 1px solid rgba(0,191,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00BFFF;
}
.rc-result-shield svg { width: 18px; height: 18px; }
.rc-result-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rc-result-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(255,255,255,0.88);
}
.rc-result-meta {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
    display: flex;
    gap: 8px;
}
.rc-result-join-btn {
    padding: 7px 14px;
    background: linear-gradient(135deg, rgba(0,100,180,0.5), rgba(0,191,255,0.35));
    border: 1px solid rgba(0,191,255,0.35);
    border-radius: 9px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.rc-result-join-btn:hover { box-shadow: 0 0 12px rgba(0,191,255,0.25); }
.rc-result-join-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── مستطيل العشائر المميزة (المحدّث) ── */
#rc-clan-card { transition: opacity 0.25s ease; }

/* ── لوحة الدعوات ── */
#rc-invites-pane,
#rc-discover-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-invites-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    color: rgba(255,255,255,0.3);
    font-size: 0.78rem;
    direction: rtl;
    justify-content: center;
}
.rc-invites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    color: rgba(255,255,255,0.25);
    font-size: 0.78rem;
    text-align: center;
}
.rc-invites-empty svg { width: 32px; height: 32px; opacity: 0.4; }
.rc-invites-empty p { margin: 0; }

.rc-invite-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    direction: rtl;
}
.rc-invite-shield {
    width: 40px;
    height: 40px;
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFD700;
}
.rc-invite-shield svg { width: 20px; height: 20px; }
.rc-invite-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rc-invite-clan-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
}
.rc-invite-clan-tag {
    font-size: 0.68rem;
    color: rgba(255,215,0,0.6);
    font-weight: 600;
}
.rc-invite-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rc-inv-accept-btn, .rc-inv-decline-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.rc-inv-accept-btn {
    background: rgba(0,200,100,0.15);
    border: 1px solid rgba(0,200,100,0.35);
    color: #00C864;
}
.rc-inv-accept-btn:hover { background: rgba(0,200,100,0.25); box-shadow: 0 0 10px rgba(0,200,100,0.2); }
.rc-inv-decline-btn {
    background: rgba(220,20,60,0.1);
    border: 1px solid rgba(220,20,60,0.3);
    color: #DC143C;
}
.rc-inv-decline-btn:hover { background: rgba(220,20,60,0.18); }
.rc-inv-accept-btn svg, .rc-inv-decline-btn svg { width: 14px; height: 14px; }

/* ── سوق المرتزقة overlay ── */
.mm-card { max-height: 85vh; overflow-y: auto; }
.mm-list { display: flex; flex-direction: column; gap: 8px; }
.mm-player-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    direction: rtl;
    transition: border-color 0.18s;
}
.mm-player-card:hover { border-color: rgba(0,191,255,0.2); }
.mm-avatar-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid rgba(0,191,255,0.2);
}
.mm-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.mm-player-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mm-player-name {
    font-size: 0.84rem;
    font-weight: 800;
    color: rgba(255,255,255,0.88);
}
.mm-player-meta {
    font-size: 0.67rem;
    color: rgba(255,255,255,0.35);
    display: flex;
    gap: 8px;
}
.mm-invite-btn {
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255,140,0,0.25), rgba(255,200,0,0.2));
    border: 1px solid rgba(255,200,0,0.3);
    border-radius: 9px;
    color: #FFD700;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.mm-invite-btn:hover { box-shadow: 0 0 12px rgba(255,200,0,0.2); }
.mm-invite-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mm-invite-btn.invited {
    background: rgba(0,200,100,0.15);
    border-color: rgba(0,200,100,0.3);
    color: #00C864;
    cursor: default;
}

/* ── spinner صغير ── */
.rc-mini-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,191,255,0.15);
    border-top-color: #00BFFF;
    border-radius: 50%;
    animation: wr-spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── بطاقة طلبات الانضمام في الإعدادات ── */
.cs-req-count {
    margin-right: auto;
    font-size: 0.62rem;
    font-weight: 900;
    background: rgba(255,215,0,0.15);
    border: 1px solid rgba(255,215,0,0.3);
    color: #FFD700;
    border-radius: 6px;
    padding: 2px 8px;
}
.cs-req-loading,
.cs-req-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    color: rgba(255,255,255,0.3);
    font-size: 0.78rem;
    direction: rtl;
    justify-content: center;
}
.cs-req-empty svg { width: 20px; height: 20px; opacity: 0.4; }
.cs-req-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    direction: rtl;
}
.cs-req-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.1);
}
.cs-req-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cs-req-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cs-req-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
}
.cs-req-pts {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
}
.cs-req-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cs-req-accept, .cs-req-reject {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}
.cs-req-accept {
    background: rgba(0,200,100,0.15);
    border: 1px solid rgba(0,200,100,0.3);
    color: #00C864;
}
.cs-req-accept:hover { background: rgba(0,200,100,0.25); }
.cs-req-reject {
    background: rgba(220,20,60,0.1);
    border: 1px solid rgba(220,20,60,0.25);
    color: #DC143C;
}
.cs-req-reject:hover { background: rgba(220,20,60,0.18); }
.cs-req-accept svg, .cs-req-reject svg { width: 13px; height: 13px; }
.cs-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    direction: rtl;
    transition: all 0.18s;
    margin-top: 4px;
}
.cs-refresh-btn svg { width: 13px; height: 13px; }
.cs-refresh-btn:hover { color: #00BFFF; border-color: rgba(0,191,255,0.25); }

/* سوق المرتزقة — قسم المالك في الـ dropdown */
.cd-dd-item[data-section="mercs"] .cd-dd-icon { color: #FFD700; }

/* =====================================================
   مودال تفاصيل العضو في قائمة النخبة
===================================================== */
.mm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mm-backdrop.mm-open {
    opacity: 1;
    pointer-events: auto;
}
.mm-modal {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(160deg, #0d1526 0%, #080f1e 100%);
    border: 1px solid rgba(255,255,255,0.09);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px 28px;
    direction: rtl;
    position: relative;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.mm-backdrop.mm-open .mm-modal {
    transform: translateY(0);
}

/* زر الإغلاق */
.mm-close-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
}
.mm-close-btn svg { width: 14px; height: 14px; }
.mm-close-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }

/* رأس المودال */
.mm-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.mm-avatar-ring {
    position: relative;
    flex-shrink: 0;
}
.mm-big-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(0,191,255,0.35);
    box-shadow: 0 0 16px rgba(0,191,255,0.15);
}
.mm-role-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 16px;
    line-height: 1;
}
.mm-name-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mm-member-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
}
.mm-member-role {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px;
    padding: 2px 10px;
    display: inline-block;
}
.mm-member-role.role-leader { color: #FFD700; border-color: rgba(255,215,0,0.3); background: rgba(255,215,0,0.08); }
.mm-member-role.role-officer { color: #00BFFF; border-color: rgba(0,191,255,0.3); background: rgba(0,191,255,0.07); }

/* شبكة الإحصائيات */
.mm-stats-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.mm-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.mm-stat svg { width: 18px; height: 18px; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.mm-stat-value {
    font-size: 0.88rem;
    font-weight: 900;
    color: rgba(255,255,255,0.88);
    line-height: 1;
}
.mm-stat-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
}

/* أزرار الإجراء (المالك) */
.mm-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.mm-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 10px;
    border-radius: 13px;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: inherit;
    direction: rtl;
}
.mm-action-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.mm-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.mm-promote-btn {
    background: linear-gradient(135deg, rgba(0,100,180,0.4), rgba(0,191,255,0.3));
    border: 1px solid rgba(0,191,255,0.35) !important;
    color: #fff;
}
.mm-promote-btn:hover:not(:disabled) { box-shadow: 0 0 16px rgba(0,191,255,0.2); }
.mm-promote-btn.is-demote {
    background: linear-gradient(135deg, rgba(100,50,0,0.4), rgba(255,140,0,0.2));
    border-color: rgba(255,140,0,0.35) !important;
    color: #FFA500;
}

.mm-kick-btn {
    background: linear-gradient(135deg, rgba(139,0,0,0.35), rgba(220,20,60,0.25));
    border: 1px solid rgba(220,20,60,0.35) !important;
    color: #FF4460;
    flex: 0 0 auto;
    padding: 12px 16px;
}
.mm-kick-btn:hover:not(:disabled) { box-shadow: 0 0 16px rgba(220,20,60,0.2); }

/* زر البروفايل */
.mm-profile-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 13px;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    direction: rtl;
    transition: all 0.18s;
}
.mm-profile-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.mm-profile-btn:hover { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.18); }

/* =====================================================
   نهاية لوحة قيادة العشيرة
===================================================== */

.expanded-message-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-align: center;
    padding: 0 32px;
    line-height: 1.5;
}

/* ==============================================
   نظام إطارات الأفاتار — Avatar Frames
   تقنية: CSS mask ring + conic-gradient
============================================== */

/* ── قاعدة دعم الإطارات ── */
.avatar-container {
    overflow: visible; /* يتيح ظهور التاج فوق الحدود */
}

/* عناصر الزينة (مخفية افتراضياً) */
.frame-deco {
    display: none;
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

/* ── حلقة الإطار العامة (CSS mask ring) ──
   تُطبَّق على ::before لكل إطار.
   padding = سُمك الحلقة.
   mask-composite: exclude يقطع المركز ويُبقي الحلقة فقط.
*/
.avatar-container.frame-global-top1::before,
.avatar-container.frame-global-top2::before,
.avatar-container.frame-global-top3::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 4px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   إطار #1 — frame-global-top1
   ذهبي دوّار بتوهج نابض + تاج
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.avatar-container.frame-global-top1 {
    background: transparent;
    animation: frameGoldPulse 2.4s ease-in-out infinite;
}

.avatar-container.frame-global-top1::before {
    background: conic-gradient(
        #FFD700  0deg,
        #FFF4A0  60deg,
        #FFA500  120deg,
        #FFD700  180deg,
        #FFFACD  240deg,
        #FFA500  300deg,
        #FFD700  360deg
    );
    animation: frameGoldSpin 2.8s linear infinite;
}

@keyframes frameGoldSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

@keyframes frameGoldPulse {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(255, 215, 0, 0.65),
            0 0 28px rgba(255, 165, 0, 0.30);
    }
    50% {
        box-shadow:
            0 0 22px rgba(255, 215, 0, 0.95),
            0 0 44px rgba(255, 165, 0, 0.55),
            0 0  8px rgba(255, 255, 200, 0.40);
    }
}

/* تاج الرتبة الأولى */
.avatar-container.frame-global-top1 .frame-crown-deco {
    display: flex;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    filter:
        drop-shadow(0 0  6px rgba(255, 215, 0, 0.90))
        drop-shadow(0 2px 4px rgba(0,   0,   0, 0.55));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   إطار #2 — frame-global-top2
   فضي مع وميض ضوئي دوري + نجمة
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.avatar-container.frame-global-top2 {
    background: transparent;
    box-shadow:
        0 0 12px rgba(200, 200, 225, 0.50),
        0 0 24px rgba(170, 170, 200, 0.22);
}

.avatar-container.frame-global-top2::before {
    background: conic-gradient(
        #A8A8B8  0deg,
        #D8D8E8  55deg,
        #FFFFFF  90deg,   /* نقطة الوميض */
        #D0D0E0  125deg,
        #B0B0C0  180deg,
        #C8C8D8  260deg,
        #A8A8B8  360deg
    );
    animation: frameSilverShine 3.2s ease-in-out infinite;
}

@keyframes frameSilverShine {
    0%      { transform: rotate(0deg);   }
    14%     { transform: rotate(360deg); }   /* وميض سريع */
    14.01%  { transform: rotate(0deg);   }
    100%    { transform: rotate(0deg);   }   /* توقف طويل */
}

/* نجمة الرتبة الثانية */
.avatar-container.frame-global-top2 .frame-star-deco {
    display: flex;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    filter:
        drop-shadow(0 0  5px rgba(220, 220, 240, 0.85))
        drop-shadow(0 1px 3px rgba(0,   0,   0,  0.55));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   إطار #3 — frame-global-top3
   برونزي صلب بعمق معدني — بدون حركة
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.avatar-container.frame-global-top3 {
    background: transparent;
    box-shadow:
        0 0 14px rgba(180,  95,  20, 0.60),
        0 0 28px rgba(140,  75,  15, 0.28),
        0 3px  8px rgba(80,  40,   5, 0.55),
        inset 0  2px 6px rgba(255, 175, 70, 0.18),
        inset 0 -2px 6px rgba(60,  30,   5, 0.40);
}

.avatar-container.frame-global-top3::before {
    background: conic-gradient(
        #6B3A10  0deg,
        #CD7F32  40deg,
        #E8A040  80deg,   /* نقطة الإضاءة */
        #B8621A  120deg,
        #7A4015  165deg,
        #CD7F32  210deg,
        #A05828  255deg,
        #E09030  295deg,
        #6B3A10  340deg,
        #CD7F32  360deg
    );
    /* لا animation — سكون معدني */
    box-shadow:
        inset 0 1px 3px rgba(255, 200, 100, 0.35),
        inset 0 -1px 3px rgba(40,  20,   5, 0.55);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   إطار الترحيب — frame-welcome
   أزرق هادئ + توهج ناعم (بدون حركة)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.avatar-container.frame-welcome {
    background: transparent;
    box-shadow:
        0 0 10px rgba(0, 191, 255, 0.42),
        0 0 22px rgba(0, 140, 220, 0.18);
}
.avatar-container.frame-welcome::before {
    background: conic-gradient(
        #00BFFF  0deg,
        #0080CC  90deg,
        #40D0FF  180deg,
        #006BB0  270deg,
        #00BFFF  360deg
    );
}

/* ==============================================
   الخزنة الملكية — Collections Vault
   نمط: Glassmorphism داكن + نيون
============================================== */

/* ── شريط الرتبة والأصدقاء المحدَّث ── */
.rank-friends-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 4px;
}

/* زر دائري مشترك (vault + friends) */
.circle-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 191, 255, 0.22);
    background: rgba(0, 191, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.circle-icon-btn:active { transform: scale(0.88); }

/* زر الخزنة — لهجة ذهبية */
.vault-btn {
    border-color: rgba(255, 215, 0, 0.32);
    background:  rgba(255, 215, 0, 0.09);
    box-shadow:  0 0 10px rgba(255, 215, 0, 0.12);
    color: #FFD700;
}
.vault-btn svg { stroke: #FFD700; }

/* زر الأصدقاء */
.friends-btn { color: var(--royal-blue); }

/* شارة العدد للأصدقاء */
.friends-count-badge {
    display: none !important;
}

/* النقطة الحمراء الصغيرة للطلبات المعلقة */
.circle-icon-btn .friends-pending-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    border: 1.5px solid var(--bg-primary, #0A1628);
    display: none;
}

/* أيقونة SVG للرتبة داخل badge */
.rank-svg-icon {
    flex-shrink: 0;
    margin-left: 6px;
    color: #fff;
}

/* ── نقطة الإشعار الحمراء ── */
.vault-new-dot {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF3B3B;
    border: 1.5px solid var(--bg-color);
    box-shadow: 0 0 7px rgba(255, 59, 59, 0.85);
    animation: vaultDotPulse 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes vaultDotPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.30); opacity: 0.72; }
}

/* ── Overlay خلفية النافذة ── */
.vault-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 4, 16, 0.80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: vaultFadeIn 0.22s ease-out;
}
@keyframes vaultFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── صندوق النافذة الداخلية ── */
.vault-modal-inner {
    width: 100%;
    max-height: 92vh;
    background: linear-gradient(180deg,
        rgba(4, 12, 30, 0.98) 0%,
        rgba(2, 8, 22, 0.99) 100%);
    border: 1px solid rgba(0, 191, 255, 0.16);
    border-radius: 26px 26px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: vaultSlideUp 0.32s cubic-bezier(0.34, 1.46, 0.64, 1);
    box-shadow: 0 -6px 50px rgba(0, 0, 0, 0.65);
}
@keyframes vaultSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes vaultSlideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

/* ── هيدر النافذة ── */
.vault-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px 14px;
    border-bottom: 1px solid rgba(0, 191, 255, 0.09);
    flex-shrink: 0;
}
.vault-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vault-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.14),
        rgba(255, 140, 0, 0.09));
    border: 1px solid rgba(255, 215, 0, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.13), inset 0 1px 0 rgba(255,215,0,0.15);
    flex-shrink: 0;
}
.vault-modal-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: 0.3px;
}
.vault-modal-subtitle {
    font-size: 0.70rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.vault-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.vault-close-btn:active {
    background: rgba(255, 59, 59, 0.18);
    color: #FF5555;
}

/* ── أزرار الفلترة ── */
.vault-filter-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.vault-filter-row::-webkit-scrollbar { display: none; }

.vault-filter-tab {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 191, 255, 0.18);
    background: rgba(0, 191, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-family: inherit;
}
.vault-filter-tab.active {
    background: var(--royal-blue);
    border-color: var(--royal-blue);
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 191, 255, 0.32);
}

/* ── منطقة المحتوى ── */
.vault-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 36px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 191, 255, 0.18) transparent;
}
.vault-content-area::-webkit-scrollbar { width: 3px; }
.vault-content-area::-webkit-scrollbar-thumb {
    background: rgba(0, 191, 255, 0.20);
    border-radius: 4px;
}

/* ── شبكة العناصر ── */
.vault-items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* ── بطاقة عنصر ── */
.vault-item-card {
    border-radius: 16px;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 6px 8px;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}
.vault-item-card:active { transform: scale(0.93); }

/* مملوك */
.vault-item-card.owned {
    background: linear-gradient(155deg,
        rgba(4, 18, 46, 0.96) 0%,
        rgba(0, 10, 32, 0.96) 100%);
    border: 1px solid rgba(0, 191, 255, 0.22);
    box-shadow: 0 2px 14px rgba(0, 191, 255, 0.07);
}

/* مقفل */
.vault-item-card.locked {
    background: linear-gradient(155deg,
        rgba(4, 10, 22, 0.88) 0%,
        rgba(2, 6, 16, 0.90) 100%);
    border: 1px solid rgba(40, 60, 100, 0.22);
}

/* الشكل البصري للعنصر */
.vault-item-visual {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.vault-item-card.locked .vault-item-visual {
    filter: grayscale(75%) brightness(0.45);
}

/* اسم العنصر */
.vault-item-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
}
.vault-item-card.owned  .vault-item-label { color: var(--text-primary); }
.vault-item-card.locked .vault-item-label { color: rgba(90, 120, 160, 0.55); }

/* نقطة الندرة */
.vault-item-rarity-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vault-item-card.locked .vault-item-rarity-dot {
    filter: grayscale(1) brightness(0.5);
}

/* شارة الملكية (صح أخضر) */
.vault-owned-check {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    border: 1.5px solid rgba(34, 197, 94, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22C55E;
}

/* أيقونة القفل المتمركزة */
.vault-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 18, 0.45);
    border-radius: inherit;
}
.vault-lock-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(8, 16, 40, 0.85);
    border: 1px solid rgba(80, 110, 160, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(130, 160, 200, 0.65);
}

/* ── لوحة تفاصيل العنصر ── */
.vault-item-detail {
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 4px 4px 24px;
    animation: fadeInUp 0.22s ease-out;
}

.vault-back-btn {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 191, 255, 0.07);
    border: 1px solid rgba(0, 191, 255, 0.18);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--royal-blue);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}
.vault-back-btn:active { background: rgba(0, 191, 255, 0.14); }

.vault-detail-preview-wrap {
    width: 130px;
    height: 130px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 4px;
    flex-shrink: 0;
}

.vault-detail-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-light);
    text-align: center;
}

.vault-detail-rarity {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 18px;
    border-radius: 20px;
    border: 1px solid currentColor;
    text-align: center;
}

.vault-detail-desc {
    font-size: 0.84rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.55;
    padding: 0 8px;
}

.vault-detail-how-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(0, 191, 255, 0.05);
    border: 1px solid rgba(0, 191, 255, 0.13);
    border-radius: 13px;
    padding: 10px 14px;
    font-size: 0.80rem;
    color: var(--text-secondary);
    width: 100%;
    line-height: 1.45;
    direction: rtl;
    text-align: right;
}

/* ── زر الإجراء ── */
.vault-action-btn {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.3px;
}
.vault-action-btn.equip {
    background: linear-gradient(135deg, #22C55E, #15803D);
    color: #fff;
    box-shadow: 0 4px 22px rgba(34, 197, 94, 0.38);
}
.vault-action-btn.equip:active { transform: scale(0.97); }
.vault-action-btn.go-leaderboard {
    background: rgba(0, 191, 255, 0.09);
    border: 1px solid rgba(0, 191, 255, 0.28);
    color: var(--royal-blue);
}
.vault-action-btn.buy {
    background: rgba(255, 215, 0, 0.09);
    border: 1px solid rgba(255, 215, 0, 0.28);
    color: #FFD700;
}
.vault-action-btn.locked-state {
    background: rgba(4, 14, 34, 0.55);
    border: 1px solid rgba(40, 60, 100, 0.28);
    color: rgba(80, 110, 160, 0.50);
    cursor: default;
}
.vault-action-btn.equipped-active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 120, 56, 0.10));
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22C55E;
    cursor: default;
    opacity: 0.80;
}
.vault-action-btn.unequip {
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(180,30,30,0.08));
    border: 1px solid rgba(239,68,68,0.30);
    color: #EF4444;
}
.vault-action-btn.unequip:active { opacity: 0.70; }
.vault-action-btn:disabled { opacity: 0.75; cursor: default; }

/* ── معاينة الخزنة البصرية لكل نوع ─────────────────────────── */
/* إطار — حلقة دائرية */
.vault-visual-frame {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
    border: none !important;
    position: relative;
    flex-shrink: 0;
}
.vault-frame-ring {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 3.5px solid;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
}
.vault-frame-inner-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.07) 0%, rgba(4,10,26,0.88) 65%);
}
.vault-frame-lbl {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5.5px;
    font-weight: 900;
    text-transform: uppercase;
    color: currentColor;
    padding: 0 4px;
    height: 9px;
    line-height: 9px;
    border-radius: 3px 3px 0 0;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    /* مضمَّج في حافة الإطار */
}
/* لون الاسم — حرف ملوّن كبير */
.vault-visual-namecolor {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -1px;
    flex-shrink: 0;
}
/* لقب — شارة نصية */
.vault-visual-title {
    width: 54px; height: 54px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 0.52rem;
    font-weight: 700;
    padding: 4px;
    line-height: 1.3;
    flex-shrink: 0;
}
.vault-item-card.locked .vault-visual-frame,
.vault-item-card.locked .vault-visual-namecolor,
.vault-item-card.locked .vault-visual-title {
    filter: grayscale(70%) brightness(0.45);
}

/* ══════════════════════════════════════════════════
   Bottom Sheet — تفاصيل تحدي العشيرة الأسبوعي
══════════════════════════════════════════════════ */
.clan-chal-sheet {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.clan-chal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.clan-chal-card {
    position: relative;
    background: var(--bg-secondary, #0D1F3C);
    border-radius: 24px 24px 0 0;
    padding: 12px 20px 36px;
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.36s cubic-bezier(0.34,1.3,0.64,1);
}
.clan-chal-sheet.open .clan-chal-backdrop { opacity: 1; }
.clan-chal-sheet.open .clan-chal-card     { transform: translateY(0); }

.clan-chal-handle {
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    margin: 0 auto 18px;
}

/* رأس الشيت */
.clan-chal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.clan-chal-icon-big {
    font-size: 2.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.clan-chal-head-text { flex: 1; }
.clan-chal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.clan-chal-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
    line-height: 1.5;
}

/* شريط التقدم */
.clan-chal-prog-wrap {
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.clan-chal-prog-nums {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFD700;
    margin-bottom: 8px;
}
.clan-chal-sep { color: rgba(255,255,255,0.35); font-weight: 400; }
.clan-chal-track {
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}
.clan-chal-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF4500, #FFD700);
    border-radius: 6px;
    transition: width 0.6s ease;
}
.clan-chal-pct-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
}
.clan-chal-badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.clan-chal-badge--active  { background: rgba(255,165,0,0.18); color: #FFA500; }
.clan-chal-badge--done    { background: rgba(0,220,100,0.18); color: #00DC64; }

/* صندوق المكافأة */
.clan-chal-reward-box {
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.clan-chal-reward-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
}
.clan-chal-reward-vals {
    font-size: 0.92rem;
    font-weight: 700;
    color: #FFD700;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* المساهمون */
.clan-chal-contrib-section { margin-bottom: 18px; }
.clan-chal-contrib-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    margin: 0 0 10px;
}
.clan-chal-contrib-list { display: flex; flex-direction: column; gap: 8px; }
.clan-chal-no-contrib {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
    padding: 12px 0;
}
.clan-chal-contributor {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px 14px;
}
.clan-chal-contrib-rank {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.clan-chal-contrib-name {
    flex: 1;
    font-size: 0.88rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clan-chal-contrib-amount {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFD700;
    flex-shrink: 0;
}

/* زر التبديل */
.clan-chal-swap-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,69,0,0.12);
    border: 1px solid rgba(255,69,0,0.35);
    border-radius: 12px;
    color: #FF6A3D;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 13px 16px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.clan-chal-swap-btn:active { transform: scale(0.97); background: rgba(255,69,0,0.22); }
.clan-chal-swap-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* clan-chal */

/* ============================================================
   INFO MODAL — زر المعلومات + نافذة عن البوت ودليل المزايا
   ============================================================ */

/* ── زر الدائرة (FAB) ── */
.info-fab {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 191, 255, 0.10);
    border: 1.5px solid rgba(0, 191, 255, 0.28);
    color: var(--royal-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 150;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    flex-shrink: 0;
}
.info-fab:active { transform: scale(0.88); background: rgba(0,191,255,0.22); }
.info-fab:hover  { box-shadow: 0 0 14px rgba(0,191,255,0.22); }

/* ── Overlay الكامل ── */
.info-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 6000;
    align-items: flex-end;
    justify-content: center;
}
.info-modal.open { display: flex; }

.info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* ── البطاقة الرئيسية ── */
.info-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    background: #040e22;
    border: 1px solid rgba(0,191,255,0.15);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    animation: infoSlideUp 0.32s cubic-bezier(0.34,1.4,0.64,1);
    overflow: hidden;
}
@keyframes infoSlideUp {
    from { transform: translateY(100%); opacity: 0.4; }
    to   { transform: translateY(0);   opacity: 1;   }
}

/* ── المقبض والرأس ── */
.info-modal-drag {
    width: 40px; height: 4px;
    background: rgba(0,191,255,0.22);
    border-radius: 4px;
    margin: 10px auto 0;
    flex-shrink: 0;
}
.info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 0;
    flex-shrink: 0;
}
.info-modal-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.info-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.info-modal-close:active { transform: scale(0.88); background: rgba(255,255,255,0.13); }

/* ── التبويبات ── */
.info-tab-bar {
    display: flex;
    gap: 6px;
    padding: 12px 18px 0;
    flex-shrink: 0;
}
.info-tab-btn {
    flex: 1;
    padding: 9px 4px;
    border-radius: 12px;
    background: rgba(0,191,255,0.06);
    border: 1.5px solid rgba(0,191,255,0.12);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: inherit;
}
.info-tab-btn.active {
    background: rgba(0,191,255,0.15);
    border-color: rgba(0,191,255,0.40);
    color: var(--royal-blue);
}

/* ── منطقة المحتوى القابلة للتمرير ── */
.info-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 28px;
    overscroll-behavior: contain;
}
.info-tab-content::-webkit-scrollbar { width: 4px; }
.info-tab-content::-webkit-scrollbar-thumb { background: rgba(0,191,255,0.18); border-radius: 4px; }

/* ── التايم لاين (تبويب القصة) ── */
.info-timeline {
    position: relative;
    padding-right: 30px;
}
.info-timeline::before {
    content: '';
    position: absolute;
    top: 8px; right: 11px; bottom: 14px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0,191,255,0.5), rgba(0,191,255,0.04));
    border-radius: 2px;
}
.info-tl-item { position: relative; margin-bottom: 22px; }
.info-tl-dot {
    position: absolute;
    top: 4px; right: -30px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #040e22;
    border: 2.5px solid var(--royal-blue);
    z-index: 1;
    font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
}
.info-tl-dot.gold   { border-color: #FFD700; }
.info-tl-dot.green  { border-color: #22C55E; }
.info-tl-dot.purple { border-color: #A855F7; }
.info-tl-dot.orange { border-color: #F97316; }

.info-tl-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--royal-blue);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.info-tl-label.gold   { color: #FFD700; }
.info-tl-label.green  { color: #22C55E; }
.info-tl-label.purple { color: #A855F7; }
.info-tl-label.orange { color: #F97316; }

.info-tl-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.35;
}
.info-tl-body {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.info-tl-body a {
    color: var(--royal-blue);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0,191,255,0.35);
    cursor: pointer;
}
.info-tl-body strong { color: var(--text-primary); font-weight: 700; }
.info-tl-body ul { margin: 6px 0 0 0; padding-right: 14px; display: flex; flex-direction: column; gap: 4px; }
.info-tl-body li { list-style: none; }
.info-tl-body li::before { content: '◈ '; color: var(--royal-blue); font-size: 0.62rem; vertical-align: middle; }

.info-copyright {
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(0,191,255,0.04);
    border: 1px solid rgba(0,191,255,0.10);
    font-size: 0.76rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.65;
}
.info-copyright strong { color: var(--text-primary); }

/* ── الأكورديون (تبويب الدليل) ── */
.info-accordion { display: flex; flex-direction: column; gap: 8px; }

.info-acc-item {
    background: rgba(4,14,34,0.85);
    border: 1px solid rgba(0,191,255,0.10);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.info-acc-item.open { border-color: rgba(0,191,255,0.28); }

.info-acc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.info-acc-icon  { font-size: 1.2rem; flex-shrink: 0; width: 28px; text-align: center; }
.info-acc-title { flex: 1; font-size: 0.88rem; font-weight: 800; color: var(--text-primary); }
.info-acc-chevron {
    color: var(--text-secondary);
    transition: transform 0.25s, color 0.2s;
    flex-shrink: 0;
}
.info-acc-item.open .info-acc-chevron { transform: rotate(180deg); color: var(--royal-blue); }

.info-acc-body {
    display: none;
    padding: 0 14px 14px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.7;
    border-top: 1px solid rgba(0,191,255,0.07);
    padding-top: 10px;
}
.info-acc-item.open .info-acc-body { display: block; }
.info-acc-body ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.info-acc-body li::before { content: '◈ '; color: var(--royal-blue); font-size: 0.62rem; vertical-align: middle; }
.info-acc-body strong { color: var(--text-primary); }