/* ============================================================
   JADE PREMIUM FEATURES - CSS v4.1.0
   Theme: Premium Purple + Easter Special Mode
   ============================================================ */

:root {
    --jade-purple-dark:  #2d1b4e;
    --jade-purple:       #6a4c93;
    --jade-purple-light: #8b5fc4;
    --jade-gold:         #ffd700;
    --jade-gold-light:   #ffed4e;
    --jade-silver:       #e0e0e0;
    --jade-bronze:       #cd7f32;
    --jade-shadow:       rgba(106, 76, 147, 0.45);
    --jade-glass:        rgba(255,255,255,0.10);
    --jade-glass-hover:  rgba(255,255,255,0.16);
    --jade-grad-main:    linear-gradient(135deg, var(--jade-purple-dark) 0%, var(--jade-purple) 100%);
    --jade-grad-gold:    linear-gradient(135deg, var(--jade-gold) 0%, var(--jade-gold-light) 100%);
    --jade-easter-grad:  linear-gradient(135deg, #1a3a1a 0%, #2e6b2e 50%, #1a3a1a 100%);
}

/* ── Shared containers ──────────────────────────────────── */
.jade-leaderboard-premium,
.jade-chest-container {
    background:    var(--jade-grad-main);
    border-radius: 24px;
    padding:       32px 24px;
    box-shadow:    0 10px 45px var(--jade-shadow);
    color:         #fff;
    font-family:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width:     560px;
    margin:        30px auto;
    position:      relative;
    overflow:      hidden;
}

.jade-leaderboard-premium::before,
.jade-chest-container::before {
    content:        '';
    position:       absolute;
    inset:          -50%;
    background:     radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 60%);
    animation:      jade-bg-rotate 35s linear infinite;
    pointer-events: none;
}

/* Easter mode */
.jade-chest-container.jade-easter-mode {
    background: var(--jade-easter-grad);
    box-shadow: 0 10px 45px rgba(46,107,46,0.5);
}
.jade-chest-container.jade-easter-mode::before {
    background: radial-gradient(circle, rgba(255,230,100,0.06) 0%, transparent 60%);
}

/* ── Easter Banner ──────────────────────────────────────── */
.jade-easter-banner {
    background:     linear-gradient(90deg, #f39c12, #e74c3c, #f39c12);
    color:          #fff;
    text-align:     center;
    font-size:      17px;
    font-weight:    800;
    padding:        12px 20px 8px;
    border-radius:  12px;
    margin-bottom:  22px;
    letter-spacing: 1px;
    text-shadow:    0 2px 6px rgba(0,0,0,0.4);
    animation:      jade-pulse-glow 1.8s ease-in-out infinite;
    position:       relative;
    z-index:        1;
}
.jade-easter-sub {
    font-size:   12px;
    font-weight: 400;
    opacity:     0.9;
    margin-top:  4px;
}

/* ── Leaderboard header ─────────────────────────────────── */
.jade-lb-header {
    text-align:    center;
    margin-bottom: 28px;
    position:      relative;
    z-index:       1;
}
.jade-lb-trophy {
    font-size:     42px;
    display:       inline-block;
    animation:     jade-float 2.2s ease-in-out infinite;
    margin-bottom: 6px;
}
.jade-lb-header h2 {
    margin:         0;
    font-size:      22px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow:    0 3px 10px rgba(0,0,0,0.5);
}

/* ── Podium ─────────────────────────────────────────────── */
.jade-lb-podium {
    display:         flex;
    justify-content: center;
    align-items:     flex-end;
    gap:             12px;
    margin-bottom:   28px;
    padding-top:     10px;
    position:        relative;
    z-index:         1;
}
.jade-lb-podium-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    flex:           1;
    max-width:      130px;
}
.jade-lb-first  { order: 2; margin-bottom: 0; }
.jade-lb-second { order: 1; margin-bottom: -22px; }
.jade-lb-third  { order: 3; margin-bottom: -22px; }

.jade-lb-medal {
    font-size:     26px;
    margin-bottom: 6px;
    animation:     jade-float 3s ease-in-out infinite;
}
.jade-lb-crown {
    font-size:     36px;
    margin-bottom: 6px;
    filter:        drop-shadow(0 0 10px var(--jade-gold));
    animation:     jade-float 2.5s ease-in-out infinite;
}

.jade-lb-avatar {
    width:         76px;
    height:        76px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid #fff;
    box-shadow:    0 4px 14px rgba(0,0,0,0.35);
    margin-bottom: 10px;
    transition:    transform 0.3s ease;
    background:    #000;
}
.jade-lb-first  .jade-lb-avatar { width: 96px; height: 96px; border: 4px solid var(--jade-gold); }
.jade-lb-second .jade-lb-avatar { border-color: var(--jade-silver); }
.jade-lb-third  .jade-lb-avatar { border-color: var(--jade-bronze); }
.jade-lb-avatar:hover           { transform: scale(1.08) rotate(3deg); }

.jade-lb-username {
    font-size:     13px;
    font-weight:   700;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    width:         100%;
    text-shadow:   0 2px 5px rgba(0,0,0,0.5);
    margin-bottom: 3px;
}
.jade-lb-points {
    font-size:   14px;
    font-weight: 700;
    color:       var(--jade-gold);
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.jade-lb-first .jade-lb-points { font-size: 16px; }

/* ── List (locuri 4+) ───────────────────────────────────── */
.jade-lb-list {
    max-height:    0;
    overflow:      hidden;
    transition:    max-height 0.5s ease, padding 0.4s ease;
    background:    rgba(255,255,255,0.07);
    border-radius: 14px;
    padding:       0 12px;
    margin-bottom: 14px;
    position:      relative;
    z-index:       1;
}
.jade-lb-list.expanded { max-height: 900px; padding: 12px; overflow-y: auto; }
.jade-lb-list::-webkit-scrollbar       { width: 5px; }
.jade-lb-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 10px; }
.jade-lb-list::-webkit-scrollbar-thumb { background: var(--jade-gold); border-radius: 10px; }

.jade-lb-list-item {
    display:       flex;
    align-items:   center;
    height:        58px;
    padding:       0 10px;
    background:    var(--jade-glass);
    border-radius: 10px;
    margin-bottom: 6px;
    border-left:   3px solid transparent;
    transition:    all 0.25s ease;
    overflow:      hidden;
}
.jade-lb-list-item:last-child { margin-bottom: 0; }
.jade-lb-list-item:hover {
    background:   var(--jade-glass-hover);
    transform:    translateX(5px);
    border-color: var(--jade-gold);
}
.jade-lb-current-user {
    background:   rgba(255,215,0,0.14);
    border-color: var(--jade-gold);
    animation:    jade-pulse-glow 2s ease-in-out infinite;
}

.jade-lb-rank {
    min-width:   32px;
    width:       32px;
    text-align:  center;
    font-size:   15px;
    font-weight: 700;
    color:       var(--jade-gold);
    flex-shrink: 0;
}
.jade-lb-list-avatar {
    width:         40px;
    height:        40px;
    min-width:     40px;
    max-width:     40px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid #fff;
    margin:        0 10px;
    flex-shrink:   0;
    display:       block;
}
.jade-lb-list-username {
    flex:          1;
    font-size:     14px;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
}
.jade-lb-list-points {
    font-size:   13px;
    font-weight: 700;
    color:       var(--jade-gold);
    white-space: nowrap;
}

/* ── "Vezi tot" button ──────────────────────────────────── */
.jade-lb-view-all {
    width:           100%;
    background:      var(--jade-glass-hover);
    color:           #fff;
    border:          1px solid rgba(255,255,255,0.22);
    padding:         10px 20px;
    font-size:       14px;
    font-weight:     700;
    border-radius:   50px;
    cursor:          pointer;
    transition:      all 0.3s ease;
    backdrop-filter: blur(6px);
    position:        relative;
    z-index:         1;
}
.jade-lb-view-all:hover { background: rgba(255,255,255,0.22); border-color: var(--jade-gold); }
.jade-lb-view-all::after { content: ' \25BC'; font-size: 11px; transition: transform 0.3s ease; display: inline-block; }
.jade-lb-view-all.expanded::after { transform: rotate(180deg); }

/* ── My position ────────────────────────────────────────── */
.jade-lb-my-position {
    margin-top:    18px;
    background:    rgba(255,215,0,0.10);
    border:        1px solid var(--jade-gold);
    border-radius: 12px;
    padding:       12px;
    position:      relative;
    z-index:       1;
}
.jade-lb-my-position-title {
    font-size:      12px;
    font-weight:    700;
    color:          var(--jade-gold);
    text-align:     center;
    margin-bottom:  8px;
    text-transform: uppercase;
}

/* ── Chest container ────────────────────────────────────── */
.jade-chest-container { text-align: center; }
.jade-chest-content   { position: relative; z-index: 1; }
.jade-chest-container h2 {
    margin:      0 0 28px;
    font-size:   24px;
    font-weight: 800;
    text-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

.jade-chest-box {
    position:        relative;
    width:           240px;
    height:          240px;
    margin:          0 auto 28px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.jade-chest-img {
    position:   absolute;
    width:      100%;
    height:     100%;
    object-fit: contain;
    z-index:    2;
    transition: opacity 0.45s ease, transform 0.45s ease;
    cursor:     pointer;
}
.jade-chest-img:hover { transform: scale(1.05); }

/* Stare normala: iepurasul vizibil */
.jade-chest-closed {
    opacity:        1;
    pointer-events: auto;
    animation:      jade-chest-idle 3s ease-in-out infinite;
}
.jade-chest-open {
    opacity:        0;
    pointer-events: none;
    transform:      scale(0.85);
}

/* Stare opened: cufarul deschis */
.jade-chest-box.opened .jade-chest-closed { opacity: 0; pointer-events: none; transform: scale(1.15); }
.jade-chest-box.opened .jade-chest-open   { opacity: 1; pointer-events: auto; transform: scale(1); }

/* Animatie shake la deschidere */
.jade-chest-box.opening { animation: jade-chest-shake 0.8s ease-in-out; }

.jade-chest-glow {
    position:       absolute;
    top:            50%;
    left:           50%;
    width:          170px;
    height:         170px;
    background:     radial-gradient(circle, var(--jade-gold) 0%, transparent 70%);
    transform:      translate(-50%, -50%);
    opacity:        0.35;
    animation:      jade-pulse-glow 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index:        1;
}

/* ── Butoane ────────────────────────────────────────────── */
.jade-chest-open-btn {
    background:    var(--jade-grad-gold);
    color:         var(--jade-purple-dark);
    border:        none;
    padding:       16px 44px;
    font-size:     18px;
    font-weight:   800;
    border-radius: 50px;
    cursor:        pointer;
    transition:    all 0.3s ease;
    box-shadow:    0 6px 25px rgba(255,215,0,0.45);
    position:      relative;
    z-index:       1;
}
.jade-chest-open-btn:hover:not([disabled]) {
    transform:  translateY(-3px);
    box-shadow: 0 10px 32px rgba(255,215,0,0.65);
}
.jade-chest-open-btn[disabled] {
    background: rgba(255,255,255,0.18);
    color:      #ccc;
    cursor:     not-allowed;
    box-shadow: none;
}
.jade-easter-btn {
    background: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
    box-shadow: 0 6px 25px rgba(231,76,60,0.5);
}
.jade-easter-btn:hover:not([disabled]) {
    box-shadow: 0 10px 32px rgba(231,76,60,0.7);
}

.jade-admin-badge {
    margin-top:    14px;
    padding:       7px 18px;
    background:    rgba(255,215,0,0.18);
    border:        2px solid var(--jade-gold);
    border-radius: 20px;
    display:       inline-block;
    font-size:     13px;
    font-weight:   700;
    color:         var(--jade-gold);
}

/* ── Timer ──────────────────────────────────────────────── */
.jade-chest-timer {
    margin-top: 18px;
    font-size:  16px;
    color:      rgba(255,255,255,0.8);
    position:   relative;
    z-index:    1;
}
#jade-timer-display {
    font-weight: 800;
    color:       var(--jade-gold);
    font-size:   24px;
    font-family: 'Courier New', monospace;
}

/* ── Grid recompense ────────────────────────────────────── */
.jade-chest-rewards-info {
    margin-top:  36px;
    padding-top: 28px;
    border-top:  1px solid rgba(255,255,255,0.12);
    position:    relative;
    z-index:     1;
}
.jade-chest-rewards-info h3 { margin: 0 0 18px; font-size: 17px; }

.jade-rewards-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
}
.jade-reward-item {
    background:    var(--jade-glass);
    padding:       12px 8px;
    border-radius: 12px;
    border:        2px solid transparent;
    transition:    transform 0.25s ease;
    text-align:    center;
}
.jade-reward-item:hover { transform: translateY(-4px); }

.jade-reward-common    { border-color: #95a5a6; }
.jade-reward-uncommon  { border-color: #27ae60; }
.jade-reward-rare      { border-color: #3498db; }
.jade-reward-epic      { border-color: #9b59b6; }
.jade-reward-legendary { border-color: #f39c12; }
.jade-reward-mythic    { border-color: #e74c3c; background: rgba(231,76,60,0.12); }

.jade-reward-label  { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; opacity: 0.85; }
.jade-reward-amount { display: block; font-size: 14px; font-weight: 800; color: var(--jade-gold); }
.jade-rewards-note  { font-size: 11px; opacity: 0.6; margin-top: 12px; font-style: italic; }

/* ── Link-uri ───────────────────────────────────────────── */
.jade-chest-links {
    margin-top:  32px;
    padding-top: 24px;
    border-top:  1px solid rgba(255,255,255,0.12);
}
.jade-chest-links h3 { margin: 0 0 16px; font-size: 16px; }
.jade-links-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   10px;
}
.jade-link-item {
    background:      var(--jade-glass);
    border:          1px solid rgba(255,255,255,0.18);
    border-radius:   10px;
    padding:         12px 14px;
    color:           #fff;
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             8px;
    font-size:       14px;
    font-weight:     600;
    transition:      all 0.25s ease;
}
.jade-link-item:hover {
    background:   var(--jade-glass-hover);
    border-color: var(--jade-gold);
    color:        var(--jade-gold);
    transform:    translateY(-2px);
}
.jade-link-icon { font-size: 18px; }

/* ── Popup recompensa ───────────────────────────────────── */
.jade-reward-popup {
    position:      fixed;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%) scale(0);
    background:    var(--jade-grad-main);
    padding:       44px 36px;
    border-radius: 24px;
    box-shadow:    0 20px 60px rgba(0,0,0,0.7);
    z-index:       99999;
    text-align:    center;
    min-width:     320px;
    opacity:       0;
    transition:    all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.jade-reward-popup.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.jade-reward-popup-icon   { font-size: 80px; margin-bottom: 14px; }
.jade-reward-popup-title  { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.jade-reward-popup-amount { font-size: 44px; font-weight: 900; color: var(--jade-gold); margin-bottom: 8px; }
.jade-reward-popup-close {
    background:    rgba(255,255,255,0.1);
    color:         #fff;
    border:        2px solid rgba(255,255,255,0.5);
    padding:       10px 32px;
    font-size:     15px;
    font-weight:   700;
    border-radius: 50px;
    cursor:        pointer;
    margin-top:    16px;
    transition:    all 0.3s ease;
}
.jade-reward-popup-close:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }

.jade-reward-popup-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.72);
    z-index:    99998;
    opacity:    0;
    transition: opacity 0.3s ease;
    cursor:     pointer;
}
.jade-reward-popup-overlay.show { opacity: 1; }

/* ── Diverse ────────────────────────────────────────────── */
.jade-pts {
    font-size:   11px;
    opacity:     0.8;
    margin-left: 2px;
}
.jade-message {
    padding:     16px;
    background:  rgba(106,76,147,0.15);
    border-left: 4px solid var(--jade-purple);
    border-radius: 8px;
}
.jade-spinner {
    display:          inline-block;
    width:            16px;
    height:           16px;
    border:           3px solid rgba(255,255,255,0.3);
    border-radius:    50%;
    border-top-color: #fff;
    animation:        jade-spin 0.8s linear infinite;
    vertical-align:   middle;
    margin-left:      8px;
}

/* ── Animatii ───────────────────────────────────────────── */
@keyframes jade-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes jade-bg-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes jade-spin {
    to { transform: rotate(360deg); }
}
@keyframes jade-chest-idle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes jade-chest-shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    15%      { transform: translateX(-7px) rotate(-7deg); }
    30%      { transform: translateX(7px) rotate(7deg); }
    45%      { transform: translateX(-7px) rotate(-7deg); }
    60%      { transform: translateX(7px) rotate(7deg); }
    80%      { transform: translateX(-3px) rotate(-3deg); }
}
@keyframes jade-pulse-glow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .jade-leaderboard-premium,
    .jade-chest-container    { padding: 22px 14px; margin: 16px 8px; }
    .jade-lb-avatar          { width: 62px; height: 62px; }
    .jade-lb-first .jade-lb-avatar { width: 80px; height: 80px; }
    .jade-lb-username        { font-size: 11px; }
    .jade-lb-points          { font-size: 12px; }
    .jade-chest-box          { width: 190px; height: 190px; }
    .jade-rewards-grid       { grid-template-columns: repeat(2, 1fr); }
    .jade-chest-open-btn     { padding: 14px 30px; font-size: 16px; }
    .jade-links-grid         { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .jade-lb-avatar          { width: 52px; height: 52px; }
    .jade-lb-first .jade-lb-avatar { width: 68px; height: 68px; }
    .jade-lb-list-avatar     { width: 34px; height: 34px; margin: 0 8px; }
    .jade-lb-rank            { min-width: 26px; font-size: 13px; }
    .jade-rewards-grid       { grid-template-columns: 1fr; }
    .jade-reward-popup       { padding: 28px 18px; min-width: 280px; }
    .jade-reward-popup-amount { font-size: 36px; }
    .jade-chest-box          { width: 160px; height: 160px; }
}