:root{--bg-parchment:#f2e6ce;--bg-parchment-dark:#e8d8b5;--ink-dark:#201a15;--ink-faded:#5a4b3c;--gold-accent:#c49746;--gold-glowing:#e5b95c;--border-gold:2px solid var(--gold-accent);--house-gryffindor:#740001;--house-gryffindor-accent:#eeba30;--house-slytherin:#1a472a;--house-slytherin-accent:#aaa;--house-ravenclaw:#0e1a40;--house-ravenclaw-accent:#946b2d;--house-hufflepuff:#ecb939;--house-hufflepuff-accent:#372865;--font-magic:"Cinzel", serif;--font-magic-title:"Cinzel Decorative", serif;--font-journal:"IM Fell English", serif;--font-sans:"Inter", sans-serif;--shadow-magic:0 4px 15px #201a1526;--shadow-glow:0 0 15px #c4974666}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--ink-dark);background-color:#1a0f00;justify-content:center;min-height:100vh;display:flex;overflow-x:hidden}#root{background:radial-gradient(circle, var(--bg-parchment) 0%, var(--bg-parchment-dark) 100%);border-left:2px solid var(--gold-accent);border-right:2px solid var(--gold-accent);flex-direction:column;width:100%;max-width:500px;min-height:100vh;display:flex;position:relative;box-shadow:0 0 30px #000c}.app-content{scroll-behavior:smooth;flex:1;padding:20px 20px 90px;overflow-y:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-parchment-dark)}::-webkit-scrollbar-thumb{background:var(--gold-accent);border-radius:4px}.magic-title{font-family:var(--font-magic-title);color:var(--ink-dark);text-align:center;text-shadow:1px 1px 2px #fff9}.magic-header{font-family:var(--font-magic);letter-spacing:1px;text-transform:uppercase;color:var(--ink-dark)}.journal-text{font-family:var(--font-journal);color:var(--ink-dark);font-size:1.15rem;line-height:1.5}.magic-button{color:var(--gold-accent);border:1px solid var(--gold-accent);font-family:var(--font-magic);cursor:pointer;box-shadow:var(--shadow-magic);background:radial-gradient(circle,#2e241c 0%,#17110c 100%);border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 24px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex}.magic-button:hover,.magic-button:active{color:#fff;border-color:var(--gold-glowing);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.magic-button:active{transform:translateY(1px)}.magic-card{background:#fff6;border:1px solid #c497464d;border-radius:12px;margin-bottom:16px;padding:16px;position:relative;overflow:hidden;box-shadow:0 4px 8px #0000000d}.footprint{background-color:var(--ink-dark);opacity:0;pointer-events:none;filter:blur(.5px);border-radius:50% 50% 40% 40%;width:20px;height:8px;position:absolute;transform:rotate(-10deg)}.footprint:after{content:"";background-color:var(--ink-dark);border-radius:50%;width:6px;height:6px;position:absolute;top:-4px;left:2px}@keyframes fade-footprint{0%{opacity:0;transform:scale(.8)translate(0)}20%{opacity:.7;transform:scale(1)translate(5px,-5px)}60%{opacity:.7}to{opacity:0;transform:scale(1)translate(10px,-10px)}}@keyframes bubble{0%{opacity:0;transform:translateY(100%)scale(.8)}10%{opacity:.6}90%{opacity:.6}to{opacity:0;transform:translateY(-200px)scale(1.3)}}.house-badge{font-family:var(--font-magic);color:#fff;text-align:center;border-radius:4px;padding:4px 8px;font-size:.8rem;font-weight:700;display:inline-block}.house-badge.gryffindor{background-color:var(--house-gryffindor);color:var(--house-gryffindor-accent);border:1px solid var(--house-gryffindor-accent)}.house-badge.slytherin{background-color:var(--house-slytherin);color:var(--house-slytherin-accent);border:1px solid var(--house-slytherin-accent)}.house-badge.ravenclaw{background-color:var(--house-ravenclaw);color:var(--house-ravenclaw-accent);border:1px solid var(--house-ravenclaw-accent)}.house-badge.hufflepuff{background-color:var(--house-hufflepuff);color:var(--house-hufflepuff-accent);border:1px solid var(--house-hufflepuff-accent)}.prophet-header{border-bottom:3px double var(--ink-dark);border-top:3px double var(--ink-dark);text-align:center;margin-bottom:20px;padding:10px 0}.prophet-meta{font-family:var(--font-magic);border-bottom:1px solid var(--ink-dark);justify-content:space-between;margin-bottom:15px;padding:4px 0;font-size:.75rem;display:flex}.prophet-title{font-family:var(--font-magic);text-transform:uppercase;text-shadow:none;margin:10px 0;font-size:2.2rem;font-weight:900;line-height:1.1}.prophet-columns{column-count:1;gap:15px}.prophet-dropcap{float:left;font-size:4rem;line-height:.85;font-family:var(--font-magic);margin-top:4px;padding-right:8px}.prophet-photo{border:4px solid var(--ink-dark);filter:sepia(.8)contrast(1.2)brightness(.9);width:100%;margin:15px 0;position:relative;overflow:hidden}@keyframes magic-pulse{0%{box-shadow:0 0 5px var(--gold-accent)}50%{box-shadow:0 0 15px var(--gold-glowing)}to{box-shadow:0 0 5px var(--gold-accent)}}.magic-pulse{animation:2s ease-in-out infinite magic-pulse}.quiz-option-button{font-family:var(--font-sans);text-align:left;cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;font-size:.95rem;font-weight:500;transition:all .2s;display:flex;box-shadow:0 2px 6px #201a1514;color:#1a0f00!important;background:#ffffffd9!important;border:1.5px solid #c4974680!important}.quiz-option-button:hover,.quiz-option-button:active{box-shadow:var(--shadow-glow);background:var(--gold-accent)!important;color:#fff!important;border-color:var(--gold-glowing)!important}.quiz-option-button:disabled{cursor:not-allowed}.app-container{flex-direction:column;height:100vh;display:flex;position:relative}.bottom-nav{border-top:2px solid var(--gold-accent);border-left:2px solid var(--gold-accent);border-right:2px solid var(--gold-accent);z-index:1000;background:radial-gradient(circle,#221a13 0%,#110c08 100%);justify-content:space-around;align-items:center;width:100%;max-width:500px;height:70px;padding:0 10px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -4px 10px #00000080}.nav-item{color:var(--ink-faded);cursor:pointer;font-family:var(--font-magic);background:0 0;border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:55px;height:55px;font-size:.65rem;transition:all .3s;display:flex}.nav-item.active{color:var(--gold-glowing);text-shadow:0 0 8px #e5b95c66;background:#c497461a;border:1px solid #c4974633;transform:translateY(-4px)}.nav-item:hover{color:var(--gold-accent)}.flex-col{flex-direction:column;display:flex}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.text-center{text-align:center}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.grid-2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.locked-scroll{overflow:hidden}.glow-text-gold{color:var(--gold-glowing);text-shadow:0 0 5px #e5b95c99}.progress-bar-container{background-color:#201a151a;border:1px solid #c497464d;border-radius:6px;width:100%;height:12px;overflow:hidden}.progress-bar-fill{border-radius:6px;height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}.magical-divider{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 20\" width=\"100%\" height=\"100%\"><path d=\"M0 10 Q 25 0, 50 10 T 100 10\" fill=\"none\" stroke=\"%23c49746\" stroke-width=\"1.5\"/><circle cx=\"50\" cy=\"10\" r=\"3\" fill=\"%23c49746\"/></svg>");background-position:50%;background-repeat:no-repeat;background-size:100px 20px;height:20px;margin:15px 0}