/* Optimalizace pro Android (Vypnutí sekavých efektů skla, zachování hezkého základu) */
body.low-end-device * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.low-end-device .modal,
body.low-end-device .toast-card,
body.low-end-device .user-dropdown,
body.low-end-device .user-nav,
body.low-end-device .reward-container {
    background: #1e1f22 !important;
    /* Pevné pozadí místo skla */
}

body.low-end-device .game-card,
body.low-end-device .hero-card,
body.low-end-device .user-card {
    background: #2b2d31 !important;
    /* O trošku světlejší pevné pozadí pro kartičky */
}

body.low-end-device {
    background: #0f0f13 !important;
    /* Čistá barva místo těžkého animovaného gradientu pozadí */
}

:root {
    --bg-dark: #0f0f13;
    --glass-bg: rgba(30, 31, 34, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --accent: #5865F2;
    --accent-glow: rgba(88, 101, 242, 0.5);
    --gold: #F1C40F;
    --text-main: #f2f3f5;
    --text-muted: #949ba4;
    --success: #2ecc71;
    --danger: #ff4757;
}

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

/* PŘIDÁNO/UPRAVENO PRO FIX POZADÍ A SCROLLU */
html {
    background: linear-gradient(-45deg, #000000 0%, rgb(30, 31, 34) 25%, rgb(43, 45, 49) 70%, #000000 100%);
    overscroll-behavior-y: none;
}

.shake-effect {
    /* Krátká a úderná animace (0.3s) */
    animation: shake-horizontal 0.3s ease-in-out both;
}

@keyframes shake-horizontal {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    20% {
        transform: translate3d(-3px, 0, 0);
    }

    40% {
        transform: translate3d(3px, 0, 0);
    }

    60% {
        transform: translate3d(-3px, 0, 0);
    }

    80% {
        transform: translate3d(3px, 0, 0);
    }
}

body {
    overscroll-behavior-y: auto;
    background: linear-gradient(-45deg, #000000 0%, rgb(30, 31, 34) 25%, rgb(43, 45, 49) 70%, #000000 100%);
    background-size: 400% 400%;
    color: var(--text-main);
    font-family: 'gg sans', 'Segoe UI', Tahoma, sans-serif;
    min-height: 100vh;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ptr--ptr {
    box-shadow: none !important;
    background: #0f0f13 !important;
    /* Splyne s pozadím */
    color: #ffffff !important;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.roulette-ball {
    position: absolute;
    top: -10px;
    /* Vytáhneme ji trochu nad kolo */
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    /* Větší velikost */
    height: 25px;
    background: radial-gradient(circle at 30% 30%, #ffffff, #b0b0b0);
    /* 3D efekt kuličky */
    border-radius: 50%;
    border: 3px solid #111;
    /* Tmavý obrys pro kontrast */
    box-shadow: 0 0 15px rgba(255, 255, 255, 1);
    /* Silná bílá záře */
    z-index: 10;
    /* Musí být nad kolem */
}

/* Šipka pod kuličkou (aby ukazovala přesně dolů) */
.roulette-ball::after {
    content: '';
    position: absolute;
    bottom: -10px;
    /* Pod kuličkou */
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #fff;
    /* Bílá šipka dolů */
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.ptr--icon {
    color: #5865F2;
    /* Tvoje Discord modrá */
    font-size: 1.5rem;
    transition: transform 0.3s;
}

ptr--text {
    color: #ffffff !important;
    font-weight: 600;
    font-family: 'gg sans', sans-serif;
}

/* Když se to načítá, ikonka se točí */
.ptr--refresh .ptr--icon {
    animation: spin 1s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- USER NAV BAR --- */
.user-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    z-index: 1000;
    background: rgba(15, 15, 19, 0.85);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.user-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    z-index: -1;
}

.action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 1400px) {
    .action-buttons {
        right: 120px;
    }
}

@media (max-width: 768px) {
    .action-buttons {
        right: 0;
        top: auto;
    }
}

.nav-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    font-size: 0.9rem;
}

.recent-wins-list>div:nth-child(n+4) {
    display: none !important;
}

.recent-wins-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 100%;
    /* Aby to nerostlo do nekonečna */
    overflow: hidden;
    /* Pojistka */
}

/* 2. Nastavení pro PC (obrazovka širší než 1024px) - ukáže max 7 */
@media (min-width: 1024px) {
    .profile-setting-btn {
        display: none;
    }

    /* Nejdříve "zapneme" položky 4 až 7, které mobil schoval */
    .recent-wins-list>div:nth-child(-n+7) {
        display: flex !important;
        /* nebo block, podle toho co používáš */
    }

    /* Schováme všechno od 8. položky dál */
    .recent-wins-list>div:nth-child(n+8) {
        display: none !important;
    }
}

.nav-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
}

.nav-btn.daily {
    border-color: rgba(46, 204, 113, 0.3);
    color: var(--success);
}

.nav-btn.chest {
    border-color: rgba(241, 196, 15, 0.3);
    color: var(--gold);
}

.nav-btn.login {
    background: var(--accent);
    border: none;
    color: white;
}

.nav-btn.transfer {
    border-color: rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.nav-btn.transfer i {
    color: #3498db;
}

.nav-btn.leaderboard {
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.nav-btn.leaderboard i {
    color: #2ecc71;
}

.nav-btn.trophy {
    border-color: rgba(241, 196, 15, 0.3);
    color: #f1c40f;
}

.nav-btn.trophy i {
    color: #f1c40f;
}

.nav-btn.shop {
    border-color: rgba(224, 86, 253, 0.3);
    color: #e056fd;
}

.nav-btn.shop i {
    color: #e056fd;
}

.nav-btn.games {
    border-color: rgba(155, 89, 182, 0.3);
    color: #9b59b6;
}

.nav-btn.games i {
    color: #9b59b6;
}

.nav-btn.links {
    margin-right: auto;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.1), rgba(224, 86, 253, 0.1));
    border-color: rgba(224, 86, 253, 0.4);
    color: #e056fd;
    box-shadow: 0 0 15px rgba(224, 86, 253, 0.1);
}

.nav-btn.links i {
    color: #e056fd;
}

.nav-btn.links:hover {
    background: linear-gradient(135deg, #5865F2, #e056fd);
    color: white;
    border-color: white;
    box-shadow: 0 0 20px rgba(224, 86, 253, 0.4);
    transform: translateY(-3px) scale(1.05);
}

.nav-btn.transfer:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.nav-btn.transfer:hover i,
.nav-btn.leaderboard:hover i,
.nav-btn.trophy:hover i,
.nav-btn.shop:hover i,
.nav-btn.games:hover i,
.nav-btn.links:hover i {
    color: white;
}

.nav-btn.daily:hover {
    background: var(--success);
    color: white;
}

.nav-btn.chest:hover {
    background: var(--gold);
    color: black;
}

.nav-btn.login:hover {
    background: #4752c4;
    box-shadow: 0 0 15px var(--accent-glow);
}

.user-profile-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px;
    border-radius: 12px;
    transition: 0.2s;
}

.user-profile-trigger:hover .nav-avatar {
    transform: scale(1.05);
    border-color: white;
}

.nav-avatar {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    object-fit: cover;
    transition: 0.3s;
    background: #1e1f22;
}

.user-dropdown {
    position: absolute;
    top: 65px;
    right: 0;
    background: #18191c;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    width: 240px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    animation: slideDown 0.2s ease;
}

.user-dropdown.active {
    display: flex;
}

.dropdown-header {
    padding: 15px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(0, 0, 0, 0));
    border-bottom: 1px solid var(--glass-border);
}

.dropdown-username {
    font-weight: 800;
    font-size: 1.1rem;
    color: white;
}

.dropdown-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.dropdown-item {
    padding: 12px 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.2s;
    border-left: 3px solid transparent;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: white;
    border-left-color: var(--accent);
}

.logout-item {
    color: var(--danger);
    border-top: 1px solid var(--glass-border);
    margin-top: 5px;
}

.logout-item:hover {
    background: rgba(255, 71, 87, 0.1);
    border-left-color: var(--danger);
}

/* --- CONTENT --- */
.container {
    width: 100%;
    max-width: 900px;
    padding: 20px;
    padding-bottom: 60px;
}

header {
    text-align: center;
    margin-bottom: 25px;
    user-select: none;
}

h1 {
    font-size: 2.2rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 5px;
}

.daily-tip-box {
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.2), rgba(241, 196, 15, 0.1));
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    animation: fadeIn 1s ease;
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
}

.daily-tip-box:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px var(--accent-glow);
}

.tip-title {
    color: var(--gold);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.tip-content {
    font-size: 1rem;
    font-style: italic;
    color: #fff;
}

.stats-toggle-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
    user-select: none;
}

.stats-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
    animation: slideDown 0.3s ease;
}

.hero-stats.active {
    display: grid;
}

.hero-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hero-icon {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 8px;
}

.hero-value {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.hero-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scale-item.active-tier {
    /* Jemnější modré pozadí */
    background: rgba(88, 101, 242, 0.15) !important;
    /* Tenký okraj */
    border: 1px solid rgba(88, 101, 242, 0.6) !important;
    /* Mnohem menší záře, která nepřetéká */
    box-shadow: 0 0 6px rgba(88, 101, 242, 0.5);
    /* DŮLEŽITÉ: Odstranili jsme 'scale(1.05)', teď se jen jemně posune doprava o 3px */
    transform: translateX(3px);
    z-index: 10;
    border-radius: 4px;
    /* Zaoblené rohy vypadají lépe */
}

.scale-item.active-tier span {
    font-weight: 700;
    /* Jen tučnější, ne větší */
    color: #fff;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--glass-bg);
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    user-select: none;
}

.search-box {
    flex-grow: 1;
    position: relative;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

input,
select {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    color: var(--text-main);
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
    outline: none;
    transition: 0.2s;
}

.search-box input {
    padding-left: 40px;
}

input:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
    background-color: rgba(0, 0, 0, 0.5);
}

.sort-box {
    width: 200px;
}

/* --- EVENT BANNER --- */
.event-banner {
    background: linear-gradient(90deg, #f1c40f, #e67e22);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 20px;
    color: #000;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: bannerPulse 2s infinite alternate ease-in-out;
}

.event-banner-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.event-icon {
    font-size: 2rem;
    animation: rotateBolt 1.5s infinite;
}

.event-text {
    display: flex;
    flex-direction: column;
}

.event-title {
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.event-desc {
    font-size: 0.9rem;
    opacity: 0.9;
}

@keyframes bannerPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(241, 196, 15, 0.3);
    }

    100% {
        transform: scale(1.01);
        box-shadow: 0 0 25px rgba(241, 196, 15, 0.5);
    }
}

@keyframes rotateBolt {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(15deg) scale(1.2);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}


/* --- MINY --- */
.mines-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 20px auto;
    max-width: 350px;
}

.mine-tile {
    aspect-ratio: 1;
    background: #2b2d31;
    border-radius: 8px;
    border: 2px solid #3f4147;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: 0.1s;
}

.mine-tile:hover {
    background: #3f4147;
}

.mine-tile.revealed {
    background: #2ecc71;
    border-color: #27ae60;
    color: white;
}

.mine-tile.exploded {
    background: #e74c3c;
    border-color: #c0392b;
}

.mine-tile.missed {
    background: #202225;
    opacity: 0.5;
}

/* --- 🔴 OFFLINE / LOADING OVERLAY --- */
#offline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 19, 0.98);
    backdrop-filter: blur(15px);
    z-index: 100000;
    /* Musí být úplně nejvýš, nad vším */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.offline-spinner {
    font-size: 5rem;
    color: #F1C40F;
    margin-bottom: 20px;
    animation: spinWheel 1s linear infinite;
    /* Využije tvou už existující animaci */
}

.offline-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center;
}

.offline-desc {
    font-size: 1.1rem;
    color: #949ba4;
    text-align: center;
    max-width: 500px;
    padding: 0 20px;
    line-height: 1.5;
}

#leaderboard {
    display: grid;
    gap: 8px;
}

.user-card {
    background: linear-gradient(135deg,
            rgba(88, 101, 242, 0.18),
            /* Discord blurple */
            rgba(35, 39, 42, 0.18),
            rgba(88, 101, 242, 0.18));
    background-size: 200% 200%;
    animation: discordMove 8s ease infinite;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(88, 101, 242, 0.35);
    border-radius: 10px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, transform 0.2s ease;
}

.user-card:hover {
    transform: translateY(-1px);
}

@keyframes discordMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.rank {
    font-size: 1.3rem;
    font-weight: 800;
    width: 45px;
    text-align: center;
    color: var(--text-muted);
    margin-right: 15px;
}

.rank-1 {
    color: var(--gold);
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.4);
    font-size: 1.6rem;
}

.rank-2 {
    color: #C0C0C0;
    font-size: 1.5rem;
}

.rank-3 {
    color: #CD7F32;
    font-size: 1.4rem;
}

.avatar-img,
.avatar-placeholder {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.avatar-placeholder {
    background: linear-gradient(135deg, var(--accent), #3c45a5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.info {
    flex-grow: 1;
    overflow: hidden;
    padding-left: 12px;
}

.username {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.stats-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}

.stats-preview .stat-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.stats-preview .stat-item i {
    font-size: 0.9rem;
    opacity: 0.9;
}

.stats-preview .fa-star {
    color: #f1c40f;
    /* Yellow/Gold */
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.4));
}

.stats-preview .fa-envelope {
    color: #949ba4;
    /* Default muted color */
}

.stats-preview .stat-item:nth-child(2) i {
    color: #a2aab3;
}

.level-badge {
    background: rgba(88, 101, 242, 0.15);
    color: #8ea1ff;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid rgba(88, 101, 242, 0.3);
}

.load-more-container {
    text-align: center;
    margin-top: 30px;
}

#load-all-btn {
    background: var(--glass-bg);
    color: var(--text-main);
    border: 1px solid var(--accent);
    padding: 12px 40px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: 0.3s;
}

#load-all-btn:hover {
    background: var(--accent);
    box-shadow: 0 0 25px var(--accent-glow);
    transform: scale(1.05);
}

/* MODAL */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s;
}

.modal {
    background: #1e1f22;
    width: 95%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
    animation: popIn 0.3s forwards;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.modal-content-scroll {
    overflow-y: auto;
    padding: 20px;
    flex: 1;
}

.modal-banner {
    height: 140px;
    background-color: var(--accent);
    background-size: cover;
    background-position: center;
}

.modal-avatar-wrapper {
    width: 120px;
    height: 120px;
    margin: -60px auto 10px auto;
    position: relative;
    border-radius: 50%;
    border: 6px solid #1e1f22;
    background: #1e1f22;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.modal-avatar-img,
.modal-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.modal-avatar-placeholder {
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-muted);
}

.modal-body {
    padding: 0 30px 30px 30px;
    text-align: center;
}

.modal-username {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.modal-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
}

.roles-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    margin-bottom: 30px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
    text-align: left;
}

.stat-box {
    background: rgba(0, 0, 0, 0.25);
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-label {
    font-size: 0.9rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-value {
    font-family: inherit;
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
}

.val-gold {
    color: var(--gold);
}

.val-green {
    color: var(--success);
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.val-red {
    color: var(--danger);
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

.val-blurple {
    color: var(--accent);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 1.8rem;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    padding-bottom: 6px;
    line-height: 1;
}

.close-modal:hover {
    background: white;
    color: black;
    transform: rotate(90deg);
}

/* --- CARD RIGHT SIDE (Badges + Level) --- */
.card-right-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.loyalty-badge {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: help;
    text-shadow: none;
    line-height: 1;
}

@media (max-width: 768px) {

    .loyalty-badge,
    .badges-aura-container {
        display: none !important;
    }

    .username {
        font-size: 0.9rem !important;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.loyalty-badge i {
    font-size: 0.6rem;
}

/* --- MINECRAFT STYLE TOAST (Vpravo Dole) --- */
/* --- NOTIFICATION STACK (PRAVÁ STRANA) --- */
/* ... Tvoje existující CSS pro toast-container ... */
/* --- ÚPRAVA VELIKOSTI JEN PRO PC (Obrazovky širší než 769px) --- */
@media (min-width: 769px) {
    .profile-setting-btn {
        display: none;
    }

    #toast-container {
        width: 420px !important;
        /* Širší kontejner (bylo 300px) */
        top: 120px;
        /* Trochu níž */
        right: 30px;
        gap: 15px;
        /* Větší mezery mezi kartami */
    }

    .toast-card {
        padding: 20px 25px !important;
        /* Větší vnitřní odsazení */
        border-left-width: 8px !important;
        /* Tlustší barevný proužek */
    }

    .t-icon {
        font-size: 2.5rem !important;
        /* Mnohem větší ikonka */
    }

    .t-game {
        font-size: 0.9rem !important;
        /* Větší nadpis hry */
        margin-bottom: 4px;
    }

    .t-msg {
        font-size: 1.2rem !important;
        /* Větší text zprávy */
    }
}

/* RULETA STYLY */
.r-btn {
    flex: 1;
    padding: 15px 5px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.2s;
    opacity: 0.6;
    /* Defaultně trochu vybledlé */
    border: 2px solid transparent;
}

.r-btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.r-btn.selected {
    opacity: 1;
    border-color: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.r-red {
    background-color: #e74c3c;
    color: white;
}

.r-black {
    background-color: #2b2d31;
    color: white;
}

.r-green {
    background-color: #2ecc71;
    color: white;
}

#roulette-result.spinning {
    animation: spinText 0.1s infinite;
    filter: blur(2px);
}

@keyframes spinText {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#toast-container {
    position: fixed;
    top: 100px;
    /* Kousek pod navigací */
    right: 20px;
    width: 300px;
    display: flex;
    flex-direction: column;
    /* Skládat pod sebe */
    gap: 10px;
    /* Mezera mezi kartami */
    z-index: 10000;
    pointer-events: none;
    /* Aby šlo klikat skrz mezery */
}

.toast-card {
    background: #202020;
    border-left: 5px solid #fff;
    /* Barevný proužek vlevo */
    color: #fff;
    padding: 12px 15px;
    border-radius: 4px;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateX(50px);
    /* Přijede zprava */
    animation: toastIn 0.4s forwards;
    pointer-events: auto;
    /* Na kartičku jde kliknout (kdyby bylo třeba) */
    position: relative;
    overflow: hidden;
}

/* Jackpot spešl efekt (změna měřítka v CSS pro lepší responzivitu) */
.toast-card.is-jackpot {
    transform: translateX(50px) scale(1.1);
    z-index: 10001;
}

@keyframes toastIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-card.is-jackpot {
    animation: jackpotIn 0.4s forwards;
}

@keyframes jackpotIn {
    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Animace odjezdu (přidáme JSem) */
.toast-card.hide {
    animation: toastOut 0.4s forwards;
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

.t-icon {
    font-size: 1.5rem;
}

.t-content {
    display: flex;
    flex-direction: column;
}

.t-game {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffff55;
}

.t-msg {
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Různé barvy pro různé akce (volitelné) */
.toast-card.gold {
    border-left-color: #f1c40f;
}

/* Výhra */
.toast-card.daily {
    border-left-color: #2ecc71;
}

/* Daily */
.toast-card.chest {
    border-left-color: #9b59b6;
}

/* Truhla */
.btn-kick {
    background: #e67e22;
}

.btn-ban {
    background: #c0392b;
}

.btn-mute {
    background: #f1c40f;
    color: black !important;
}

.reward-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(15px);
    opacity: 0;
    transition: opacity 0.3s;
}

.reward-container {
    position: relative;
    text-align: center;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reward-icon {
    font-size: 8rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
}

.shake-hard {
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    20% {
        transform: translate(-1px, 0px) rotate(1deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    60% {
        transform: translate(-1px, 1px) rotate(0deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    100% {
        transform: translate(1px, -1px) rotate(-1deg);
    }
}

.reward-value {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(241, 196, 15, 0.5);
    opacity: 0;
    transform: scale(0.5);
    transition: 0.5s;
}

.reward-btn {
    margin-top: 40px;
    padding: 12px 40px;
    font-size: 1.2rem;
    background: white;
    color: black;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.reward-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
}

.skeleton {
    background: linear-gradient(90deg, #2b2d31 25%, #3f4147 50%, #2b2d31 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 6px;
}

.sk-card {
    height: 75px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 8px;
    opacity: 0.6;
}

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

    100% {
        background-position: -200% 0;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    to {
        transform: scale(1);
    }
}

.pc-only {
    display: flex !important;
}

/* Starý media query blok odstraněn pro konsolidaci do prémiové sekce na konci souboru */

/* Sidebar stupnice XP */
.number-scale-sidebar {
    position: fixed;
    left: 25px;
    top: 53%;
    transform: translateY(-49%);
    width: 167px;
    background: rgba(15, 15, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px 5px;
    z-index: 999;
    backdrop-filter: blur(15px);
    display: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    overflow-x: hidden;
    /* Přidej toto - skryje přetékání do boku */
    overflow-y: auto;
    /* Umožní scrollovat nahoru/dolů */
}

/* Zobrazení pouze na PC (velké monitory) */
@media (min-width: 1400px) {
    .number-scale-sidebar {
        display: block;
    }
}

.number-scale-sidebar h3 {
    font-size: 0.6rem;
    color: #888;
    text-align: center;
    margin-bottom: 15px;
    letter-spacing: 2px;
    font-weight: 900;
}

.scale-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0 5px;
}

/* Scrollbar úprava */
.scale-list::-webkit-scrollbar {
    width: 2px;
}

.scale-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

.scale-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.scale-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.scale-item span {
    font-weight: 800;
    font-size: 0.85rem;
    color: #eee;
}

.scale-item small {
    font-size: 0.55rem;
    color: #666;
}

.scale-divider {
    text-align: center;
    color: #444;
    font-size: 0.8rem;
    margin: 5px 0;
}

/* Speciální barvy pro milníky */
.highlight-sx span {
    color: #2ecc71;
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
}

.highlight-vg span {
    color: #3498db;
    text-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.highlight-googol {
    background: rgba(241, 196, 15, 0.1) !important;
    border: 1px solid #f1c40f !important;
}

.highlight-googol span {
    color: #f1c40f;
    text-shadow: 0 0 10px #f1c40f;
    animation: googol-glow 3.0s infinite alternate;
}

.highlight-ct {
    background: rgba(231, 76, 60, 0.15) !important;
    border: 1px solid #e74c3c !important;
}

.highlight-ct span {
    color: #ff4757;
    animation: ct-glow 1.0s infinite alternate;
}

@keyframes ct-glow {
    from {
        text-shadow: 0 0 2px #e74c3c;
    }

    to {
        text-shadow: 0 0 12px #e74c3c, 0 0 20px #ff4757;
    }
}

@keyframes googol-glow {
    from {
        text-shadow: 0 0 2px #f1c40f;
    }

    to {
        text-shadow: 0 0 12px #ffdc51, 0 0 20px #ffcc00;
    }
}

.roulette-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: #111;
    border-radius: 50%;
    border: 4px solid #FFD700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

/* Třída pro točení */
.is-spinning {
    animation: spinWheel 0.8s infinite linear;
}

@keyframes spinWheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.nav-btn.games {
    border-color: rgba(155, 89, 182, 0.5);
    color: #d687fc;
}

.nav-btn.games:hover {
    background: #9b59b6;
    color: white;
}

.games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.game-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.game-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    border-color: var(--accent);
}

.game-card i {
    font-size: 2.5rem;
    margin-bottom: 5px;
}

.game-balance-box {
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 15px;
    border-radius: 20px;
    margin-bottom: 20px;
    display: inline-block;
    font-family: monospace;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-input {
    width: 70%;
    padding: 12px;
    background: #0f0f13;
    border: 1px solid #5865F2;
    color: white;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.play-btn {
    width: 100%;
    padding: 12px;
    font-weight: 900;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.2s;
    text-transform: uppercase;
}

.play-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 🎰 AUTOMATY (FIXED) --- */
.slots-window {
    display: flex;
    justify-content: center;
    gap: 10px;
    background: #000;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 3px solid #f1c40f;
    position: relative;
}

.reel-window {
    display: flex;
    justify-content: center;
    gap: 10px;
    height: 120px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #111;
    border-radius: 8px;
}

.overlay-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 5;
    pointer-events: none;
}

.reel {
    width: 80px;
    height: 120px;
    position: relative;
    display: block;
}

.icons-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    will-change: top;
}

.icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.reel-icon {
    width: 80px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    line-height: 120px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.blur-effect {
    filter: blur(2px);
    opacity: 0.8;
}

/* --- KOSTKY --- */
.dice-arena {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 30px 0;
}

.dice-box {
    text-align: center;
}

.dice {
    font-size: 4rem;
    transition: transform 0.2s;
    display: inline-block;
}

.dice.rolling {
    animation: roll 0.1s infinite linear;
}

@keyframes roll {
    0% {
        transform: rotate(0deg) scale(0.9);
    }

    25% {
        transform: rotate(10deg) scale(1.1);
    }

    50% {
        transform: rotate(0deg) scale(0.9);
    }

    75% {
        transform: rotate(-10deg) scale(1.1);
    }

    100% {
        transform: rotate(0deg) scale(0.9);
    }
}

/* --- ZÁVODY --- */
/* --- 🐎 ZÁVODY DESIGN --- */
/* Dráha */
#race-track {
    background: #202225;
    /* Tmavá dráha */
    border: 3px solid #2b2d31;
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    position: relative;
}

/* Jednotlivé pruhy */
.race-lane {
    height: 45px;
    /* Vyšší pruhy */
    border-bottom: 2px dashed #444;
    /* Přerušovaná čára */
    position: relative;
    display: flex;
    align-items: center;
}

/* Poslední pruh bez čáry */
.race-lane:last-child {
    border-bottom: none;
}

/* Cílová páska */
.finish-line {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-image: linear-gradient(45deg, #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75%, #fff 100%);
    background-size: 20px 20px;
    /* Šachovnice */
    z-index: 0;
    opacity: 0.5;
}

@keyframes modalPop {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Zvířátka */
.racer {
    position: absolute;
    left: 0;
    font-size: 2rem;
    /* Větší ikonky */
    transition: left 0.1s linear;
    /* Plynulý pohyb */
    z-index: 1;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    transition: left 0.2s ease-out;
    /* Plynulejší pohyb */
}

/* Tlačítka pro výběr (stejné jako u rulety) */
.race-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.nav-balance {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(241, 196, 15, 0.3);
    /* Zlatý rámeček */
    padding: 8px 16px;
    border-radius: 12px;
    margin-right: 15px;
    /* Odstup od tlačítek */
    color: var(--gold);
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.3);
    font-weight: bold;
    font-family: 'JetBrains Mono', monospace;
    /* Aby čísla neskákala */
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

/* Efekt při změně (volitelné) */
.nav-balance:hover {
    border-color: #F1C40F;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.2);
}

@keyframes run-bob {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

    /* Hop nahoru */
    100% {
        transform: translateY(0);
    }
}

.racer {
    /* ... (původní styly nechej) ... */
    transition: left 0.2s ease-out;
    /* Plynulejší pohyb */
}

.racer.running {
    animation: run-bob 0.3s infinite;
    /* Rychlé kmitání při běhu */
}

.racer.stopped {
    animation: none;
    filter: grayscale(1);
    /* Zešedne, když stojí */
    transform: scale(0.9);
}

#race-commentary {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s;
}

.bet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 auto 15px auto;
    width: 99%;
    padding-top: 15px;
}

.bet-grid .nav-btn {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-size: 0.9rem;
}

.bet-grid .nav-btn.active-pct {
    background: #5865F2 !important;
    color: white !important;
    border: 1px solid white;
}

/* Úprava hlavního spin tlačítka, aby víc vyčnívalo */
#slots-spin-btn {
    width: 80%;
    margin-bottom: 10px;
}

.race-options .r-btn {
    background: #2b2d31;
    border: 2px solid transparent;
    font-size: 1.8rem;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.race-options .r-btn:hover {
    background: #40444b;
    transform: translateY(-2px);
}

/* Vybrané zvíře svítí */
.race-options .r-btn.selected {
    border-color: #5865F2;
    /* Discord modrá */
    background: #3c3f46;
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.4);
    transform: scale(1.1);
}

.animal-runner {
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    transition: left 0.5s linear;
    z-index: 2;
}

.finish-line {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(45deg, #fff, #fff 10px, #000 10px, #000 20px);
    z-index: 1;
    opacity: 0.5;
}

.animal-select {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 5px;
    margin-bottom: 15px;
}

.animal-opt {
    background: #1e1f22;
    border: 2px solid transparent;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.animal-opt:hover {
    background: #2b2d31;
}

.animal-opt.selected {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
}

.win-msg {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 15px;
    min-height: 30px;
}

/* --- 🏁 NOVÝ DESIGN ZÁVODŮ --- */
#race-track-container {
    background: #2b2d31;
    border: 4px solid #1e1f22;
    border-radius: 12px;
    padding: 10px 40px 10px 10px;
    /* Místo vpravo pro cíl */
    margin: 20px 0;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.track-lane {
    height: 55px;
    /* Vyšší dráha */
    border-bottom: 2px dashed rgba(255, 255, 255, 0.1);
    position: relative;
    display: flex;
    align-items: center;
}

.track-lane:last-child {
    border-bottom: none;
}

.lane-number {
    position: absolute;
    left: 5px;
    color: rgba(255, 255, 255, 0.1);
    font-weight: 900;
    font-size: 2rem;
    z-index: 0;
}

.racer-icon {
    font-size: 2.5rem;
    /* VELKÁ ZVÍŘATA */
    position: absolute;
    left: 0%;
    bottom: 5px;
    transition: left 0.1s linear;
    /* Plynulý pohyb */
    z-index: 10;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}

/* Animace běhu (nadskakování) */
.racer-icon.running {
    animation: bounce 0.3s infinite alternate;
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}

/* Cílová šachovnice */
.finish-flag {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 10px;
    background-image: repeating-linear-gradient(45deg, #fff 0, #fff 10px, #000 10px, #000 20px);
    z-index: 5;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Komentátor */
#race-commentary {
    background: rgba(0, 0, 0, 0.3);
    color: #f1c40f;
    font-family: monospace;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 15px;
    min-height: 35px;
    font-weight: bold;
    border: 1px solid rgba(241, 196, 15, 0.2);
}

/* Výběr zvířat (Karty) */
.race-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.animal-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px 5px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.animal-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.animal-card.selected {
    background: rgba(46, 204, 113, 0.15);
    border-color: #2ecc71;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
}

.big-emoji {
    font-size: 2rem;
    margin-bottom: 5px;
}

.animal-card span {
    font-weight: bold;
    color: white;
}

.animal-card small {
    color: #aaa;
    font-size: 0.75rem;
}

.racer-icon.sleeping {
    opacity: 0.5;
    /* Vybledne */
    transform: scale(0.9);
    /* Zmenší se */
    filter: grayscale(100%);
    /* Zšedne */
    animation: none !important;
    /* Přestane běhat */
}

/* Bublina Zzz */
.sleep-indicator {
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    animation: floatUp 1s infinite;
}

@keyframes tumble-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.racer-icon.tumble {
    animation: tumble-spin 0.5s linear infinite;
    /* Rychlé točení */
    filter: grayscale(0);
    /* Necháme barvy, ať je to vidět */
    opacity: 1;
}

/* Bublina s hvězdičkami místo Zzz (když zakopne) */
.crash-indicator {
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 1.5rem;
    animation: star-pulse 0.5s infinite alternate;
}

@keyframes star-pulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.3);
    }
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-10px);
        opacity: 0;
    }
}

/* --- DŮLEŽITÁ OPRAVA KONFET (ABY BYLY VŽDY NAHOŘE) --- */
#confetti-canvas {
    z-index: 9999 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* --- 🚨 STREAM OVERLAY --- */
#stream-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 19, 0.95);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stream-box {
    background: #1e1f22;
    border: 3px solid var(--danger);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 10px 50px rgba(255, 71, 87, 0.3);
    animation: popIn 0.4s ease forwards;
}

.stream-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--danger);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.stream-desc {
    font-size: 1.1rem;
    color: #dbdee1;
    margin-bottom: 30px;
}

.stream-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.stream-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    transition: 0.2s;
}

.stream-btn-kick {
    background: #53FC18;
    color: black;
    box-shadow: 0 0 15px rgba(83, 252, 24, 0.3);
}

.stream-btn-kick:hover {
    transform: scale(1.05);
    background: #46d613;
}

.stream-btn-yt {
    background: #FF0000;
    color: white;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.stream-btn-yt:hover {
    transform: scale(1.05);
    background: #cc0000;
}

.admin-override-btn {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #aaa;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.2s;
}

.admin-override-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* =======================================================
🍏 UTIMÁTNÍ iOS VZHLED PRO MOBIL (VŠE KOMPLETNĚ)
   ===================================================== */
@media (max-width: 768px) {

    /* --- ZÁKLAD A BEZPEČNÉ ZÓNY --- */
    .hide-on-mobile {
        display: none !important;
    }

    body {
        padding-top: 80px !important;
        padding-bottom: 120px !important;
        background: #000000 !important;
        /* OLED černá */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    }

    /* Premium iOS Colors */
    :root {
        --ios-blue: #0a84ff;
        --ios-green: #30d158;
        --ios-red: #ff453a;
        --ios-orange: #ff9f0a;
        --ios-yellow: #ffd60a;
        --ios-gray: #1c1c1e;
        --ios-secondary: #2c2c2e;
    }

    body {
        background: #000 !important;
        color: #fff !important;
        -webkit-font-smoothing: antialiased;
    }

    /* --- iOS HORNÍ LIŠTA --- */
    .user-nav {
        background: rgba(18, 18, 18, 0.7) !important;
        /* backdrop-filter přesunut na ::before pro fix stacking contextu */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1) !important;
        height: 60px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 16px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important;
    }

    .user-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(25px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
        z-index: -1;
        pointer-events: none;
    }

    .pc-only {
        display: none !important;
    }

    /* --- iOS SPODNÍ NAVIGACE (Tab Bar) --- */
    .action-buttons {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        height: 75px !important;
        background: rgba(18, 18, 18, 0.8) !important;
        backdrop-filter: blur(25px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 5px 12px calc(15px + env(safe-area-inset-bottom)) 12px !important;
        border-top: 0.5px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 100000 !important;
    }

    .action-buttons .nav-btn {
        flex: 1 !important;
        flex-direction: column !important;
        background: transparent !important;
        border: none !important;
        color: #8e8e93 !important;
        /* iOS secondary text */
        gap: 2px !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        transform: none !important;
    }

    .action-buttons .nav-btn i {
        font-size: 24px !important;
        margin-bottom: 2px !important;
    }

    .action-buttons .nav-btn.nav-active {
        color: #0a84ff !important;
    }

    .shop-category-section,
    .games-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 10px 0 !important;
    }

    .shop-grid {
        display: grid !important;
        gap: 12px !important;
        padding: 10px 0 !important;
    }


    .shop-card {
        background: #1c1c1e !important;
        border-radius: 20px !important;
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 240px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .shop-item-name {
        font-size: 1rem !important;
        font-weight: 700 !important;
        margin-top: 10px !important;
        line-height: 1.2 !important;
    }

    .shop-item-description {
        font-size: 0.75rem !important;
        margin: 8px 0 !important;
        opacity: 0.8 !important;
        flex-grow: 1 !important;
    }

    .shop-item-price {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #ffd60a !important;
        /* iOS Yellow */
    }

    .shop-buy-btn {
        margin-top: 12px !important;
        padding: 10px !important;
        border-radius: 12px !important;
        font-size: 0.85rem !important;
    }

    /* Fix cutting off by bottom bar */
    .view-container {
        padding-bottom: 140px !important;
    }

    /* --- BTC MINER MOBILE --- */
    .btc-dashboard {
        flex-direction: column !important;
    }

    .btc-visuals {
        min-height: 220px !important;
        padding: 10px !important;
    }

    #btc-servers-container {
        gap: 6px !important;
        justify-content: center !important;
    }

    .server-rack {
        width: 38px !important;
        height: 120px !important;
    }

    .exchange-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .exchange-btn {
        width: 100% !important;
        padding: 14px !important;
    }

    .user-dropdown.active {
        transform: scale(1) !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }

    .dropdown-item {
        color: #fff !important;
        padding: 12px 16px !important;
        font-weight: 500 !important;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.05) !important;
    }

    .dropdown-item:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* --- MODALS REWORK (Apple Sheets) --- */
    .modal-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .modal {
        background: #1c1c1e !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
    }

    .stat-box {
        background: #2c2c2e !important;
        border-radius: 16px !important;
        border: none !important;
    }

    .stat-label {
        color: #8e8e93 !important;
        text-transform: uppercase;
        font-size: 0.65rem !important;
        letter-spacing: 0.5px;
    }

    .stat-value {
        color: #fff !important;
        font-weight: 700 !important;
    }

    /* --- DYNAMIC ISLAND TOASTS --- */
    #toast-container {
        top: calc(env(safe-area-inset-top) + 8px) !important;
        pointer-events: none;
    }

    .toast-card {
        background: rgba(28, 28, 30, 0.94) !important;
        backdrop-filter: blur(25px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
        border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 30px !important;
        padding: 10px 24px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    }

    @keyframes islandUp {
        100% {
            transform: translateY(-50px) scale(0.9);
            opacity: 0;
        }
    }

    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 300000 !important;
    }

    .modal {
        width: 100%;
        /* Změna z 92vh na 95vh -> vysune se o 3% výš */
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
        bottom: 0;
        top: auto;
        padding: 20px;
        /* Zde musí zůstat translateY(0), který JS přetlouká přes setProperty */
        transform: translateY(0) !important;
        animation: slideSheetUp 0.3s ease-out !important;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
        /* Důležité: Overflow musí být skrytý, aby "ocásek" nevykukoval bokem */
        overflow: visible;
        overscroll-behavior-y: contain !important;
    }

    /* 🍏 Trikový "ocásek" pod oknem pro Apple Rubber-banding */
    .modal::after {
        content: '';
        position: absolute;
        top: 100%;
        /* Začne přesně na spodní hraně okna */
        left: 0;
        right: 0;
        height: 100vh;
        /* Je extrémně dlouhý */
        background: inherit;
        /* Přebírá barvu pozadí okna (šedou/tmavou) */
        z-index: -1;
        /* Schová se za obsah okna */
        border-radius: 0;
        /* Bez zaoblení */
    }

    /* Oprava horního banneru v profilu, aby vyplnil prostor navzdory 20px paddingu */
    .modal-content-scroll {
        padding: 30px 20px 100px 20px !important;
    }

    .modal-banner {
        margin: -20px -20px 0 -20px !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .close-modal {
        top: 15px !important;
        right: 20px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        font-size: 1.2rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        z-index: 100 !important;
    }

    @keyframes slideSheetUp {
        0% {
            transform: translateY(100%);
        }

        100% {
            transform: translateY(0);
        }
    }

    /* --- APP STORE KARTY HER A STATISTIK --- */
    .hero-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .hero-card,
    .user-card {
        background: rgba(28, 28, 30, 0.94) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 20px !important;
        border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
        padding: 18px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }

    .user-card .username {
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
    }

    .games-grid {
        gap: 12px !important;
    }

    .game-card {
        background: linear-gradient(145deg, rgba(40, 40, 44, 0.9), rgba(28, 28, 30, 0.9)) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 25px 15px !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
        gap: 12px !important;
    }

    .game-card i {
        font-size: 2.5rem !important;
        color: #0a84ff !important;
        filter: drop-shadow(0 4px 8px rgba(10, 132, 255, 0.4)) !important;
    }

    .game-card h3 {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
    }

    /* --- iOS INPUTY A TLAČÍTKA (Sázky) --- */
    .game-balance-box {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        padding: 10px 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        font-family: inherit !important;
    }

    .game-input {
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;
        width: 80% !important;
    }

    .game-input:focus {
        border-color: #0a84ff !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .play-btn {
        background: #0a84ff !important;
        /* iOS Modrá pro hlavní akce */
        color: white !important;
        border-radius: 18px !important;
        height: 54px !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3) !important;
        border: none !important;
        text-transform: uppercase !important;
    }

    .play-btn:active:not(:disabled) {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
    }

    .play-btn:disabled {
        background: #3a3a3c !important;
        color: #8e8e93 !important;
        box-shadow: none !important;
    }

    /* --- ÚPRAVA JEDNOTLIVÝCH HER PRO iOS --- */
    /* 1. AUTOMATY (Sleek Widget vzhled) */
    .slots-window {
        background: #000000 !important;
        border: 2px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 24px !important;
        padding: 15px !important;
        box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    }

    /* 2. RULETA (Kulatá tlačítka a čisté barvy) */
    .r-btn {
        border-radius: 16px !important;
        font-size: 1rem !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. MINY (Zaoblené čtverečky Apple Style) */
    .mine-tile {
        background: #2c2c2e !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        font-size: 1.5rem !important;
    }

    .mine-tile.revealed {
        background: #30d158 !important;
        border-color: #28a745 !important;
    }

    .mine-tile.exploded {
        background: #ff453a !important;
        border-color: #dc3545 !important;
    }

    /* 4. ZÁVODY (Čistý track) */
    #race-track-container {
        background: #1c1c1e !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.5) !important;
        padding: 15px !important;
    }

    .animal-card {
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 16px !important;
        border: 1px solid transparent !important;
    }

    .animal-card.selected {
        background: rgba(48, 209, 88, 0.15) !important;
        border-color: #30d158 !important;
    }
}

/* ==========================================
   🍏 APLE QOL ANIMACE & SWIPE GESTA
   ======================================== */
/* ZÁMEK POZADÍ */
body.locked-scroll {
    overflow: hidden !important;
    touch-action: none !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* 1. Modální okna - Apple Spring (rychlý start, měkký dojezd) */
.modal {
    will-change: transform;
    /* Tohle zajistí animaci otevření a puštění prstu */
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 2. Feedback při kliknutí (iOS scale effect) */
.nav-btn:active,
.shop-card:active,
.game-card:active,
.play-btn:active {
    transform: scale(0.96) !important;
    opacity: 0.8;
}

/* 3. Glide transitions pro App-Views */
.app-view {
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}

/* 4. Momentum scrolling pro všechny listiny */
.modal-content-scroll,
.shop-grid,
.recruits-list {
    -webkit-overflow-scrolling: touch;
}

/* Když okno držíš prstem, CSS animace se MUSÍ vypnout, jinak se to s prstem pere */
.modal.is-dragging {
    transition: none;
}

/* 2. Toasty (Notifikace) */
.toast-card {
    will-change: transform, opacity;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease-out;
}

.toast-card.is-dragging {
    transition: none;
}

@media (max-width: 768px) {

    /* 2. Drag Handle (ta šedá pilulka nahoře na okně, jako na iPhonu) */
    .modal::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        z-index: 100;
        pointer-events: none;
    }

    /* 4. Notifikace plynule reagující na tah */
    .toast-card {
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease-out;
        will-change: transform, opacity;
    }

    .play-btn {
        transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), opacity 0.15s;
    }

    .play-btn:active:not(:disabled) {
        transform: scale(0.92);
        opacity: 0.7;
    }
}

/* --- 🌟 2x XP FRIDAY EVENT --- */
.friday-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #F1C40F, #F39C12);
    color: black !important;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.6);
    border: 1px solid #fff;
    z-index: 20;
    animation: pulseGold 1.5s infinite;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.friday-event {
    border: 2px solid #FFD700 !important;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.4) !important;
    position: relative;
    overflow: visible !important;
}

@keyframes pulseGold {
    0% {
        box-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
        transform: translateX(-50%) scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(241, 196, 15, 1);
        transform: translateX(-50%) scale(1.05);
    }

    100% {
        box-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
        transform: translateX(-50%) scale(1);
    }
}

/* Pravý sloupec - Online list na PC */
.online-sidebar {
    position: fixed;
    right: 25px;
    top: 100px;
    width: 250px;
    height: calc(100vh - 120px);
    background: rgba(15, 15, 20, 0.85);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 15px;
    overflow-y: auto;
    z-index: 900;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: none;
    /* Na mobilech schováme */
}

@media (min-width: 1400px) {
    .online-sidebar {
        display: block;
    }
}

.online-sidebar h3 {
    font-size: 0.65rem;
    color: #888;
    text-align: center;
    margin-bottom: 15px;
    letter-spacing: 2px;
    font-weight: 900;
}

.online-sidebar::-webkit-scrollbar {
    width: 3px;
}

.online-sidebar::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

.web-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.03);
    transition: 0.2s;
    cursor: pointer;
}

.web-user-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Měsíček zprůhlední uživatele */
.web-user-item.idle {
    opacity: 0.5;
}

.web-user-avatar {
    position: relative;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
}

.web-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Tečka nebo měsíček */
.web-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #141416;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot-online {
    background-color: #23a559;
}

.dot-idle {
    background-color: var(--bg-dark);
}

.dot-idle i {
    font-size: 0.5rem;
    color: #f0b232;
}

.web-user-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.web-user-lvl {
    font-size: 0.65rem;
    color: #5865F2;
    font-weight: 900;
}

/* ==========================================
   🍏 APPLE iOS & MOBILE POLISHING
   ========================================== */
/* 📱 GLASSMORPHISM PRO iPHONE - Hlavní okna pozadí */
body.ios-device .modal,
body.ios-device .toast-card,
body.ios-device .user-dropdown,
body.ios-device .reward-container {
    background: rgba(30, 31, 34, 0.35) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    /* Drtivý glass effect pro iOS */
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* 📱 GLASSMORPHISM PRO iPHONE - Vnitřní prvky a karty na hlavní ploše */
body.ios-device .hero-card,
body.ios-device .user-card,
body.ios-device .game-card,
body.ios-device .controls {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

/* 📱 GLASSMORPHISM PRO iPHONE - Celoobrazovkové a fixní lišty */
body.ios-device #offline-overlay {
    background: rgba(30, 31, 34, 0.35) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
}

/* 🍏 BEZPEČNÉ "TEKUTÉ SKLO" PRO HORNÍ NAVIGACI (Workaround proti rozbití spodní lišty) */
body.ios-device .user-nav {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.ios-device .user-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 31, 34, 0.35) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    z-index: -1;
    pointer-events: none;
}

/* 📱 MOBILE TOAST REPOSITIONING */
@media (max-width: 768px) {
    #toast-container {
        top: 85px !important;
        /* Lehce pod horní navigací (ta je 70px) */
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 92% !important;
        max-width: 400px !important;
        z-index: 1500 !important;
        /* Za modály (2000) a za user-nav, ale před obsahem a leaderboardem */
        align-items: center !important;
    }

    .toast-card {
        width: 100% !important;
        padding: 8px 12px !important;
        /* Menší padding na mobilu */
        font-size: 0.85rem !important;
        /* Menší písmo */
        animation: toastInMobile 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
    }

    .toast-card .t-icon {
        font-size: 1.5rem !important;
        /* Menší ikony */
    }

    .toast-card.is-jackpot {
        animation: jackpotInMobile 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
    }

    @keyframes jackpotInMobile {
        0% {
            opacity: 0;
            transform: translateY(-40px) scale(0.9);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1.02);
            /* Na mobilu scale jen lehce */
        }
    }

    .toast-card.hide {
        animation: toastOutMobile 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
        /* Spring out */
    }

    @keyframes toastInMobile {
        0% {
            opacity: 0;
            transform: translateY(-40px) scale(0.9);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes toastOutMobile {
        0% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        100% {
            opacity: 0;
            transform: translateY(-40px) scale(0.9);
        }
    }

    .nav-btn.login {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Vylepšení settings modalu */
#settings-modal .modal {
    padding: 25px;
    max-width: 350px;
    border-radius: 16px;
    background: #18191c;
    border: 1px solid var(--glass-border);
}

#settings-modal h2 {
    font-size: 1.5rem;
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

/* =======================================================
🍏 ULTIMÁTNÍ iOS "NATURE SPRING" ANIMATIONS MASTERCLASS
   ====================================================== */
:root {
    /* Toto je tajná křivka Applu - rychlý start, měkký gumový dojezd */
    --apple-spring: cubic-bezier(0.32, 0.72, 0, 1.05);
    --apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- 1. MODÁLNÍ OKNA (Panely) --- */
/* PC/Desktop: Měkký "Pop-in" jako když na iPhonu otevřeš složku */
@keyframes popInSpring {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Mobil: Spodní panel (Bottom Sheet) vyskočí s pružinou */
@keyframes slideSheetUpSpring {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

body.ios-device .modal {
    animation: popInSpring 0.55s var(--apple-spring) forwards !important;
    transform-origin: center bottom;
}

@media (max-width: 768px) {
    body.ios-device .modal {
        animation: slideSheetUpSpring 0.5s var(--apple-spring) forwards !important;
    }
}

/* --- 2. POZADÍ PANLŮ (Hloubka obrazovky) --- */
/* Na iOS se při otevření okna pozadí plynule rozmaže (Depth of field) */
body.ios-device .modal-overlay {
    animation: fadeInOverlay 0.4s var(--apple-ease) forwards !important;
}

@keyframes fadeInOverlay {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        background: rgba(0, 0, 0, 0);
    }

    100% {
        opacity: 1;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0, 0, 0, 0.75);
    }
}

/* --- 3. KLIKÁNÍ A TLAČÍTKA (Squish efekt) --- */
/* Místo posunu nahoru se tlačítko fyzicky "zamáčkne" pod prstem */
body.ios-device .nav-btn,
body.ios-device .play-btn,
body.ios-device .game-card,
body.ios-device .hero-card,
body.ios-device .user-card,
body.ios-device .animal-card {
    transition: transform 0.4s var(--apple-spring), box-shadow 0.4s var(--apple-spring), background 0.3s var(--apple-ease), opacity 0.3s !important;
}

body.ios-device .nav-btn:active,
body.ios-device .play-btn:active:not(:disabled),
body.ios-device .game-card:active,
body.ios-device .user-card:active,
body.ios-device .animal-card:active {
    transform: scale(0.94) !important;
    /* Zmenšení = pocit stisku */
    opacity: 0.8;
}

/* --- 4. ŽEBŘÍČEK A SEZNAMY (Kaskádový nájezd) --- */
/* Když se načte leaderboard, lidé tam nebliknou, ale elegantně naskáčou */
@keyframes listSlideIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.ios-device .user-card {
    opacity: 0;
    /* Začínají neviditelné */
    animation: listSlideIn 0.6s var(--apple-spring) forwards;
}

/* Zpoždění pro první položky (Stagger efekt) - tvoří "vlnu" */
body.ios-device .user-card:nth-child(1) {
    animation-delay: 0.05s;
}

body.ios-device .user-card:nth-child(2) {
    animation-delay: 0.10s;
}

body.ios-device .user-card:nth-child(3) {
    animation-delay: 0.15s;
}

body.ios-device .user-card:nth-child(4) {
    animation-delay: 0.20s;
}

body.ios-device .user-card:nth-child(5) {
    animation-delay: 0.25s;
}

body.ios-device .user-card:nth-child(n+6) {
    animation-delay: 0.30s;
}

/* --- 5. TOASTY (Notifikace ala Dynamic Island) --- */
@keyframes islandDropSpring {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes islandUpSpring {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }
}

body.ios-device .toast-card {
    animation: islandDropSpring 0.55s var(--apple-spring) forwards !important;
}

body.ios-device .toast-card.hide {
    animation: islandUpSpring 0.4s var(--apple-ease) forwards !important;
}

/* --- DUOLINGO STREAK MODAL --- */
.streak-modal-content {
    background: #1e1f22 !important;
    border: 2px solid #2b2d31;
}

/* --- PRESTIGE BADGES & AURAS 2.0 (Vedle Levelu) --- */
.badges-aura-container {
    display: flex;
    gap: 6px;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

/* Base Badge Style - Menší pro umístění k levelu */
.prestige-badge {
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
    transition: transform 0.2s ease;
}

/* Tvary a barvy pro různé tiers */
.badge-sxg {
    color: #00d2ff;
    text-shadow: 0 0 8px #00d2ff;
}

.badge-vg {
    color: #f1c40f;
    text-shadow: 0 0 10px #f1c40f;
}

.badge-googol {
    color: #e74c3c;
    text-shadow: 0 0 12px #e74c3c;
}

.badge-spg {
    color: #9b59b6;
    text-shadow: 0 0 15px #9b59b6;
}

.badge-ct {
    color: #fff;
    text-shadow: 0 0 15px #fff, 0 0 25px #3498db;
}

.badge-uct {
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #ff00f7;
    animation: uctGlow 2s infinite alternate;
}

@keyframes uctGlow {
    from {
        filter: drop-shadow(0 0 2px #fff);
    }

    to {
        filter: drop-shadow(0 0 10px #ff00f7) brightness(1.5);
    }
}

@media (max-width: 768px) {
    .card-right-side {
        gap: 6px;
    }

    .prestige-badge {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

.streak-modal-content {
    padding: 60px 40px;
    text-align: center;
}

.streak-fire-container {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
}

.streak-fire-icon {
    font-size: 8rem;
    display: block;
    /* <--- ZDE: Zajistí správné počítání boxu */
    margin: 0 auto 20px auto;
    /* <--- ZDE: Udělá místo kolem ikony pro stín */
    background: linear-gradient(180deg, #f39c12 0%, #f1c40f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px rgba(241, 196, 15, 0.6));
    animation: firePulse 3s infinite ease-in-out;
}

.streak-number-wrapper {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    /* Odstraněno pozadí, nevracet ho! */
}

#streak-count-display {
    font-size: 4.5rem;
    font-weight: 900;
    color: #ffffff;
    /* Bílé číslo jako v Duolingo */
    text-shadow:
        -3px -3px 0 #f39c12,
        3px -3px 0 #f39c12,
        -3px 3px 0 #f39c12,
        3px 3px 0 #f39c12,
        0px 4px 0 #d68910;
    /* Lehký 3D efekt dole */
    letter-spacing: -2px;
}

.streak-horizontal-wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 10px 5px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.streak-day {
    flex: 0 0 calc(20% - 10px);
    min-width: 65px;
    scroll-snap-align: center;
}

.streak-title {
    color: #f39c12;
    font-weight: 800;
    font-size: 1.8rem;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

@keyframes firePulse {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(241, 196, 15, 0.4));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 45px rgba(241, 196, 15, 0.8));
        transform: scale(1.02);
    }
}

.streak-card {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 25px 15px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

.streak-horizontal-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-top: 40px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* iOS native snap */
}

.streak-node-container {
    scroll-snap-align: center;
}

.streak-node-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    /* Aby se roztáhly rovnoměrně */
    max-width: 75px;
    /* Dřív 60, teď luxusně větší na PC */
}

/* Horizontální spojovací čára */
.streak-node-container:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    /* Polovina nové výšky 65px */
    left: 50%;
    width: 100%;
    height: 6px;
    background: #3f4147;
    z-index: 1;
    transition: 0.3s;
}

.streak-chest-btn {
    margin-top: 30px;
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    border: none;
    padding: 20px 40px;
    border-radius: 16px;
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(142, 68, 173, 0.4);
    transition: 0.2s;
    width: 100%;
    max-width: 400px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.streak-chest-btn i {
    font-size: 1.8rem;
}

.streak-chest-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(142, 68, 173, 0.6);
}

.streak-chest-btn:active {
    transform: translateY(1px);
}

.nav-btn.nav-active {
    background: rgba(255, 255, 255, 0.05);
    border-color: currentColor;
    /* Ponechá barvu tlačítka ale přidá intenzitu */
    text-shadow: 0 0 15px currentColor;
    transform: translateY(-2px);
}

.nav-btn.nav-active i {
    transform: scale(1.1);
}

.streak-node {
    width: 65px;
    /* Dřív 55px, mega obří kroužky na PC */
    height: 65px;
    border-radius: 50%;
    background: #3f4147;
    border: 3px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #aaa;
    position: relative;
    z-index: 2;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Horizontální spojovací čára */
.streak-node-container:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    /* Polovina nové výšky 65px */
    /* Polovina výšky 45px */
    left: 50%;
    width: 100%;
    height: 4px;
    background: #555;
    z-index: 1;
}

.streak-node.claimed {
    background: #f1c40f;
    border-color: #f39c12;
    color: white;
}

.streak-node-container.claimed:not(:last-child)::after {
    background: #f39c12;
}

.streak-node.active {
    background: #3498db;
    border-color: #2980b9;
    color: white;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
}

.streak-node.active:hover {
    transform: scale(1.15) translateY(-3px);
}

/* Jiskřivá animace na buttonu, který si máš vybrat */
@keyframes nodePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

body:not(.low-end-device) .streak-node.active {
    animation: nodePulse 2s infinite;
}

/* Duolingo Bounce animace přeřazena na fajfku při kliknutí */
.streak-node .fa-check {
    font-size: 1.4rem;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- SPA VIEW LOGIC (Přepracováno pro naprostou plynulost bez problikávání) --- */
.view-container {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    /* Důležité pro horizontální slidy */
}

.app-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    height: 10px;
    overflow: hidden;
}

.app-view.active-view {
    position: relative;
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    z-index: 2;
}

.app-view.outgoing-view {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Animations for sliding tabs */
.app-view.slide-in-right {
    animation: viewSlideInRight 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.app-view.slide-in-left {
    animation: viewSlideInLeft 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.app-view.slide-out-left {
    animation: viewSlideOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.app-view.slide-out-right {
    animation: viewSlideOutRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes viewSlideInRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes viewSlideInLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes viewSlideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100px);
        opacity: 0;
    }
}

@keyframes viewSlideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100px);
        opacity: 0;
    }
}

/* --- HUSTÁ TRUHLA SCREEN (Legendary Animation) --- */
.chest-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 70vh;
    position: relative;
    z-index: 10;
}

.chest-open-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250vw;
    height: 250vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
}

@keyframes nukeFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

.chest-open-effect.flash {
    animation: nukeFlash 1.2s ease-out forwards;
}

.chest-magic-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(155, 89, 182, 0.5) 0%, rgba(155, 89, 182, 0) 70%);
    z-index: -1;
    animation: magicPulse 4s infinite alternate;
}

@keyframes floatChest {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes chestRumble {
    0% {
        transform: translate(2px, 2px) rotate(0deg) scale(1.05);
    }

    10% {
        transform: translate(-3px, -4px) rotate(-3deg) scale(1.05);
    }

    20% {
        transform: translate(-4px, 0px) rotate(3deg) scale(1.05);
    }

    30% {
        transform: translate(4px, 4px) rotate(0deg) scale(1.05);
    }

    40% {
        transform: translate(2px, -3px) rotate(3deg) scale(1.05);
    }

    50% {
        transform: translate(-3px, 4px) rotate(-3deg) scale(1.05);
    }

    60% {
        transform: translate(-5px, 2px) rotate(0deg) scale(1.05);
    }

    70% {
        transform: translate(4px, 2px) rotate(-3deg) scale(1.05);
    }

    80% {
        transform: translate(-2px, -3px) rotate(3deg) scale(1.05);
    }

    90% {
        transform: translate(3px, 3px) rotate(0deg) scale(1.05);
    }

    100% {
        transform: translate(2px, -3px) rotate(-3deg) scale(1.05);
    }
}

/* --- HUSTÁ TRUHLA SCREEN (Dual Chest & Case Opening) --- */
.dual-chest-container {
    display: flex;
    gap: 20px;
    margin: 40px 0;
    width: 100%;
    max-width: 600px;
    justify-content: center;
    perspective: 1000px;
}

.chest-stacked-pill {
    background: linear-gradient(135deg, #5865F2, #9b59b6);
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 800;
    margin: 15px auto 25px auto;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.4);
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chest-stacked-pill i {
    font-size: 1.1rem;
}

.chest-card {
    background: #232428;
    border: 2px solid #2b2d31;
    border-radius: 20px;
    padding: 30px 20px;
    flex: 1;
    cursor: pointer;
    position: relative;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.chest-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    border-color: #5865F2;
    box-shadow: 0 15px 40px rgba(88, 101, 242, 0.2);
}

.chest-card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: 0.3s;
}

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

.chest-card-icon {
    font-size: 3.5rem;
    color: #9b59b6;
    filter: drop-shadow(0 0 10px rgba(155, 89, 182, 0.3));
}

.rare-card .chest-card-icon {
    color: #3498db;
    filter: drop-shadow(0 0 10px rgba(52, 152, 219, 0.3));
}

.chest-card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chest-card-name {
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.chest-card-cooldown {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* LOCK OVERLAY */
.chest-card-lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    backdrop-filter: blur(4px);
    transition: 0.3s;
}

.chest-card-lock i {
    font-size: 2rem;
    color: #ff4757;
}

.chest-card-lock span {
    font-weight: bold;
    color: #fff;
    font-size: 0.9rem;
}

/* CS2 CASE ROLL RIBBON */
.case-roll-outer {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 120px;
    background: #0c0d10;
    border-radius: 12px;
    overflow: hidden;
    margin: 30px 0;
    display: none;
    /* JS zapne */
    border: 3px solid #2b2d31;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.case-roll-inner {
    display: flex;
    position: absolute;
    left: 0;
    top: 10px;
    height: 100px;
    will-change: transform;
    transition: transform 5s cubic-bezier(0.12, 0, 0, 1);
}

.roll-item {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin: 0 5px;
    border-radius: 8px;
    background: #1e1f22;
    border-bottom: 4px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.roll-item i {
    font-size: 2.2rem;
}

/* Rarity colors */
.roll-item.rarity-common {
    border-color: #7f8c8d;
    background: linear-gradient(180deg, #1e1f22, #2c3e50);
}

.roll-item.rarity-rare {
    border-color: #3498db;
    background: linear-gradient(180deg, #1e1f22, #2980b9);
}

.roll-item.rarity-epic {
    border-color: #9b59b6;
    background: linear-gradient(180deg, #1e1f22, #8e44ad);
}

.roll-item.rarity-legendary {
    border-color: #f1c40f;
    background: linear-gradient(180deg, #1e1f22, #f39c12);
}

.case-roll-pointer {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #fff;
    z-index: 20;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .dual-chest-container {
        flex-direction: column;
        align-items: center;
    }

    .chest-card {
        width: 90%;
    }
}

.chest-visual-container {
    width: 180px;
    height: 180px;
    border-radius: 40px;
    background: linear-gradient(135deg, #2b2d31, #111214);
    border: 4px solid rgba(155, 89, 182, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(155, 89, 182, 0.3);
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 40px;
    animation: floatChest 4s ease-in-out infinite;
}

.chest-visual-container.chest-rumbling {
    animation: chestRumble 0.1s infinite !important;
    border-color: #f1c40f !important;
    box-shadow: 0 0 60px rgba(241, 196, 15, 0.9), inset 0 0 50px rgba(241, 196, 15, 0.6) !important;
    background: linear-gradient(135deg, #111214, #2c2100) !important;
}

@keyframes chestExplodeBounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3) translateY(-40px) rotate(5deg);
        border-color: #fff;
        box-shadow: 0 0 100px #fff;
    }

    50% {
        transform: scale(0.9) translateY(20px) rotate(-5deg);
    }

    75% {
        transform: scale(1.2) translateY(-10px) rotate(2deg);
    }

    100% {
        transform: scale(1.1) translateY(10px) rotate(0deg);
        border-color: #2ecc71;
        box-shadow: 0 0 80px rgba(46, 204, 113, 0.6);
    }
}

.chest-visual-container.chest-opened {
    animation: chestExplodeBounce 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.chest-visual-container:hover:not(.chest-rumbling):not(.chest-opened) {
    transform: scale(1.1) translateY(-10px);
    box-shadow: 0 30px 60px rgba(155, 89, 182, 0.6), inset 0 0 60px rgba(155, 89, 182, 0.5);
    border-color: #af7ac5;
}

.streak-node.active:hover {
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 10px 25px rgba(241, 196, 15, 0.6), inset 0 0 15px rgba(241, 196, 15, 0.4);
}

.streak-node.waiting {
    border-color: #666;
    background: transparent;
    color: #999;
}

.waiting-timer {
    font-size: 0.85rem;
    font-weight: bold;
    color: #f1c40f;
    text-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    margin-top: -2px;
}

.waiting-timer i {
    font-size: 1.1rem;
    color: #999;
    margin-bottom: 2px;
}

.chest-big-icon {
    font-size: 5.5rem;
    color: #9b59b6;
    filter: drop-shadow(0 0 15px rgba(155, 89, 182, 0.6));
    transition: 0.3s;
}

.chest-visual-container:hover .chest-big-icon {
    color: #fff;
}

.chest-result-text {
    font-size: 2.5rem;
    font-weight: 900;
    color: #f1c40f;
    text-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
    min-height: 40px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s ease;
}

@keyframes popUpResultText {
    0% {
        transform: scale(0.1) translateY(100px);
        opacity: 0;
    }

    50% {
        transform: scale(1.6) translateY(-40px);
        opacity: 1;
        text-shadow: 0 0 50px rgba(241, 196, 15, 1);
    }

    75% {
        transform: scale(0.8) translateY(10px);
    }

    100% {
        transform: scale(1.1) translateY(0);
        opacity: 1;
        text-shadow: 0 0 25px rgba(241, 196, 15, 0.8);
    }
}

.chest-result-text.show {
    animation: popUpResultText 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.chest-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 160px);
    /* Přesná výška bez horního/spodního baru */
    overflow: hidden !important;
    /* Zákaz scrollování uvnitř */
    text-align: center;
    padding: 20px;
    position: relative;
}

.chest-back-btn {
    background: transparent;
    border: 2px solid #555;
    color: #ccc;
    padding: 12px 25px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chest-back-btn:hover {
    background: #333;
    color: #fff;
    border-color: #777;
}

/* --- STREAK PAGE CONTENT --- */
.streak-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1e1f22;
    border: 2px solid #2b2d31;
    border-radius: 24px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

#streak-count-display {
    font-size: 4.4rem;
    text-shadow:
        -2px -2px 0 #f39c12,
        2px -2px 0 #f39c12,
        -2px 2px 0 #f39c12,
        2px 2px 0 #f39c12,
        0px 3px 0 #d68910;
}

/* Na mobilu Streak view upravíme ať se roztáhne */
@media (max-width: 768px) {
    .streak-page-content {
        border: none;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        padding: 20px 5px;
    }

    .streak-number-wrapper {
        bottom: -15px;
    }

    .streak-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .streak-card {
        padding: 30px 15px;
        /* Vyšší a vzdušnější card karta na mobilu */
        border-radius: 20px;
    }

    .streak-node {
        width: 48px;
        /* Tlačítka velká pro palec */
        height: 48px;
        font-size: 1.3rem;
    }

    .streak-node-container:not(:last-child)::after {
        top: 24px;
        /* Polovina ze 48px */
    }
}

/* --- DUOLINGO STYLE TRANSITIONS --- */
.transition-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    background: #111214;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.transition-mask.active {
    visibility: visible;
}

.transition-mask i {
    font-size: 8rem;
    color: #e67e22;
    transform: translateY(-80px);
    opacity: 0;
}

/* 1) TO STREAK TRANSITION */
.transition-mask.to-streak {
    animation: blackScreenIn 0.3s forwards, blackScreenReveal 0.6s 0.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

.transition-mask.to-streak i {
    color: #e67e22;
    animation: firePopIn 0.6s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, fadeOut 0.2s 0.7s forwards;
}

@keyframes blackScreenIn {
    0% {
        opacity: 0;
        clip-path: circle(0% at 50% 100%);
    }

    100% {
        opacity: 1;
        clip-path: circle(150% at 50% 100%);
    }
}

@keyframes blackScreenReveal {
    0% {
        clip-path: circle(150% at 50% 30%);
        opacity: 1;
    }

    99% {
        clip-path: circle(0% at 50% 30%);
        opacity: 1;
    }

    100% {
        clip-path: circle(0% at 50% 30%);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes firePopIn {
    0% {
        transform: translateY(50px) scale(0);
        opacity: 0;
    }

    100% {
        transform: translateY(-70px) scale(1);
        opacity: 1;
    }
}

/* 2) TO LEADERBOARD TRANSITION */
.transition-mask.to-leaderboard {
    animation: wipeDownIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards, blackScreenReveal 0.6s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

.transition-mask.to-leaderboard i {
    color: #2ecc71;
    transform: scale(1.5);
    animation: trophyDrop 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, fadeOut 0.2s 0.6s forwards;
}

@keyframes wipeDownIn {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes trophyDrop {
    0% {
        transform: translateY(-300px) scale(1.5);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1.5);
        opacity: 1;
    }
}

@keyframes fadeOut {
    100% {
        opacity: 0;
    }
}

/* =============================================================================
   🔥 STREAK EVOLUTION (TIERED FIRE)
   ============================================================================= */

/* 7-13 dní: Modrý oheň */
.fire-tier-blue {
    color: #3498db !important;
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.7) !important;
    filter: drop-shadow(0 0 5px #3498db) !important;
}

/* 14-29 dní: Fialový oheň */
.fire-tier-purple {
    color: #9b59b6 !important;
    text-shadow: 0 0 20px rgba(155, 89, 182, 0.7) !important;
    filter: drop-shadow(0 0 5px #9b59b6) !important;
}

/* 30-99 dní: Zlatý oheň */
.fire-tier-gold {
    color: #f1c40f !important;
    text-shadow: 0 0 25px rgba(241, 196, 15, 0.8) !important;
    filter: drop-shadow(0 0 8px #f1c40f) !important;
    animation: firePulse 2s infinite alternate !important;
}

/* 100+ dní: Rainbow oheň (PREMIUM) */
.fire-tier-rainbow {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) !important;
    animation: rainbowShift 3s linear infinite !important;
    display: inline-block !important;
}

@keyframes firePulse {
    0% {
        transform: scale(1) rotate(0deg) translateY(0);
        filter: brightness(1) drop-shadow(0 0 10px rgba(241, 196, 15, 0.4));
    }

    25% {
        transform: scale(1.05) rotate(-1deg) translateY(-2px);
        filter: brightness(1.2) drop-shadow(0 0 20px rgba(243, 156, 18, 0.6));
    }

    50% {
        transform: scale(1.02) rotate(1deg) translateY(0);
        filter: brightness(1.1) drop-shadow(0 0 15px rgba(241, 196, 15, 0.4));
    }

    75% {
        transform: scale(1.08) rotate(-1.5deg) translateY(-3px);
        filter: brightness(1.3) drop-shadow(0 0 25px rgba(230, 126, 34, 0.7));
    }

    100% {
        transform: scale(1) rotate(0deg) translateY(0);
        filter: brightness(1) drop-shadow(0 0 10px rgba(241, 196, 15, 0.4));
    }
}

@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* =============================================================================
   🛒 SHOP UI (PREMIUM EDITION)
   ============================================================================= */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
    padding-bottom: 40px;
}

.shop-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shop-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.shop-item-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    display: block;
}

.shop-item-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: white;
}

.shop-item-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    min-height: 40px;
}

.shop-item-price {
    background: rgba(241, 196, 15, 0.1);
    color: var(--gold);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid rgba(241, 196, 15, 0.2);
    align-self: center;
}

.shop-buy-btn {
    width: 100%;
    background: var(--accent);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}

.shop-buy-btn:hover {
    background: #4752c4;
    transform: scale(1.02);
}

.shop-buy-btn:active {
    transform: scale(0.98);
}

.shop-buy-btn:disabled {
    background: #2b2d31;
    cursor: not-allowed;
    color: #555;
    box-shadow: none;
}

/* Inventory section inside shop */
.inventory-section {
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 30px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.inventory-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.inv-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.inv-icon {
    font-size: 1.8rem;
}

.inv-details {
    display: flex;
    flex-direction: column;
}

.inv-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: bold;
    text-transform: uppercase;
}

.inv-value {
    font-weight: 800;
    font-size: 1.1rem;
    color: white;
}

.shop-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px;
    color: var(--text-muted);
    font-style: italic;
    font-size: 1.2rem;
}

/* =============================================================================
   ✨ AVATAR FRAMES & PREMIUM GLOWS
   ============================================================================= */

.avatar-container {
    width: 55px;
    height: 55px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.avatar-container .avatar-img {
    width: 96%;
    height: 96%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
    position: relative;
    margin: 0 !important;
}

.avatar-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 1. Neon Blue */
.frame-neon-blue {
    border: 3px solid #00d2ff;
    box-shadow: 0 0 10px #00d2ff, inset 0 0 5px #00d2ff;
}

/* 2. Golden VIP */
.frame-gold {
    border: 3px solid #f1c40f;
    box-shadow: 0 0 15px #f1c40f, inset 0 0 8px #f1c40f;
}

/* 3. Rainbow Legend - FIX: Průhledný vnitřek pomocí masky */
.frame-rainbow {
    border: 4px solid transparent;
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateGradient 3s linear infinite;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* 4. Fire Streak - MORE GLOW + EMOJIS */
.frame-fire {
    border: 3px solid #e67e22;
    box-shadow: 0 0 15px #e67e22, inset 0 0 10px #e67e22;
    animation: firePulse 1s ease-in-out infinite alternate;
}

.frame-fire::before {
    content: "🔥";
    position: absolute;
    font-size: 12px;
    animation: fireFly 2s infinite linear;
}

@keyframes fireFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    50% {
        transform: translate(15px, -15px) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(30px, -30px) scale(0.5);
        opacity: 0;
    }
}

/* 5. Matrix - GLOW + BINARY */
.frame-matrix {
    border: 2px solid #2ecc71;
    box-shadow: 0 0 12px #2ecc71, inset 0 0 6px #2ecc71;
    overflow: hidden;
}

.frame-matrix::before {
    content: "1 0 1 0";
    position: absolute;
    font-size: 8px;
    color: #2ecc71;
    white-space: nowrap;
    animation: matrixBinary 1s infinite linear;
}

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

    to {
        transform: translateY(30px);
        opacity: 0;
    }
}

/* 6. Meme 67 - GLIDING ANIMATION */
.frame-meme-67 {
    border: 3px solid #5865F2;
    box-shadow: 0 0 15px #5865F2;
}

.frame-meme-67::before {
    content: "6";
    position: absolute;
    bottom: -5px;
    right: 12px;
    background: #f1c40f;
    color: black;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 10;
    animation: memeGlide6 2s infinite ease-in-out;
}

.frame-meme-67::after {
    content: "7";
    position: absolute;
    bottom: -5px;
    right: -2px;
    background: #f1c40f;
    color: black;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 10;
    animation: memeGlide7 2s infinite ease-in-out;
}

/* 7. Brainrot Sigma - BOUNCING ANIMATION */
.frame-brainrot {
    border: 3px solid #ff00ff;
    animation: brainrotSahur 0.5s infinite linear;
    box-shadow: 0 0 20px #ff00ff;
}

.frame-brainrot::after {
    content: "🗿";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
}

/* 8. Crystal Freeze - BLUR PULSE */
.frame-crystal {
    border: 3px solid rgba(162, 237, 255, 0.9);
    box-shadow: 0 0 15px #fff;
    animation: crystalPulse 4s infinite;
}

/* 9. Void Smoke - DARK GLOW */
.frame-void {
    border: 3px solid #000;
    box-shadow: 0 0 25px #8e44ad, inset 0 0 15px #000;
    animation: voidBreath 3s infinite ease-in-out;
}

/* 10. Cyberpunk - MORE GLITCH */
.frame-cyberpunk {
    border: 3px solid #ff0055;
    box-shadow: 0 0 15px #ff0055, 0 0 10px #00fff2, inset 0 0 5px #ff0055;
    animation: cyberpunkGlitch 0.3s steps(2, start) infinite;
}

/* 11. Doge WOW - WIGGLE */
.frame-doge {
    border: 3px solid #e2c073;
    box-shadow: 0 0 10px #5a3d1b;
    animation: dogeWiggle 2s infinite alternate;
}

.frame-doge::after {
    content: "WOW";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 7px;
    font-family: 'Comic Sans MS', cursive;
    background: #f1c40f;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: 1px 1px #000;
}

/* 12. Nyan Rainbow - ROTATING CONIC */
.frame-nyan {
    border: 4px solid transparent;
    background: conic-gradient(#ff0000, #ff9900, #ffff00, #33cc33, #0099ff, #6633ff, #ff0000) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateGold 3s linear infinite;
}

/* 13. Disco Vibe - HUE SHIFT */
.frame-vibe {
    border: 3px solid #e056fd;
    box-shadow: 0 0 15px #e056fd;
    animation: discoRainbow 4s infinite linear;
}

/* 14. CZ Flag - FIXED Triangle visibility & Transparency */
.frame-cz {
    border: 5px solid transparent;
    background: conic-gradient(#ffffff 0deg 90deg, #d7141a 90deg 180deg, #11457e 180deg 360deg) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    position: relative;
    overflow: hidden;
    /* Efekt pro věší hloubku */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.4));
}

/* 12. SK Flag - RESTORED */
.frame-sk {
    border: 4px solid transparent;
    background: linear-gradient(to bottom, #fff 33%, #0b4ea2 33%, #0b4ea2 66%, #ee1c25 66%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* --- ANIMATIONS --- */
@keyframes memeGlide6 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes memeGlide7 {

    0%,
    100% {
        transform: translateY(-15px);
    }

    50% {
        transform: translateY(0);
    }
}

@keyframes brainrotSahur {
    0% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 20px #ff00ff;
    }

    25% {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 0 40px #ff00ff;
    }

    50% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 20px #ff00ff;
    }

    75% {
        transform: scale(1.1) rotate(-5deg);
        box-shadow: 0 0 40px #ff00ff;
    }
}

@keyframes crystalPulse {

    0%,
    100% {
        backdrop-filter: blur(8px);
        border-color: rgba(162, 237, 255, 0.9);
    }

    50% {
        backdrop-filter: blur(0px);
        border-color: rgba(162, 237, 255, 0.4);
    }
}

@keyframes voidBreath {

    0%,
    100% {
        box-shadow: 0 0 15px #8e44ad;
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 35px #9b59b6;
        transform: scale(1.05);
    }
}

@keyframes cyberpunkGlitch {
    0% {
        transform: translate(0);
        border-color: #ff0055;
        box-shadow: 0 0 15px #ff0055;
    }

    20% {
        transform: translate(-2px, 1px);
        border-color: #00fff2;
    }

    40% {
        transform: translate(2px, -1px);
        filter: hue-rotate(90deg);
    }

    60% {
        transform: translate(-1px, -2px);
    }

    80% {
        transform: translate(1px, 2px);
        border-color: #ff0055;
    }

    100% {
        transform: translate(0);
    }
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

@keyframes matrixFall {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(20px);
    }
}

@keyframes glitchSkew {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(2deg);
    }

    40% {
        transform: skew(-2deg);
    }

    100% {
        transform: skew(0deg);
    }
}

@keyframes neonFlicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
    }

    20%,
    22%,
    24%,
    55% {
        opacity: 0.5;
    }
}

/* 🛠️ FRAME SELECTOR IN SETTINGS */
.frame-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 15px;
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.frame-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 12px;
    border: 2px solid transparent;
}

.frame-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.frame-option.active-frame-opt {
    border-color: #5865F2;
    background: rgba(88, 101, 242, 0.2);
}

.frame-option .avatar-mini {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #333;
    position: relative;
    margin-bottom: 5px;
}

.frame-option .frame-preview {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
}

.frame-option span {
    font-size: 0.65rem;
    color: #aaa;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Zajištění správné velikosti avatara s rámečkem */
/* Odstraněna duplicitní definice avatar-container */

.modal-avatar-wrapper .avatar-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-width: 5px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

/* Úprava pro velké avatary v modálech */
/* --- MODAL AVATAR EMBEDDED LOOK --- */
.modal-avatar-wrapper {
    width: 140px;
    height: 140px;
    margin: -70px auto 2px auto;
    position: relative;
    border-radius: 50%;
    background: #1e1f22;
    border: 3px solid #1e1f22;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.modal-avatar-img {
    width: 96%;
    height: 96%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 10;
}

.modal-avatar-wrapper .avatar-frame {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-width: 5px !important;
    z-index: 15;
}

/* Particle Background */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
}

.modal-status-dot {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 5px solid #1e1f22;
    /* Cutout match */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.modal-status-dot i {
    font-size: 14px;
}

/* Premium Level Locked View */
.view-locked-overlay {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    z-index: 100;
    backdrop-filter: blur(5px);
}

.locked-icon {
    font-size: 4rem;
    color: #ff4757;
    margin-bottom: 20px;
}

.locked-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

/* 13. Electro - MORE PULSE + MORE LIGHTNING */
.frame-electro {
    border: 3px solid #00fff2;
    box-shadow: 0 0 20px #00fff2, inset 0 0 10px #00fff2;
    animation: electroPulse 0.5s ease-in-out infinite alternate !important;
}

.frame-electro::before,
.frame-electro::after {
    content: "⚡";
    position: absolute;
    font-size: 14px;
    z-index: 10;
}

.frame-electro::before {
    animation: lightningSpark 1s infinite linear;
    top: -10px;
    left: 10px;
}

.frame-electro::after {
    animation: lightningSpark 1.2s infinite linear reverse;
    bottom: -10px;
    right: 10px;
}

/* 14. Cosmos - TRANSPARENT INSIDE */
.frame-cosmos {
    border: 4px solid transparent;
    background: radial-gradient(circle, #2c3e50, #5865F2, #000) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    box-shadow: 0 0 20px #5865F2;
    animation: cosmosRotate 5s linear infinite !important;
}

/* 15. Dragon */
.frame-dragon {
    border: 3px solid #f1c40f;
    box-shadow: 0 0 15px #e67e22;
}

.frame-dragon::after {
    content: "🐉";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    z-index: 10;
}

/* 16. Ghost */
.frame-ghost {
    border: 3px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    animation: ghostFlicker 2s infinite;
}

/* 17. Ocean */
.frame-ocean {
    border: 3px solid #3498db;
    overflow: hidden;
}

.frame-ocean::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 200%;
    height: 40%;
    background: rgba(52, 152, 219, 0.5);
    border-radius: 40%;
    animation: oceanWave 3s infinite linear;
}

/* 18. Vampire - MORE BATS */
.frame-vampire {
    border: 3px solid #c0392b;
    box-shadow: 0 0 20px #ff0000;
}

.frame-vampire::before,
.frame-vampire::after {
    content: "🦇";
    position: absolute;
    font-size: 12px;
    z-index: 10;
}

.frame-vampire::before {
    animation: batFly 3s infinite ease-in-out;
    top: -5px;
    right: -5px;
}

.frame-vampire::after {
    animation: batFly 4s infinite ease-in-out reverse;
    bottom: -5px;
    left: -5px;
}

/* 19. Hacking */
.frame-hacking {
    border: 2px solid #0f0;
    box-shadow: 0 0 10px #0f0;
}

.frame-hacking::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0f0;
    box-shadow: 0 0 15px #0f0;
    animation: hackScan 2s infinite linear;
}

/* 20. Sakura (Japanese) - MORE PETALS */
.frame-sakura {
    border: 3px solid #ffb7c5;
    box-shadow: 0 0 15px #ffb7c5;
}

.frame-sakura::before,
.frame-sakura::after {
    content: "🌸";
    position: absolute;
    font-size: 10px;
    z-index: 10;
}

.frame-sakura::before {
    animation: sakuraFall 3s infinite linear;
    top: -10px;
    left: 5px;
}

.frame-sakura::after {
    animation: sakuraFall 4s infinite linear;
    top: -10px;
    right: 5px;
    animation-delay: 1.5s;
}

/* Styles for Online Sidebar Avatars */
.web-user-avatar {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.web-user-avatar img {
    width: 96% !important;
    height: 96% !important;
    border-radius: 50%;
    z-index: 1;
}

.web-user-avatar .avatar-frame {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 3px !important;
}

/* --- ANIMATIONS --- */
/* Sakura extra petals */
.sakura-extra {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

.sakura-extra::before,
.sakura-extra::after {
    content: "🌸";
    position: absolute;
    font-size: 8px;
}

.sakura-extra::before {
    animation: sakuraFall 5s infinite linear;
    top: -10px;
    left: 40%;
    animation-delay: 0.7s;
}

.sakura-extra::after {
    animation: sakuraFall 6s infinite linear;
    top: -10px;
    right: 40%;
    animation-delay: 2.2s;
}

/* --- ANIMATIONS --- */
@keyframes electroPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 15px #00fff2;
    }

    100% {
        transform: scale(1.05);
        box-shadow: 0 0 30px #00fff2;
    }
}

@keyframes firePulse {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(241, 196, 15, 0.4));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 45px rgba(241, 196, 15, 0.8));
        transform: scale(1.02);
    }
}

@keyframes fireFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    50% {
        transform: translate(15px, -15px) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(30px, -30px) scale(0.5);
        opacity: 0;
    }
}

@keyframes lightningSpark {

    0%,
    100% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    10%,
    90% {
        opacity: 1;
        transform: scale(1.2) translate(15px, -15px);
    }
}

@keyframes cosmosRotate {
    0% {
        transform: rotate(0deg) filter(hue-rotate(0deg));
    }

    100% {
        transform: rotate(360deg) filter(hue-rotate(360deg));
    }
}

@keyframes ghostFlicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        opacity: 1;
        box-shadow: 0 0 10px #fff;
    }

    20%,
    24%,
    55% {
        opacity: 0.3;
        box-shadow: 0 0 0px #fff;
    }
}

@keyframes oceanWave {
    from {
        transform: translateX(0) rotate(0deg);
    }

    to {
        transform: translateX(50%) rotate(360deg);
    }
}

@keyframes batFly {
    0% {
        transform: translate(0, 0) rotate(0);
    }

    50% {
        transform: translate(-25px, -15px) rotate(-20deg);
    }

    100% {
        transform: translate(0, 0) rotate(0);
    }
}

@keyframes hackScan {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

@keyframes sakuraFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(60px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

.user-card.skin-whale {
    background: linear-gradient(180deg, #0f1621 0%, #1a2a44 100%) !important;
    position: relative;
    overflow: hidden;
    border: 2px solid #3498db !important;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.4), inset 0 0 15px rgba(52, 152, 219, 0.2) !important;
}

.user-card.skin-whale::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(52, 152, 219, 0.3) 0%, transparent 60%);
    animation: blueWaveRise 6s infinite alternate ease-in-out;
    pointer-events: none;
}

.user-card.skin-whale::before {
    content: "🫧 🫧";
    position: absolute;
    font-size: 14px;
    left: 10%;
    bottom: -20px;
    animation: bubbleRiseComplex 6s infinite ease-in;
    text-shadow: 80px 40px rgba(255, 255, 255, 0.4), 160px 10px rgba(255, 255, 255, 0.3), 220px 50px rgba(255, 255, 255, 0.2);
    opacity: 0.5;
    pointer-events: none;
}

.user-card.skin-cyber {
    background: linear-gradient(135deg, #0b0116 0%, #15002b 100%) !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.3), inset 0 0 10px rgba(255, 0, 255, 0.1) !important;
}

.user-card.skin-cyber::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #00d2ff, #9b59b6, #00d2ff);
    background-size: 200% auto;
    animation: cyberBorderAnim 4s linear infinite;
    z-index: -1;
    border-radius: inherit;
}

.user-card.skin-cyber::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 210, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.1) 1px, transparent 1px);
    background-size: 25px 25px;
    opacity: 0.4;
    animation: cyberGridShift 20s infinite linear;
    pointer-events: none;
}

.user-card.skin-gold {
    background: linear-gradient(135deg, #1f1c13 0%, #3d3419 100%) !important;
    border: 2px solid #f1c40f !important;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.2) !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-gold::before {
    content: "✧";
    color: #f1c40f;
    position: absolute;
    top: -20px;
    left: 30%;
    font-size: 8px;
    opacity: 0.6;
    text-shadow: 50px 20px #f39c12, 100px 50px #f1c40f, 150px 30px #f39c12, 200px 70px #f1c40f, 20px 80px #f39c12, 80px 110px #f1c40f, 140px 140px #f39c12, 220px 100px #f1c40f;
    animation: goldRain 8s infinite linear;
}

.user-card.skin-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 215, 0, 0.1) 50%, transparent 60%);
    animation: goldGlintCenter 4s infinite linear;
    pointer-events: none;
}

.user-card.skin-void {
    background: black !important;
    border: 2px solid #6c5ce7 !important;
    box-shadow: 0 0 25px rgba(108, 92, 231, 0.5), inset 0 0 30px rgba(0, 0, 0, 1) !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-void::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
    pointer-events: none;
}

.user-card.skin-void::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(108, 92, 231, 0.2) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    filter: blur(40px);
    animation: voidPulseCenter 8s infinite alternate ease-in-out;
}

.user-card.skin-sakura {
    background: linear-gradient(135deg, #1a0f12 0%, #2d1b20 100%) !important;
    border: 2px solid #ffb7c5 !important;
    box-shadow: inset 0 0 20px rgba(255, 183, 197, 0.2), 0 0 15px rgba(255, 183, 197, 0.3) !important;
    position: relative;
    overflow: hidden;
}

/* Rain of petals using Box Shadows */
.user-card.skin-sakura::before {
    content: "●";
    color: #ffb7c5;
    position: absolute;
    top: -50px;
    left: 20%;
    font-size: 6px;
    opacity: 0.6;
    text-shadow:
        40px 10px #ffc0cb, 80px 40px #ffb7c5, 120px 20px #ffc0cb,
        160px 80px #ffb7c5, 200px 30px #ffc0cb, 240px 60px #ffb7c5,
        280px 100px #ffc0cb, 320px 50px #ffb7c5, 20px 120px #ffc0cb,
        60px 150px #ffb7c5, 100px 130px #ffc0cb, 140px 180px #ffb7c5;
    filter: blur(0.5px);
    animation: sakuraRain 10s infinite linear;
}

.user-card.skin-sakura::after {
    content: "🌸";
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 80px;
    opacity: 0.08;
    filter: blur(2px) grayscale(0.5);
    transform: rotate(-20deg);
    pointer-events: none;
}

.user-card.skin-doge {
    background: #e2c073 !important;
    border: 2px solid #5a3d1b !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-doge::before {
    content: "much wow\nso skill\nvery xp";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Comic Sans MS', cursive;
    font-size: 8px;
    color: #ffd700;
    text-shadow: 1px 1px #000;
    line-height: 1.4;
    animation: dogeFloat 5s infinite ease-in-out;
}

.user-card.skin-doge::after {
    content: "🐕";
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 30px;
    opacity: 0.3;
    animation: dogeWiggle 3s infinite alternate;
}

.user-card.skin-nyan {
    background: #003366 !important;
    border: 2px solid #fff !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-nyan::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -100px;
    width: 200px;
    height: 15px;
    background: linear-gradient(to bottom, #ff0000 0%, #ff9900 20%, #ffff00 40%, #33cc33 60%, #0099ff 80%, #6633ff 100%);
    animation: nyanFly 6s infinite linear;
    filter: blur(1px);
    opacity: 0.4;
}

.user-card.skin-nyan::after {
    content: "✨ ✨";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    opacity: 0.4;
    animation: nyanStars 3s infinite alternate;
}

.user-card.skin-vibe {
    background: #050505 !important;
    border: 2px solid #e056fd !important;
    position: relative;
    overflow: hidden;
    animation: vibePulse 4s infinite alternate;
}

.user-card.skin-vibe::before {
    content: "🎶 🎵 🎶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    opacity: 0.4;
    animation: centerPulse 3s infinite ease-in-out;
}

.user-card.skin-vibe::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(224, 86, 253, 0.1), transparent 70%);
    animation: discoRainbow 10s infinite linear;
}

.user-card.skin-czech {
    background: #f0f0f0 !important;
    border: 2px solid #11457e !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-czech::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #ffffff 50%, #d7141a 50%);
}

.user-card.skin-czech::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #11457e;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    opacity: 0.9;
}

.user-card.skin-slovakia {
    background: #003399 !important;
    border: 2px solid #ee1c25 !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-slovakia::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #ffffff 33.3%, #003399 33.3% 66.6%, #ee1c25 66.6%);
}

.user-card.skin-slovakia::after {
    content: "🛡️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    opacity: 0.2;
    filter: blur(1px);
}

.user-card.skin-matrix {
    background: #000 !important;
    border: 1px solid #00ff00 !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-matrix::before {
    content: "101101101\n010110101\n110101100\n011010111\n101001101\n011010101\n110101100";
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    font-family: monospace;
    font-size: 8px;
    line-height: 1;
    color: #40ff40;
    opacity: 0.1;
    animation: matrixRain 3s linear infinite;
    white-space: pre;
    text-align: center;
}

.user-card.skin-matrix {
    background: #000 !important;
    border: 2px solid #2ecc71 !important;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.4), inset 0 0 15px rgba(0, 0, 0, 1) !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-matrix::before {
    content: "0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 1 1 0 1 0 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 1 0 1 0";
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    color: #2ecc71;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    line-height: 12px;
    word-break: break-all;
    opacity: 0.2;
    animation: matrixRainMove 15s linear infinite;
    text-shadow: 0 0 5px #2ecc71, 0 0 10px #2ecc71;
    pointer-events: none;
}

.user-card.skin-matrix::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(46, 204, 113, 0.05) 50%, transparent 100%);
    pointer-events: none;
}

.user-card.skin-fire {
    background: linear-gradient(180deg, #1a0505 0%, #2d0a0a 100%) !important;
    border: 2px solid #e67e22 !important;
    box-shadow: 0 0 25px rgba(230, 126, 34, 0.6), inset 0 0 20px rgba(231, 76, 60, 0.3) !important;
    position: relative;
    overflow: hidden;
    animation: fireDistortion 4s infinite ease-in-out;
}

.user-card.skin-fire::before {
    content: "🔥";
    position: absolute;
    bottom: -10px;
    left: 20%;
    font-size: 20px;
    opacity: 0.4;
    filter: blur(2px);
    animation: flameFlicker 3s infinite alternate ease-in-out;
    text-shadow: 50px -20px rgba(230, 126, 34, 0.4), 120px -10px rgba(231, 76, 60, 0.3), 200px -30px rgba(230, 126, 34, 0.4);
    pointer-events: none;
}

.user-card.skin-fire::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(230, 126, 34, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.user-card.skin-hacking {
    background: #000 !important;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid #00ff41 !important;
    position: relative;
    overflow: hidden;
}

.user-card.skin-hacking::before {
    content: "SYSTEM://ROOT_ACCESS\nDEBUG_CONSOLE: OK\nCONNECTED...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    color: #0f0;
    opacity: 0.3;
    white-space: pre;
    filter: blur(0.5px);
    animation: neonFlicker 4s infinite;
}

.user-card.skin-vampire {
    background: linear-gradient(135deg, #1a0000, #3d0000) !important;
    border-color: #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

/* --- ANIMACE ENHANCED --- */

@keyframes centerPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.4;
    }
}

@keyframes bubbleRiseSide {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    30% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-120px) rotate(20deg);
        opacity: 0;
    }
}

@keyframes sakuraRain {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-40px, 300px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes sakuraFallSide {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.5;
    }

    50% {
        transform: translate(15px, 100px) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: translate(0, 200px) rotate(360deg);
        opacity: 0.5;
    }
}

@keyframes cyberScanCenter {

    0%,
    100% {
        top: 30%;
        opacity: 0.2;
    }

    50% {
        top: 70%;
        opacity: 0.5;
    }
}

@keyframes goldGlintCenter {
    0% {
        transform: translate(-100%, -100%) rotate(45deg);
    }

    100% {
        transform: translate(100%, 100%) rotate(45deg);
    }
}

@keyframes rotateGold {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes voidBreathe {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.4;
    }
}

@keyframes sakuraFallSide {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(120px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes sakuraGiantCenter {
    0% {
        left: -60px;
        transform: rotate(0deg) scale(0.8);
        opacity: 0;
    }

    15% {
        opacity: 0.2;
    }

    50% {
        transform: rotate(180deg) scale(1.3);
        opacity: 0.3;
    }

    85% {
        opacity: 0.2;
    }

    100% {
        left: 110%;
        transform: rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes fireRiseCenter {
    0% {
        transform: translate(-50%, 0) scale(1);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50px) scale(0.5);
        opacity: 0;
    }
}

@keyframes matrixCenterPulse {

    0%,
    100% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes matrixRain {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(40px);
    }
}

/* --- MEME ANIMATIONS --- */

@keyframes dogeFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -60%) scale(1.1) rotate(5deg);
    }
}

@keyframes dogeWiggle {
    from {
        transform: rotate(-5deg) scale(1);
    }

    to {
        transform: rotate(5deg) scale(1.1);
    }
}

@keyframes nyanFly {
    0% {
        left: -220px;
    }

    100% {
        left: 110%;
    }
}

@keyframes nyanStars {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.2;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

@keyframes vibePulse {
    0% {
        border-color: #e056fd;
        box-shadow: 0 0 10px rgba(224, 86, 253, 0.2);
    }

    100% {
        border-color: #7ed6df;
        box-shadow: 0 0 20px rgba(126, 214, 223, 0.4);
    }
}

@keyframes discoRainbow {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* --- SHOP CATEGORIES --- */
.shop-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.shop-category-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.shop-category-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    padding: 10px 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-category-title i {
    color: #6c5ce7;
}

/* Grid Selector pro Rámečky a Skiny */
.grid-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 10px;
}

.grid-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.grid-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    border-color: var(--accent);
}

.grid-item.selected {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.3), inset 0 0 10px rgba(46, 204, 113, 0.1);
    transform: scale(1.02);
}

.grid-item.selected::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    color: #2ecc71;
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: bounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.grid-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
}

@media (max-width: 600px) {
    .grid-selector {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 5px;
    }

    .grid-item {
        padding: 10px;
        font-size: 0.75rem;
    }

    .modal {
        max-height: 80vh;
        width: 98%;
    }
}

.bet-grid-hint {
    font-size: 0.85rem;
    color: #f1c40f;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    min-height: 1.2em;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}

/* --- NEW KEYFRAMES --- */
@keyframes blueWaveRise {
    0% {
        background-position: 50% 120%;
        opacity: 0.2;
    }

    100% {
        background-position: 50% 100%;
        opacity: 0.4;
    }
}

@keyframes bubbleRiseComplex {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(-150px) translateX(20px);
        opacity: 0;
    }
}

@keyframes cyberBorderAnim {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes cyberGridShift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 50px 50px;
    }
}

@keyframes voidPulseCenter {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.4;
    }
}

@keyframes matrixRainMove {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(300px);
    }
}

@keyframes fireDistortion {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.005) skew(0.5deg);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes flameFlicker {
    0% {
        transform: scale(1) translateY(0);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1) translateY(-5px);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.9) translateY(2px);
        opacity: 0.3;
    }
}

.neo-highlight {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
    border: 3px solid #ff00aa !important;
    animation: neo-card-glow 1.5s infinite alternate !important;
    transform: scale(1.03);
    margin-top: 15px;
    /* Místo pro vrchní ultimate ribbon */
    margin-bottom: 5px;
    position: relative;
    z-index: 5;
    overflow: visible !important;
}

@keyframes neo-card-glow {
    from {
        box-shadow: 0 0 10px #ff00aa, inset 0 0 10px rgba(255, 0, 170, 0.5);
    }

    to {
        box-shadow: 0 0 30px #ff00aa, 0 0 40px rgba(255, 71, 87, 0.5), inset 0 0 25px rgba(255, 0, 170, 0.8);
    }
}

.btc-highlight {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.08) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
    border: 2px solid #00c853 !important;
    animation: btc-card-glow 2s infinite alternate !important;
    margin-top: 15px;
    position: relative;
    z-index: 5;
    overflow: visible !important;
}

@keyframes btc-card-glow {
    from {
        box-shadow: 0 0 8px rgba(0, 200, 83, 0.4), inset 0 0 8px rgba(0, 255, 0, 0.1);
    }

    to {
        box-shadow: 0 0 20px rgba(0, 200, 83, 0.7), 0 0 35px rgba(0, 255, 0, 0.2), inset 0 0 15px rgba(0, 200, 83, 0.2);
    }
}

/* Golden Level Badge Styling */
.golden-level {
    background: linear-gradient(135deg, #ff8200, #ffb300, #ff8200) !important;
    background-size: 200% 200% !important;
    animation: goldShimmer 3s linear infinite !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(255, 130, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.2) !important;
}

.stat-item.golden-level {
    padding: 3px 10px !important;
    border-radius: 6px !important;
    background: linear-gradient(45deg, #ff8c00, #ffae00) !important;
}

@keyframes goldShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Premium Golden Card Highlight */
.premium-golden-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.2)) !important;
    border: 1px solid #ffd700 !important;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.4) !important;
}

.premium-golden-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: rotate(45deg);
    animation: goldFlow 4s infinite;
}

@keyframes goldFlow {
    0% {
        transform: translate(-100%, -100%) rotate(45deg);
    }

    100% {
        transform: translate(100%, 100%) rotate(45deg);
    }
}

/* Recruitment List Styling */
.recruits-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

.recruits-list::-webkit-scrollbar {
    width: 4px;
}

.recruits-list::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

.recruit-card {
    transition: transform 0.2s, background 0.2s;
}

.recruit-card:hover {
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.08) !important;
}

/* --- PREMIUM RECRUITMENT UI --- */

#recruits-modal .modal-content {
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 210, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 210, 255, 0.05);
    padding: 25px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

#recruits-modal .modal-header h2 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
    font-size: 1.6rem;
    color: #fff;
}

#recruits-modal .modal-body {
    padding: 10px 0;
}

.recruit-card-premium {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 5px solid #00d2ff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.recruit-card-premium:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px) scale(1.01);
    border-left-width: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.recruit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.recruit-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.recruit-role {
    font-size: 0.75rem;
    color: #00d2ff;
    font-weight: bold;
    letter-spacing: 1px;
    opacity: 0.8;
}

.recruit-status {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recruit-progress-container {
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.recruit-progress-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    position: relative;
}

.recruit-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.recruit-stats-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.65rem;
    color: #666;
    font-weight: bold;
    margin-bottom: 2px;
}

.stat-val {
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
    color: #ccc;
    font-weight: bold;
}

.copy-btn-premium {
    background: #00d2ff;
    color: #000;
    border: none;
    padding: 0 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.copy-btn-premium:hover {
    background: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6);
}

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

.recruits-list-premium {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 10px;
    margin-top: 10px;
}

.recruits-list-premium::-webkit-scrollbar {
    width: 4px;
}

.recruits-list-premium::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.3);
    border-radius: 10px;
}


/* --- PREMIUM RECRUITMENT UI --- */
.modal-premium {
    background: rgba(18, 18, 22, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.modal-header-premium {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.modal-title-premium {
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #fff, #00d2ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

.recruit-card-premium {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 4px solid #00d2ff;
}

.recruit-card-premium:hover {
    transform: translateX(5px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: -10px 0 20px rgba(0, 210, 255, 0.1);
}

.recruit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.recruit-name {
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
}

.recruit-role {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.recruit-status {
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

.recruit-progress-container {
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0;
    position: relative;
}

.recruit-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.recruit-stats-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.6rem;
    color: #555;
    text-transform: uppercase;
    font-weight: 700;
}

.stat-val {
    font-size: 0.8rem;
    font-weight: 800;
    color: #aaa;
}

.ref-link-box-premium {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.08), rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 25px;
    position: relative;
    overflow: hidden;
}

.ref-link-box-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d2ff, transparent);
    animation: slideLine 3s infinite;
}

@keyframes slideLine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.ref-input-container {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ref-input-container:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.1);
}

.ref-input-container input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    font-family: monospace;
    font-size: 0.85rem;
    color: #00d2ff !important;
    cursor: pointer;
    pointer-events: none;
}

.copy-badge {
    position: absolute;
    right: 10px;
    background: #00d2ff;
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
}

.ref-input-container:hover .copy-badge {
    opacity: 1;
    transform: translateY(0);
}

.rules-box-premium {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    font-size: 0.8rem;
    color: #888;
    line-height: 1.6;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.rules-box-premium strong {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* --- RECRUIT CLAIM ENHANCEMENTS --- */
.claimable-glow-pulse {
    animation: claimPulse 2s infinite ease-in-out;
    background: linear-gradient(135deg, rgba(30, 31, 34, 0.7), rgba(241, 196, 15, 0.05)) !important;
    border: 1px solid rgba(241, 196, 15, 0.4) !important;
}

@keyframes claimPulse {
    0% {
        box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
        border-color: rgba(241, 196, 15, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(241, 196, 15, 0.5);
        border-color: rgba(241, 196, 15, 0.8);
    }

    100% {
        box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
        border-color: rgba(241, 196, 15, 0.4);
    }
}

.claim-reward-btn {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    border: none;
    border-radius: 8px;
    color: #000 !important;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.4);
    position: relative;
    overflow: hidden;
}

.claim-reward-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(45deg);
    animation: btnShine 3s infinite;
}

@keyframes btnShine {
    0% {
        left: -150%;
    }

    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.claim-reward-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(241, 196, 15, 0.6);
}

.claim-reward-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #555;
    color: #eee;
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 99999;
    pointer-events: none;
}

.reward-claimed-anim {
    animation: claimSuccess 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes claimSuccess {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.9) rotate(-3deg);
    }

    100% {
        transform: scale(1);
    }
}

/* DISCORD-STYLE UPDATE MODAL */
.update-modal-content {
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    background: #1e1f22 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.update-header {
    background: linear-gradient(135deg, #5865F2, #4752c4);
    padding: 40px 20px;
    text-align: center;
    color: white;
}

.update-header-image {
    font-size: 4rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
}

.update-title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 5px;
    color: white;
}

.update-subtitle {
    opacity: 0.8;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
}

.update-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    overflow-y: auto;
    flex: 1;
}

.update-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.update-item-icon {
    font-size: 1.8rem;
    min-width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.update-item-text h3 {
    font-size: 1rem;
    color: white;
    margin-bottom: 4px;
}

.update-item-text p {
    font-size: 0.85rem;
    color: #b5bac1;
    line-height: 1.4;
}

.update-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
}

.update-btn {
    background: #248046;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    transition: 0.2s;
}

.update-btn:hover {
    background: #1a6334;
}

/* CHANGELOG TUTORIAL BOX */
.update-tutorial-box {
    background: rgba(88, 101, 242, 0.1);
    border: 1px dashed #5865F2;
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
}

.update-tutorial-box h3 {
    font-size: 0.9rem;
    color: #5865F2;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 900;
}

.update-tutorial-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.update-tutorial-box li {
    font-size: 0.85rem;
    color: #dbdee1;
    line-height: 1.2;
}

.update-tutorial-box b {
    color: white;
}

/* SKELETON LOADING EFFECTS */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

.skeleton-shimmer {
    background: #2b2d31;
    background-image: linear-gradient(to right, #2b2d31 0%, #3a3c42 20%, #2b2d31 40%, #2b2d31 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    display: inline-block;
    position: relative;
    animation: shimmer 1.5s infinite linear;
}

.skeleton-card {
    pointer-events: none;
    border-color: #2b2d31 !important;
    background: #232428 !important;
    box-shadow: none !important;
}

.skeleton-card .avatar-container {
    filter: grayscale(1);
    opacity: 0.5;
}

/* ==========================================================================
   🏆 TROPHY ROAD STYLES
   ========================================================================== */

#view-trophy-road {
    padding-bottom: 100px;
}

.trophy-road-header {
    background: rgba(30, 31, 34, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 40px;
    position: sticky;
    top: 10px;
    z-index: 100;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.trophy-road-title {
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    background: linear-gradient(to right, #f1c40f, #f39c12);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 10px 20px rgba(241, 196, 15, 0.2);
}

.trophy-road-progress-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trophy-road-stats {
    font-size: 1rem;
    font-weight: bold;
    color: #f1c40f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trophy-road-bar-bg {
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.trophy-road-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f1c40f, #e67e22);
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.4);
    transition: width 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* THE WINDING PATH */
.trophy-road-path-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.trophy-road-path {
    display: flex;
    flex-direction: column;
    gap: 0; /* Removing gap for seamless biome transition */
    position: relative;
    padding-top: 40px;
}

/* Center vertical line */
.trophy-road-path::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 6px;
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(-50%);
    border-radius: 3px;
    z-index: 0;
}

/* Success filling line (not easily dynamic with pure CSS, but we can style the base) */
.milestone-node {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 1;
}

.milestone-node:nth-child(even) {
    justify-content: flex-end;
}

.milestone-node:nth-child(odd) {
    justify-content: flex-start;
}

/* The point on the path */
.milestone-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    background: #1e1f22;
    border: 4px solid #444;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: 0.3s;
}

.milestone-node.completed .milestone-dot {
    background: #f1c40f;
    border-color: #f39c12;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
}

.milestone-node.next .milestone-dot {
    border-color: #f1c40f;
    animation: pulseTrophy 2s infinite;
}

/* Milestone Card */
.milestone-card {
    width: 42%;
    background: #2b2d31;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 15px;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.milestone-node.completed .milestone-card {
    opacity: 0.7;
    background: rgba(43, 45, 49, 0.6);
}

.milestone-node.claimable .milestone-card {
    border-color: #f1c40f;
    background: linear-gradient(145deg, #2b2d31, #36393e);
    box-shadow: 0 10px 25px rgba(241, 196, 15, 0.15);
    transform: scale(1.05);
}

.milestone-threshold {
    position: absolute;
    top: -12px;
    background: #f1c40f;
    color: #000;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 900;
}

.milestone-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}

.milestone-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #eee;
    margin-bottom: 15px;
}

.milestone-node.completed .milestone-label {
    color: #888;
}

.milestone-claim-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
    background: #444;
    color: #aaa;
}

.milestone-node.claimable .milestone-claim-btn {
    background: linear-gradient(to bottom, #f1c40f, #d4ac0d);
    color: #000;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.3);
    animation: bounceBtn 2s infinite;
}

.milestone-node.claimable .milestone-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(241, 196, 15, 0.5);
}

.milestone-node.completed .milestone-claim-btn {
    background: #248046;
    color: white;
    cursor: default;
}

.milestone-node.completed .milestone-claim-btn i {
    margin-right: 5px;
}

@keyframes pulseTrophy {
    0% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(241, 196, 15, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); }
}

@keyframes bounceBtn {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-3px); }
}

body {
    transition: background-color 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#view-trophy-road {
    background: transparent;
}

/* --- BIOME THEMES (Vibrant & Readable) --- */
.milestone-node {
    width: 100%;
    min-height: 500px;
    padding: 120px 0;
    margin: 0;
    overflow: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Base Card enhancements - DARK FOR CONTRAST */
.milestone-node .milestone-card {
    background: rgba(0, 0, 0, 0.85); /* Dark background for readability */
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 15px 45px rgba(0,0,0,0.5);
    color: #ffffff;
    padding: 25px;
}

.milestone-label {
    color: #ffffff;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    font-size: 1.1rem;
}

.milestone-threshold {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 900;
}

/* DECORATION BASE */
.biome-decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
    font-size: 5rem;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
    animation: floatingDecor 25s linear infinite;
}
.biome-decor.d1 { top: 15%; left: -10%; animation-duration: 35s; }
.biome-decor.d2 { top: 55%; left: 110%; animation-duration: 40s; animation-delay: -10s; }
.biome-decor.d3 { top: 75%; left: -15%; animation-duration: 30s; animation-delay: -20s; }

@keyframes floatingDecor {
    0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { transform: translateX(115vw) translateY(100px) rotate(360deg); opacity: 0; }
}

/* BIOME DECOR CUSTOMIZATIONS */
.biome-forest .biome-decor::after { content: "🌳"; }
.biome-desert .biome-decor::after { content: "☀️"; font-size: 8rem; }
.biome-heaven .biome-decor::after { content: "☁️"; font-size: 8rem; }
.biome-ice .biome-decor::after { content: "❄️"; }
.biome-volcano .biome-decor::after { content: "🔥"; font-size: 7rem; }
.biome-space .biome-decor::after { content: "🛸"; font-size: 4rem; }
.biome-matrix .biome-decor::after { content: "👾"; font-size: 6rem; }
.biome-sakura .biome-decor::after { content: "🌸"; }
.biome-hell .biome-decor::after { content: "👹"; font-size: 7rem; }

/* DOT COLORS */
.milestone-node.biome-forest .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #2ecc71; }
.milestone-node.biome-desert .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #f1c40f; }
.milestone-node.biome-heaven .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #3498db; }
.milestone-node.biome-ice .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #ecf0f1; }
.milestone-node.biome-volcano .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #e67e22; }
.milestone-node.biome-space .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #9b59b6; }
.milestone-node.biome-matrix .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #27ae60; }
.milestone-node.biome-sakura .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #ff69b4; }
.milestone-node.biome-hell .milestone-dot { background-color: #fff; box-shadow: 0 0 40px #e74c3c; }

@keyframes glowCard { 0% { box-shadow: 0 0 5px rgba(241,196,15,0.2); } 50% { box-shadow: 0 0 30px rgba(241,196,15,1); } 100% { box-shadow: 0 0 5px rgba(241,196,15,0.2); } }
.milestone-node.claimable .milestone-card { animation: glowCard 2s infinite; border-color: #f1c40f; }

@keyframes rotateIcon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.milestone-icon { animation: rotateIcon 6s linear infinite; font-size: 2.5rem; }

@keyframes bounceDot { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.4); } 60% { transform: translate(-50%, -50%) scale(0.9); } }
.milestone-node.next .milestone-dot { animation: bounceDot 2s infinite; border: 4px solid #fff; }

/* Mobile Adjustments */
@media (max-width: 600px) {
    #view-trophy-road, .nav-btn.trophy-road { display: none !important; }
}

@keyframes cloudScroll { from { transform: translateX(-100%); } to { transform: translateX(115vw); } }
@keyframes matrixFall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
@keyframes sakuraFallFull { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(300px, 1500px) rotate(360deg); } }
@keyframes fireGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

@keyframes glowCard { 0% { box-shadow: 0 0 5px rgba(241,196,15,0.2); } 50% { box-shadow: 0 0 20px rgba(241,196,15,0.8); } 100% { box-shadow: 0 0 5px rgba(241,196,15,0.2); } }
.milestone-node.claimable .milestone-card { animation: glowCard 3s infinite; }
@keyframes rotateIcon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.milestone-icon { animation: rotateIcon 6s linear infinite; }
@keyframes bounceDot { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.2); } 60% { transform: translate(-50%, -50%) scale(0.9); } }
.milestone-node.next .milestone-dot { animation: bounceDot 2s infinite; }

/* Mobile Adjustments */
@media (max-width: 600px) {
    #view-trophy-road, .nav-btn.trophy-road { display: none !important; }
}

@keyframes cloudScroll { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
@keyframes matrixFall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes sakuraFallFull { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(200px, 1200px) rotate(360deg); } }
@keyframes fireGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }

@keyframes glowCard { 0% { box-shadow: 0 0 5px rgba(241,196,15,0.2); } 50% { box-shadow: 0 0 20px rgba(241,196,15,0.8); } 100% { box-shadow: 0 0 5px rgba(241,196,15,0.2); } }
.milestone-node.claimable .milestone-card { animation: glowCard 3s infinite; }
@keyframes rotateIcon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.milestone-icon { animation: rotateIcon 6s linear infinite; }
@keyframes bounceDot { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.2); } 60% { transform: translate(-50%, -50%) scale(0.9); } }
.milestone-node.next .milestone-dot { animation: bounceDot 2s infinite; }

/* Mobile Adjustments */
@media (max-width: 600px) {
    #view-trophy-road, .nav-btn.trophy-road { display: none !important; }
}