/**
 * Theme: Retro Arcade Blast - Enhancement Layer
 * Profile, achievements, animations, and general UI polish
 */

/* ─── PROFILE PAGE ─── */
.retro-profile-header {
    background: var(--bg-card);
    border: 3px solid var(--color-primary);
    border-radius: var(--radius-lg, 20px);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 6px 6px 0 var(--color-accent), 0 8px 32px rgba(0,0,0,0.15);
}
.retro-profile-header::before {
    content: '★';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 3rem;
    color: var(--color-secondary);
    animation: retro-star-spin 4s linear infinite;
    pointer-events: none;
}
@keyframes retro-star-spin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    to   { transform: rotate(360deg) scale(1); }
}

.retro-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--color-primary);
    box-shadow: 4px 4px 0 var(--color-secondary);
    transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.retro-profile-avatar:hover {
    transform: scale(1.08) rotate(-3deg);
}

.retro-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.retro-stat-card {
    background: var(--bg-card);
    border: 2px solid var(--color-secondary);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    box-shadow: 3px 3px 0 var(--color-accent);
    transition: transform 0.2s, box-shadow 0.2s;
}
.retro-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 5px 5px 0 var(--color-accent);
}
.retro-stat-value {
    font-family: var(--font-display, 'Fredoka', sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}
.retro-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ─── ACHIEVEMENTS ─── */
.retro-achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.retro-achievement-card {
    background: var(--bg-card);
    border: 2px solid var(--color-secondary);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    animation: retro-fadeUp 0.35s ease both;
}
.retro-achievement-card:hover {
    transform: translateY(-3px) rotate(-0.5deg);
    box-shadow: 5px 5px 0 var(--color-primary);
    border-color: var(--color-primary);
}
.retro-achievement-card.unlocked {
    border-color: var(--color-success);
    box-shadow: 3px 3px 0 var(--color-success);
}
.retro-achievement-card:not(.unlocked) {
    opacity: 0.5;
    filter: grayscale(0.7);
}
.retro-achievement-icon {
    font-size: 2rem;
    min-width: 44px;
    text-align: center;
}
.retro-achievement-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.retro-achievement-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Stagger */
.retro-achievement-card:nth-child(1) { animation-delay: 0.03s; }
.retro-achievement-card:nth-child(2) { animation-delay: 0.07s; }
.retro-achievement-card:nth-child(3) { animation-delay: 0.11s; }
.retro-achievement-card:nth-child(4) { animation-delay: 0.15s; }
.retro-achievement-card:nth-child(5) { animation-delay: 0.19s; }
.retro-achievement-card:nth-child(6) { animation-delay: 0.23s; }

@keyframes retro-fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── GAME CARDS HOVER BOOST ─── */
.retro-game-card {
    transition: transform 0.25s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.25s;
}
.retro-game-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 6px 6px 0 var(--color-primary), 0 12px 32px rgba(0,0,0,0.15);
}

/* ─── TOAST ─── */
.retro-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.retro-toast-msg {
    background: var(--bg-card);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 10px 18px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 3px 3px 0 var(--color-accent);
    animation: retro-popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    pointer-events: auto;
}
@keyframes retro-popIn {
    from { opacity: 0; transform: translateY(16px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── REWARD WIDGET ─── */
[data-reward-slot] .kz-reward-widget {
    background: var(--bg-card) !important;
    border: 2px solid var(--color-secondary) !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 var(--color-accent) !important;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(36,0,70,0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-danger);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    .retro-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .retro-achievement-grid {
        grid-template-columns: 1fr;
    }
    .retro-profile-header {
        padding: 16px;
    }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── PRINT ─── */
@media print {
    header, footer, .retro-toast-container, [data-challenge-slot], [data-reward-slot] {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000;
    }
}

/* ===== Card Enhancements ===== */
.retro-game-card { position: relative; }
.retro-game-card .game-thumb { position: relative; overflow: hidden; }

.card-fav-btn {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: 3px solid #240046;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s, transform .2s;
    font-size: 15px; color: #7b2ff7;
    box-shadow: 3px 3px 0 #240046;
}
.retro-game-card:hover .card-fav-btn { opacity: 1; }
.card-fav-btn:hover { transform: scale(1.15) rotate(-5deg); background: #ffd23f; }
.card-fav-btn.active,
.card-fav-btn.active i { color: #ff6b35; }
.card-fav-btn.active i::before { content: "\f004"; font-weight: 900; }

.card-trending {
    position: absolute; bottom: 8px; left: 8px; z-index: 5;
    background: #ffd23f; color: #240046;
    font-size: 11px; font-weight: 700; font-family: 'Fredoka One', cursive;
    padding: 4px 10px; border-radius: 12px;
    border: 2px solid #240046; box-shadow: 2px 2px 0 #240046;
    text-transform: uppercase;
}

.card-play-overlay {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(36,0,70,.45); opacity: 0; transition: opacity .25s;
}
.retro-game-card:hover .card-play-overlay { opacity: 1; }
.card-play-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: #ff6b35; color: #fff; border: 3px solid #240046;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; box-shadow: 3px 3px 0 #240046;
    transform: scale(.8); transition: transform .2s;
}
.retro-game-card:hover .card-play-btn { transform: scale(1) rotate(5deg); }

.retro-game-card.is-trending {
    box-shadow: 4px 4px 0 #ffd23f, 0 0 0 3px #240046;
}