@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Outfit:wght@300;400;600;800&family=Fira+Code:wght@400;600&display=swap";:root{--color-bg-dark:#070913;--color-bg-panel:#0f1224d9;--color-bg-card:#1a203a99;--color-accent-gold:#e2b43b;--color-accent-gold-glow:#e2b43b59;--color-accent-magic:#a855f7;--color-accent-magic-glow:#a855f759;--color-accent-strength:#ef4444;--color-accent-strength-glow:#ef444459;--color-accent-cyan:#06b6d4;--color-accent-cyan-glow:#06b6d459;--color-text-bright:#f3f4f6;--color-text-muted:#9ca3af;--color-border:#e2b43b40;--color-border-hover:#e2b43b80;--font-magic:"Cinzel", serif;--font-ui:"Outfit", sans-serif;--font-code:"Fira Code", monospace}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-ui);background-color:var(--color-bg-dark);color:var(--color-text-bright);background-image:radial-gradient(circle at 10% 20%,#14185240 0%,#0000 40%),radial-gradient(circle at 90% 80%,#7624c226 0%,#0000 45%);min-height:100vh;line-height:1.6;overflow:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg-dark)}::-webkit-scrollbar-thumb{background:#e2b43b40;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#e2b43b80}button{cursor:pointer;font-family:var(--font-ui);background:0 0;border:none;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1)}button:active{transform:scale(.96)}button:disabled{cursor:not-allowed;opacity:.6}.flex-center{justify-content:center;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.flex-row{flex-direction:row;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;width:100%;display:grid}.grid-2{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;display:grid}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-6{padding:24px}.p-8{padding:32px}.glass-panel{background:var(--color-bg-panel);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 15px 35px -10px #000c}.card{background:var(--color-bg-card);border:1px solid #ffffff0d;border-radius:12px;padding:16px}.gold-glow{box-shadow:0 0 20px var(--color-accent-gold-glow)}.magic-glow{box-shadow:0 0 20px var(--color-accent-magic-glow)}.strength-glow{box-shadow:0 0 20px var(--color-accent-strength-glow)}.cyan-glow{box-shadow:0 0 20px var(--color-accent-cyan-glow)}.gold-gradient-text{background:linear-gradient(135deg,#fff7ad 0%,#e2b43b 50%,#b78610 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.magic-gradient-text{background:linear-gradient(135deg,#fae8ff 0%,#d8b4fe 50%,#a855f7 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.strength-gradient-text{background:linear-gradient(135deg,#fee2e2 0%,#fca5a5 50%,#ef4444 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.lockscreen-container{background-color:var(--color-bg-dark);justify-content:center;align-items:center;width:100vw;min-height:100vh;padding:24px;display:flex}.lock-card{border:1px solid var(--color-accent-gold);width:100%;max-width:380px;box-shadow:0 0 25px var(--color-accent-gold-glow);text-align:center;border-radius:16px;padding:32px}.lock-icon-holder{border:1px solid var(--color-accent-gold);background:#0006;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;display:flex}.indicator-dot{border:1px solid var(--color-accent-gold);border-radius:50%;width:16px;height:16px;transition:all .2s}.indicator-dot.active{background-color:var(--color-accent-gold);box-shadow:0 0 10px var(--color-accent-gold)}.indicator-dot.error{border-color:var(--color-accent-strength);background-color:var(--color-accent-strength);box-shadow:0 0 10px var(--color-accent-strength)}.keypad-btn{aspect-ratio:1;width:100%;color:var(--color-text-bright);background:#1c223d66;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;font-size:20px;font-weight:800;display:flex}.keypad-btn:hover{border-color:var(--color-accent-gold);color:var(--color-accent-gold);box-shadow:0 0 10px #e2b43b33}.main-layout{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar-panel{background:linear-gradient(#0e1227 0%,#060813 100%);border-right:1px solid #e2b43b26;flex-direction:column;flex-shrink:0;justify-content:space-between;width:320px;padding:24px;display:flex}.nav-link{text-transform:uppercase;letter-spacing:.05em;width:100%;color:var(--color-text-muted);border:1px solid #0000;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;font-size:13px;font-weight:800;display:flex}.nav-link.active-magic{border-color:var(--color-accent-magic);color:#f3e8ff;background:#a855f726;box-shadow:0 0 15px #a855f733}.nav-link.active-strength{border-color:var(--color-accent-strength);color:#fee2e2;background:#ef444426;box-shadow:0 0 15px #ef444433}.hud-bar-container{flex-direction:column;gap:6px;display:flex}.xp-bar-bg{background:#090b14;border:1px solid #ffffff0d;border-radius:4px;width:100%;height:8px;overflow:hidden}.xp-bar-fill{border-radius:4px;height:100%;transition:width .4s ease-out}.parent-portal-container{background-color:var(--color-bg-dark);justify-content:center;width:100vw;min-height:100vh;padding:32px;display:flex;overflow-y:auto}.parent-lock-card{border:1px solid var(--color-accent-magic);width:100%;max-width:380px;box-shadow:0 0 25px var(--color-accent-magic-glow);text-align:center;border-radius:16px;padding:32px}.parent-input{text-align:center;color:#fff;letter-spacing:.1em;width:100%;font-size:20px;font-family:var(--font-code);background:#090b1499;border:1px solid #ffffff1a;border-radius:8px;outline:none;margin-top:24px;padding:12px}.parent-input:focus{border-color:var(--color-accent-magic);box-shadow:0 0 10px var(--color-accent-magic-glow)}.dashboard-grid{grid-template-columns:1fr 1fr;gap:24px;width:100%;margin-top:24px;display:grid}@media (width<=768px){.dashboard-grid{grid-template-columns:1fr}}.stat-box{text-align:center;background:#090b1466;border:1px solid #ffffff0d;border-radius:12px;padding:16px}.log-box{background:#090b14;border:1px solid #ffffff0d;border-radius:12px;width:100%;height:280px;padding:16px;overflow-y:auto}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000d9;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.modal-content{border:1px solid var(--color-accent-strength);width:100%;max-width:380px;box-shadow:0 0 25px var(--color-accent-strength-glow);text-align:center;border-radius:16px;padding:24px}.relative{position:relative!important}.absolute{position:absolute!important}.main-game-stage{background-color:#06081366;flex-grow:1;justify-content:center;align-items:center;height:100vh;padding:32px;display:flex}.book-container{aspect-ratio:4/3;border-radius:16px;flex-direction:column;width:100%;max-width:680px;display:flex;position:relative;overflow:hidden}.option-btn{text-align:left;width:100%;color:var(--color-text-bright);background:#0f142766;border:1px solid #ffffff14;border-radius:12px;padding:14px 16px;font-size:13px;font-weight:700}.option-btn:hover{border-color:var(--color-accent-magic);color:#fff}.option-btn.correct{color:#a7f3d0;background:#10b98140;border-color:#10b981;box-shadow:0 0 10px #10b98133}.option-btn.wrong{color:#fca5a5;background:#ef444440;border-color:#ef4444;box-shadow:0 0 10px #ef444433}.math-option-btn{text-align:center;color:var(--color-text-bright);background:#0f142766;border:1px solid #ffffff14;border-radius:12px;padding:16px 8px;font-size:15px;font-weight:900}.math-option-btn:hover{border-color:var(--color-accent-strength);color:#fff}.math-option-btn.correct{color:#a7f3d0;background:#10b98140;border-color:#10b981}.math-option-btn.wrong{color:#fca5a5;background:#ef444440;border-color:#ef4444}.fade-in{animation:.4s forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes strikeSwing{0%{transform:rotate(0)}20%{transform:rotate(-30deg)}40%{transform:rotate(70deg)}to{transform:rotate(0)}}@keyframes shake{0%,to{transform:translate(0)rotate(0)}20%{transform:translate(-3px,5px)rotate(-1.5deg)}40%{transform:translate(4px,-3px)rotate(1.5deg)}60%{transform:translate(-5px,2px)rotate(-2deg)}80%{transform:translate(3px,-4px)rotate(1.5deg)}}@keyframes spellRipple{0%{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.6)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.floating{animation:3s ease-in-out infinite float}