@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{background:#060d06;color:#e8e8e8;font-family:"Press Start 2P",monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#060d06}::-webkit-scrollbar-thumb{background:#1a3a1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#2a5a2a}:root{--bg-primary: #060d06;--bg-secondary: #0d1a0d;--bg-card: #0f1f12;--bg-panel: #132a1a;--gold: #eeba30;--gold-light: #f5d060;--gold-dark: #b8922a;--silver: #c0c0c0;--silver-light: #e0e0e0;--silver-dark: #808080;--purple: #7a4a9a;--purple-light: #9a6abf;--purple-dark: #5a2a7a;--red: #e74c3c;--red-light: #f1948a;--red-dark: #922b21;--green: #2ecc71;--green-light: #82e0aa;--green-dark: #1e8449;--blue: #3498db;--blue-light: #85c1e9;--blue-dark: #1a5276;--gryffindor: #ae0001;--gryffindor-accent: #eeba30;--slytherin: #1a472a;--slytherin-accent: #c0c0c0;--ravenclaw: #3498db;--ravenclaw-accent: #946b2d;--hufflepuff: #ecb939;--hufflepuff-accent: #372e29;--text-primary: #d0e0d0;--text-secondary: #8a9a8a;--text-muted: #4a6a4a;--pixel-border: 2px solid var(--gold);--pixel-shadow: 4px 4px 0 rgba(0, 0, 0, .5);--font-pixel: "Press Start 2P", monospace;--font-body: "Inter", "Segoe UI", system-ui, sans-serif;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}.pixel-border{border:var(--pixel-border);box-shadow:var(--pixel-shadow)}.pixel-button{font-family:var(--font-pixel);font-size:.7rem;padding:.6em 1.4em;background:var(--gold);color:var(--bg-primary);border:var(--pixel-border);box-shadow:var(--pixel-shadow);cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:background var(--transition-fast),transform var(--transition-fast)}.pixel-button:hover{background:var(--gold-light)}.pixel-button:active{transform:translate(2px,2px);box-shadow:2px 2px #00000080}.pixel-button:disabled{opacity:.45;pointer-events:none;filter:grayscale(60%)}.pixel-panel{background:var(--bg-panel);border:var(--pixel-border);box-shadow:var(--pixel-shadow);padding:1rem 1.25rem}.pixel-text{font-family:var(--font-pixel);font-size:.65rem;line-height:1.8;color:var(--text-primary)}.pixel-heading{font-family:var(--font-pixel);font-size:1rem;line-height:1.6;color:var(--gold)}.char-avatar{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border:var(--pixel-border);box-shadow:var(--pixel-shadow);background:var(--bg-card);font-family:var(--font-pixel);font-size:2rem;color:var(--gold)}.char-avatar.dead{filter:grayscale(100%);opacity:.4}@keyframes damage-flash{0%{background-color:transparent}25%{background-color:var(--red)}to{background-color:transparent}}@keyframes heal-glow{0%{box-shadow:0 0 #2ecc7100}50%{box-shadow:0 0 18px 6px #2ecc7199}to{box-shadow:0 0 #2ecc7100}}@keyframes spell-cast{0%{transform:scale(1);box-shadow:0 0 #7a4a9a00}50%{transform:scale(1.15);box-shadow:0 0 20px 8px #7a4a9ab3}to{transform:scale(1);box-shadow:0 0 #7a4a9a00}}@keyframes twinkle{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes active-glow{0%{box-shadow:0 0 6px 2px #eeba3066}50%{box-shadow:0 0 18px 6px #eeba30cc}to{box-shadow:0 0 6px 2px #eeba3066}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-16px)}to{transform:translateY(0)}}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}to{transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes idle-bob{0%{transform:scaleY(1)}50%{transform:scaleY(1.015)}to{transform:scaleY(1)}}@keyframes attack-lunge-right{0%{transform:translate(0) translateY(0)}20%{transform:translate(-10px) translateY(0)}50%{transform:translate(80px) translateY(-8px)}65%{transform:translate(80px) translateY(-8px)}to{transform:translate(0) translateY(0)}}@keyframes attack-lunge-left{0%{transform:translate(0) translateY(0)}20%{transform:translate(10px) translateY(0)}50%{transform:translate(-80px) translateY(-8px)}65%{transform:translate(-80px) translateY(-8px)}to{transform:translate(0) translateY(0)}}@keyframes hurt-recoil{0%{transform:translate(0);filter:brightness(1)}15%{filter:brightness(2)}30%{transform:translate(-12px);filter:brightness(1.5)}60%{transform:translate(6px);filter:brightness(1)}to{transform:translate(0);filter:brightness(1)}}.damage-hit{animation:damage-flash .4s ease-out,shake .4s ease-out}.heal-hit{animation:heal-glow .6s ease-out}.spell-hit{animation:spell-cast .5s ease-out}.char-active{animation:active-glow 1.5s ease-in-out infinite}.shake{animation:shake .4s ease-out}.sprite-idle{animation:idle-bob .8s ease-in-out infinite;transform-origin:bottom center}.sprite-idle-delay-1{animation:idle-bob .85s ease-in-out infinite;animation-delay:.15s;transform-origin:bottom center}.sprite-idle-delay-2{animation:idle-bob .9s ease-in-out infinite;animation-delay:.3s;transform-origin:bottom center}.sprite-idle-delay-3{animation:idle-bob .75s ease-in-out infinite;animation-delay:.45s;transform-origin:bottom center}.sprite-attack-right{animation:attack-lunge-right .6s ease-in-out forwards;transform-origin:bottom center}.sprite-attack-left{animation:attack-lunge-left .6s ease-in-out forwards;transform-origin:bottom center}.sprite-hurt{animation:hurt-recoil .5s ease-out;transform-origin:bottom center}.sprite-defeated{opacity:.3;filter:grayscale(100%) brightness(.5);transform:translateY(10px);transform-origin:bottom center;transition:all .5s ease}.fade-in{animation:fadeIn .4s ease-out both}.slide-up{animation:slideUp .5s ease-out both}.float{animation:float 3s ease-in-out infinite}@keyframes popup-enter{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes popup-glow{0%{box-shadow:0 0 10px 4px currentColor}50%{box-shadow:0 0 30px 12px currentColor}to{box-shadow:0 0 10px 4px currentColor}}@keyframes sparkle-rise{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(.3)}}.result-popup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#040804d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .2s ease-out}.result-popup-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 48px;border-radius:4px;animation:popup-enter .5s cubic-bezier(.34,1.56,.64,1) both}.result-popup-card.correct{border:3px solid #2ecc71;background:linear-gradient(135deg,#0a2a12,#0d3318,#0a2a12)}.result-popup-card.incorrect{border:3px solid #e74c3c;background:linear-gradient(135deg,#2a0a0a,#331010,#2a0a0a)}.result-popup-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;animation:popup-glow 1.5s ease-in-out infinite}.result-popup-icon.correct{color:#2ecc71;background:#2ecc7126}.result-popup-icon.incorrect{color:#e74c3c;background:#e74c3c26}.result-popup-title{font-family:"Press Start 2P",monospace;font-size:14px;letter-spacing:.1em}.result-popup-title.correct{color:#2ecc71}.result-popup-title.incorrect{color:#e74c3c}.result-popup-detail{font-family:"Press Start 2P",monospace;font-size:8px;color:#8a9a8a}.result-popup-mana{font-family:"Press Start 2P",monospace;font-size:9px;color:#9a6abf;margin-top:4px}.result-sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:#eeba30;animation:sparkle-rise 1s ease-out forwards}.result-explanation{margin-top:10px;padding:10px 12px;max-height:100px;overflow-y:auto;background:#060d06b3;border:1px solid #2a5a2a;border-radius:4px;font-family:"Press Start 2P",monospace;font-size:7px;line-height:1.8;color:#9a6abf;text-align:left;animation:fadeIn .3s ease-out}.vfx-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20;overflow:visible}.vfx-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;border-radius:50%;opacity:0}.vfx-flash-attack{animation:vfx-flash-in .5s ease-out forwards}.vfx-flash-heal{animation:vfx-flash-heal .7s ease-out forwards}.vfx-flash-shield{animation:vfx-flash-shield .6s ease-out forwards}@keyframes vfx-flash-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:.9;transform:translate(-50%,-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}@keyframes vfx-flash-heal{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}40%{opacity:.7;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}@keyframes vfx-flash-shield{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}25%{opacity:.8;transform:translate(-50%,-50%) scale(1.05)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}.vfx-slash{position:absolute;top:50%;left:50%;width:80%;height:3px;background:linear-gradient(90deg,transparent,#ffffff,#ffffffcc,transparent);transform-origin:center;opacity:0}.vfx-slash-1{animation:vfx-slash-anim .3s ease-out 0s forwards;transform:translate(-50%,-50%) rotate(-45deg)}.vfx-slash-2{animation:vfx-slash-anim .3s ease-out .08s forwards;transform:translate(-50%,-50%) rotate(15deg)}.vfx-slash-3{animation:vfx-slash-anim .3s ease-out .15s forwards;transform:translate(-50%,-50%) rotate(-10deg)}@keyframes vfx-slash-anim{0%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1;clip-path:inset(0 0 0 0)}60%{opacity:1}to{opacity:0;clip-path:inset(0 0 0 0)}}.vfx-particle{position:absolute;border-radius:50%;opacity:0}.vfx-particle-burst{animation:vfx-particle-burst-anim .5s ease-out forwards}.vfx-particle-rise{animation:vfx-particle-rise-anim .7s ease-out forwards}@keyframes vfx-particle-burst-anim{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--burst-x, 0px)),calc(-50% + var(--burst-y, 0px))) scale(.3)}}@keyframes vfx-particle-rise-anim{0%{opacity:0;transform:translateY(0) scale(.5)}30%{opacity:1;transform:translateY(-10px) scale(1)}to{opacity:0;transform:translateY(-40px) scale(.2)}}.vfx-ring{position:absolute;top:50%;left:50%;width:70%;height:30%;border:2px solid;border-radius:50%;transform:translate(-50%,-50%);opacity:0;animation:vfx-ring-expand .6s ease-out forwards}@keyframes vfx-ring-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:.8;transform:translate(-50%,-50%) scale(.8)}60%{opacity:.5;transform:translate(-50%,-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}.vfx-screen-flash{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:100;opacity:0;animation:vfx-screen-flash-anim .4s ease-out forwards}@keyframes vfx-screen-flash-anim{0%{opacity:0}15%{opacity:.3}to{opacity:0}}