/* === Custom scrollbar === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(194,86,10,0.45); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #F97316; }
* { scrollbar-width: thin; scrollbar-color: rgba(194,86,10,0.45) transparent; }
html { scrollbar-color: rgba(194,86,10,0.45) transparent; scrollbar-width: thin; }

:root {
    --primary: #C2560A;
    --primary-dark: #9A3D06;
    --primary-hover: #9A3D06;
    --primary-glow: #E06010;
    --secondary: #332822;
    --accent: #FDBA74;
    --success: #22C55E;
    --bg-app: #1A1614;
    --bg-card: #2A221E;
    --bg-soft: #332822;
    --text-main: #FFFFFF;
    --text-secondary: #D1C9C5;
    --text-muted: #A89080;
    --radius: 16px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
}


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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-app);
    color: var(--text-main);
    min-height: 100vh;
    padding-bottom: 20px;
}

body.modal-open {
    overflow: hidden;
}

.app-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Hlavička --- */
.main-header {
    display: grid;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    background: rgba(26, 22, 20, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .main-header {
    background: rgba(26, 22, 20, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.logo {
    display: flex;
    align-items: center;
}

.logo-svg {
    height: 36px;
    width: auto;
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 36px;
    width: auto;
}

.icon-btn,
.login-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-main);
}

.menu-icon {
    font-size: 1.5rem;
    color: var(--primary-glow);
}

.menu-label {
    display: none;
}

@media (min-width: 500px) {
    .menu-label {
        display: inline;
    }
}

.login-btn {
    background-color: white;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 0.9rem;
    position: relative;
    z-index: 1200;
    /* ✅ OPRAVENO: Vyšší než overlay (900) */
    pointer-events: auto !important;
    /* ✅ Vždy klikatelné */
}

.login-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1200;
    /* ✅ OPRAVENO: Bylo 2, teď 1200 (vyšší než overlay) */
}

/* --- Jazykový přepínač (Roletka) --- */
.lang-switcher {
    margin-right: 10px;
    pointer-events: auto;
}

.lang-select {
    appearance: none;
    -webkit-appearance: none;
    /* Důležité pro iPhone */
    background-color: white;
    border: 2px solid #e5e7eb;
    pointer-events: auto;

    /* Větší dotyková plocha a šipka */
    padding: 8px 35px 8px 15px;
    border-radius: 20px;
    font-size: 16px;
    /* 16px zabrání zoomování na iPhone */
    font-weight: 600;
    color: var(--text-main);

    /* Zajištění klikatelnosti */
    cursor: pointer;
    position: static;
    /* Musí být vysoko, aby šlo kliknout */
    opacity: 1;
    outline: none;

    /* Vlastní šipka */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231e293b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    -webkit-tap-highlight-color: transparent;
}

.lang-select:focus {
    border-color: var(--primary);
}

/* Mobilní úprava - aby se to vešlo vedle loga */
@media (max-width: 480px) {
    .logo-svg {
        height: 28px;
    }

    .logo-img {
        height: 28px;
    }

    .lang-select {
        padding: 6px 30px 6px 10px;
        font-size: 16px;
        /* Stále držíme 16px */
    }
}

/* --- Sidebar (Menu) --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background: var(--bg-card);
    color: var(--text-main);
    z-index: 1100;
    /* ✅ Vyšší než overlay (900) */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding: 20px;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-nav a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    border-radius: 10px;
    margin-bottom: 5px;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background-color: var(--secondary);
    color: var(--primary);
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    float: right;
}


.sidebar-open .sidebar-overlay {
    pointer-events: auto;
    opacity: 1;
}


/* ✅ OPRAVENO: Overlay - vyčištěno a zjednodušeno */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    /* ✅ KRITICKÉ: Defaultně NEBLOKUJE kliky */
    transition: opacity 0.25s;
    z-index: 900;
    /* ✅ Pod hlavičkou, sidebarem a user-card */
    display: none;
    /* ✅ Defaultně schovaný */
}

.overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
    /* ✅ Jen když je aktivní, blokuje kliky */
}

/* --- Karty --- */
.card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    margin-bottom: 2rem;
}

.daily-card {
    border: 2px solid var(--primary);
    position: relative;
    overflow: hidden;
}

.daily-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--accent);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-lg {
    padding: 18px;
    font-size: 1.1rem;
}

.small-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* --- Témata Grid --- */
.section-title {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.topics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.topic-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}

.topic-card:hover {
    transform: translateY(-3px);
}

.topic-icon {
    font-size: 2rem;
}

.topic-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.topic-card.lock {
    opacity: 0.5;
    cursor: default;
    background: var(--bg-card);
    position: relative;
}
.topic-lock-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
    opacity: 0.8;
}

/* Ostatní */
.hidden {
    display: none !important;
}

.active {
    display: block;
}

.input-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

input[type="text"] {
    width: 100%;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1.1rem;
    outline: none;
}

input[type="text"]:focus {
    border-color: var(--primary);
}

.error-msg {
    color: var(--accent);
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
}

.quiz-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 10px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s ease;
}

.answers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

@media (max-width: 350px) {
    .answers-grid {
        grid-template-columns: 1fr;
    }
}

.answer-btn {
    padding: 20px;
    background: var(--bg-card);
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-main);
    width: 100%;
    height: 100%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Hover jen na zařízeních s myší (fix pro Safari/iOS sticky hover) */
@media (hover: hover) {
    .answer-btn:hover {
        background-color: var(--secondary);
        border-color: var(--primary);
    }
}

.answer-btn:focus {
    outline: none;
}

.answer-btn:active {
    background-color: var(--secondary);
    border-color: var(--primary);
}

.answer-btn.correct {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.answer-btn.wrong {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--secondary);
    color: var(--primary);
}

.btn-secondary:hover {
    background: #dbeafe;
}

.icon-header {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

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

/* ==========================================
   NICKNAME DISPLAY
   ========================================== */

.nickname-display {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 8px 12px;
    background: rgba(249, 115, 22, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(249, 115, 22, 0.12);
}

.nickname-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
}

.nickname-name {
    font-weight: 700;
    font-size: 1rem;
    flex: 1;
    color: var(--text-main);
}

.nickname-edit-btn {
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.nickname-edit-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .nickname-edit-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ==========================================
   STREAK DOTS
   ========================================== */

.streak-box {
    margin: 10px 0;
    text-align: center;
}

.streak-header {
    font-weight: 700;
    color: #f97316;
    margin-bottom: 6px;
}

.streak-start {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 8px 0;
}

.streak-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.streak-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: background 0.2s;
}

.streak-dot.filled {
    background: #f97316;
}

.streak-dot.today {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

.streak-dot.today.filled {
    outline-color: #ea580c;
}

:root[data-theme="dark"] .streak-dot {
    background: #334155;
}

/* ==========================================
   SOCIAL PROOF
   ========================================== */

.social-proof {
    margin-top: 12px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.sp-friends {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sp-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-card);
    margin-left: -8px;
    flex-shrink: 0;
}

.sp-avatar:first-child {
    margin-left: 0;
}

.sp-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
}

.sp-more {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-left: 2px;
}

.sp-friends-text {
    margin-left: 4px;
}

/* ==========================================
   FRIEND CHALLENGE BOX
   ========================================== */

.friend-challenge-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid #f59e0b;
    transition: transform 0.15s, box-shadow 0.15s;
}

.friend-challenge-box:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.fcb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.fcb-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #92400e;
    line-height: 1.35;
}

:root[data-theme="dark"] .friend-challenge-box {
    background: linear-gradient(135deg, #451a03, #78350f);
    border-color: #92400e;
}

:root[data-theme="dark"] .fcb-text {
    color: #fde68a;
}

/* ==========================================
   QUIZ TOPIC BADGE
   ========================================== */

.question-topic {
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary-glow);
    letter-spacing: 0.02em;
}

:root[data-theme="dark"] .question-topic {
    background: rgba(249, 115, 22, 0.15);
    color: var(--primary-glow);
}

.question-text {
    font-size: 1.3rem;
    margin: 0.5rem 0 1.5rem;
    line-height: 1.5;
}

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

.stat-box .label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.stat-box .value {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
}

.result-box {
    margin: 2rem 0;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 auto 1rem;
}

.score-circle.fraction {
    font-size: 1.5rem;
}

.leaderboard-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: var(--bg-card);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 10px;
}

.leaderboard-item:nth-child(1),
.leaderboard-item:nth-child(2),
.leaderboard-item:nth-child(3) {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

footer {
    text-align: center;
    margin-top: 3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.player-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.rank {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary);
    min-width: 36px;
}

/* === Trophy icons for top 3 === */
.lb-trophy { display: inline-block; font-size: 22px; line-height: 1; min-width: 36px; text-align: center; }
.lb-trophy-1 { animation: trophy-gold 1.8s ease-in-out infinite; }
.lb-trophy-2 { animation: trophy-silver 2.1s ease-in-out infinite; }
.lb-trophy-3 { animation: trophy-bronze 2.4s ease-in-out infinite; }
@keyframes trophy-gold {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255,215,0,0.4)); transform: scale(1) rotate(-4deg); }
    50%       { filter: drop-shadow(0 0 10px rgba(255,215,0,1)); transform: scale(1.22) rotate(4deg); }
}
@keyframes trophy-silver {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(180,180,200,0.4)); transform: scale(1) rotate(-3deg); }
    50%       { filter: drop-shadow(0 0 9px rgba(200,200,230,1)); transform: scale(1.18) rotate(3deg); }
}
@keyframes trophy-bronze {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(180,100,30,0.4)); transform: scale(1) rotate(-3deg); }
    50%       { filter: drop-shadow(0 0 8px rgba(205,127,50,1)); transform: scale(1.15) rotate(3deg); }
}

.player-name {
    flex-grow: 1;
    text-align: left;
    font-weight: 600;
}

.player-score {
    font-weight: 700;
    color: var(--text-main);
}

.player-time {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 10px;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 30000;

    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.leaderboard-item.me {
    background: rgba(249, 115, 22, 0.08);
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.12);
}

.leaderboard-item.me .player-name {
    font-weight: 800;
    color: var(--primary-glow);
}

.leaderboard-item.me::after {
    content: "TY";
    font-size: 12px;
    font-weight: 700;
    background: var(--primary);
    color: white;
    padding: 4px 8px;
    border-radius: 999px;
    margin-left: auto;
}

.lb-meta-label {
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
}

.leaderboard-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.leaderboard-tabs button {
    padding: 8px 16px;
    border-radius: 999px;
    border: 2px solid var(--primary);
    background: white;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.leaderboard-tabs button.active {
    background: var(--primary);
    color: white;
}

.leaderboard-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}


/* === USER CARD === */

.user-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.0);
    z-index: 1000;

    display: flex;
    justify-content: flex-end;
    align-items: flex-start;

    padding: 70px 16px 0;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Na desktopu vycentrovat kartu nad herní oblastí */
@media (min-width: 640px) {
    .user-card-overlay {
        justify-content: center;
        align-items: flex-start;
        padding-top: 74px;
    }
}

.user-card-overlay.active {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.25);
}


.user-card {
    width: 300px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 1001;
    transform: translateY(-10px) scale(0.97);
    opacity: 0;
    transition:
        transform 0.25s cubic-bezier(.2, .8, .2, 1),
        opacity 0.2s ease;
}

.user-card-overlay.active .user-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}


.user-card-header {
    display: flex;
    gap: 12px;
    align-items: center;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
}

.user-name {
    font-weight: 600;
}

.user-email {
    font-size: 0.85em;
    color: #666;
}

.user-card-divider {
    height: 1px;
    background: #eee;
    margin: 12px 0;
}

.user-card-item {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.95em;
}

.user-card-item:hover {
    background: #f3f3f3;
}

.user-card-item.danger {
    color: #c62828;
}


/* === USER CARD END === */

/* === USER CARD SETTINGS === */

.user-card-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-card-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 6px;
}

.user-card-lang {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-card-lang label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.user-card-lang select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    font-size: 0.9rem;
    cursor: pointer;
}

/* === DARK MODE === */
:root[data-theme="dark"] {
    --bg-app: #1A1614;
    --bg-card: #2A221E;
    --bg-soft: #332822;
    --text-main: #FFFFFF;
    --text-secondary: #D1C9C5;
    --text-muted: #A89080;
}

/* === DARK MODE – USER CARD === */
:root[data-theme="dark"] .user-card {
    background: var(--bg-card);
    color: var(--text-main);
}

:root[data-theme="dark"] .user-email {
    color: var(--text-muted);
}

:root[data-theme="dark"] .user-card-title {
    color: var(--text-main);
}

:root[data-theme="dark"] .user-card-lang label {
    color: var(--text-muted);
}

:root[data-theme="dark"] .user-card-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .user-card-divider {
    background: rgba(255, 255, 255, 0.1);
}

/* === DARK MODE – LEADERBOARD === */
:root[data-theme="dark"] .leaderboard-item {
    background: #2A221E;
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .leaderboard-item:nth-child(1),
:root[data-theme="dark"] .leaderboard-item:nth-child(2),
:root[data-theme="dark"] .leaderboard-item:nth-child(3) {
    background: #2A221E;
}

:root[data-theme="dark"] .player-name,
:root[data-theme="dark"] .player-score {
    color: var(--text-main);
}

:root[data-theme="dark"] .rank {
    color: var(--primary-glow);
}

:root[data-theme="dark"] .leaderboard-item.me {
    background: rgba(249, 115, 22, 0.12);
    border-color: var(--primary);
}

:root[data-theme="dark"] .leaderboard-item.me .player-name {
    color: var(--primary-glow);
}

/* === DARK MODE – SIDEBAR === */
:root[data-theme="dark"] .sidebar {
    background: var(--bg-card);
}

:root[data-theme="dark"] .sidebar-nav a {
    color: var(--text-main);
}

:root[data-theme="dark"] .sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* === DARK MODE – USER CARD (READABILITY FIX) === */
:root[data-theme="dark"] .user-card {
    background: #2A221E;
    color: #e5e7eb;
}

:root[data-theme="dark"] .user-name {
    color: #f8fafc;
}

:root[data-theme="dark"] .user-email {
    color: #94a3b8;
}

:root[data-theme="dark"] .user-card-title {
    color: #f1f5f9;
}

:root[data-theme="dark"] .user-card-item {
    color: #e5e7eb;
}

:root[data-theme="dark"] .user-card-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* jazykový select v kartě */
:root[data-theme="dark"] .user-card-lang select {
    background: #2A221E;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.2);
}

/* === DARK MODE – TOPIC CARDS TEXT FIX === */
:root[data-theme="dark"] .topic-card {
    background: #2A221E;
}

:root[data-theme="dark"] .topic-name {
    color: #e5e7eb;
}

:root[data-theme="dark"] .topic-card.lock {
    background: #2A221E;
    opacity: 0.5;
}

:root[data-theme="dark"] .topic-card:hover {
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35);
}

/* === DARK MODE – LOGIN BUTTON === */
:root[data-theme="dark"] .login-btn {
    background: #2A221E;
    color: #e5e7eb;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .login-btn:hover {
    background: #2A221E;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.5);
}

/* === TOGGLE BUTTONS (USER CARD) === */
.user-card-item.toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-card-item .state {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.8;
}

/* aktivní stav */
.user-card-item.active {
    background: rgba(249, 115, 22, 0.12);
}

.user-card-item.active .state {
    color: #10b981;
    /* zelená */
}

/* dark mode doladění */
:root[data-theme="dark"] .user-card-item.active {
    background: rgba(249, 115, 22, 0.18);
}

/* === FRIENDS CARD === */

.friends-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.0);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.friends-card-overlay.active {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.25);
}

.friends-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition:
        transform 0.25s cubic-bezier(.2, .8, .2, 1),
        opacity 0.2s ease;
}

.friends-card-overlay.active .friends-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.friends-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.friends-card-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.friends-card-header .close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.friends-card-header .close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.8);
}

.friends-card-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0;
}

.friends-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
}

.friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.friend-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.friend-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.friend-info {
    flex: 1;
}

.friend-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 2px;
}

.friend-streak {
    font-size: 0.8rem;
    font-weight: 700;
    color: #f97316;
    margin-left: 6px;
}

.friend-status {
    font-size: 0.85rem;
    opacity: 0.6;
}

.friend-status.online {
    color: #10b981;
    opacity: 1;
}

/* Friend code box */
.friend-code-box {
    background: rgba(249, 115, 22, 0.1);
    border: 2px solid rgba(249, 115, 22, 0.25);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}

.friend-code-label {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 8px;
    font-weight: 600;
}

.friend-code-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    font-family: 'Courier New', monospace;
    letter-spacing: 4px;
}

/* Friend link box */
.friend-link-box {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.friend-link-box input {
    flex: 1;
    padding: 12px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.02);
}

.friend-link-box button {
    white-space: nowrap;
}

/* Dark mode */
:root[data-theme="dark"] .friends-card {
    background: #2A221E;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

:root[data-theme="dark"] .friends-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .friends-card-header .close-btn {
    color: rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] .friends-card-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

:root[data-theme="dark"] .friends-card-divider {
    background: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .friend-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .friend-code-box {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.35);
}

:root[data-theme="dark"] .friend-link-box input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

/* Friends button in header */
#friends-btn {
    margin-left: auto;
    margin-right: 8px;
}

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

/* === FRIEND DETAIL MODAL === */
.friend-detail-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.friend-detail-profile {
    text-align: center;
    margin-bottom: 20px;
}

.friend-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    margin-bottom: 10px;
}

.friend-detail-name {
    font-size: 1.25rem;
    font-weight: 700;
}

.friend-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.fd-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(249, 115, 22, 0.06);
    border-radius: 10px;
}

.fd-stat-icon {
    font-size: 1.3rem;
}

.fd-stat-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fd-stat-label {
    font-size: 0.9rem;
    opacity: 0.7;
}

.fd-stat-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
}

.friend-detail-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 16px 0;
}

.fd-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

.friend-detail-h2h {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.fd-h2h-item {
    text-align: center;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
    min-width: 70px;
}

.fd-h2h-value {
    font-size: 1.5rem;
    font-weight: 800;
}

.fd-h2h-label {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 2px;
}

.fd-h2h-item.fd-wins .fd-h2h-value {
    color: #10b981;
}

.fd-h2h-item.fd-losses .fd-h2h-value {
    color: #ef4444;
}

.btn-danger {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Dark mode - friend detail */
:root[data-theme="dark"] .fd-stat-item {
    background: rgba(249, 115, 22, 0.12);
}

:root[data-theme="dark"] .friend-detail-divider {
    background: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .fd-h2h-item {
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

:root[data-theme="dark"] .btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* === CHALLENGE SYSTEM === */

/* Notification badge */
.challenge-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#friends-btn {
    position: relative;
}

/* Challenges section in friends card */
.challenges-section {
    padding: 8px 12px;
}

.challenges-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ef4444;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.challenges-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.challenge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.challenge-item:hover {
    background: rgba(239, 68, 68, 0.12);
}

.challenge-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.challenge-item-info {
    flex: 1;
}

.challenge-item-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.challenge-item-topic {
    font-size: 0.8rem;
    opacity: 0.6;
}

.challenge-item-play {
    background: var(--primary);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.challenge-item-play:hover {
    background: var(--primary-hover);
}

.challenge-item-decline {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 1rem;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s, background 0.2s;
}

.challenge-item-decline:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.12);
}

/* Challenge topic selection grid */
.challenge-topics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ch-topic-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    background: rgba(0, 0, 0, 0.03);
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 600;
}

.ch-topic-btn:hover {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.06);
}

.ch-topic-btn .ch-topic-icon {
    font-size: 1.8rem;
}

.ch-opponent-info {
    text-align: center;
    margin-bottom: 12px;
    opacity: 0.7;
}

/* Challenge result modal */
.challenge-result-content {
    padding: 20px;
    text-align: center;
}

.ch-result-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.ch-result-player {
    text-align: center;
    flex: 1;
}

.ch-result-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 6px;
}

.ch-result-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.ch-result-score {
    font-size: 1.5rem;
    font-weight: 800;
}

.ch-result-time {
    font-size: 0.8rem;
    opacity: 0.6;
}

.ch-result-vs-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary);
}

.ch-result-winner {
    color: #10b981;
}

.ch-result-loser {
    color: #ef4444;
}

.ch-result-message {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(249, 115, 22, 0.08);
}

.ch-result-waiting {
    padding: 20px;
    opacity: 0.6;
    font-style: italic;
}

/* Dark mode - challenge */
:root[data-theme="dark"] .challenge-item {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

:root[data-theme="dark"] .challenge-item:hover {
    background: rgba(239, 68, 68, 0.18);
}

:root[data-theme="dark"] .ch-topic-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .ch-topic-btn:hover {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.12);
}

:root[data-theme="dark"] .ch-result-message {
    background: rgba(249, 115, 22, 0.12);
}

/* === ONLINE STATUS === */
.friend-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.friend-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid white;
}

.friend-online-dot.online {
    background: #10b981;
}

:root[data-theme="dark"] .friend-online-dot {
    border-color: #2A221E;
}

/* === CHALLENGE HISTORY === */
.fd-challenge-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.fd-history-empty {
    text-align: center;
    opacity: 0.5;
    padding: 8px;
    font-size: 0.85rem;
}

.fd-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.fd-history-icon {
    font-size: 1.2rem;
}

.fd-history-scores {
    flex: 1;
    text-align: center;
}

.fd-history-result {
    font-size: 1.1rem;
}

.fd-history-win {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.fd-history-loss {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.fd-history-draw {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .fd-history-win {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

:root[data-theme="dark"] .fd-history-loss {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

:root[data-theme="dark"] .fd-history-draw {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* === REPORT QUESTION === */
.report-question-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 6px 0 0;
    margin-top: 4px;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    display: block;
    width: 100%;
    text-align: right;
}

.report-question-btn:hover {
    opacity: 1;
    color: #ef4444;
}

/* Report overlay — vlastní třídy, nezávislé na friends-card systému */
.report-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.report-overlay.open {
    display: flex;
}

.report-dialog {
    background: var(--bg-card, white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

:root[data-theme="dark"] .report-dialog {
    background: #1e293b;
}

.report-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .report-dialog-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.report-dialog-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.report-modal-body {
    padding: 20px;
}

.report-question-preview {
    font-size: 0.9rem;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 3px solid var(--primary);
    margin-bottom: 12px;
    line-height: 1.4;
}

:root[data-theme="dark"] .report-question-preview {
    background: #0f172a;
}

.report-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 90px;
    box-sizing: border-box;
}

:root[data-theme="dark"] .report-textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

.report-buttons-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.report-status-msg {
    margin-top: 10px;
    font-size: 0.9rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================
   ORANGE DARK THEME — GLOBAL OVERRIDES
   ========================================== */

/* --- Login button --- */
.login-btn {
    background-color: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.login-btn:hover {
    box-shadow: 0 0 0 1px var(--primary-glow), 0 0 12px rgba(249, 115, 22, 0.2);
}

/* --- Lang select --- */
.lang-select {
    background-color: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    box-shadow: none;
}

/* --- Inputs --- */
input[type="text"] {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}
input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
input[type="text"]::placeholder {
    color: var(--text-muted);
}

/* --- Progress bar track --- */
.progress-bar {
    background: rgba(255, 255, 255, 0.08);
}

/* --- Progress fill — orange gradient --- */
.progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--primary-glow));
}

/* --- Answer buttons --- */
.answer-btn {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}
@media (hover: hover) {
    .answer-btn:hover {
        background: var(--bg-soft);
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
    }
}
.answer-btn:active {
    background: var(--bg-soft);
    border-color: var(--primary);
}

/* Správná/špatná odpověď — musí vždy vyhrát nad :active, :focus i :hover na všech platformách */
.answer-btn.correct,
.answer-btn.correct:active,
.answer-btn.correct:focus,
.answer-btn.correct:hover,
.answer-btn.correct:disabled {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: white !important;
    box-shadow: none;
}
.answer-btn.wrong,
.answer-btn.wrong:active,
.answer-btn.wrong:focus,
.answer-btn.wrong:hover,
.answer-btn.wrong:disabled {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
    box-shadow: none;
}
/* Neutrální disabled tlačítka (ostatní volby) — bez zvýraznění */
.answer-btn:disabled:not(.correct):not(.wrong) {
    opacity: 0.55;
    cursor: default;
    background: var(--bg-card) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* --- Primary button — orange gradient + glow --- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
    transition: all 0.2s ease;
    border-radius: 14px;
}
@media (hover: hover) {
    .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-glow) 0%, var(--primary) 100%);
        box-shadow: 0 6px 28px rgba(249, 115, 22, 0.55), 0 0 0 1px rgba(251, 146, 60, 0.4);
        transform: translateY(-1px);
    }
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

/* --- Secondary button --- */
.btn-secondary {
    background: var(--bg-soft);
    color: var(--text-main);
    border: 1.5px solid var(--primary);
    border-radius: 14px;
}
@media (hover: hover) {
    .btn-secondary:hover {
        background: var(--bg-soft);
        border-color: var(--primary-glow);
        box-shadow: 0 0 16px rgba(224, 96, 16, 0.35), 0 0 0 1px var(--primary-glow);
        transform: translateY(-1px);
    }
}
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Daily card — subtle orange tint --- */
.daily-card {
    background: linear-gradient(135deg, var(--bg-card) 70%, rgba(249, 115, 22, 0.06) 100%);
    border: 1.5px solid rgba(249, 115, 22, 0.3);
}
.daily-badge {
    background: var(--primary);
    color: white;
}

/* --- Topic cards --- */
.topic-card {
    background: var(--bg-card);
    border: 1.5px solid var(--primary);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
@media (hover: hover) {
    .topic-card:hover {
        transform: translateY(-3px);
        border-color: var(--primary);
        box-shadow: 0 4px 20px rgba(249, 115, 22, 0.2), 0 0 0 1px var(--primary);
    }
}
.topic-card.lock {
    background: var(--bg-card);
    opacity: 0.45;
}
.topic-name {
    color: var(--text-main);
}

/* --- Nickname display --- */
.nickname-display {
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* --- Streak dots --- */
.streak-dot {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Score circle --- */
.score-circle {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    box-shadow: 0 0 32px rgba(249, 115, 22, 0.35);
}

/* --- Sidebar --- */
.sidebar {
    background: var(--bg-card);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: rgba(249, 115, 22, 0.1);
    color: var(--primary);
}

/* --- Leaderboard items --- */
.leaderboard-item {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    gap: 12px;
}
.leaderboard-item:nth-child(1),
.leaderboard-item:nth-child(2),
.leaderboard-item:nth-child(3) {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(251, 146, 60, 0.05));
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.leaderboard-item.me {
    background: rgba(249, 115, 22, 0.1);
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}
.leaderboard-item.me .player-name {
    color: var(--primary-glow);
}
.leaderboard-item.me::after {
    background: var(--primary);
}

/* --- Leaderboard tabs --- */
.leaderboard-tabs button {
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
}
.leaderboard-tabs button.active {
    background: var(--primary);
    color: white;
}

/* --- Question topic badge --- */
.question-topic {
    background: rgba(249, 115, 22, 0.12);
    color: var(--primary-glow);
}

/* --- User card --- */
.user-avatar {
    background: var(--bg-soft);
}
.user-email {
    color: var(--text-muted);
}
.user-card-divider {
    background: rgba(255, 255, 255, 0.08);
}
.user-card-item {
    color: var(--text-main);
}
.user-card-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.user-card-item.danger {
    color: #f87171;
}
.user-card-item.active {
    background: rgba(249, 115, 22, 0.12);
}
.user-card-item.active .state {
    color: var(--success);
}
.user-card-title {
    color: var(--text-muted);
}
.user-card-lang label {
    color: var(--text-muted);
}
.user-card-lang select {
    background: var(--bg-soft);
    color: var(--text-main);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* --- Friends card --- */
.friends-card {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.friends-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.friends-card-header .close-btn {
    color: var(--text-muted);
}
.friends-card-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}
.friends-card-divider {
    background: rgba(255, 255, 255, 0.08);
}
.friend-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.friend-name {
    color: var(--text-main);
}

/* --- Friend code --- */
.friend-code-box {
    background: rgba(249, 115, 22, 0.08);
    border: 2px solid rgba(249, 115, 22, 0.25);
}
.friend-code-value {
    color: var(--primary);
}
.friend-link-box input {
    background: var(--bg-soft);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

/* --- Friend detail modal --- */
.friend-detail-avatar {
    border: 3px solid var(--primary);
}
.fd-stat-item {
    background: rgba(249, 115, 22, 0.06);
}
.fd-stat-value {
    color: var(--primary);
}
.friend-detail-divider {
    background: rgba(255, 255, 255, 0.08);
}
.fd-h2h-item {
    background: rgba(255, 255, 255, 0.04);
}
.fd-history-draw {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Challenge system --- */
.challenge-item-play {
    background: var(--primary);
    color: white;
}
.challenge-item-play:hover {
    background: var(--primary-hover);
}
.ch-topic-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}
.ch-topic-btn:hover {
    border-color: var(--primary);
    background: rgba(249, 115, 22, 0.08);
}
.ch-result-vs-text {
    color: var(--primary);
}
.ch-result-message {
    background: rgba(249, 115, 22, 0.08);
}

/* --- Friend challenge box --- */
.friend-challenge-box {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(253, 186, 116, 0.06));
    border: 1px solid rgba(249, 115, 22, 0.3);
}
.fcb-text {
    color: var(--accent);
}

/* --- Online dot --- */
.friend-online-dot {
    border: 2px solid var(--bg-card);
}

/* --- Report modal --- */
.report-dialog {
    background: var(--bg-card);
    color: var(--text-main);
}
.report-dialog-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.report-question-preview {
    background: var(--bg-soft);
    border-left: 3px solid var(--primary);
    color: var(--text-main);
}
.report-textarea {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}
.report-textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* --- Section title --- */
.section-title {
    color: var(--text-main);
    font-weight: 700;
    margin-top: 20px;
}

/* --- Footer --- */
footer {
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 16px;
}

/* ==========================================
   GLOW PULSE ANIMATION (for start button)
   ========================================== */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2); }
    50% { box-shadow: 0 4px 20px rgba(249, 115, 22, 0.38); }
}
.btn-lg {
    animation: glow-pulse 3.5s ease-in-out infinite;
    border-radius: 16px;
}
.btn-lg:hover {
    animation: none;
}

/* ==========================================
   DARK OVERRIDES (ensure dark mode
   stays consistent with our new theme)
   ========================================== */
:root[data-theme="dark"] .login-btn {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .login-btn:hover {
    background: var(--bg-card);
    box-shadow: 0 0 0 1px var(--primary-glow), 0 0 12px rgba(249, 115, 22, 0.2);
}
:root[data-theme="dark"] .topic-card:hover {
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.2), 0 0 0 1px var(--primary);
}
:root[data-theme="dark"] .leaderboard-item.me {
    background: rgba(249, 115, 22, 0.1);
    border-color: var(--primary);
}
:root[data-theme="dark"] .leaderboard-item.me .player-name {
    color: var(--primary-glow);
}
:root[data-theme="dark"] .rank {
    color: var(--primary);
}
:root[data-theme="dark"] .user-card-item.active {
    background: rgba(249, 115, 22, 0.15);
}

/* ==========================================
   XP BAR — main screen (inside daily card)
   ========================================== */
.xp-bar-section {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 12px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.xp-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}
.xp-bar-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.xp-bar-level {
    font-size: 12px;
    color: var(--text-muted);
}
.xp-bar-track {
    height: 7px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    overflow: hidden;
}
.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-glow));
    border-radius: 99px;
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 4px;
}
.xp-bar-numbers {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}

/* ==========================================
   XP BAR — user profile card
   ========================================== */
.uc-xp-section {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 16px 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.uc-xp-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}
.uc-level-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.uc-level-num {
    font-size: 12px;
    color: var(--text-muted);
}
.uc-xp-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    overflow: hidden;
}
.uc-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-glow));
    border-radius: 99px;
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 4px;
}
.uc-xp-numbers {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}

/* ==========================================
   LEVEL-UP TOAST
   ========================================== */
.levelup-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    background: linear-gradient(135deg, var(--primary), var(--primary-glow));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 50px;
    box-shadow: 0 6px 28px rgba(249, 115, 22, 0.55);
    z-index: 9999;
    opacity: 0;
    animation: toast-in 0.4s ease 0s forwards, toast-out 0.4s ease 3.1s forwards;
    white-space: nowrap;
    pointer-events: none;
}
@keyframes toast-in {
    from { transform: translateX(-50%) translateY(-24px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateX(-50%) translateY(0);     opacity: 1; }
    to   { transform: translateX(-50%) translateY(-24px); opacity: 0; }
}

/* ==========================================
   RESULT XP SUMMARY
   ========================================== */
.result-xp-summary {
    display: inline-block;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: var(--accent);
    font-weight: 700;
    font-size: 15px;
    padding: 8px 20px;
    border-radius: 50px;
    margin-top: 12px;
}

/* ==========================================
   IN-APP TOAST NOTIFIKACE
   ========================================== */
.inapp-toast {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    background: #1E293B;
    border: 1.5px solid var(--primary);
    border-radius: 14px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 16px rgba(194,86,10,0.2);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
    pointer-events: none;
}
.inapp-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================
   LEVEL FRAMES (on avatars in leaderboard etc.)
   ========================================== */
.lv-frame-silver {
    outline: 2.5px solid #9CA3AF;
    outline-offset: 2px;
    box-shadow: 0 0 8px rgba(156,163,175,0.4);
}
.lv-frame-gold {
    outline: 2.5px solid #FBBF24;
    outline-offset: 2px;
    box-shadow: 0 0 14px rgba(251,191,36,0.55);
}
.lv-frame-fire {
    outline: 2.5px solid #F97316;
    outline-offset: 2px;
    box-shadow: 0 0 14px rgba(249,115,22,0.6), 0 0 28px rgba(239,68,68,0.25);
    animation: frame-fire 2.2s ease-in-out infinite;
}
@keyframes frame-fire {
    0%, 100% { box-shadow: 0 0 14px rgba(249,115,22,0.6), 0 0 28px rgba(239,68,68,0.2); }
    50%       { box-shadow: 0 0 20px rgba(249,115,22,0.9), 0 0 40px rgba(239,68,68,0.4); }
}
.lv-frame-ice {
    outline: 2.5px solid #38BDF8;
    outline-offset: 2px;
    box-shadow: 0 0 14px rgba(56,189,248,0.55), 0 0 28px rgba(186,230,253,0.2);
    animation: frame-ice 3s ease-in-out infinite;
}
@keyframes frame-ice {
    0%, 100% { box-shadow: 0 0 12px rgba(56,189,248,0.45); }
    50%       { box-shadow: 0 0 22px rgba(56,189,248,0.8), 0 0 36px rgba(186,230,253,0.3); }
}
.lv-frame-amethyst {
    outline: 2.5px solid #A855F7;
    outline-offset: 2px;
    box-shadow: 0 0 14px rgba(168,85,247,0.6), 0 0 28px rgba(168,85,247,0.25);
    animation: frame-amethyst 2.5s ease-in-out infinite;
}
@keyframes frame-amethyst {
    0%, 100% { box-shadow: 0 0 12px rgba(168,85,247,0.5); }
    50%       { box-shadow: 0 0 22px rgba(168,85,247,0.9), 0 0 40px rgba(192,132,252,0.35); }
}
.lv-frame-legend {
    outline: 2.5px solid #F97316;
    outline-offset: 2px;
    animation: frame-legend 3s linear infinite;
}
@keyframes frame-legend {
    0%   { outline-color: #F97316; box-shadow: 0 0 16px rgba(249,115,22,0.7); }
    25%  { outline-color: #FBBF24; box-shadow: 0 0 16px rgba(251,191,36,0.7); }
    50%  { outline-color: #10B981; box-shadow: 0 0 16px rgba(16,185,129,0.7); }
    75%  { outline-color: #6366F1; box-shadow: 0 0 16px rgba(99,102,241,0.7); }
    100% { outline-color: #F97316; box-shadow: 0 0 16px rgba(249,115,22,0.7); }
}
/* Stará třída glow — ponechána jako alias */
.lv-frame-glow {
    outline: 2.5px solid var(--primary-glow);
    outline-offset: 2px;
    animation: frame-fire 2.2s ease-in-out infinite;
}
@keyframes frame-glow-pulse {
    0%,  100% { box-shadow: 0 0 10px rgba(249, 115, 22, 0.45); }
    50%       { box-shadow: 0 0 22px rgba(249, 115, 22, 0.8);  }
}

/* ==========================================
   HOW TO PLAY SCREEN
   ========================================== */
.howtoplay-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    text-align: left;
}
.howtoplay-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.howtoplay-icon {
    font-size: 26px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    padding-top: 1px;
}
.howtoplay-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 4px;
}
.howtoplay-text p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ==========================================
   LOGIN BUTTON — logged-in state
   ========================================== */
.login-btn.logged-in {
    border: 1.5px solid var(--primary);
    border-radius: 20px;
    padding: 5px 13px;
    color: var(--primary-glow);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 0 8px rgba(224, 96, 16, 0.18);
    transition: background 0.2s, box-shadow 0.2s;
}
.login-btn.logged-in:hover {
    background: rgba(194, 86, 10, 0.12);
    box-shadow: 0 0 16px rgba(224, 96, 16, 0.4);
}

/* ==========================================
   AD BANNERS
   ========================================== */
.ad-banner {
    position: relative;
    border-radius: 12px;
    border: 1.5px solid rgba(194,86,10,0.45);
    background: rgba(194,86,10,0.13);
    overflow: hidden;
    width: 100%;
    box-shadow: 0 2px 12px rgba(194,86,10,0.08);
}
/* 320×80 — hlavní obrazovka (mezi kartou a tématy) */
.ad-mobile {
    min-height: 64px;
    margin: 14px 0 18px;
    display: flex;
    align-items: center;
}
/* 300×160 — result screen */
.ad-rect {
    min-height: 120px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-tip-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 12px;
    width: 100%;
}
.ad-rect .ad-tip-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 20px 16px;
}
.ad-tip-icon {
    font-size: 26px;
    flex-shrink: 0;
}
.ad-rect .ad-tip-icon { font-size: 32px; }
.ad-tip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ad-tip-text strong {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 700;
}
.ad-tip-text span {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.ad-label {
    position: absolute;
    top: 3px;
    right: 6px;
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.55;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Druhý pokus tlačítko */
.btn-second-chance {
    border-color: #FBBF24 !important;
    color: #FBBF24 !important;
}
.btn-second-chance:hover {
    background: rgba(251,191,36,0.1) !important;
    box-shadow: 0 0 14px rgba(251,191,36,0.25) !important;
}

/* ==========================================
   OUTSTREAM AD MODAL
   ========================================== */
.outstream-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.outstream-overlay.hidden { display: none; }
.outstream-modal {
    background: var(--bg-card);
    border: 1.5px solid rgba(194,86,10,0.3);
    border-radius: 20px;
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,0.7);
}
.outstream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.outstream-timer-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}
.outstream-timer-label b {
    color: var(--primary-glow);
}
.outstream-ad-area {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
}
.outstream-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
}
.outstream-placeholder-icon {
    font-size: 48px;
    animation: pulse-op 2s ease-in-out infinite;
}
@keyframes pulse-op {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.outstream-placeholder-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.outstream-placeholder-text strong {
    font-size: 16px;
    color: var(--primary-glow);
    font-weight: 800;
}
.outstream-placeholder-text span {
    font-size: 13px;
    color: var(--text-secondary);
}
.outstream-footer {
    padding: 12px 16px 16px;
    display: flex;
    justify-content: flex-end;
}
.outstream-footer .btn {
    font-size: 14px;
    padding: 11px 20px;
}
.outstream-footer .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================
   USER AVATAR WRAP (profile card)
   ========================================== */
.user-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.change-avatar-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-card);
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    line-height: 1;
    padding: 0;
}
.change-avatar-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

/* ==========================================
   AVATAR PICKER MODAL
   ========================================== */
.avatar-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.avatar-picker-overlay.hidden { display: none; }
.avatar-picker-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
}
.avatar-picker-modal {
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border: 1.5px solid rgba(194,86,10,0.35);
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,0.6);
}
.avatar-picker-scroll-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}
.avatar-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 1px solid rgba(194,86,10,0.15);
    flex-shrink: 0;
    background: var(--bg-card);
}
.avatar-picker-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.avatar-picker-close-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-main);
}
.avatar-picker-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding: 10px 16px 14px;
    scrollbar-width: none;
}
.avatar-picker-grid::-webkit-scrollbar { display: none; }
.avatar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 12px;
    padding: 6px 4px 4px;
    border: 2px solid transparent;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
    background: none;
    flex: 0 0 68px;
    scroll-snap-align: start;
}
.avatar-option:hover {
    background: rgba(194,86,10,0.12);
    transform: scale(1.06);
}
.avatar-option.selected {
    border-color: var(--primary);
    background: rgba(194,86,10,0.15);
    box-shadow: 0 0 10px rgba(194,86,10,0.3);
}
.avatar-option img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
}
.avatar-option-name {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.avatar-option.selected .avatar-option-name {
    color: var(--primary-glow);
}
.avatar-picker-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 16px 6px;
}
.avatar-picker-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 8px 16px;
}

/* Frame picker — horizontal scroll */
.frame-picker-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding: 6px 16px 14px;
    scrollbar-width: none;
}
.frame-picker-grid::-webkit-scrollbar { display: none; }
.frame-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 10px;
    padding: 5px 2px 4px;
    border: 2px solid transparent;
    background: none;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
    position: relative;
    flex: 0 0 58px;
    scroll-snap-align: start;
}
.frame-option:hover:not(.locked) {
    background: rgba(194,86,10,0.1);
    transform: scale(1.06);
}
.frame-option.selected {
    border-color: var(--primary);
    background: rgba(194,86,10,0.15);
}
.frame-option.locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.frame-preview {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.frame-preview-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
}
.frame-lock {
    font-size: 14px;
    line-height: 1;
}
.frame-option-name {
    font-size: 8px;
    color: var(--text-muted);
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2px;
}
.frame-option.selected .frame-option-name {
    color: var(--primary-glow);
}
.frame-req {
    font-size: 8px;
    color: var(--text-muted);
    opacity: 0.7;
}

.avatar-picker-actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px 16px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-top: 1px solid rgba(194,86,10,0.15);
}
.avatar-picker-actions .btn {
    flex: 1;
    font-size: 13px;
    padding: 11px 8px;
}

/* ==========================================
   SHARE CARD MODAL
   ========================================== */
.share-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.share-overlay.hidden { display: none; }
.share-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
}
.share-modal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}

/* --- The card itself --- */
.share-card {
    width: 100%;
    background: #1A1614;
    border-radius: 24px;
    overflow: hidden;
    border: 1.5px solid rgba(194, 86, 10, 0.35);
    box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 80px rgba(194,86,10,0.08);
    position: relative;
}
.share-card-topbar {
    height: 3px;
    background: linear-gradient(90deg, transparent, #C2560A 30%, #F97316 60%, transparent);
}
.share-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 12px;
    border-bottom: 1px solid rgba(194,86,10,0.15);
}
.share-card-logo {
    font-family: 'Dancing Script', cursive;
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(90deg, #C2560A 0%, #F97316 45%, #FDBA74 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.share-card-badge {
    background: rgba(194,86,10,0.18);
    border: 1px solid rgba(249,115,22,0.35);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #F97316;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* === HERO SCORE (replaces SVG ring) === */
.share-hero-block {
    padding: 22px 24px 6px;
    text-align: center;
}
.share-hero-pct-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1;
}
.share-hero-num {
    font-size: 72px;
    font-weight: 900;
    color: #F8FAFC;
    line-height: 1;
    letter-spacing: -2px;
    font-family: 'Inter', sans-serif;
}
.share-hero-unit {
    font-size: 32px;
    font-weight: 700;
    color: #FB923C;
    line-height: 1;
}
.share-hero-sub {
    font-size: 12px;
    color: #A89080;
    letter-spacing: 0.5px;
    margin-top: 4px;
    text-transform: uppercase;
}

/* Stats row */
.share-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 14px 20px 18px;
}
.share-stat {
    text-align: center;
    flex: 1;
}
.share-stat-sep {
    width: 1px;
    height: 32px;
    background: rgba(194,86,10,0.25);
    flex-shrink: 0;
}
.share-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
}
.share-stat-val.green  { color: #22C55E; }
.share-stat-val.red    { color: #F87171; }
.share-stat-val.orange { color: #FDBA74; }
.share-stat-lbl {
    font-size: 10px;
    color: #A89080;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;
}

/* Level-up banner */
.share-levelup-banner {
    background: linear-gradient(135deg, rgba(194,86,10,0.22), rgba(249,115,22,0.10));
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: 12px;
    margin: 0 14px 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.share-levelup-banner.hidden { display: none; }
.share-levelup-icon { font-size: 22px; }
.share-levelup-main {
    font-size: 13px;
    font-weight: 800;
    color: #FDBA74;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.share-levelup-sub {
    font-size: 11px;
    color: #D1C9C5;
    margin-top: 2px;
}
.share-levelup-sub strong { color: #FDBA74; }

/* Divider */
.share-card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(194,86,10,0.25) 50%, transparent);
    margin: 0 22px;
}

/* XP block */
.share-xp-block { padding: 14px 22px 16px; }
.share-xp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.share-xp-left { display: flex; align-items: center; gap: 8px; }
.share-level-badge {
    background: linear-gradient(135deg, #C2560A, #F97316);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 10px;
    padding: 3px 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.share-xp-title {
    font-size: 13px;
    font-weight: 700;
    color: #FDBA74;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.share-xp-gained {
    font-size: 15px;
    font-weight: 800;
    color: #F97316;
}
.share-xp-track {
    height: 8px;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.share-xp-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #C2560A, #F97316, #FDBA74);
    width: 0%;
    transition: width 0.8s ease;
}
.share-xp-nums {
    font-size: 11px;
    color: #A89080;
    text-align: right;
}

/* Footer */
.share-card-footer {
    background: rgba(194,86,10,0.07);
    border-top: 1px solid rgba(194,86,10,0.15);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.share-player-info { display: flex; align-items: center; gap: 10px; }
.share-player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C2560A, #F97316);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: white;
    border: 2px solid rgba(249,115,22,0.4);
    overflow: hidden;
    flex-shrink: 0;
}
.share-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.share-player-name {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
}
.share-player-sub { font-size: 11px; color: #A89080; margin-top: 1px; }
.share-card-cta {
    font-size: 11px;
    color: rgba(194,86,10,0.7);
    font-weight: 600;
}

/* Action buttons */
.share-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* ==========================================
   QUIEASY+ VIP
   ========================================== */

/* --- VIP button in user-card --- */
.user-card-vip-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1a1200 0%, #2a1f00 100%);
    border: 1.5px solid #FFD700;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    color: #FFD700;
    font-weight: 700;
    font-size: 0.975rem;
    transition: all 0.2s ease;
    margin-bottom: 6px;
    text-align: left;
    gap: 12px;
}
.user-card-vip-btn:hover {
    background: linear-gradient(135deg, #2a1e00 0%, #3d2d00 100%);
    box-shadow: 0 0 22px rgba(255,215,0,0.3);
    transform: translateY(-1px);
}
.user-card-vip-btn .vip-btn-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-card-vip-btn .vip-btn-icon { font-size: 20px; }
.user-card-vip-btn .vip-btn-label { font-weight: 800; }
.user-card-vip-btn .vip-btn-sub {
    font-size: 11px;
    color: rgba(255,215,0,0.6);
    font-weight: 400;
    display: block;
    margin-top: 1px;
}
.vip-badge-pill {
    background: #FFD700;
    color: #0D0800;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.user-card-vip-btn.vip-active {
    border-color: #FFD700;
    background: linear-gradient(135deg, #1a1200 0%, #2d2000 100%);
}
.user-card-vip-btn.vip-active .vip-badge-pill {
    background: linear-gradient(90deg, #FFD700, #FFA000);
}

/* --- VIP crown in header (shows when VIP active) --- */
.vip-crown-header {
    font-size: 18px;
    line-height: 1;
    display: none;
    cursor: pointer;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.7));
    animation: vip-crown-float 3s ease-in-out infinite;
}
.vip-crown-header.visible { display: block; }
@keyframes vip-crown-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-3px); }
}

/* --- VIP modal overlay --- */
.vip-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.vip-overlay.hidden { display: none; }

.vip-modal {
    background: var(--bg-card);
    border-radius: 24px;
    width: 100%;
    max-width: 390px;
    overflow: hidden;
    box-shadow: 0 8px 60px rgba(255,215,0,0.18), 0 0 0 1.5px rgba(255,215,0,0.35);
    max-height: 90vh;
    overflow-y: auto;
}

.vip-modal-header {
    background: linear-gradient(135deg, #1a1200 0%, #2d2200 50%, #1a1200 100%);
    padding: 28px 24px 22px;
    text-align: center;
    border-bottom: 1px solid rgba(255,215,0,0.12);
    position: relative;
}
.vip-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255,215,0,0.55);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}
.vip-modal-close:hover { color: #FFD700; }
.vip-modal-icon { font-size: 52px; display: block; margin-bottom: 8px; }
.vip-modal-title {
    font-size: 2rem;
    font-weight: 900;
    color: #FFD700;
    letter-spacing: -0.5px;
    line-height: 1;
}
.vip-modal-subtitle {
    font-size: 0.85rem;
    color: rgba(255,215,0,0.55);
    margin-top: 5px;
}

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

.vip-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vip-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-main);
}
.vip-feature-icon { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; margin-top: 1px; }
.vip-feature-text { display: flex; flex-direction: column; gap: 1px; }
.vip-feature-text strong { font-weight: 700; color: var(--text-main); }
.vip-feature-text small  { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.vip-modal-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 16px 0;
}

/* Code activation section */
.vip-code-section { margin-bottom: 4px; }
.vip-code-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}
.vip-code-row { display: flex; gap: 8px; }
.vip-code-input {
    flex: 1;
    background: var(--bg-soft);
    border: 1.5px solid rgba(255,215,0,0.22);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s;
}
.vip-code-input:focus { border-color: rgba(255,215,0,0.55); }
.vip-code-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.45; }
.vip-code-btn {
    background: #FFD700;
    color: #0D0800;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 900;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
}
.vip-code-btn:hover   { background: #FFF176; transform: translateY(-1px); }
.vip-code-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.vip-code-status {
    margin-top: 8px;
    font-size: 12px;
    min-height: 18px;
    font-weight: 600;
}
.vip-code-status.ok  { color: #22C55E; }
.vip-code-status.err { color: #EF4444; }

/* Active VIP notice (shown when already VIP) */
.vip-active-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,215,0,0.07);
    border: 1.5px solid rgba(255,215,0,0.25);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.875rem;
    color: #FFD700;
    font-weight: 700;
}
.vip-active-notice .vai-icon { font-size: 24px; }

/* VIP section label in avatar picker */
.avatar-picker-vip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
.avatar-picker-vip-cta {
    font-size: 11px;
    background: rgba(255,215,0,0.12);
    color: #FFD700;
    border: 1px solid rgba(255,215,0,0.3);
    padding: 2px 9px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.avatar-picker-vip-cta:hover { background: rgba(255,215,0,0.22); }

/* VIP locked avatar */
.avatar-option.vip-locked {
    opacity: 0.45;
    cursor: not-allowed;
    position: relative;
}
.avatar-option.vip-locked::after {
    content: '⭐';
    position: absolute;
    bottom: 18px;
    right: 2px;
    font-size: 11px;
    background: rgba(0,0,0,0.75);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* VIP frame req badge */
.frame-req.vip-req {
    color: #FFD700;
    background: rgba(255,215,0,0.12);
    border-color: rgba(255,215,0,0.3);
}

/* ==========================================
   VIP EXCLUSIVE FRAMES
   ========================================== */

/* 1. Neon — cyan/magenta flicker */
.lv-frame-vip-neon {
    animation: vip-neon 1.6s ease-in-out infinite !important;
}
@keyframes vip-neon {
    0%, 100% { box-shadow: 0 0 0 3px #00FFFF, 0 0 0 5px #FF00FF, 0 0 18px #00FFFF, 0 0 32px rgba(0,255,255,0.25); }
    50%       { box-shadow: 0 0 0 3px #FF00FF, 0 0 0 5px #00FFFF, 0 0 18px #FF00FF, 0 0 32px rgba(255,0,255,0.25); }
}

/* 2. Kosmický — purple/teal color cycle */
.lv-frame-vip-cosmic {
    animation: vip-cosmic 4s ease-in-out infinite !important;
}
@keyframes vip-cosmic {
    0%   { box-shadow: 0 0 0 3px #7C4DFF, 0 0 22px rgba(124,77,255,0.55); }
    33%  { box-shadow: 0 0 0 3px #E040FB, 0 0 22px rgba(224,64,251,0.55); }
    66%  { box-shadow: 0 0 0 3px #00BCD4, 0 0 22px rgba(0,188,212,0.55); }
    100% { box-shadow: 0 0 0 3px #7C4DFF, 0 0 22px rgba(124,77,255,0.55); }
}

/* 3. Drak — intense fire rage */
.lv-frame-vip-dragon {
    animation: vip-dragon 0.55s ease-in-out infinite alternate !important;
}
@keyframes vip-dragon {
    from { box-shadow: 0 0 0 3px #FF4500, 0 0 18px #FF4500, 0 0 32px rgba(255,69,0,0.4); }
    to   { box-shadow: 0 0 0 4px #FFD700, 0 0 26px #FF8C00, 0 0 44px rgba(255,140,0,0.5); }
}

/* 4. Aurora — zeleno-tyrkysovo-fialová polární záře */
.lv-frame-vip-aurora {
    animation: vip-aurora 3s ease-in-out infinite !important;
}
@keyframes vip-aurora {
    0%   { box-shadow: 0 0 0 3px #00FF87, 0 0 20px rgba(0,255,135,0.55); }
    33%  { box-shadow: 0 0 0 3px #60EFFF, 0 0 20px rgba(96,239,255,0.55); }
    66%  { box-shadow: 0 0 0 3px #7B2FBE, 0 0 20px rgba(123,47,190,0.55); }
    100% { box-shadow: 0 0 0 3px #00FF87, 0 0 20px rgba(0,255,135,0.55); }
}

/* 5. Plasma — kyselá zelená elektřina */
.lv-frame-vip-plasma {
    animation: vip-plasma 0.8s ease-in-out infinite alternate !important;
}
@keyframes vip-plasma {
    from { box-shadow: 0 0 0 3px #39FF14, 0 0 20px #39FF14, 0 0 40px rgba(57,255,20,0.3); }
    to   { box-shadow: 0 0 0 4px #B8FF00, 0 0 30px #B8FF00, 0 0 55px rgba(184,255,0,0.4); }
}

/* 6. Stín — tmavě fialový / mystický */
.lv-frame-vip-shadow {
    animation: vip-shadow 2s ease-in-out infinite !important;
}
@keyframes vip-shadow {
    0%, 100% { box-shadow: 0 0 0 3px #6B21A8, 0 0 18px rgba(107,33,168,0.7); }
    50%       { box-shadow: 0 0 0 3px #1E1B4B, 0 0 26px rgba(30,27,75,0.9);  }
}

/* 7. Sluneční — zlatý sluneční výtrysk */
.lv-frame-vip-solar {
    animation: vip-solar 1.2s ease-in-out infinite alternate !important;
}
@keyframes vip-solar {
    from { box-shadow: 0 0 0 3px #FFD700, 0 0 20px #FFA500, 0 0 40px rgba(255,165,0,0.35); }
    to   { box-shadow: 0 0 0 4px #FFEC00, 0 0 32px #FFD700, 0 0 55px rgba(255,215,0,0.5);  }
}

/* 8. Holo — plynulá holografická duha */
.lv-frame-vip-holo {
    animation: vip-holo 2s linear infinite !important;
}
@keyframes vip-holo {
    0%   { box-shadow: 0 0 0 3px #FF0080, 0 0 18px rgba(255,0,128,0.5);   }
    17%  { box-shadow: 0 0 0 3px #FF8C00, 0 0 18px rgba(255,140,0,0.5);   }
    33%  { box-shadow: 0 0 0 3px #FFD700, 0 0 18px rgba(255,215,0,0.5);   }
    50%  { box-shadow: 0 0 0 3px #00FF80, 0 0 18px rgba(0,255,128,0.5);   }
    67%  { box-shadow: 0 0 0 3px #00CFFF, 0 0 18px rgba(0,207,255,0.5);   }
    83%  { box-shadow: 0 0 0 3px #8000FF, 0 0 18px rgba(128,0,255,0.5);   }
    100% { box-shadow: 0 0 0 3px #FF0080, 0 0 18px rgba(255,0,128,0.5);   }
}

/* ==========================================
   LOGIN BUTTON — avatar + jméno
   ========================================== */
.login-btn.logged-in {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 5px;
}
.login-btn-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* ==========================================
   LEADERBOARD — avatar vedle jména
   ========================================== */
.lb-item-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 2px;
}
.lb-item-avatar-ph {
    display: inline-block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Challenge history items — klikatelné */
.fd-history-item {
    transition: background 0.15s;
}
.fd-history-item:hover {
    background: rgba(249, 115, 22, 0.12) !important;
    border-radius: 6px;
}

/* ==========================================
   LEADERBOARD PLAYER PROFILE MINI-MODAL
   ========================================== */
.lb-player-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.lb-player-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.lb-player-overlay.hidden {
    display: none;
}
.lb-player-card {
    background: var(--bg-card);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 20px;
    padding: 28px 24px 24px;
    width: 260px;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(249,115,22,0.1);
    transform: translateY(10px);
    transition: transform 0.2s ease;
}
.lb-player-overlay.active .lb-player-card {
    transform: translateY(0);
}
.lb-player-close {
    position: absolute;
    top: 12px; right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 50%;
}
.lb-player-close:hover { background: rgba(255,255,255,0.08); }
.lb-player-avatar-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
}
.lb-player-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.lb-player-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.lb-player-level {
    font-size: 13px;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 600;
}
.lb-add-friend-btn {
    width: 100%;
    padding: 11px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.lb-add-friend-btn:hover:not(:disabled) { background: var(--primary-hover); }
.lb-add-friend-btn:disabled {
    opacity: 0.6;
    cursor: default;
    background: var(--bg-soft);
    color: var(--text-muted);
}

/* ==========================================
   v10.0 - ACHIEVEMENTS, STATS, ANIMATIONS
   ========================================== */

/* === Achievement Toast === */
.ach-toast {
    position: fixed; top: 72px; left: 50%;
    transform: translateX(-50%) translateY(-90px);
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(249,115,22,0.45); border-radius: 16px;
    padding: 14px 18px; display: flex; align-items: center; gap: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    z-index: 9999; opacity: 0;
    transition: transform 0.38s cubic-bezier(.34,1.56,.64,1), opacity 0.3s;
    min-width: 260px; max-width: 340px; pointer-events: none;
}
.ach-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); z-index: 10000; }
.ach-toast-icon { font-size: 34px; flex-shrink: 0; }
.ach-toast-body { flex: 1; }
.ach-toast-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #FB923C; font-weight: 700; margin-bottom: 2px; }
.ach-toast-name  { font-size: 15px; font-weight: 800; color: #F8FAFC; }
.ach-toast-desc  { font-size: 11px; color: #94A3B8; margin-top: 1px; }

/* === Profile card - Quick stats === */
.uc-quick-stats { display: flex; align-items: center; justify-content: space-around; padding: 12px 8px 8px; margin: 6px 4px 4px; background: rgba(255,255,255,0.025); border-radius: 12px; }
.uc-qs-item { text-align: center; flex: 1; }
.uc-qs-val  { font-size: 19px; font-weight: 800; color: #F8FAFC; line-height: 1.1; }
.uc-qs-val.uc-qs-green  { color: #10B981; }
.uc-qs-val.uc-qs-orange { color: #FB923C; }
.uc-qs-lbl  { font-size: 9px; color: #64748B; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.uc-qs-sep  { width: 1px; height: 26px; background: rgba(255,255,255,0.07); flex-shrink: 0; }

/* === Activity calendar === */
.uc-calendar-wrap { padding: 10px 16px 6px; }
.uc-cal-label { font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 7px; font-weight: 600; }
.uc-cal-dot { aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.04); transition: transform 0.12s; cursor: default; }
.uc-cal-dot.uc-cal-played { cursor: pointer; }
.uc-cal-dot:hover { transform: scale(1.25); }
.uc-cal-dot.uc-cal-played { background: #F97316; border-color: #EA580C; }
.uc-cal-dot.uc-cal-today  { border: 2px solid rgba(249,115,22,0.6); }
.uc-cal-dot.uc-cal-played.uc-cal-today { background: #FB923C; box-shadow: 0 0 0 2px rgba(249,115,22,0.3); }

/* === Achievements grid === */
.uc-ach-wrap { padding: 10px 16px 14px; }
.uc-ach-header { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: #F8FAFC; margin-bottom: 0; cursor: pointer; padding: 6px 4px; border-radius: 8px; transition: background 0.15s; user-select: none; -webkit-user-select: none; }
.uc-ach-header:hover { background: rgba(255,255,255,0.04); }
.uc-ach-header-right { display: flex; align-items: center; gap: 6px; }
.uc-ach-toggle-arrow { font-size: 10px; color: #64748B; transition: transform 0.22s; display: inline-block; }
.uc-ach-header.open .uc-ach-toggle-arrow { transform: rotate(180deg); }
.uc-ach-count { font-size: 11px; color: #64748B; font-weight: 600; }
.uc-ach-grid-wrap { overflow: hidden; transition: max-height 0.3s ease; max-height: 0; }
.uc-ach-grid-wrap.open { max-height: 700px; }
.uc-ach-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-top: 10px; }
.uc-ach-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 3px 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); cursor: help; transition: transform 0.15s, background 0.15s; }
.uc-ach-item:hover { transform: scale(1.08); z-index: 2; }
.uc-ach-item.uc-ach-earned { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.3); box-shadow: 0 2px 8px rgba(249,115,22,0.12); }
.uc-ach-item.uc-ach-locked { opacity: 0.35; }
.uc-ach-icon { font-size: 20px; line-height: 1; }
.uc-ach-name { font-size: 8.5px; color: #64748B; text-align: center; line-height: 1.2; }
.uc-ach-item.uc-ach-earned .uc-ach-name { color: #FB923C; }

/* === Mini achievements === */
.fd-ach-mini { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 2px 0 10px; min-height: 0; }
.ach-mini-icon { font-size: 18px; cursor: default; }
.ach-mini-more { font-size: 11px; color: #64748B; font-weight: 700; align-self: center; }

/* === LB player modal enhancements === */
.lb-player-stats-row { display: flex; justify-content: center; gap: 24px; padding: 8px 16px 4px; }
.lb-pstat { text-align: center; }
.lb-pstat-val { font-size: 17px; font-weight: 800; color: #F8FAFC; }
.lb-pstat-lbl { font-size: 9px; color: #64748B; text-transform: uppercase; }
.lb-player-achs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px 16px 8px; min-height: 24px; }
.lb-challenge-btn { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: white; border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.15s; font-family: inherit; -webkit-tap-highlight-color: transparent; width: 100%; margin-bottom: 6px; }
.lb-challenge-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.lb-player-actions { flex-direction: column !important; gap: 0 !important; }

/* === Challenge reactions === */
.ch-reactions { padding: 12px 20px 10px; border-top: 1px solid rgba(255,255,255,0.07); margin-top: 4px; }
.ch-reactions-label { font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; margin-bottom: 8px; font-weight: 600; }
.ch-reactions-row { display: flex; justify-content: center; gap: 8px; }
.ch-reaction-btn { font-size: 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 6px 10px; cursor: pointer; transition: transform 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; outline: none; line-height: 1; }
.ch-reaction-btn:hover { transform: scale(1.18); background: rgba(249,115,22,0.12); }
.ch-reaction-btn.ch-reaction-sent { background: rgba(249,115,22,0.22); border-color: rgba(249,115,22,0.55); transform: scale(1.22); pointer-events: none; }
.ch-reaction-received { text-align: center; font-size: 12px; color: #94A3B8; margin-top: 8px; min-height: 16px; }

/* === Answer animations === */
@keyframes answer-bounce { 0%{transform:scale(1)} 28%{transform:scale(1.06)} 55%{transform:scale(0.97)} 78%{transform:scale(1.02)} 100%{transform:scale(1)} }
@keyframes answer-shake  { 0%,100%{transform:translateX(0)} 14%{transform:translateX(-9px)} 28%{transform:translateX(8px)} 42%{transform:translateX(-7px)} 57%{transform:translateX(5px)} 71%{transform:translateX(-3px)} 85%{transform:translateX(2px)} }
.answer-btn.correct { animation: answer-bounce 0.45s ease forwards; }
.answer-btn.wrong   { animation: answer-shake  0.48s ease forwards; }

/* === Question fade-in === */
@keyframes q-appear { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.q-fade { animation: q-appear 0.26s ease both; }

/* === Skeleton loader === */
@keyframes skeleton-shine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-row { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.skeleton-block { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-soft) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: skeleton-shine 1.4s infinite; border-radius: 8px; }
.skeleton-avatar { width:40px; height:40px; border-radius:50% !important; flex-shrink:0; }
.skeleton-lines  { flex:1; display:flex; flex-direction:column; gap:6px; }
.skeleton-line   { height:11px; border-radius:5px; }
.skeleton-line.w60 { width:60%; }
.skeleton-line.w40 { width:40%; }

.share-actions .btn { flex: 1; padding: 13px 8px; font-size: 13px; }

/* === Friend requests === */
.friend-request-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.friend-request-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; }
.friend-request-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-main); }
.friend-request-actions { display: flex; gap: 6px; }
.friend-req-accept { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.friend-req-accept:hover { background: var(--primary-hover); }
.friend-req-decline { background: rgba(255,255,255,0.08); color: var(--text-sub); border: none; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; transition: background 0.15s; }
.friend-req-decline:hover { background: rgba(255,255,255,0.15); }

/* === Menu — nové položky === */
.nav-coming-soon { opacity: 0.55 !important; cursor: default !important; pointer-events: none; display: flex !important; align-items: center; justify-content: space-between; }
.nav-soon-badge { font-size: 11px; background: rgba(249,115,22,0.15); color: var(--primary); border-radius: 20px; padding: 2px 8px; font-weight: 600; white-space: nowrap; }
.nav-support { border-top: 1px solid rgba(255,255,255,0.07) !important; margin-top: 8px !important; padding-top: 18px !important; }

/* === Screen transitions === */
.card { transition: transform 0.26s cubic-bezier(0.4,0,0.2,1), opacity 0.26s ease; }
.screen-exit-left  { transform: translateX(-28px) !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.screen-exit-right { transform: translateX(28px)  !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.screen-enter-right { transform: translateX(28px); opacity: 0; pointer-events: none; }
.screen-enter-left  { transform: translateX(-28px); opacity: 0; pointer-events: none; }

/* === Onboarding v2 === */
.onboarding-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; padding: 0 10px 10px; animation: ob-fade-in 0.35s ease; }
.onboarding-overlay.hidden { display: none !important; }
@keyframes ob-fade-in { from { opacity: 0; } to { opacity: 1; } }

.onboarding-modal { background: var(--bg-card); border-radius: 24px 24px 20px 20px; max-width: 400px; width: 100%; overflow: hidden; box-shadow: 0 -6px 40px rgba(0,0,0,0.55); border: 1px solid rgba(249,115,22,0.18); animation: ob-slide-up 0.42s cubic-bezier(0.34,1.4,0.64,1); }
@keyframes ob-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.ob-progress { height: 3px; background: rgba(255,255,255,0.07); }
.ob-progress-fill { height: 100%; background: linear-gradient(90deg, #F97316, #FB923C); transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }

.ob-steps-wrap { padding: 24px 24px 6px; min-height: 320px; display: flex; flex-direction: column; align-items: center; }
.onboarding-step { display: none; width: 100%; text-align: center; }
.onboarding-step.active { display: flex; flex-direction: column; align-items: center; animation: ob-step-in 0.32s ease both; }
@keyframes ob-step-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }

/* Visual area */
.ob-visual { width: 100%; margin-bottom: 18px; }

/* Step 1 — Daily quiz mini-card */
.ob-daily-wrap { position: relative; padding-top: 10px; }
.ob-daily-card { background: rgba(249,115,22,0.07); border: 1px solid rgba(249,115,22,0.22); border-radius: 14px; padding: 12px 14px; text-align: left; animation: ob-float 3.5s ease-in-out infinite; }
@keyframes ob-float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
.ob-daily-card-tag { font-size: 10px; font-weight: 700; color: #F97316; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px; }
.ob-daily-card-q { font-size: 12px; font-weight: 700; color: #F8FAFC; margin-bottom: 8px; line-height: 1.35; }
.ob-daily-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ob-ans { font-size: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,0.04); color: #94A3B8; border: 1px solid rgba(255,255,255,0.06); }
.ob-ans-correct { background: rgba(16,185,129,0.14); color: #10B981; border-color: rgba(16,185,129,0.38); font-weight: 700; animation: ob-correct-glow 2s ease-in-out 1s infinite; }
.ob-ans-wrong { background: rgba(239,68,68,0.08); color: #F87171; border-color: rgba(239,68,68,0.25); text-decoration: line-through; opacity: 0.7; }
@keyframes ob-correct-glow { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(16,185,129,0.15); } }
.ob-score-badge { position: absolute; top: 0; right: 10px; background: linear-gradient(135deg, #F97316, #EA580C); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; animation: ob-badge-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.6s both; }
@keyframes ob-badge-pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
.ob-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.ob-chip { font-size: 11px; font-weight: 600; padding: 3px 10px; background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.22); border-radius: 20px; color: #FB923C; }

/* Step 2 — Modes */
.ob-modes-visual { display: flex; gap: 10px; justify-content: center; }
.ob-mode-card { flex: 1; max-width: 140px; border-radius: 14px; padding: 16px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); }
.ob-mode-free { border-color: rgba(16,185,129,0.28); background: rgba(16,185,129,0.05); animation: ob-float 3.5s ease-in-out infinite; }
.ob-mode-login { border-color: rgba(249,115,22,0.28); background: rgba(249,115,22,0.05); animation: ob-float 3.5s ease-in-out infinite 0.6s; }
.ob-mode-icon { font-size: 32px; line-height: 1; }
.ob-mode-label { font-size: 13px; font-weight: 700; color: #F8FAFC; }
.ob-mode-sub { font-size: 10px; color: #64748B; margin-top: -2px; }
.ob-mode-badge { font-size: 9px; font-weight: 700; padding: 2px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }
.ob-badge-free { background: rgba(16,185,129,0.18); color: #10B981; }
.ob-badge-login { background: rgba(249,115,22,0.18); color: #F97316; }

/* Step 3 — Profile */
.ob-profile-visual { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 14px 16px; text-align: left; }
.ob-profile-avatar { font-size: 46px; line-height: 1; flex-shrink: 0; animation: ob-avatar-wiggle 3s ease-in-out infinite; }
@keyframes ob-avatar-wiggle { 0%,100% { transform: rotate(0deg) scale(1); } 20% { transform: rotate(-8deg) scale(1.08); } 40% { transform: rotate(8deg) scale(1.08); } 60% { transform: rotate(-4deg) scale(1.04); } 80% { transform: rotate(0deg) scale(1); } }
.ob-benefits { display: flex; flex-direction: column; gap: 6px; }
.ob-benefit { font-size: 12px; font-weight: 600; color: #CBD5E1; }
.ob-benefit:nth-child(1) { animation: ob-benefit-in 0.35s ease 0.05s both; }
.ob-benefit:nth-child(2) { animation: ob-benefit-in 0.35s ease 0.18s both; }
.ob-benefit:nth-child(3) { animation: ob-benefit-in 0.35s ease 0.31s both; }
.ob-benefit:nth-child(4) { animation: ob-benefit-in 0.35s ease 0.44s both; }
@keyframes ob-benefit-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

/* Titles */
.ob-title { font-size: 19px; font-weight: 800; color: #F8FAFC; margin: 2px 0 6px; }
.ob-text { font-size: 13px; color: #94A3B8; line-height: 1.65; max-width: 320px; }

/* Dots */
.ob-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 6px; }
.ob-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); transition: all 0.3s ease; cursor: pointer; }
.ob-dot.active { width: 22px; background: #F97316; }

/* Actions */
.ob-actions { display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 22px; gap: 12px; }
.ob-btn-skip { background: none; border: none; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 6px; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.ob-btn-skip:hover { color: #94A3B8; }
.ob-btn-next { flex: 1; background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: #fff; border: none; border-radius: 12px; padding: 13px 24px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px rgba(249,115,22,0.38); transition: transform 0.14s, box-shadow 0.14s; -webkit-tap-highlight-color: transparent; }
.ob-btn-next:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(249,115,22,0.28); }

/* === Result correct count === */
.result-correct-count { display: inline-block; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35); border-radius: 10px; padding: 6px 16px; margin: 4px 0 2px; font-size: 15px; font-weight: 700; color: #10B981; animation: q-appear 0.3s ease both; }

/* === Result rank badge === */
.result-rank { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3); border-radius: 12px; padding: 10px 16px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--primary); animation: q-appear 0.4s ease 0.3s both; }
.result-rank.result-rank-top3 { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.4); color: #FBBF24; }
.result-rank-icon { font-size: 18px; }

/* === Friend streak comparison row === */
.fd-streak-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin-top: 8px; background: rgba(255,255,255,0.04); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.fd-sr-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.fd-sr-val { font-size: 20px; font-weight: 800; color: var(--text-main); min-width: 44px; text-align: center; }

/* === Friend comparison === */
.fd-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px 8px; align-items: center; padding: 4px 0 12px; }
.fd-cmp-my { text-align: right; }
.fd-cmp-opp { text-align: left; }
.fd-cmp-val { font-size: 16px; font-weight: 800; color: var(--text-main); }
.fd-cmp-val.winner { color: #10B981; }
.fd-cmp-val.loser { color: #64748B; }
.fd-cmp-label { grid-column: 2; text-align: center; font-size: 10px; color: #64748B; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 4px; white-space: nowrap; }
.fd-cmp-vs { grid-column: 2; text-align: center; font-size: 11px; font-weight: 800; color: var(--primary); }

/* === Leaderboard my rank bar === */
.lb-my-rank { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; margin-top: 8px; background: rgba(249,115,22,0.08); border-radius: 12px; border: 1px dashed rgba(249,115,22,0.3); font-size: 13px; font-weight: 600; color: var(--text-sub); }
.lb-my-rank strong { color: var(--primary); font-size: 15px; }

/* === Wider layout on PC === */
@media (min-width: 768px) {
    .card { max-width: 540px; }
    .user-card { width: 380px; max-width: 400px; }
    .friends-card { max-width: 500px; }
    #friend-detail-modal .friends-card { max-width: 500px; }
}

/* === Activity calendar collapsible === */
.uc-cal-section { padding: 4px 16px 6px; }
.uc-cal-toggle-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 6px 4px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; user-select: none; transition: background 0.15s; }
.uc-cal-toggle-header:hover { background: rgba(255,255,255,0.04); }
.uc-cal-toggle-header.open .uc-ach-toggle-arrow { transform: rotate(180deg); }
.uc-cal-grid-wrap { overflow: hidden; transition: max-height 0.3s ease; max-height: 0; }
.uc-cal-grid-wrap.open { max-height: 175px; }
.uc-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 8px 0 4px; }

/* === Achievements horizontal scroll (2 rows) === */
.uc-ach-grid {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc(20% - 5px);
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.uc-ach-grid::-webkit-scrollbar { display: none; }
.uc-ach-item { scroll-snap-align: start; }

/* === Stat items with click === */
.uc-qs-clickable { cursor: pointer; border-radius: 8px; transition: background 0.15s; padding: 2px 4px; margin: -2px -4px; }
.uc-qs-clickable:hover { background: rgba(255,255,255,0.06); }
.uc-qs-gold { color: #FBBF24 !important; }

/* === Level-locked avatars === */
.avatar-option.av-locked { opacity: 0.5; cursor: default; position: relative; }
.avatar-option.av-locked img { filter: grayscale(80%); }
.av-lock-badge { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: #F97316; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.av-animated-badge { position: absolute; top: 2px; right: 2px; background: #F97316; color: white; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; pointer-events: none; }

/* === Floating info popup (achievements + calendar) === */
.info-popup {
    position: fixed;
    z-index: 100000;
    background: var(--bg-card);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    max-width: 220px;
    min-width: 160px;
    pointer-events: none;
    animation: q-appear 0.15s ease both;
}
.info-popup-icon { font-size: 28px; text-align: center; margin-bottom: 6px; }
.info-popup-title { font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 3px; }
.info-popup-desc { font-size: 12px; color: var(--text-sub); line-height: 1.45; }
.info-popup-date { font-size: 11px; font-weight: 700; color: var(--primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.info-popup-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); margin-top: 4px; }
.info-popup-row strong { color: var(--text-main); font-weight: 700; }
.info-popup-loading { font-size: 12px; color: var(--text-sub); text-align: center; padding: 4px 0; }

/* === Splash screen === */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at 60% 30%, rgba(249,115,22,0.12) 0%, transparent 65%),
                radial-gradient(ellipse at 20% 80%, rgba(234,88,12,0.08) 0%, transparent 55%),
                #1A1614;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}
.splash-screen.splash-gone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.splash-logo {
    font-size: 2.6rem;
    font-weight: 900;
    background: linear-gradient(135deg, #FBBF24 0%, #F97316 55%, #EA580C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    filter: drop-shadow(0 0 20px rgba(249,115,22,0.4));
    animation: splash-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.splash-sub {
    font-size: 12px;
    color: #64748B;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: splash-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.splash-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(249,115,22,0.2);
    border-top-color: #F97316;
    animation: splash-spin 0.75s linear infinite, splash-pop 0.5s 0.2s both;
}
@keyframes splash-spin {
    to { transform: rotate(360deg); }
}
@keyframes splash-pop {
    from { opacity: 0; transform: scale(0.6) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* === Quiz countdown 3-2-1 === */
.quiz-countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: linear-gradient(160deg, rgba(26,22,20,0.98) 0%, rgba(20,14,10,0.98) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.quiz-countdown-ring {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiz-countdown-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,0.18) 0%, transparent 70%);
    animation: cd-glow-pulse 0.65s ease-in-out infinite alternate;
}
.quiz-countdown-ring::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 3px solid rgba(249,115,22,0.2);
    border-top-color: #F97316;
    border-right-color: #FB923C;
}
.quiz-countdown-number {
    position: relative;
    font-size: 5.5rem;
    font-weight: 900;
    background: linear-gradient(160deg, #FBBF24 0%, #F97316 50%, #EA580C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    user-select: none;
    filter: drop-shadow(0 0 16px rgba(249,115,22,0.55));
}
.quiz-countdown-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    letter-spacing: 2px;
    text-transform: uppercase;
}
@keyframes countdown-pop {
    from { opacity: 0; transform: scale(2.2); filter: drop-shadow(0 0 32px rgba(249,115,22,0.8)); }
    to   { opacity: 1; transform: scale(1);   filter: drop-shadow(0 0 16px rgba(249,115,22,0.55)); }
}
@keyframes cd-glow-pulse {
    from { transform: scale(0.95); opacity: 0.6; }
    to   { transform: scale(1.05); opacity: 1; }
}
.countdown-pop {
    animation: countdown-pop 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

/* === Score circle barvy === */
.score-circle.score-great { background: linear-gradient(135deg, #22C55E, #15803D); }
.score-circle.score-ok    { background: linear-gradient(135deg, #EAB308, #A16207); }
.score-circle.score-bad   { background: linear-gradient(135deg, #EF4444, #B91C1C); }

/* === Combo toast === */
.combo-toast {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translateX(-50%) scale(0.7);
    background: linear-gradient(135deg, #F97316, #EA580C);
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    padding: 9px 22px;
    border-radius: 24px;
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.18s, transform 0.18s;
    pointer-events: none;
    box-shadow: 0 4px 24px rgba(249, 115, 22, 0.55);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.combo-toast.combo-visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* === Sparkline === */
.sparkline {
    display: block;
    width: 100%;
    height: 44px;
    margin: 2px 0 10px;
    opacity: 0.9;
}

/* === Offline banner === */
.offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: #EF4444;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    letter-spacing: 0.2px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.offline-banner:not(.hidden) {
    transform: translateY(0);
}

/* === Empty states === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    gap: 6px;
}
.empty-state-icon {
    font-size: 40px;
    line-height: 1;
    opacity: 0.5;
    margin-bottom: 4px;
}
.empty-state-title {
    font-size: 15px;
    font-weight: 700;
    color: #94A3B8;
    margin: 0;
}
.empty-state-sub {
    font-size: 13px;
    color: #64748B;
    margin: 0;
    text-align: center;
}

/* ==========================================
   v10.0 — ACHIEVEMENTS, STATS, ANIMATIONS
   ========================================== */

/* === Achievement Toast — teplé tmavé barvy, nahoře na obrazovce === */
.ach-toast {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #2A1F18 0%, #1A1410 100%);
    border: 1px solid rgba(249,115,22,0.45);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(249,115,22,0.12);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.38s cubic-bezier(.34,1.56,.64,1), opacity 0.3s;
    min-width: 260px;
    max-width: min(340px, calc(100vw - 32px));
    pointer-events: none;
}
.ach-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); z-index: 10000; }
.ach-toast-icon { font-size: 34px; flex-shrink: 0; }
.ach-toast-body { flex: 1; }
.ach-toast-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #FB923C; font-weight: 700; margin-bottom: 2px; }
.ach-toast-name  { font-size: 15px; font-weight: 800; color: #F8FAFC; }
.ach-toast-desc  { font-size: 11px; color: #A89080; margin-top: 1px; }

/* === Profile card — Quick stats === */
.uc-quick-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px 8px 8px;
    margin: 6px 4px 4px;
    background: rgba(255,255,255,0.025);
    border-radius: 12px;
}
.uc-qs-item { text-align: center; flex: 1; }
.uc-qs-clickable { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; }
.uc-qs-clickable:active { opacity: 0.65; }
.uc-qs-val  { font-size: 19px; font-weight: 800; color: #F8FAFC; line-height: 1.1; }
.uc-qs-val.uc-qs-green  { color: #10B981; }
.uc-qs-val.uc-qs-orange { color: #FB923C; }
.uc-qs-lbl  { font-size: 9px; color: #64748B; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.uc-qs-sep  { width: 1px; height: 26px; background: rgba(255,255,255,0.07); flex-shrink: 0; }

/* === Profile card — Activity calendar === */
.uc-calendar-wrap { padding: 10px 16px 6px; }
.uc-cal-label {
    font-size: 10px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 7px;
    font-weight: 600;
}
.uc-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.uc-cal-dot {
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.04);
    transition: transform 0.12s;
    cursor: default;
}
.uc-cal-dot:hover { transform: scale(1.25); }
.uc-cal-dot.uc-cal-played { background: #F97316; border-color: #EA580C; }
.uc-cal-dot.uc-cal-today  { border: 2px solid rgba(249,115,22,0.6); }
.uc-cal-dot.uc-cal-played.uc-cal-today { background: #FB923C; box-shadow: 0 0 0 2px rgba(249,115,22,0.3); }

/* === Profile card — Achievements === */
.uc-ach-wrap { padding: 10px 16px 14px; }
.uc-ach-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #F8FAFC;
    margin-bottom: 10px;
}
.uc-ach-count { font-size: 11px; color: #64748B; font-weight: 600; }
.uc-ach-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.uc-ach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 3px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    cursor: help;
    transition: transform 0.15s, background 0.15s;
}
.uc-ach-item:hover { transform: scale(1.08); z-index: 2; }
.uc-ach-item.uc-ach-earned {
    background: rgba(249,115,22,0.1);
    border-color: rgba(249,115,22,0.3);
    box-shadow: 0 2px 8px rgba(249,115,22,0.12);
}
.uc-ach-item.uc-ach-locked { opacity: 0.35; }
.uc-ach-icon { font-size: 20px; line-height: 1; }
.uc-ach-name { font-size: 8.5px; color: #64748B; text-align: center; line-height: 1.2; }
.uc-ach-item.uc-ach-earned .uc-ach-name { color: #FB923C; }

/* === Mini achievements row (friend detail, lb modal) === */
.fd-ach-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 2px 0 10px;
    min-height: 0;
}
.ach-mini-icon { font-size: 18px; cursor: default; }
.ach-mini-more { font-size: 11px; color: #64748B; font-weight: 700; align-self: center; }

/* === LB player modal === */
.lb-player-stats-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 8px 16px 4px;
}
.lb-pstat { text-align: center; }
.lb-pstat-val { font-size: 17px; font-weight: 800; color: #F8FAFC; }
.lb-pstat-lbl { font-size: 9px; color: #64748B; text-transform: uppercase; }
.lb-player-achs-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px 16px 8px;
    min-height: 24px;
}
.lb-challenge-btn {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    margin-bottom: 6px;
}
.lb-challenge-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.lb-player-actions { flex-direction: column !important; gap: 0 !important; }

/* === Challenge reactions === */
.ch-reactions {
    padding: 12px 20px 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: 4px;
}
.ch-reactions-label {
    font-size: 10px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 600;
}
.ch-reactions-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.ch-reaction-btn {
    font-size: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    line-height: 1;
}
.ch-reaction-btn:hover { transform: scale(1.18); background: rgba(249,115,22,0.12); }
.ch-reaction-btn.ch-reaction-sent {
    background: rgba(249,115,22,0.22);
    border-color: rgba(249,115,22,0.55);
    transform: scale(1.22);
    pointer-events: none;
}
.ch-reaction-received {
    text-align: center;
    font-size: 12px;
    color: #94A3B8;
    margin-top: 8px;
    min-height: 16px;
}

/* === Answer animations === */
@keyframes answer-bounce {
    0%   { transform: scale(1); }
    28%  { transform: scale(1.06); }
    55%  { transform: scale(0.97); }
    78%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}
@keyframes answer-shake {
    0%,100% { transform: translateX(0); }
    14%  { transform: translateX(-9px); }
    28%  { transform: translateX(8px); }
    42%  { transform: translateX(-7px); }
    57%  { transform: translateX(5px); }
    71%  { transform: translateX(-3px); }
    85%  { transform: translateX(2px); }
}
/* === Oprava přetékání dlouhých slov v odpovědích === */
.answer-btn {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    white-space: normal;
    font-size: clamp(0.78rem, 2.5vw, 1rem);
    padding: 14px 14px;
    min-height: 76px;
    line-height: 1.35;
}
.answer-btn.correct { animation: answer-bounce 0.45s ease forwards; }
.answer-btn.wrong   { animation: answer-shake  0.48s ease forwards; }

/* === Question fade-in transition === */
@keyframes q-appear {
    from { opacity: 0; transform: translateX(16px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
.q-fade { animation: q-appear 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* === Skeleton loader === */
@keyframes skeleton-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}
.skeleton-block {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-soft) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-shine 1.4s infinite;
    border-radius: 8px;
}
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50% !important; flex-shrink: 0; }
.skeleton-lines  { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-line   { height: 11px; border-radius: 5px; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }

/* === Topic card loading state === */
.topic-card.loading, #btn-play.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}
.topic-card.loading::after, #btn-play.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 25%, rgba(249,115,22,0.15) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: skeleton-shine 1.2s infinite;
    border-radius: inherit;
}

/* === Replay Daily === */
.replay-daily-section { width: 100%; margin: 8px 0 4px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.replay-daily-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; font-size: 12px; font-weight: 700; color: #94A3B8; user-select: none; -webkit-tap-highlight-color: transparent; }
.replay-daily-header:hover { background: rgba(255,255,255,0.03); }
.replay-arrow { font-size: 10px; transition: transform 0.25s ease; }
.replay-daily-section.open .replay-arrow { transform: rotate(180deg); }
.replay-daily-list { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.replay-daily-section.open .replay-daily-list { max-height: 600px; }
.replay-q-row { padding: 10px 14px 8px; border-top: 1px solid rgba(255,255,255,0.05); }
.replay-q-text { font-size: 11px; color: #64748B; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-bar-wrap { display: flex; align-items: center; gap: 8px; }
.replay-bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.replay-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.replay-bar-fill.correct { background: #10B981; }
.replay-bar-fill.wrong { background: #F97316; }
.replay-bar-pct { font-size: 11px; font-weight: 700; min-width: 34px; text-align: right; }
.replay-bar-pct.correct { color: #10B981; }
.replay-bar-pct.wrong { color: #F97316; }
.replay-my-ans { font-size: 9px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; font-weight: 700; }
.replay-my-ans.correct { background: rgba(16,185,129,0.15); color: #10B981; }
.replay-my-ans.wrong { background: rgba(249,115,22,0.15); color: #F97316; }

/* === Cookie consent banner === */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9990;
    padding: 0 10px 10px;
    transform: translateY(100%);
    opacity: 0;
}
.cookie-banner.hidden { display: none !important; }
.cookie-banner-inner {
    background: #1E293B;
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 16px;
    padding: 14px 16px;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.cookie-banner-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.cookie-banner-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.cookie-banner-text strong { display: block; font-size: 13px; font-weight: 700; color: #F8FAFC; margin-bottom: 2px; }
.cookie-banner-text span { font-size: 11px; color: #94A3B8; line-height: 1.45; }
.cookie-banner-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cookie-btn {
    border: none; border-radius: 10px; padding: 8px 14px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: inherit; -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.cookie-btn:active { opacity: 0.75; }
.cookie-btn-accept { background: linear-gradient(135deg, #F97316, #EA580C); color: #fff; flex: 1; }
.cookie-btn-necessary { background: rgba(255,255,255,0.08); color: #94A3B8; }
.cookie-link { font-size: 11px; color: #475569; text-decoration: none; margin-left: auto; }
.cookie-link:hover { color: #94A3B8; }

/* === VIP coming soon box === */
.vip-coming-soon-box {
    text-align: center;
    padding: 20px 16px;
    background: rgba(249,115,22,0.06);
    border: 1px dashed rgba(249,115,22,0.3);
    border-radius: 14px;
}
.vip-cs-icon { font-size: 32px; margin-bottom: 8px; }
.vip-cs-title { font-size: 15px; font-weight: 800; color: #F8FAFC; margin-bottom: 4px; }
.vip-cs-sub { font-size: 12px; color: #64748B; line-height: 1.5; }

/* === Nav privacy link === */
.nav-privacy { border-top: 1px solid rgba(255,255,255,0.05) !important; margin-top: 4px !important; padding-top: 12px !important; font-size: 11px !important; color: #475569 !important; }
.nav-privacy:hover { color: #64748B !important; }

/* === TOUCH PERFORMANCE — eliminates 300ms tap delay on mobile === */
button,
.option-btn,
.topic-card,
.nav-btn,
.ob-ans,
.uc-qs-clickable,
.ach-mini-icon,
.uc-ach-item,
.avatar-option,
.frame-option,
.lb-tab,
.sidebar a,
.card-btn,
[role="button"] {
  touch-action: manipulation;
}

/* === will-change: compositor layer hints for frequently animated elements === */
/* Only on elements that ARE actively animated — prevents wasted GPU memory */
.sidebar {
  will-change: transform;
}
.vip-modal-wrap,
.avatar-picker-overlay,
.onboarding-overlay,
.add-friend-modal,
.friend-detail-modal,
.challenge-topic-modal,
.challenge-result-modal,
.lb-player-modal-overlay,
.cookie-banner {
  will-change: transform, opacity;
}
/* Overlay a friends card animují jen opacity — will-change: transform by způsoboval
   nový containing block pro position:fixed (info-popup by byl oříznut) */
.user-card-overlay,
.friends-card-overlay {
  will-change: opacity;
}

/* === MINIMUM TAP TARGETS (WCAG 2.5.5) === */
.nickname-edit-btn,
.card-visible-btn,
.btn-quiz-back,
.ob-dot,
.lb-tab,
.icon-btn,
.close-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.streak-dot {
  min-width: 14px;
  min-height: 14px;
}

/* === QUIZ BACK BUTTON === */
.btn-quiz-back {
  background: none;
  border: none;
  color: var(--text-muted, #94A3B8);
  font-size: 20px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  touch-action: manipulation;
  flex-shrink: 0;
}
.btn-quiz-back:hover {
  color: var(--primary, #F97316);
  background: rgba(249,115,22,0.08);
}

/* === ROTUJÍCÍ TIPY — tip banner === */
.tip-banner {
  position: relative;
  overflow: hidden;
}
.tip-banner .ad-tip-inner {
  transition: opacity 0.35s ease;
}
.tip-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: 0 0 8px;
}
.tip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(249,115,22,0.25);
  transition: background 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
.tip-dot.active {
  background: #F97316;
  transform: scale(1.3);
}

/* === JAK HRÁT — rozšířený layout === */
.howtoplay-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.howtoplay-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(249,115,22,0.08);
}
.howtoplay-block:last-child {
  border-bottom: none;
}
.howtoplay-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
  margin-top: 2px;
}
.howtoplay-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #F8FAFC);
  margin-bottom: 4px;
}
.howtoplay-text p {
  font-size: 13px;
  color: var(--text-muted, #94A3B8);
  line-height: 1.55;
  margin: 0;
}
.howtoplay-text p strong {
  display: inline;
  color: #FB923C;
  font-size: inherit;
}

/* === TOAST FRONTA — level-up varianta === */
/* Level-up toast používá stejný .ach-toast styl,
   jen s zlatavým borderem místo oranžového */
.ach-toast.levelup {
  border-color: rgba(251,191,36,0.55);
}
.ach-toast.levelup .ach-toast-title {
  color: #FBBF24;
}

/* ============================================================
   v10.15 — NOVÉ FUNKCE
   ============================================================ */

/* === Časový indikátor na otázku === */
.quiz-q-timer-wrap {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 0 6px;
}
.quiz-q-timer-bar {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    background: linear-gradient(90deg, #F97316 0%, #FBBF24 60%, #FB923C 100%);
    border-radius: 2px;
    will-change: transform, opacity;
}

/* === Pull-to-refresh indikátor === */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: rgba(249,115,22,0.92);
    color: #fff;
    border-radius: 0 0 16px 16px;
    padding: 6px 20px 8px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(249,115,22,0.35);
    transition: none;
}
.ptr-indicator .ptr-arrow {
    font-size: 14px;
    transition: transform 0.2s;
    display: inline-block;
}
.ptr-indicator.ptr-ready .ptr-arrow {
    transform: rotate(180deg);
}
.ptr-indicator.ptr-ready {
    background: rgba(34,197,94,0.92);
}

/* === Osobní rekord na topic kartách === */
.topic-card {
    position: relative;
}
.topic-best-badge {
    position: absolute;
    bottom: 5px;
    right: 6px;
    font-size: 9px;
    font-weight: 700;
    color: #FBBF24;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 5px;
    padding: 1px 5px;
    line-height: 1.4;
    pointer-events: none;
}

/* === Rematch tlačítko v challenge výsledku === */
.ch-rematch-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px 4px;
    font-size: 14px;
}

/* === Notif guide modal === */
.notif-guide-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    opacity: 0;
    transition: opacity 0.25s;
}
.notif-guide-overlay.active {
    opacity: 1;
}
.notif-guide-overlay.hidden {
    display: none !important;
}
.notif-guide-card {
    background: linear-gradient(160deg, #1E293B 0%, #0F172A 100%);
    border: 1px solid rgba(249,115,22,0.3);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 24px 24px 32px;
    width: 100%;
    max-width: 480px;
    transform: translateY(60px);
    transition: transform 0.3s cubic-bezier(.34,1.3,.64,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.notif-guide-overlay.active .notif-guide-card {
    transform: translateY(0);
}
.notif-guide-icon {
    font-size: 40px;
    text-align: center;
    margin-bottom: 12px;
}
.notif-guide-title {
    font-size: 20px;
    font-weight: 800;
    color: #F8FAFC;
    text-align: center;
    margin: 0 0 8px;
}
.notif-guide-desc {
    font-size: 14px;
    color: #94A3B8;
    text-align: center;
    margin: 0 0 10px;
}
.notif-guide-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notif-guide-list li {
    font-size: 14px;
    color: #CBD5E1;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.06);
}
.notif-guide-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notif-guide-btns .btn {
    width: 100%;
}

/* === Activity Calendar v2 — GitHub-style (12 týdnů) === */

/* Wrapper: štítky dní + mřížka vedle sebe */
.uc-cal-body {
    display: flex;
    gap: 5px;
    align-items: stretch;
}

/* Popisky dnů (Po–Ne) */
.uc-cal-day-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 8px 0 4px;
    flex-shrink: 0;
}
.uc-cal-day-labels span {
    font-size: 8.5px;
    color: #475569;
    font-weight: 600;
    text-align: right;
    height: 11px;
    line-height: 11px;
}

/* Přepsat grid na sloupcový layout (týdny = sloupce, dny = řádky) */
.uc-calendar {
    display: grid !important;
    grid-template-rows: repeat(7, 11px) !important;
    grid-template-columns: none !important;  /* explicitně zruší repeat(7,1fr) z base CSS */
    grid-auto-columns: 1fr !important;
    grid-auto-flow: column !important;
    gap: 3px !important;
    padding: 8px 0 4px !important;
    flex: 1 !important;
    min-width: 0;  /* fix: flex child nepřetéká */
}

/* Zvětšit max-height pro nový layout */
.uc-cal-grid-wrap.open {
    max-height: 170px !important;
}

/* Budoucí dny — skoro neviditelné */
.uc-cal-dot.uc-cal-future {
    background: rgba(255,255,255,0.012) !important;
    border-color: transparent !important;
    cursor: default !important;
}

/* Intenzitní úrovně podle skóre */
.uc-cal-dot.uc-cal-played             { background: rgba(249,115,22,0.18); border-color: rgba(249,115,22,0.18); }
.uc-cal-dot.uc-cal-played.uc-cal-l1   { background: rgba(249,115,22,0.28); border-color: rgba(249,115,22,0.30); }
.uc-cal-dot.uc-cal-played.uc-cal-l2   { background: rgba(249,115,22,0.52); border-color: rgba(249,115,22,0.50); }
.uc-cal-dot.uc-cal-played.uc-cal-l3   { background: rgba(249,115,22,0.78); border-color: rgba(249,115,22,0.75); }
.uc-cal-dot.uc-cal-played.uc-cal-l4   { background: #F97316; border-color: #EA580C; box-shadow: 0 0 5px rgba(249,115,22,0.45); }

/* Legenda */
.uc-cal-legend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 7px;
    padding-left: 22px; /* zarovnat pod mřížku (šířka štítků + gap) */
    justify-content: flex-start;
}
.uc-cal-legend-label {
    font-size: 9px;
    color: #475569;
    font-weight: 600;
    margin: 0 2px;
}
.uc-cal-legend .uc-cal-dot {
    width: 9px !important;
    height: 9px !important;
    aspect-ratio: unset !important;
    border-radius: 2px;
    flex-shrink: 0;
    cursor: default !important;
}

/* === VIP — zamčená funkce (Brzy) === */
.vip-feature-locked {
  opacity: 0.62;
  pointer-events: none;
  position: relative;
}
.vip-feature-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 6px,
    rgba(255,255,255,0.02) 6px,
    rgba(255,255,255,0.02) 12px
  );
}
.vip-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  background: rgba(148,163,184,0.13);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ============================================================
   v10.17 — NEW FEATURES
   ============================================================ */

/* === Points overlay === */
.points-overlay {
    position: fixed;
    transform: translateX(-50%) translateY(0px);
    font-size: 26px;
    font-weight: 900;
    color: #FBBF24;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 20px rgba(251,191,36,0.4);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.18s, transform 1s cubic-bezier(0.16,1,0.3,1);
    will-change: transform, opacity;
    white-space: nowrap;
}
.points-overlay.pop-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-65px);
}

/* === Time Attack button === */
.btn-outline-ta {
    background: transparent;
    border: 1.5px solid rgba(249,115,22,0.35);
    color: #94A3B8;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 10px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}
.btn-outline-ta:hover, .btn-outline-ta.ta-active {
    border-color: #F97316;
    color: #F97316;
    background: rgba(249,115,22,0.08);
}
.btn-outline-ta.ta-active {
    box-shadow: 0 0 0 2px rgba(249,115,22,0.2);
}
.ta-state { color: #22C55E; font-weight: 700; }
.ta-state-off { color: #64748B; }

/* === Time Attack countdown === */
.ta-countdown {
    display: inline-block;
    margin: 6px auto 2px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    color: #F97316;
    background: rgba(249,115,22,0.12);
    border: 1.5px solid rgba(249,115,22,0.35);
    text-align: center;
    letter-spacing: 0.5px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.ta-countdown.ta-urgent {
    color: #EF4444;
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.5);
    animation: ta-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes ta-pulse {
    from { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    to   { box-shadow: 0 0 8px 2px rgba(239,68,68,0.35); }
}

/* === Score breakdown === */
.result-breakdown { margin: 8px 0; }
.rb-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
    user-select: none;
}
.rb-toggle:hover { background: rgba(255,255,255,0.06); }
.rb-toggle .rb-arrow { margin-left: auto; font-size: 10px; transition: transform 0.22s; }
.rb-toggle.open .rb-arrow { transform: rotate(180deg); }
.rb-total { color: #F97316; font-weight: 800; margin-left: 4px; }
.rb-body { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.rb-body.open { max-height: 600px; }
.rb-row {
    display: grid;
    grid-template-columns: 24px 20px 1fr 44px;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
}
.rb-row:last-child { border-bottom: none; }
.rb-num { color: #475569; font-size: 11px; font-weight: 700; }
.rb-icon { font-size: 14px; font-weight: 700; }
.rb-correct .rb-icon { color: #34D399; }
.rb-wrong .rb-icon { color: #F87171; }
.rb-pts { font-weight: 700; }
.rb-correct .rb-pts { color: #FBBF24; }
.rb-wrong .rb-pts { color: #475569; }
.rb-time { text-align: right; color: #64748B; font-size: 11px; }

/* === Achievement progress bars === */
.ach-progress-wrap {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 3px;
}
.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #F97316, #FBBF24);
    border-radius: 2px;
    transition: width 0.5s ease;
    min-width: 4px;
}
.ach-progress-label {
    font-size: 8px;
    color: #475569;
    font-weight: 600;
    display: block;
    text-align: center;
    margin-top: 1px;
    line-height: 1;
}
.uc-ach-item.locked .ach-progress-wrap { display: block; }

/* === Friends feed === */
.friends-feed {
    background: rgba(52,211,153,0.07);
    border: 1px solid rgba(52,211,153,0.2);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.friends-feed-label {
    font-size: 11px;
    font-weight: 700;
    color: #34D399;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.friends-feed-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.friends-feed-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(52,211,153,0.15);
    border: 1px solid rgba(52,211,153,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #34D399;
}

/* === Volume slider === */
.sound-volume-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-main, #F8FAFC);
}
.sound-volume-row .label {
    flex-shrink: 0;
    min-width: 90px;
}
.volume-slider {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    accent-color: #F97316;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
}

/* === Quiz history === */
.uc-history-wrap {
    padding: 0 0 4px;
}
.uc-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 8px;
    transition: background 0.15s;
    user-select: none;
}
.uc-history-header:hover { background: rgba(255,255,255,0.04); }
.uc-history-header.open .uc-ach-toggle-arrow { transform: rotate(180deg); }
.uc-history-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.uc-history-body.open { max-height: 300px; }
.uc-history-list { padding: 0 8px 8px; }
.uc-history-row {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    padding: 7px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
}
.uc-history-row:last-child { border-bottom: none; }
.uhr-date { color: #64748B; font-size: 11px; font-weight: 600; }
.uhr-score { text-align: center; font-weight: 700; color: #F97316; }
.uhr-time { text-align: right; color: #64748B; font-size: 11px; }

/* === PWA install banner === */
.pwa-install-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9990;
    background: #1E293B;
    border-top: 1px solid rgba(249,115,22,0.3);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
}
.pwa-install-banner.pwa-banner-visible {
    transform: translateY(0);
}
.pwa-install-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pwa-install-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.pwa-install-text { flex: 1; }
.pwa-install-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
}
.pwa-install-sub {
    font-size: 12px;
    color: #64748B;
    margin-top: 2px;
}
.pwa-install-close {
    background: none;
    border: none;
    color: #475569;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}
.pwa-install-actions {
    display: flex;
    gap: 8px;
}

/* === VIP crown fix — absolutní pozice, nevytlačuje jméno === */
.vip-crown-header {
    position: absolute !important;
    top: -10px !important;
    right: -8px !important;
    font-size: 13px !important;
    display: none;
    z-index: 1300;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 0 5px rgba(255,215,0,0.9));
    animation: vip-crown-float 3s ease-in-out infinite;
    line-height: 1;
}
.vip-crown-header.visible { display: block !important; }
/* Login wrapper musí být relativní (je ale pro jistotu znovu) */
.login-wrapper { position: relative; }
/* Jméno v header tlačítku se nezmáčkne */
.login-btn.logged-in span {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* === Support screen === */
.support-section {
    margin-bottom: 24px;
}
.support-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(249,115,22,0.15);
}
.support-faq-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.support-faq-item:hover { border-color: rgba(249,115,22,0.2); }
.support-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #F8FAFC;
    user-select: none;
    gap: 10px;
}
.support-faq-q .faq-arrow {
    font-size: 10px;
    color: var(--primary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.support-faq-item.open .faq-arrow { transform: rotate(180deg); }
.support-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.6;
}
.support-faq-item.open .support-faq-a { max-height: 300px; }
.support-faq-a-inner {
    padding: 0 14px 12px;
}
.support-contact-card {
    background: rgba(249,115,22,0.06);
    border: 1px solid rgba(249,115,22,0.18);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.support-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.support-contact-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}
.support-contact-label {
    font-weight: 600;
    color: #F8FAFC;
    font-size: 13px;
}
.support-contact-value {
    color: var(--primary);
    font-size: 13px;
    word-break: break-all;
}
.support-contact-value a {
    color: var(--primary);
    text-decoration: none;
}
.support-contact-value a:hover { text-decoration: underline; }
.support-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.support-info-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
}
.support-info-chip-label {
    color: #64748B;
    margin-bottom: 3px;
}
.support-info-chip-value {
    font-weight: 700;
    color: #F8FAFC;
    font-size: 13px;
}
.support-btn-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.btn-support-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    text-decoration: none;
}
.btn-support-action:active { transform: scale(0.97); }
.btn-support-primary {
    background: linear-gradient(135deg, #F97316, #EA580C);
    color: #fff;
}
.btn-support-secondary {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #F8FAFC;
}
.btn-support-secondary:hover { background: rgba(255,255,255,0.08); }

/* Klikatelný in-app toast */
.inapp-toast-clickable {
    cursor: pointer;
    padding-right: 14px;
}
.inapp-toast-clickable::after {
    content: ' →';
    opacity: 0.7;
}
.inapp-toast-clickable:hover {
    filter: brightness(1.1);
}

/* ============================================================
   NOTIF BLOCKED MODAL — krok za krokem
   ============================================================ */
.notif-blocked-card {
    max-height: 85vh;
    overflow-y: auto;
}
.notif-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 20px;
    width: 100%;
}
.notif-step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.15);
    border-radius: 12px;
    padding: 12px 14px;
}
.notif-step-num {
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F97316;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notif-step-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}
.notif-step-text {
    font-size: 13px;
    color: #E2E8F0;
    line-height: 1.4;
    text-align: left;
}

/* ============================================================
   iOS SAFE-AREA — notch a home indikátor (iPhone X+, installed PWA)
   ============================================================ */
body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
/* Fixed/sticky elementy musí safe-area kompenzovat vlastním paddingem */
.offline-banner,
.nav-top,
.bottom-nav,
.top-bar {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
.bottom-nav,
.fab,
.floating-cta {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   TOAST STACK — více toastů se řadí nad sebe, nepřepisují se
   ============================================================ */
#inapp-toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 10050;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: min(92vw, 420px);
    width: 100%;
}
#inapp-toast-stack .inapp-toast {
    position: static !important;
    transform: translateY(20px);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: auto;
    left: auto;
    bottom: auto;
    margin: 0;
}
#inapp-toast-stack .inapp-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   STREAK WARNING BANNER — večerní připomínka
   ============================================================ */
.streak-warning-banner {
    position: relative;
    margin: 12px 16px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
    color: #FFF;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 6px 24px rgba(220,38,38,0.35);
    animation: streakPulse 2.4s ease-in-out infinite;
}
.streak-warning-banner .swb-icon { font-size: 26px; line-height: 1; }
.streak-warning-banner .swb-text { flex: 1; font-size: 14px; line-height: 1.35; }
.streak-warning-banner .swb-text b { display:block; font-size: 15px; margin-bottom: 2px; }
.streak-warning-banner .swb-cta {
    background: rgba(255,255,255,0.95);
    color: #DC2626;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
}
@keyframes streakPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(220,38,38,0.35); }
    50%      { box-shadow: 0 8px 32px rgba(220,38,38,0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .streak-warning-banner { animation: none; }
}

/* ============================================================
   DAILY COUNTDOWN HERO — výrazný na výsledkové obrazovce
   ============================================================ */
.daily-countdown-hero {
    margin: 20px 16px;
    padding: 22px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(249,115,22,0.18) 0%, rgba(234,88,12,0.10) 100%);
    border: 1px solid rgba(249,115,22,0.35);
    text-align: center;
}
.daily-countdown-hero .dch-label {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #FDBA74;
    font-weight: 700;
    margin-bottom: 6px;
}
.daily-countdown-hero .dch-time {
    font-size: 32px;
    font-weight: 900;
    color: #F8FAFC;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.daily-countdown-hero .dch-sub {
    font-size: 13px;
    color: #94A3B8;
    margin-top: 4px;
}


/* ============================================================
   FIX: stabilní pozice odpovědí — otázka flex-1, odpovědi vždy dole
   ============================================================ */
#screen-quiz {
    display: flex;
    flex-direction: column;
    /* Minimální výška zajistí, že flex má dostatek prostoru */
    min-height: min(680px, 92svh);
}

/* Otázka vyplní zbylý prostor a text v ní je vertikálně centrovaný */
#question-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem 0 0.5rem;
    min-height: 4rem;
    /* Bez scrollování — flex:1 zaručuje dost prostoru pro jakoukoliv otázku */
    overflow: visible;
    /* Adaptivní velikost písma: min 0.95rem, ideál 2.8vw, max 1.2rem */
    font-size: clamp(1.1rem, 3.2vw, 1.35rem);
}

/* Odpovědi a tlačítko nahlásit mají pevné místo dole */
#answers-grid {
    flex-shrink: 0;
    margin-top: 0;
}
.report-question-btn {
    flex-shrink: 0;
}

/* ============================================================
   ZÁLOŽKY KATEGORIÍ TÉMAT
   ============================================================ */
.topic-tabs-nav {
    display: flex;
    gap: 8px;
    margin: 12px 0 16px;
}

.topic-tab-btn {
    flex: 1;
    padding: 9px 14px;
    border-radius: 10px;
    border: 2px solid var(--bg-soft);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.topic-tab-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 10px rgba(249,115,22,0.35);
}

@media (hover: hover) {
    .topic-tab-btn:not(.active):hover {
        border-color: var(--primary);
        color: var(--primary);
    }
}

/* Coming-soon téma */
.topic-card.topic-card-soon {
    opacity: 0.55;
    cursor: default;
    position: relative;
}

.topic-card.topic-card-soon:disabled {
    pointer-events: none;
}

.topic-soon-badge {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Challenge modal — topic panely */
.ch-topics-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.ch-topic-btn.ch-topic-soon {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
    position: relative;
}

.ch-topic-soon-badge {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Challenge modal — přebití původního grid layoutu pro novou strukturu s tagy */
#challenge-topics-grid {
    display: block; /* záložky + panely, ne grid */
}

/* ============================================================
   SIDEBAR — na PC zarovnaný s obsahem (ne od levého okraje)
   Na mobilu zůstává klasické chování (left: 0)
   ============================================================ */
@media (min-width: 640px) {
    .sidebar {
        /* Přesuneme sidebar tak, aby levý okraj seděl s .app-container */
        /* .app-container: max-width 600px, margin auto → left edge = max(0, 50vw - 300px) */
        left: max(0px, calc(50vw - 310px));
        border-radius: 0 0 16px 0;
        top: 0;
        box-shadow: 4px 0 30px rgba(0,0,0,0.45);
    }
}

/* Přebití původního 1.3rem pro otázku — adaptivní clamp() výše v #question-text */
.question-text {
    font-size: inherit;
}