.game-header { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.badge { padding: 4px 14px; border-radius: var(--radius-full); background: var(--color-surface-alt); font-size: .85rem; font-weight: 600; }
.badge-streak { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.difficulty-tabs { display: flex; gap: 4px; justify-content: center; }
.tab-btn { padding: 8px 20px; border: 2px solid var(--color-border); border-radius: var(--radius-full); background: transparent; color: var(--color-text); cursor: pointer; transition: all .2s; font-weight: 600; }
.tab-btn:hover { border-color: var(--color-primary); }
.tab-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.scrambled-word { font-size: 2.5rem; font-weight: 800; letter-spacing: 8px; padding: 30px 0; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; user-select: none; }
.hint-text { color: var(--color-text-secondary); font-style: italic; margin-top: 8px; }
.feedback { text-align: center; padding: 12px; margin-top: 16px; border-radius: var(--radius-md); font-weight: 600; animation: pop .3s ease; }
.feedback.correct { background: rgba(34,197,94,.1); color: #22c55e; }
.feedback.incorrect { background: rgba(239,68,68,.1); color: #ef4444; }
.timer-bar { width: 100%; height: 6px; background: var(--color-surface-alt); border-radius: 3px; overflow: hidden; }
.timer-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius: 3px; transition: width .1s linear; width: 100%; }
.hidden { display: none !important; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.score-row { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--color-border); font-size: .9rem; }