:root {
            --parchment: #f8f5e6;
            --ink: #2c2c2c;
            --gold: #d4af37;
            --burgundy: #740001;
            --bg-dark: #121212;
            --focus-glow: 0;
        }

        * { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
        html, body { touch-action: manipulation; }

        body {
            background-color: var(--bg-dark);
            background-image:
                radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08), transparent 22%),
                radial-gradient(circle at 80% 10%, rgba(116, 0, 1, 0.07), transparent 20%),
                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%);
            font-family: 'MedievalSharp', cursive;
            display: flex; justify-content: center; align-items: center;
            min-height: 100vh; margin: 0; color: var(--ink); overflow: hidden;
            transition: background 0.5s, background-image 0.5s;
        }

        .bg-default {
            background-color: #0f0f14;
            background-image:
                radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08), transparent 22%),
                radial-gradient(circle at 80% 10%, rgba(116, 0, 1, 0.07), transparent 20%),
                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%);
        }

        /* ==================== SKINS ==================== */
        
        /* 1. DEFAULT (PARCHMENT) */
        .card-container.skin-default { 
            background:
                linear-gradient(180deg, rgba(212,175,55,0.06), rgba(116,0,1,0.05)),
                repeating-linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 32px, transparent 32px, transparent 64px),
                var(--parchment);
        }

        /* 2. GRYFFINDOR */
        .card-container.skin-gryffindor {
            background:
                linear-gradient(135deg, rgba(180, 30, 30, 0.7), rgba(90, 0, 0, 0.6)),
                repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.25) 0 8px, transparent 8px 24px),
                #2a0101;
            color: #ffeccc; border-color: #d4af37; box-shadow: 0 0 38px rgba(180, 30, 30, 0.8);
        }
        .card-container.skin-gryffindor #equation-display,
        .card-container.skin-gryffindor #answer-display { color: #ffeccc; border-color: #d4af37; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
        .card-container.skin-gryffindor .header-info, 
        .card-container.skin-gryffindor .shop-btn, 
        .card-container.skin-gryffindor .help-btn { color: #ffeccc; border-color: #d4af37; }
        .card-container.skin-gryffindor .key-btn {
            background: rgba(180, 30, 30, 0.25); border-color: #d4af37; color: #ffeccc;
        }
        .card-container.skin-gryffindor .key-btn:active { background: #d4af37; color: #3b0505; }

        /* 3. SLYTHERIN */
        .card-container.skin-slytherin { 
            background:
                linear-gradient(160deg, rgba(38, 84, 66, 0.8), rgba(14, 34, 26, 0.95)),
                repeating-linear-gradient(135deg, rgba(192, 192, 192, 0.25) 0 10px, transparent 10px 28px),
                radial-gradient(circle at 25% 20%, rgba(90, 160, 130, 0.32), transparent 38%),
                #0a1712;
            color: #d6ffea; border-color: #9ad5b9; box-shadow: 0 0 42px rgba(60, 150, 110, 0.95);
        }
        .card-container.skin-slytherin #equation-display,
        .card-container.skin-slytherin #answer-display { color: #e5fff4; border-color: #9ad5b9; text-shadow: 0 0 10px rgba(0,0,0,0.7); }
        .card-container.skin-slytherin .header-info, 
        .card-container.skin-slytherin .shop-btn, 
        .card-container.skin-slytherin .help-btn { color: #d6ffea; border-color: #9ad5b9; }
        .card-container.skin-slytherin .key-btn {
            background: rgba(0, 0, 0, 0.35); border-color: #9ad5b9; color: #e5fff4; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
        }
        .card-container.skin-slytherin .key-btn:active { background: #9ad5b9; color: #072419; }
        
        /* 4. RAVENCLAW */
        .card-container.skin-ravenclaw {
            background:
                linear-gradient(150deg, rgba(20, 60, 120, 0.85), rgba(8, 18, 44, 0.95)),
                repeating-linear-gradient(45deg, rgba(184, 115, 51, 0.3) 0 10px, transparent 10px 24px),
                radial-gradient(circle at 30% 25%, rgba(70, 130, 200, 0.28), transparent 40%),
                #0b1630;
            color: #e9f2ff; border-color: #c98640; box-shadow: 0 0 42px rgba(70, 120, 200, 0.95);
        }
        .card-container.skin-ravenclaw #equation-display,
        .card-container.skin-ravenclaw #answer-display { color: #f4f8ff; border-color: #c98640; text-shadow: 0 0 10px rgba(0,0,0,0.6); }
        .card-container.skin-ravenclaw .header-info, .card-container.skin-ravenclaw .shop-btn { color: #dce9ff; border-color: #c98640; }
        .card-container.skin-ravenclaw .key-btn { background: rgba(255,255,255,0.06); border-color: #c98640; color: #f7fbff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
        .card-container.skin-ravenclaw .key-btn:active { background: #c98640; color: #1a0d02; }

        /* 5. HUFFLEPUFF */
        .card-container.skin-hufflepuff {
            background:
                radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.3), transparent 35%),
                radial-gradient(circle at 80% 70%, rgba(255, 180, 0, 0.26), transparent 38%),
                repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 6px, transparent 6px 18px),
                #1d1a14;
            color: #fff4c2; border-color: #ffcd35; box-shadow: 0 0 40px rgba(255, 195, 0, 0.7);
        }
        .card-container.skin-hufflepuff #equation-display,
        .card-container.skin-hufflepuff #answer-display { color: #fff4c2; border-color: #ffcd35; text-shadow: 0 0 10px rgba(0,0,0,0.4); }
        .card-container.skin-hufflepuff .header-info, .card-container.skin-hufflepuff .shop-btn { color: #fff0b0; border-color: #ffcd35; }
        .card-container.skin-hufflepuff .key-btn { border-color: #ffcd35; color: #1d1a14; background: rgba(255, 215, 0, 0.25); }
        .card-container.skin-hufflepuff .key-btn:active { background: #ffcd35; color: #1d1a14; }

        /* 6. MARAUDER'S MAP */
        .card-container.skin-map {
            background:
                radial-gradient(circle at 22% 18%, rgba(120, 80, 40, 0.18), transparent 40%),
                radial-gradient(circle at 78% 72%, rgba(100, 70, 35, 0.16), transparent 42%),
                repeating-linear-gradient(45deg, rgba(80, 45, 15, 0.08) 0 3px, transparent 3px 9px),
                linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.07)),
                #f4e7d0;
            color: #3a2814; border-color: #8b5a2b; box-shadow: 0 0 38px rgba(80, 45, 15, 0.6);
        }
        .card-container.skin-map::after {
            content: "";
            position: absolute; inset: 10px;
            background:
                radial-gradient(circle at 30% 30%, rgba(58,40,20,0.08) 0 8%, transparent 12%),
                radial-gradient(circle at 70% 60%, rgba(58,40,20,0.08) 0 8%, transparent 12%);
            pointer-events: none;
        }
        .card-container.skin-map #equation-display,
        .card-container.skin-map #answer-display { color: #3a2814; border-color: #8b5a2b; text-shadow: 0 0 8px rgba(255,255,255,0.4); }
        .card-container.skin-map .header-info, .card-container.skin-map .shop-btn, .card-container.skin-map .help-btn { color: #3a2814; border-color: #8b5a2b; }
        .card-container.skin-map .key-btn { background: rgba(139, 90, 43, 0.12); border-color: #8b5a2b; color: #3a2814; }
        .card-container.skin-map .key-btn:active { background: #8b5a2b; color: #f4e7d0; }

        /* 7. SPELLBOOK */
        .card-container.skin-spellbook {
            background:
                radial-gradient(circle at 25% 20%, rgba(255, 215, 120, 0.18), transparent 45%),
                linear-gradient(135deg, rgba(95, 65, 35, 0.6), rgba(40, 22, 12, 0.95)),
                linear-gradient(90deg, rgba(0,0,0,0.25), rgba(255,255,255,0.12) 60%, rgba(0,0,0,0.25)),
                #2a170e;
            color: #f2e3c7; border-color: #d1a85b; box-shadow: 0 0 42px rgba(209, 168, 91, 0.7);
        }
        .card-container.skin-spellbook::before {
            content: "";
            position: absolute; inset: 12px;
            border: 2px solid rgba(209,168,91,0.6);
            border-radius: 6px;
            box-shadow: inset 0 0 12px rgba(0,0,0,0.35);
            pointer-events: none;
        }
        .card-container.skin-spellbook #equation-display,
        .card-container.skin-spellbook #answer-display { color: #f6e7cb; border-color: #d1a85b; text-shadow: 0 0 10px rgba(0,0,0,0.7); }
        .card-container.skin-spellbook .header-info, .card-container.skin-spellbook .shop-btn, .card-container.skin-spellbook .help-btn { color: #f6e7cb; border-color: #d1a85b; }
        .card-container.skin-spellbook .key-btn { background: rgba(0, 0, 0, 0.2); border-color: #d1a85b; color: #f6e7cb; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
        .card-container.skin-spellbook .key-btn:active { background: #d1a85b; color: #2a170e; }

        /* ==================== END SKINS ==================== */


        /* --- TOUCH TRAILS --- */
        .particle { position: absolute; pointer-events: none; width: 12px; height: 12px; border-radius: 50%; animation: fadeOut 0.8s forwards; z-index: 9999; }
        @keyframes fadeOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
        .trail-sparks { background: #ffd700; box-shadow: 0 0 8px #ffd700; }
        .trail-ice { background: #e0ffff; box-shadow: 0 0 8px #00ffff; }
        .trail-slime { background: #39ff14; box-shadow: 0 0 8px #39ff14; }

        /* --- DEMENTOR --- */
        #dementor-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            --circle-size: 12%;
            --circle-strength: 0.42;
            --circle-blur: 0px;
            --vignette-strength: 0.18;
            background: transparent;
            opacity: 0;
            filter: blur(var(--circle-blur));
            mix-blend-mode: multiply;
            transition: opacity 0.4s ease, filter 0.4s ease;
        }
        /* keep content above overlay inside card */
        .card-container > *:not(#dementor-overlay) { position: relative; z-index: 1; }
        .patronus-flash { background: radial-gradient(circle, white 0%, transparent 100%) !important; opacity: 0.8 !important; }

        /* Snitch layer */
        #snitch-layer {
            position: fixed; inset: 0; pointer-events: none; z-index: 880;
            overflow: hidden;
        }
        .flying-snitch {
            position: absolute;
            left: -60px;
            width: 32px; height: 20px;
            background: radial-gradient(circle at 30% 50%, #fff89a 0%, #ffd700 60%, #c19a00 100%);
            border-radius: 50% 50% 50% 50%;
            box-shadow: 0 0 12px rgba(255,215,0,0.7), 0 0 24px rgba(255,215,0,0.4);
            animation: snitchFlyRight 5s linear forwards, snitchGlow 1.2s ease-in-out infinite alternate;
            pointer-events: auto;
        }
        .flying-snitch.from-right {
            left: auto;
            right: -60px;
            animation: snitchFlyLeft 5s linear forwards, snitchGlow 1.2s ease-in-out infinite alternate;
        }
        .flying-snitch::before, .flying-snitch::after {
            content: "";
            position: absolute;
            top: 4px;
            width: 18px; height: 12px;
            background: linear-gradient(120deg, rgba(255,255,255,0.9), rgba(255,215,0,0.6));
            border-radius: 12px 12px 2px 2px;
            box-shadow: 0 0 8px rgba(255,255,255,0.5);
        }
        .flying-snitch::before { left: -16px; transform: rotate(-12deg); }
        .flying-snitch::after { right: -16px; transform: scaleX(-1) rotate(-12deg); }
        @keyframes snitchFlyRight {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            50% { transform: translateX(60vw) translateY(-6vh) rotate(8deg); }
            100% { transform: translateX(120vw) translateY(4vh) rotate(-6deg); }
        }
        @keyframes snitchFlyLeft {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            50% { transform: translateX(-60vw) translateY(6vh) rotate(-8deg); }
            100% { transform: translateX(-120vw) translateY(-4vh) rotate(6deg); }
        }
        @keyframes snitchGlow {
            from { box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.3); }
            to { box-shadow: 0 0 16px rgba(255,215,0,0.9), 0 0 28px rgba(255,215,0,0.6); }
        }

        /* --- UI --- */
        .card-container {
            width: 95%; max-width: 450px; padding: 15px; border-radius: 10px;
            box-shadow: 0 0 40px var(--gold); text-align: center;
            border: 4px double var(--gold); position: relative; z-index: 100;
            display: flex; flex-direction: column; transition: background 0.3s, border-color 0.3s;
        }

        .header-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: 'Cinzel', serif; color: var(--burgundy); font-size: 0.9rem; font-weight: bold; }
        #xp-text {
            display: inline-block;
            padding: 4px 10px;
            background: rgba(0,0,0,0.35);
            color: #fcefd6;
            border: 1px solid rgba(212,175,55,0.6);
            border-radius: 12px;
            text-shadow: 0 1px 4px rgba(0,0,0,0.6);
            box-shadow: 0 0 6px rgba(0,0,0,0.25), inset 0 0 8px rgba(255, 225, 140, 0.15);
        }
        
        .currency-badge {
            background: var(--burgundy); color: var(--gold); padding: 5px 10px; 
            border-radius: 15px; display: flex; align-items: center; gap: 5px;
            border: 1px solid var(--gold); font-size: 0.9rem;
        }
        
        .shop-btn, .help-btn {
            background: var(--gold); border: 2px solid var(--burgundy); color: var(--burgundy);
            width: 40px; height: 40px; border-radius: 50%; font-weight: bold; cursor: pointer;
            display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        .help-btn.active {
            background: #1a472a;
            color: #f7f7f7;
            border-color: #d4af37;
        }

        .progress-container { width: 100%; height: 10px; background: rgba(0,0,0,0.1); border: 1px solid var(--burgundy); margin-bottom: 10px; border-radius: 6px; overflow: hidden; }
        .progress-fill { height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold)); width: 0%; transition: width 0.5s; }

        .equation { font-size: 3.5rem; margin: 5px 0; min-height: 60px; }
        #answer-display { font-size: 2.5rem; height: 50px; border-bottom: 3px solid var(--burgundy); width: 80%; margin: 0 auto 10px; color: var(--burgundy); display: flex; align-items: center; justify-content: center; }

        .equation, #answer-display {
            text-shadow:
                0 0 calc(3px + 10px * var(--focus-glow)) rgba(255, 235, 180, calc(0.25 + 0.5 * var(--focus-glow))),
                0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 215, 80, calc(0.15 + 0.35 * var(--focus-glow)));
            position: relative;
            z-index: 200;
        }

        #hint-grid { display: grid; justify-content: center; gap: 4px; margin: 5px auto; max-width: 200px; }
        .star-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 5px var(--gold); animation: twinkle 2s infinite; }
        @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

        .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; position: relative; z-index: 200; }
        .key-btn { background: rgba(116, 0, 1, 0.05); border: 1px solid var(--gold); color: var(--ink); font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer;
            text-shadow: 0 0 calc(2px + 8px * var(--focus-glow)) rgba(255, 225, 140, calc(0.2 + 0.4 * var(--focus-glow)));
            box-shadow: 0 0 calc(2px + 8px * var(--focus-glow)) rgba(255, 195, 50, calc(0.12 + 0.3 * var(--focus-glow)));
        }
        .key-btn:active { background: var(--gold); }
        .key-cast { grid-column: span 3; background: var(--burgundy); color: var(--gold); font-weight: bold; }
        .card-container .key-btn.key-clear {
            background: #ffd966;
            color: #2c2c2c;
            border-color: #b8860b;
            font-weight: bold;
        }
        .card-container .key-btn.key-clear:active { background: #f1c232; }

        .feedback { height: 20px; margin: 5px 0; font-weight: bold; font-size: 0.9rem; }
        .quick-consumables {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 6px;
            margin: 8px 0;
        }
        .quick-consumables .consumable-card {
            background: rgba(0,0,0,0.08);
            border: 1px solid rgba(0,0,0,0.15);
            border-radius: 6px;
            padding: 6px;
            display: flex; flex-direction: column; gap: 4px;
            font-size: 0.8rem;
        }
        .quick-consumables .consumable-card h5 { margin: 0; font-size: 0.9rem; }
        .quick-consumables .consumable-card .qty { color: #555; }
        .quick-consumables .consumable-card button {
            padding: 6px;
            font-family: 'Cinzel', serif;
            border: 1px solid var(--burgundy);
            background: var(--gold);
            color: #2c2c2c;
            cursor: pointer;
            border-radius: 4px;
            font-weight: bold;
        }
        .quick-consumables .consumable-card button:disabled {
            opacity: 0.4; cursor: not-allowed;
        }
        #pet-perch {
            height: 40px;
            display: flex; justify-content: center; align-items: center;
            margin-top: 6px;
        }
        .pet-icon {
            font-size: 1.8rem;
            filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
            animation: petFloat 3s ease-in-out infinite;
        }
        .pet-icon.pet-owl { text-shadow: 0 0 6px rgba(255,255,255,0.5); }
        .pet-icon.pet-cat { text-shadow: 0 0 6px rgba(255,182,193,0.5); }
        .pet-icon.pet-rat { text-shadow: 0 0 6px rgba(200,200,200,0.4); }
        .pet-icon.pet-toad { text-shadow: 0 0 6px rgba(144,238,144,0.6); }
        .pet-icon.pet-ferret { text-shadow: 0 0 6px rgba(210,180,140,0.6); }
        @keyframes petFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        
        /* --- MODALS --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9); z-index: 2000;
            display: flex; justify-content: center; align-items: center;
            visibility: hidden; opacity: 0; transition: 0.3s;
        }
        .modal-overlay.visible { visibility: visible; opacity: 1; }

        .shop-panel, .letter {
            background: var(--parchment); width: 95%; max-width: 500px; height: 85vh;
            padding: 20px; border-radius: 5px; box-shadow: 0 0 50px #000;
            border: 4px double var(--gold);
            display: flex; flex-direction: column;
        }
        .shop-scroll-area {
            overflow-y: auto;
            flex-grow: 1;
        }
        
        /* LETTER STYLING */
        .letter { height: auto; max-height: 90vh; transform: rotate(-1deg); font-family: 'MedievalSharp', cursive; position: relative; }
        .hogwarts-crest { text-align: center; margin-bottom: 15px; border-bottom: 2px solid #444; padding-bottom: 10px; }
        .letter h2 { font-family: 'Cinzel', serif; margin: 0; color: var(--burgundy); font-size: 1.5rem; }
        .letter p { font-size: 1rem; line-height: 1.5; margin-bottom: 12px; color: #222; }
        .solemn-btn { width: 100%; padding: 15px; margin-top: 15px; background: var(--burgundy); color: var(--gold); border: 2px solid var(--gold); font-family: 'Cinzel'; font-size: 1.1rem; cursor: pointer; }
        .checkbox-row { display: flex; align-items: center; justify-content: center; margin-top: 15px; font-size: 0.8rem; gap: 8px; color: #555; }
        .checkbox-row input { width: 18px; height: 18px; accent-color: var(--burgundy); }

        /* SHOP STYLING */
        .shop-header { text-align: center; font-family: 'Cinzel'; color: var(--burgundy); border-bottom: 2px solid var(--gold); padding-bottom: 10px; margin-bottom: 10px; }
        .shop-category { font-weight: bold; margin-top: 15px; color: #555; text-transform: uppercase; font-size: 0.8rem; border-bottom: 1px solid #ccc; }
        .shop-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.05); margin-bottom: 8px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        .item-details h4 { margin: 0; color: var(--burgundy); font-family: 'Cinzel'; font-size: 1rem; }
        .item-details p { margin: 2px 0 0; font-size: 0.75rem; color: #444; }
        
        .shop-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
        
        .buy-btn {
            background: var(--burgundy); color: var(--gold); border: none;
            padding: 8px 12px; cursor: pointer; font-family: 'Cinzel';
            font-size: 0.85rem; min-width: 70px; border-radius: 4px;
        }
        .buy-btn:disabled { background: #ccc; color: #666; }
        
        .use-btn { background: #1a472a; color: #fff; }
        .unequip-btn { background: #444; color: #fff; }
        
        .qty-badge { font-size: 0.75rem; color: #555; margin-bottom: 2px; }

        .close-btn { flex-shrink: 0; padding: 15px; background: #333; color: white; border: none; cursor: pointer; font-family: 'Cinzel'; font-size: 1.1rem; }

        /* REPORT CARD */
        .report-card {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(116, 0, 1, 0.05)),
                        repeating-linear-gradient(#e8debf 0, #e8debf 32px, #f8f5e6 32px, #f8f5e6 34px);
            border: 3px double var(--gold);
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
            color: #2b2111;
        }
        .report-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .report-title-block { display: flex; flex-direction: column; gap: 4px; }
        .report-title-row { display: flex; align-items: center; gap: 8px; }
        .report-icon { font-size: 1.3rem; }
        .report-title { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--burgundy); }
        .report-subtitle { font-size: 0.9rem; color: #444; }
        .report-actions { display: flex; align-items: center; gap: 8px; }
        .grade-badge {
            background: var(--burgundy); color: var(--gold); padding: 8px 12px;
            border-radius: 20px; border: 2px solid var(--gold); font-weight: bold; font-family: 'Cinzel'; box-shadow: 0 0 12px rgba(0,0,0,0.3);
        }
        .report-btn {
            background: #333; color: #fff; border: 1px solid var(--gold);
            padding: 6px 10px; border-radius: 6px; cursor: pointer;
            font-family: 'Cinzel', serif; font-size: 0.8rem;
        }
        .report-btn:hover { background: var(--burgundy); color: var(--gold); }
        .grade-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
        .grade-row {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(255,255,255,0.4);
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 6px;
        }
        .grade-label { font-weight: bold; color: #2c2c2c; letter-spacing: 0.5px; }
        .grade-value { font-family: 'Cinzel', serif; color: var(--burgundy); }
        .grade-meter {
            grid-column: 1 / span 2;
            height: 8px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .grade-meter span {
            display: block; height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold));
        }
        .metric-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 8px;
            margin-bottom: 12px;
        }
        .metric-card {
            background: rgba(255,255,255,0.5);
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 6px;
            padding: 10px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
        }
        .metric-label { font-size: 0.8rem; color: #555; }
        .metric-value { font-size: 1.2rem; font-weight: bold; color: var(--burgundy); font-family: 'Cinzel', serif; }
        .report-footer { border-top: 1px dashed rgba(0,0,0,0.2); padding-top: 10px; }
        .report-subsection-title { font-weight: bold; color: #2c2c2c; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.8px; font-size: 0.8rem; }
        .trouble-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .trouble-chip {
            background: rgba(116, 0, 1, 0.1);
            color: var(--burgundy);
            border: 1px solid rgba(116, 0, 1, 0.2);
            padding: 6px 10px;
            border-radius: 12px;
            font-size: 0.85rem;
        }
        .report-note { font-size: 0.9rem; color: #444; font-style: italic; }

        /* BUFF INDICATOR */
        #buff-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 5px; height: 20px; }
        .buff-tag { background: #333; color: gold; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; animation: popIn 0.3s; border: 1px solid gold; }
        @keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

        @keyframes pop-out {
            0% { transform: scale(0.8); opacity: 0; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; transform: translateY(-80px); }
        }

        .xp-gain-pop {
            position: absolute;
            top: 50px;
            right: 20px;
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--gold);
            text-shadow: 0 0 10px black;
            animation: pop-out 1s ease-out forwards;
            pointer-events: none;
        }

        @keyframes level-up-flash {
            0%, 100% { transform: scale(1); color: var(--gold); text-shadow: 0 0 10px var(--gold); }
            50% { transform: scale(1.2); color: white; text-shadow: 0 0 20px white; }
        }

        .level-up-animation {
            animation: level-up-flash 1s ease-in-out;
        }

        @keyframes shake { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
        .apply-shake { animation: shake 0.5s; border-color: #740001 !important; box-shadow: 0 0 20px #740001 !important; }

        /* --- SWEETALERT THEME --- */
        .hogwarts-popup {
            background: var(--parchment) !important;
            border: 4px double var(--gold) !important;
            border-radius: 10px !important;
        }

        .hogwarts-title {
            font-family: 'Cinzel', serif !important;
            color: var(--burgundy) !important;
        }

        .hogwarts-button {
            background-color: var(--burgundy) !important;
            color: var(--gold) !important;
            border: 2px solid var(--gold) !important;
            box-shadow: none !important;
        }
        .hogwarts-button:focus {
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5) !important;
        }
        /* Ensure dialogs appear above modals */
        .swal2-container {
            z-index: 3000 !important;
        }