/* ============================================================
   TapGo10Ngon — App CSS
   Dùng cùng TailwindCSS CDN. File này chứa custom styles
   không thể viết bằng Tailwind utility classes.
   ============================================================ */

/* Google Fonts fallback nếu offline */
body { font-family: 'Inter', system-ui, sans-serif; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1E1E2E; }
::-webkit-scrollbar-thumb { background: #3A3A5C; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6C63FF; }

/* Keyboard key styles */
.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.1s ease;
    user-select: none;
    cursor: default;
    border-bottom: 3px solid;
}

.key-default   { background: #FDFCF8; color: #8A9A5B; border-color: #D1D5C2; }
.key-home      { background: #E8EADF; color: #556B2F; border-color: #C2CC9D; }
.key-active    { background: #8A9A5B; color: #fff; border-color: #556B2F; transform: scale(1.05); }
.key-correct   { background: #C2CC9D; color: #556B2F; border-color: #8A9A5B; }
.key-incorrect { background: #FFC0CB; color: #C71585; border-color: #FF69B4; }
.key-pressed   { background: #8A9A5B; color: #fff; border-color: #556B2F; transform: translateY(2px); }

/* Practice typing area */
.typing-text { font-family: 'JetBrains Mono', monospace; line-height: 2; letter-spacing: 0.05em; white-space: pre-wrap; word-break: break-all; }
.char-pending   { color: #6B7280; }
.char-correct   { color: #556B2F; font-weight: 700; }
.char-incorrect { color: #C71585; text-decoration: underline; background: #FFC0CB80; }
.char-current   { color: #fff; background: #8A9A5B; border-radius: 4px; }

/* Game canvas */
.game-area { position: relative; overflow: hidden; background: #FDFCF8; border-radius: 12px; }

/* Progress ring */
.progress-ring__circle { transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); transform-origin: 50% 50%; }

/* Flash animations */
@keyframes flash-correct   { 0%,100% { background: transparent; } 50% { background: #C2CC9D80; } }
@keyframes flash-incorrect { 0%,100% { background: transparent; } 50% { background: #FFC0CB80; } }
.flash-correct   { animation: flash-correct 0.3s ease; }
.flash-incorrect { animation: flash-incorrect 0.3s ease; }

/* Leaderboard table */
.leaderboard-table th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.leaderboard-table .top-1 { background: linear-gradient(90deg, #FFD70015, transparent); }
.leaderboard-table .top-2 { background: linear-gradient(90deg, #C0C0C015, transparent); }
.leaderboard-table .top-3 { background: linear-gradient(90deg, #CD7F3215, transparent); }

/* Admin table */
.admin-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.admin-table tr:hover td { background: #E8EADF50; }