Add Marauder's Map and Spellbook skins

app.js

@@ -24,11 +24,13 @@
         { id: 'pet_rat', name: "Garden Rat", type: 'pet', category: 'Familiars', price: 90, desc: "Surprisingly loyal.", class: 'pet-rat', icon: '🐀' },
         { id: 'pet_toad', name: "Pad-Pad Toad", type: 'pet', category: 'Familiars', price: 80, desc: "Keeps calm in the classroom.", class: 'pet-toad', icon: '🐸' },
         { id: 'pet_ferret', name: "Mischief Ferret", type: 'pet', category: 'Familiars', price: 130, desc: "Fast distraction in duels.", class: 'pet-ferret', icon: '🦦' },
-        // SKINS (Hogwarts Houses)
+        // SKINS (Hogwarts Houses + specials)
         { id: 'skin_gryffindor', name: "Gryffindor", type: 'skin', category: 'Card Skins', price: 100, desc: "Scarlet and gold bravery motif.", class: "skin-gryffindor" },
         { id: 'skin_slytherin', name: "Slytherin", type: 'skin', category: 'Card Skins', price: 100, desc: "Emerald and silver ambition motif.", class: "skin-slytherin" },
         { id: 'skin_ravenclaw', name: "Ravenclaw", type: 'skin', category: 'Card Skins', price: 100, desc: "Bronze and blue wit motif.", class: "skin-ravenclaw" },
         { id: 'skin_hufflepuff', name: "Hufflepuff", type: 'skin', category: 'Card Skins', price: 100, desc: "Honey and charcoal loyalty motif.", class: "skin-hufflepuff" },
+        { id: 'skin_map', name: "Marauder's Map", type: 'skin', category: 'Card Skins', price: 140, desc: "Footprints on aged parchment.", class: "skin-map" },
+        { id: 'skin_spellbook', name: "Spellbook", type: 'skin', category: 'Card Skins', price: 140, desc: "Worn leather and gold filigree.", class: "skin-spellbook" },
         // TRAILS
         { id: 'trail_sparks', name: "Sparks Trail", type: 'trail', category: 'Wand Effects', price: 120, desc: "Golden sparks.", class: "trail-sparks" },
         { id: 'trail_ice', name: "Frost Trail", type: 'trail', category: 'Wand Effects', price: 120, desc: "Icy crystals.", class: "trail-ice" },
@@ -456,7 +458,7 @@
     // --- VISUALS ---
     function applyCosmetics() {
         const card = document.getElementById('main-card');
-        const allowedSkins = ['skin-default','skin-gryffindor','skin-slytherin','skin-ravenclaw','skin-hufflepuff'];
+        const allowedSkins = ['skin-default','skin-gryffindor','skin-slytherin','skin-ravenclaw','skin-hufflepuff','skin-map','skin-spellbook'];
         if (!allowedSkins.includes(state.activeSkin)) {
             state.activeSkin = 'skin-default';
         }

style.css

@@ -106,6 +106,53 @@
         .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 ==================== */