/* ==========================================================================
   AzTyping - Base Styles, Typography, Global Scrollbar & Utilities
   ========================================================================== */

/* Global Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(110, 68, 255, 0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(110, 68, 255, 0.6);
}

/* Font Families */
body.font-handwrite { font-family: 'Kalam', 'Caveat', cursive; }
body.font-typewriter { font-family: 'Courier Prime', monospace; }
body.font-clean { font-family: 'Outfit', sans-serif; }
body.font-rounded { font-family: 'Quicksand', 'Gaegu', sans-serif; }
body.font-mono { font-family: 'JetBrains Mono', monospace; }

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

/* SVG Icon global styles */
.menu-icon svg, .menu-icon { display: flex; align-items: center; justify-content: center; }
.menu-icon svg { flex-shrink: 0; }
.game-icon svg { display: block; }
.game-icon { display: flex; align-items: center; justify-content: center; }
.mode-emoji svg { display: block; }
.mode-emoji { display: flex; align-items: center; justify-content: center; line-height: 1; }
.icon svg { display: block; }
.icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sub-item svg { flex-shrink: 0; }
.crown-doodle svg { vertical-align: middle; display: inline-block; }
.footer-icon { display: flex; align-items: center; }
.footer-divider { display: flex; align-items: center; }
body { min-height: 100vh; padding: 16px 24px; display: flex; justify-content: center; align-items: stretch; }

/* ====================================================== */
/* SHIMMER SKELETON LOADING STATE SYSTEM                  */
/* ====================================================== */

@keyframes az-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, rgba(226,232,240,0.6) 25%, rgba(241,245,249,0.9) 50%, rgba(226,232,240,0.6) 75%);
    background-size: 200% 100%;
    animation: az-shimmer 1.5s infinite ease-in-out;
    border-radius: 6px;
    display: inline-block;
}

body.theme-dark .skeleton,
body.theme-neon .skeleton {
    background: linear-gradient(90deg, rgba(30,41,59,0.7) 25%, rgba(51,65,85,0.9) 50%, rgba(30,41,59,0.7) 75%);
    background-size: 200% 100%;
}

.skeleton-text {
    height: 1rem;
    width: 100%;
    margin-bottom: 6px;
    border-radius: 4px;
}

.skeleton-text.sm { height: 0.75rem; width: 60%; }
.skeleton-text.lg { height: 1.5rem; width: 80%; }

.skeleton-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-badge {
    width: 60px;
    height: 24px;
    border-radius: 12px;
}

.skeleton-card {
    min-height: 110px;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(226,232,240,0.5);
    width: 100%;
}


/* ==========================================================================
   ADVANCED TYPOGRAPHY, ICON MICRO-INTERACTIONS & MOTION PHYSICS
   ========================================================================== */

/* 1. Typography Rendering Engine */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .brand-title, .page-title, .card-title {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.015em;
}

.metric-value, .live-stat-value, .timer-val, .user-wpm, .user-acc, .timer-big, .xp-sub, .p-stat-box strong {
    font-family: 'JetBrains Mono', 'Outfit', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* 2. SVG Icon Micro-Interactions & Hover Dynamics */
.nav-item svg, .mode-pill svg, .btn svg, .control-icon-btn svg, .menu-item svg {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s ease, fill 0.2s ease;
    flex-shrink: 0;
}

.nav-item:hover svg {
    transform: scale(1.22) rotate(-6deg);
}

.mode-pill:hover svg {
    transform: scale(1.2) translateY(-1px);
}

.btn:hover svg {
    transform: translateX(4px) scale(1.1);
}

.control-icon-btn:hover svg {
    transform: rotate(45deg) scale(1.15);
}

/* Glowing Badges & Crown Micro-Animations */
.badge-pro {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #ffffff !important;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 4px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    animation: crownPulseGlow 2.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes crownPulseGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); transform: scale(1); }
    50% { box-shadow: 0 4px 16px rgba(245, 158, 11, 0.75); transform: scale(1.08); }
}

.crown-doodle {
    display: inline-block;
    animation: floatBounce 3.2s ease-in-out infinite;
}

@keyframes floatBounce {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-4px) rotate(-5deg); }
}

.title-crown {
    display: inline-block;
    animation: crownFloat 2.8s ease-in-out infinite;
}

@keyframes crownFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(8deg); }
}

/* 3. Card Micro-Interactions & Spring Physics */
.paper-card, .mode-card, .theme-picker-card, .font-picker-card, .arcade-game-card {
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.paper-card:hover {
    transform: translateY(-5px) scale(1.008);
}

.theme-picker-card:hover, .font-picker-card:hover {
    transform: translateY(-6px) scale(1.03);
}

.mode-quick-card {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
.mode-quick-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow 0.3s ease;
    pointer-events: none;
}
.mode-quick-card:hover {
    transform: translateY(-6px) scale(1.025) !important;
    box-shadow: 0 14px 28px -6px rgba(110,68,255,0.3) !important;
    border-color: var(--primary-purple) !important;
}
.mode-quick-card:hover::after {
    box-shadow: inset 0 0 0 2px rgba(110,68,255,0.4);
}

/* 4. Interactive Sticky Note Wiggle */
.sticky-note {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.sticky-note:hover {
    transform: rotate(0deg) translateY(-4px) scale(1.03) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.18) !important;
}

/* 5. Button Click Elastic Feedback */
.btn:active, .mode-pill:active, .control-icon-btn:active, .doodle-btn:active {
    transform: scale(0.96) translateY(1px) !important;
}

/* 6. Smooth Progress Filling Animation */
.progress-fill {
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 7. Live Speedometer Glow Effect */
.speedometer-widget {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.speedometer-widget:hover {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(110, 68, 255, 0.3);
}

/* Mobile Responsiveness & Touch Polish */
@media (max-width: 992px) {
    .nav-links {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
        padding: 4px;
    }
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    .quick-modes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .virtual-keyboard-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .paper-keyboard {
        min-width: 600px;
        transform: scale(0.9);
        transform-origin: top left;
    }
    .quick-modes-grid {
        grid-template-columns: 1fr !important;
    }
}