:root {
    --bg: #1a1a2e;
    --card-bg: #16213e;
    --accent: #e94560;
    --text: #ffffff;
    --text-muted: #a0a0b0;
    --highlight: #0f3460;
    --gold: #ffd700;
    --success: #4caf50;
    --danger: #f44336;
    --gryffindor: #740001;
    --gryffindor-gold: #d3a625;
    --slytherin: #1a472a;
    --slytherin-silver: #5d5d5d;
    --hufflepuff: #ecb939;
    --hufflepuff-black: #372e29;
    --ravenclaw: #0e1a40;
    --ravenclaw-bronze: #946b2d;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Particle Canvas
   ============================================================ */

#particle-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    pointer-events: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.2s;
}

body.flash-correct { background-color: rgba(76, 175, 80, 0.2); }
body.flash-wrong { background-color: rgba(233, 69, 96, 0.2); }

header {
    text-align: center;
    padding: 1rem;
    position: relative;
}

.progress-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
}

.progress-bar {
    height: 100%;
    background-color: var(--success);
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

h1 { font-size: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.25rem; }
.subtitle { font-size: 0.9rem; color: var(--text-muted); }

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

#main-view { display: flex; flex-direction: column; flex: 1; }
.hidden { display: none !important; }

.controls-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}

button {
    font-family: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 8px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: opacity 0.2s, transform 0.1s, background-color 0.2s;
}

button:active { transform: scale(0.96); }

.controls-top button {
    flex: 1;
    padding: 0.5rem 0;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.btn-text { font-size: 0.7rem; }

@media (min-width: 400px) {
    .controls-top button { flex-direction: row; font-size: 1rem; gap: 0.5rem; }
    .btn-text { font-size: 0.85rem; }
}

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

.card-container {
    flex: 1;
    perspective: 1000px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.card { width: 100%; height: 300px; cursor: pointer; }
@media (min-height: 700px) { .card { height: 350px; } }
@media (min-height: 800px) { .card { height: 400px; } }

.card-inner {
    position: relative;
    width: 100%; height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.card.flipped .card-inner { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-back { transform: rotateY(180deg); }

.word-container { margin-bottom: 1.5rem; }
.word {
    font-size: 2rem;
    font-weight: bold;
    color: var(--gold);
    background-color: var(--highlight);
    padding: 0.2em 0.5em;
    border-radius: 8px;
    display: inline-block;
}
.sentence { font-size: 1rem; font-style: italic; line-height: 1.5; color: var(--text); }
.english { font-size: 1.1rem; font-weight: normal; line-height: 1.5; }

.tap-hint {
    position: absolute;
    bottom: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.controls-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.btn-nav { background-color: transparent; color: var(--text); font-size: 1.5rem; padding: 0.5rem; }
.counter { font-size: 1rem; font-weight: bold; color: var(--text-muted); }

.action-buttons { display: flex; gap: 1rem; margin-bottom: 1rem; }
.btn-action { flex: 1; padding: 1rem; font-weight: bold; color: white; }
.btn-red { background-color: var(--accent); }
.btn-green { background-color: var(--success); }

/* ============================================================
   Quiz / Test Views
   ============================================================ */

#quiz-view, #quiz-results, #blitz-view, #daily-challenge-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}

.btn-stop {
    background: rgba(233, 69, 96, 0.15);
    color: var(--accent);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 50%;
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    font-size: 1rem;
    flex-shrink: 0;
    z-index: 10;
}
.btn-stop:hover { background: var(--accent); color: white; }

.quiz-question {
    text-align: center;
    margin-bottom: 2rem;
    background-color: var(--card-bg);
    padding: 2rem 1rem;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.quiz-options { display: flex; flex-direction: column; gap: 0.75rem; }

.btn-quiz-option {
    background-color: var(--card-bg);
    color: var(--text);
    width: 100%; height: 52px;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.2s;
    animation: optionFadeIn 0.3s ease-out backwards;
}
.btn-quiz-option:nth-child(1) { animation-delay: 0s; }
.btn-quiz-option:nth-child(2) { animation-delay: 0.05s; }
.btn-quiz-option:nth-child(3) { animation-delay: 0.1s; }
.btn-quiz-option:nth-child(4) { animation-delay: 0.15s; }

.btn-quiz-option.correct { background-color: var(--success) !important; }
.btn-quiz-option.wrong { background-color: var(--accent) !important; }

/* Quiz Results */
.score-display { text-align: center; margin: 2rem 0; }
.score-number { font-size: 3rem; font-weight: bold; color: var(--gold); }

.score-bar-container {
    width: 100%; height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-top: 1rem;
    overflow: hidden;
}
.score-bar {
    height: 100%;
    background-color: var(--success);
    width: 0%;
    transition: width 1s ease-out;
}

.mistakes-list { list-style: none; margin-bottom: 2rem; }
.mistakes-list li {
    background-color: var(--card-bg);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--accent);
}
.mistakes-list .correct-answer { color: var(--success); font-weight: bold; margin-top: 0.5rem; display: block; }

/* ============================================================
   Blitz Mode
   ============================================================ */

.blitz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.blitz-timer-wrap, .blitz-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.blitz-timer-icon { font-size: 1rem; }
.blitz-timer {
    font-size: 2rem;
    font-weight: 900;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}
.blitz-timer-danger { color: var(--danger) !important; animation: blitzPulse 0.5s ease-in-out infinite; }

@keyframes blitzPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.blitz-score-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.blitz-score { font-size: 2rem; font-weight: 900; color: var(--success); }

.blitz-final-score {
    font-size: 5rem;
    font-weight: 900;
    color: var(--gold);
    text-align: center;
    margin: 2rem 0 0.5rem;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.blitz-best-score {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}
.blitz-new-best { color: var(--gold) !important; animation: blitzNewBest 0.5s ease-out; }

@keyframes blitzNewBest {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.blitz-result-actions { display: flex; gap: 1rem; }

/* ============================================================
   Daily Challenge Banner
   ============================================================ */

.daily-challenge-banner {
    margin-bottom: 1rem;
    animation: dcSlideIn 0.4s ease-out;
}

@keyframes dcSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.daily-challenge-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(233, 69, 96, 0.08) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.daily-challenge-icon {
    font-size: 1.5rem;
    animation: dcStar 2s ease-in-out infinite;
}

@keyframes dcStar {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.15); }
}

.daily-challenge-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.85rem;
}
.daily-challenge-text strong { color: var(--gold); }

.btn-daily-challenge {
    background: linear-gradient(135deg, var(--gold), #e6a800);
    color: #1a1a2e;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    min-height: 36px;
}

/* ============================================================
   Due Cards Banner
   ============================================================ */

.due-cards-banner {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gold);
    padding: 0.3rem 0;
    margin-bottom: 0.25rem;
    animation: duePulse 2s ease-in-out infinite;
}

@keyframes duePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ============================================================
   Stats Modal
   ============================================================ */

.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(26, 26, 46, 0.95);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.modal-content {
    background-color: var(--card-bg);
    width: 100%; max-width: 500px; max-height: 90vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.btn-close { background: transparent; color: var(--text); font-size: 1.5rem; min-width: 44px; min-height: 44px; }

.stats-body, .achievements-body { padding: 1.5rem; overflow-y: auto; }

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stats-body h3 { margin: 1.5rem 0 0.5rem 0; color: var(--gold); font-size: 1.1rem; }
.stat-list { list-style: none; }
.stat-list li { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.9rem; }
.mt-4 { margin-top: 1.5rem; }

/* Filter bar */
.filter-bar, .stats-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.stats-filter-bar { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }

.filter-chip {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: var(--highlight);
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.15s;
    min-height: 32px;
    min-width: auto;
    position: relative;
    overflow: hidden;
}
.filter-chip:active { transform: scale(0.95); }
.filter-chip-sm { padding: 0.25rem 0.6rem; font-size: 0.75rem; min-height: 28px; }
.filter-chip.filter-active { background-color: var(--accent); color: white; border-color: var(--accent); }
.filter-chip.filter-parent { background-color: rgba(233, 69, 96, 0.3); color: var(--text); border-color: var(--accent); }
.filter-chip.filter-chapter { font-size: 0.75rem; padding: 0.25rem 0.6rem; }

.filter-chip.filter-locked {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgba(255,255,255,0.05);
}

.filter-shake {
    animation: filterShake 0.5s ease-in-out;
}

@keyframes filterShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Filter chip ripple */
.filter-chip::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s, opacity 0.4s;
    opacity: 0;
}
.filter-chip:active::after { width: 200px; height: 200px; opacity: 1; transition: 0s; }

/* Chapter stats */
.chapter-stats { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.chapter-stat-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.1rem 0.5rem;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.chapter-stat-label { font-weight: 600; font-size: 0.85rem; grid-row: 1; grid-column: 1; }
.chapter-stat-title { font-size: 0.75rem; color: var(--text-muted); grid-row: 2; grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-stat-bar-wrap { grid-row: 1; grid-column: 2; height: 6px; background-color: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; min-width: 60px; }
.chapter-stat-bar { height: 100%; background-color: var(--success); border-radius: 3px; transition: width 0.3s ease; }
.chapter-stat-num { grid-row: 1; grid-column: 3; font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   House Points (Stats Modal)
   ============================================================ */

.house-points-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.house-point-row {
    display: grid;
    grid-template-columns: 1.5rem auto 1fr auto auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
}
.house-point-active { background: rgba(255, 215, 0, 0.06); border: 1px solid rgba(255, 215, 0, 0.15); }
.house-point-emoji { font-size: 1rem; }
.house-point-name { font-size: 0.8rem; font-weight: 600; }
.house-point-bar-wrap { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.house-point-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.house-bar-gryffindor { background: linear-gradient(90deg, var(--gryffindor), var(--gryffindor-gold)); }
.house-bar-slytherin { background: linear-gradient(90deg, var(--slytherin), #2d8659); }
.house-bar-hufflepuff { background: linear-gradient(90deg, var(--hufflepuff-black), var(--hufflepuff)); }
.house-bar-ravenclaw { background: linear-gradient(90deg, var(--ravenclaw), #2155a8); }
.house-point-xp { font-size: 0.75rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.house-point-members { font-size: 0.7rem; color: var(--text-muted); }

/* ============================================================
   Auth Screen
   ============================================================ */

.auth-view {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: radial-gradient(ellipse at 50% 20%, #1e2746 0%, var(--bg) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: authFadeIn 0.5s ease;
}
@keyframes authFadeIn { from { opacity: 0; } to { opacity: 1; } }

.auth-container { width: 100%; max-width: 380px; text-align: center; }

.auth-logo {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    animation: authPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
}
@keyframes authPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.7)); }
}

.auth-title { font-size: 1.6rem; color: var(--gold); margin-bottom: 0.25rem; text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
.auth-subtitle { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 2rem; }

.auth-form { display: flex; flex-direction: column; gap: 0.75rem; }

.auth-field input {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(15, 52, 96, 0.6);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-field input::placeholder { color: var(--text-muted); opacity: 0.7; }
.auth-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15); }

.auth-btn {
    width: 100%;
    padding: 0.85rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold) 0%, #e6a800 100%);
    color: #1a1a2e;
    font-size: 1.05rem;
    font-weight: 700;
    min-height: 48px;
    margin-top: 0.25rem;
}
.auth-btn:hover { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3); }
.auth-btn:active { transform: scale(0.97); }
.auth-btn:disabled { opacity: 0.6; cursor: wait; }

.auth-error {
    background-color: rgba(233, 69, 96, 0.15);
    color: var(--accent);
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.auth-toggle { margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); }
.auth-toggle-btn {
    background: none; border: none;
    color: var(--gold);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0; min-height: auto; min-width: auto; display: inline;
}
.auth-toggle-btn:active { transform: none; }

/* Auth house selection */
.auth-house-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.auth-house-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.auth-house-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 2px solid transparent;
    color: var(--text);
    font-size: 1.5rem;
    min-height: 60px;
    transition: border-color 0.2s, background 0.2s;
}
.auth-house-btn span { font-size: 0.65rem; color: var(--text-muted); }
.auth-house-btn:hover { background: rgba(255,255,255,0.08); }
.auth-house-selected { border-color: var(--gold) !important; background: rgba(255, 215, 0, 0.1); }

/* ============================================================
   House Selection Modal
   ============================================================ */

.house-modal-content {
    text-align: center;
    max-width: 420px;
    padding: 2rem;
}

.house-hat {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    animation: hatWobble 3s ease-in-out infinite;
}

@keyframes hatWobble {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.house-modal-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }

.house-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.house-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0.5rem;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    min-height: 100px;
    transition: all 0.3s;
}
.house-btn:hover { transform: translateY(-2px); }

.house-emoji { font-size: 2rem; }
.house-name { font-size: 0.9rem; font-weight: 700; }
.house-trait { font-size: 0.7rem; color: var(--text-muted); }

.house-gryffindor:hover { border-color: var(--gryffindor-gold); background: rgba(116, 0, 1, 0.2); }
.house-slytherin:hover { border-color: #2d8659; background: rgba(26, 71, 42, 0.2); }
.house-hufflepuff:hover { border-color: var(--hufflepuff); background: rgba(236, 185, 57, 0.15); }
.house-ravenclaw:hover { border-color: #2155a8; background: rgba(14, 26, 64, 0.3); }

/* ============================================================
   Header: Level Badge, XP Bar, Streak, House
   ============================================================ */

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    padding: 0 0.25rem;
}

.header-level { display: flex; align-items: center; gap: 0.4rem; }

.level-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold);
    background-color: rgba(255, 215, 0, 0.12);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    white-space: nowrap;
}

.level-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.streak-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.12);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 107, 53, 0.2);
    white-space: nowrap;
}

.streak-fire {
    animation: streakFire 1s ease-in-out infinite alternate;
}

@keyframes streakFire {
    from { text-shadow: 0 0 4px rgba(255, 107, 53, 0.5); }
    to { text-shadow: 0 0 12px rgba(255, 107, 53, 0.8), 0 0 20px rgba(255, 165, 0, 0.4); }
}

.header-user { display: flex; align-items: center; gap: 0.4rem; }

.house-badge {
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}
.house-color-gryffindor { background: rgba(116, 0, 1, 0.3); }
.house-color-slytherin { background: rgba(26, 71, 42, 0.3); }
.house-color-hufflepuff { background: rgba(236, 185, 57, 0.2); }
.house-color-ravenclaw { background: rgba(14, 26, 64, 0.4); }

.user-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.btn-logout {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    min-height: 28px; min-width: auto;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-logout:hover { color: var(--accent); border-color: var(--accent); }

/* XP Bar */
.xp-bar-container {
    position: relative;
    width: 100%; height: 6px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: visible;
    margin-bottom: 0.5rem;
}
.xp-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #ffaa00);
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}
.xp-label {
    position: absolute;
    right: 0; top: 8px;
    font-size: 0.65rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Toasts: Level-Up, Penalty, Achievement, Streak Lost
   ============================================================ */

.levelup-toast, .penalty-toast, .achievement-toast, .streak-lost-toast {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 3000;
    pointer-events: none;
}

.levelup-toast { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.levelup-toast.levelup-show { transform: translateX(-50%) translateY(0); }
.levelup-toast.levelup-hide { transform: translateX(-50%) translateY(-100%); transition: transform 0.4s ease-in; }

.levelup-toast-inner {
    display: flex; align-items: center; gap: 0.5rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 50%, #ffd700 100%);
    background-size: 200% 200%;
    animation: levelupShimmer 2s ease-in-out infinite;
    color: #1a1a2e;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 12px 12px;
    font-weight: 700; font-size: 1rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
}
@keyframes levelupShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.levelup-emoji { font-size: 1.4rem; animation: levelupBounce 0.6s ease-in-out infinite alternate; }
@keyframes levelupBounce { from { transform: translateY(0); } to { transform: translateY(-3px); } }

/* Penalty Toast */
.penalty-toast { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.penalty-toast.penalty-show { transform: translateX(-50%) translateY(0); }
.penalty-toast.penalty-hide { transform: translateX(-50%) translateY(-100%); transition: transform 0.3s ease-in; }

.penalty-toast-inner {
    display: flex; align-items: center; gap: 0.5rem;
    background: linear-gradient(135deg, #e94560 0%, #c0392b 100%);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 12px 12px;
    font-weight: 700; font-size: 0.95rem;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.5);
    white-space: nowrap;
    animation: penaltyShake 0.4s ease-in-out;
}
@keyframes penaltyShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* Achievement Toast */
.achievement-toast { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.achievement-toast.achievement-show { transform: translateX(-50%) translateY(0); }
.achievement-toast.achievement-hide { transform: translateX(-50%) translateY(-100%); transition: transform 0.4s ease-in; }

.achievement-toast-inner {
    display: flex; align-items: center; gap: 0.5rem;
    background: linear-gradient(135deg, #9c27b0, #7b1fa2, #ce93d8);
    background-size: 200% 200%;
    animation: achievementShimmer 2s ease-in-out infinite;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 12px 12px;
    font-weight: 700; font-size: 1rem;
    box-shadow: 0 4px 20px rgba(156, 39, 176, 0.5);
    white-space: nowrap;
}
@keyframes achievementShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.achievement-toast-emoji { font-size: 1.4rem; animation: levelupBounce 0.6s ease-in-out infinite alternate; }

/* Streak Lost Toast */
.streak-lost-toast { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.streak-lost-toast.streak-lost-show { transform: translateX(-50%) translateY(0); }
.streak-lost-toast.streak-lost-hide { transform: translateX(-50%) translateY(-100%); transition: transform 0.4s ease-in; }

.streak-lost-toast-inner {
    display: flex; align-items: center; gap: 0.5rem;
    background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
    color: #aaa;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 12px 12px;
    font-weight: 700; font-size: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    animation: darkMarkPulse 2s ease-in-out infinite;
}
@keyframes darkMarkPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); }
    50% { box-shadow: 0 4px 30px rgba(100, 0, 0, 0.5), 0 0 40px rgba(50, 0, 0, 0.3); }
}
.streak-lost-emoji { font-size: 1.4rem; }

/* ============================================================
   Achievements Modal
   ============================================================ */

.achievements-header {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 1rem;
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s;
}

.achievement-unlocked {
    background: rgba(156, 39, 176, 0.08);
    border-color: rgba(156, 39, 176, 0.2);
}

.achievement-locked {
    background: rgba(255,255,255,0.02);
    opacity: 0.5;
}

.achievement-emoji { font-size: 2rem; min-width: 2.5rem; text-align: center; }
.achievement-info { flex: 1; }
.achievement-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.1rem; }
.achievement-desc { font-size: 0.8rem; color: var(--text-muted); }
.achievement-date { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }

.loading { text-align: center; color: var(--text-muted); padding: 2rem; }

/* ============================================================
   Floating XP Indicator
   ============================================================ */

.xp-float {
    position: fixed;
    z-index: 4000;
    pointer-events: none;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, 0);
    opacity: 0;
    transition: none;
}
.xp-float-negative { color: var(--accent); text-shadow: 0 0 10px rgba(233, 69, 96, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5); }
.xp-float-animate { animation: xpFloatUp 1.2s ease-out forwards; }

@keyframes xpFloatUp {
    0% { opacity: 1; transform: translate(-50%, 0) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -10px) scale(1.3); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(0.8); }
}

/* ============================================================
   Card Animations
   ============================================================ */

.card.slide-left .card-inner { animation: slideOutLeft 0.15s ease-in forwards; }
.card.slide-right .card-inner { animation: slideOutRight 0.15s ease-in forwards; }
.card.slide-in-right .card-inner { animation: slideInRight 0.25s ease-out forwards; }
.card.slide-in-left .card-inner { animation: slideInLeft 0.25s ease-out forwards; }

@keyframes slideOutLeft { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(-40px) scale(0.95); opacity: 0; } }
@keyframes slideOutRight { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(40px) scale(0.95); opacity: 0; } }
@keyframes slideInRight { from { transform: translateX(40px) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes slideInLeft { from { transform: translateX(-40px) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }

.btn-glow-success { animation: glowPulseGreen 0.6s ease-out; }
@keyframes glowPulseGreen { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 40% { box-shadow: 0 0 20px 8px rgba(76, 175, 80, 0.5); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } }

.btn-wiggle { animation: wiggle 0.5s ease-in-out; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }

/* Progress bar glow */
.progress-bar::after {
    content: '';
    position: absolute;
    right: 0; top: -2px; bottom: -2px;
    width: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success), 0 0 16px var(--success);
    opacity: 0; transition: opacity 0.3s;
}
.progress-glow .progress-bar::after { opacity: 1; animation: progressGlowPulse 1s ease-in-out 3; }
@keyframes progressGlowPulse { 0%, 100% { box-shadow: 0 0 8px var(--success); } 50% { box-shadow: 0 0 20px var(--success), 0 0 30px rgba(76, 175, 80, 0.4); } }

/* Card flip shimmer */
.card.flipped .card-back { animation: cardShimmer 0.8s ease-out 0.3s; }
@keyframes cardShimmer { 0% { box-shadow: 0 8px 24px rgba(0,0,0,0.2); } 30% { box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 30px rgba(255,215,0,0.25); } 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.2); } }

@keyframes optionFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Card penalty */
.card-penalty .card-inner { animation: cardPenaltyShake 0.5s ease-in-out; }
@keyframes cardPenaltyShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-12px) rotate(-2deg); }
    20% { transform: translateX(12px) rotate(2deg); }
    30% { transform: translateX(-10px) rotate(-1deg); }
    40% { transform: translateX(10px) rotate(1deg); }
    50% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
}
.card-penalty .card-front, .card-penalty .card-back {
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.6), 0 8px 24px rgba(0, 0, 0, 0.2);
    border-color: var(--accent);
}

/* ============================================================
   Unified Test Results
   ============================================================ */

.test-results-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.5rem; }
.test-result-card { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 1rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.08); }
.test-result-wizard { border-color: rgba(255, 215, 0, 0.3); background: rgba(255, 215, 0, 0.05); }
.test-result-muggle { border-color: rgba(33, 150, 243, 0.3); background: rgba(33, 150, 243, 0.05); }
.test-result-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.test-result-badge { font-size: 1.3rem; font-weight: 900; margin-bottom: 0.4rem; line-height: 1.3; }
.test-result-wizard .test-result-badge { color: var(--gold); }
.muggle-a1 { color: #4caf50; }
.muggle-a2 { color: #2196f3; }
.muggle-b1 { color: #ff9800; }
.muggle-b2 { color: #9c27b0; }
.test-result-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.test-result-breakdown { margin: 1.5rem 0; }
.test-result-breakdown h3 { margin-bottom: 0.75rem; }
@media (max-width: 360px) { .test-results-dual { grid-template-columns: 1fr; } }

/* ============================================================
   CEFR Readiness (Stats)
   ============================================================ */

.cefr-readiness { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.cefr-row { background: rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.06); }
.cefr-row.cefr-ready { border-color: rgba(76, 175, 80, 0.3); background: rgba(76, 175, 80, 0.05); }
.cefr-row-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.cefr-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--highlight); color: var(--text); min-width: 2rem; text-align: center; }
.cefr-badge-ready { background: var(--success); color: #fff; }
.cefr-title { font-size: 0.85rem; flex: 1; }
.cefr-status { font-size: 0.75rem; color: var(--text-muted); }
.cefr-bar-wrap { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 0.3rem; }
.cefr-bar { height: 100%; background: linear-gradient(90deg, var(--gold), #ffb700); border-radius: 3px; transition: width 0.4s ease; }
.cefr-details { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); }

/* CEFR Breakdown */
.cefr-breakdown-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: rgba(255, 255, 255, 0.03); margin-bottom: 0.5rem; }
.cefr-breakdown-passed { border-left: 3px solid var(--success); }
.cefr-breakdown-failed { border-left: 3px solid var(--danger); }
.cefr-breakdown-skipped { opacity: 0.4; border-left: 3px solid transparent; }
.cefr-breakdown-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.cefr-breakdown-bar { height: 100%; background: var(--success); border-radius: 3px; transition: width 0.4s ease; }
.cefr-breakdown-bar-fail { background: var(--danger); }
.cefr-breakdown-score { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 5rem; text-align: right; }