@font-face{font-family:Harry;src:url(/_next/static/media/HarryPotter-ov4z.a5b716c1.ttf) format("truetype")}html{font-family:Arial;max-width:500px}h1,html{margin:auto;display:flex;justify-content:center}h1{font-family:Harry}.header{gap:8px;margin-bottom:10px;display:flex;flex-direction:row;justify-content:center;align-items:baseline}.header h1{margin:0;height:40px;line-height:40px;text-align:center}.info-button{background:rgba(0,0,0,0);border:1px solid darkred;color:darkred;font-size:11px;width:18px;height:18px;border-radius:50%;cursor:pointer;transition:all .2s ease;font-weight:700;padding:0;display:flex;align-items:center;justify-content:center}.info-button:hover{background:darkred;color:#fff;transform:scale(1.15)}.body{display:flex;flex-direction:column}.letter,button{border:1px solid #000;width:40px;height:40px;justify-content:center;border-radius:4px;text-transform:uppercase}.letter,.rowWrapper,button{display:flex;align-items:center}.rowWrapper{flex-direction:column;width:100%;gap:10px;margin-bottom:10px}.shake{animation:shake .5s}@keyframes shake{0%{transform:translate(2px)}10%{transform:translate(-4px)}20%{transform:translate(4px)}30%{transform:translate(-4px)}40%{transform:translate(4px)}50%{transform:translate(-4px)}60%{transform:translate(4px)}70%{transform:translate(-4px)}80%{transform:translate(4px)}90%{transform:translate(-4px)}to{transform:translate(1px)}}.win-animation{position:relative;width:90%;max-width:500px;min-height:400px;max-height:80vh;overflow-y:auto;background:linear-gradient(135deg,#ffd700,#ffed4e,#ffd700);border-radius:15px;box-shadow:0 4px 20px rgba(0,0,0,.3);opacity:0;transform:scale(.8);transition:all .8s ease-in-out}.win-animation.animate{opacity:1;transform:scale(1)}.magical-container{position:relative;padding:30px;text-align:center;height:100%}.golden-snitch{position:absolute;top:20px;right:20px;font-size:2em;animation:snitchFly 4s ease-in-out infinite}@keyframes snitchFly{0%,to{transform:translate(0) rotate(0deg)}25%{transform:translate(-50px,-20px) rotate(90deg)}50%{transform:translate(-100px,10px) rotate(180deg)}75%{transform:translate(-50px,30px) rotate(270deg)}}.sparkles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.sparkle{position:absolute;font-size:1.5em;animation:sparkleFloat 3s ease-in-out infinite}.sparkle-1{top:10%;left:10%;animation-delay:0s}.sparkle-2{top:20%;right:15%;animation-delay:.5s}.sparkle-3{top:60%;left:5%;animation-delay:1s}.sparkle-4{top:70%;right:10%;animation-delay:1.5s}.sparkle-5{top:40%;left:80%;animation-delay:2s}.sparkle-6{bottom:10%;right:20%;animation-delay:2.5s}@keyframes sparkleFloat{0%,to{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-20px) scale(1.2);opacity:1}}.celebration-message{margin:20px 0;z-index:10;position:relative}.win-title{font-family:Harry;font-size:2.5em;color:darkred;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:titleGlow 2s ease-in-out infinite alternate}@keyframes titleGlow{0%{text-shadow:2px 2px 4px rgba(0,0,0,.3),0 0 10px gold}to{text-shadow:2px 2px 4px rgba(0,0,0,.3),0 0 20px gold,0 0 30px gold}}.win-subtitle{font-size:1.2em;color:#333;margin-bottom:20px;font-weight:700}.correct-word{margin:20px 0}.word-label{display:block;font-size:1.1em;color:#666;margin-bottom:10px}.word-display{font-family:Harry;font-size:2em;color:darkred;background:hsla(0,0%,100%,.8);padding:10px 20px;border-radius:10px;border:2px solid gold;display:inline-block;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.wand-effect{position:absolute;bottom:30%;left:10%;animation:wandWave 3s ease-in-out infinite}.wand{font-size:2em;transform-origin:bottom center}.magic-trail{position:absolute;width:100px;height:3px;background:linear-gradient(90deg,transparent,#ffd700,transparent);top:50%;left:100%;animation:trailSparkle 3s ease-in-out infinite}@keyframes wandWave{0%,to{transform:rotate(-10deg)}50%{transform:rotate(20deg)}}@keyframes trailSparkle{0%,to{opacity:0;transform:scaleX(0)}50%{opacity:1;transform:scaleX(1)}}.floating-letters{transform:translateY(15%)}.floating-letter{display:inline-block;font-size:1.5em;font-weight:700;color:darkred;margin:0 5px;animation:letterFloat 2s ease-in-out infinite}@keyframes letterFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.play-again-section{margin-top:30px}.next-game-text{font-size:1.1em;color:#666;margin-bottom:10px}.hogwarts-crest{font-size:3em;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.lose-animation{position:relative;width:90%;max-width:500px;min-height:450px;max-height:80vh;overflow-x:hidden;overflow-y:auto;background:linear-gradient(135deg,#2c1810,#1a0f0a,#2c1810);border-radius:15px;box-shadow:0 4px 20px rgba(0,0,0,.3);opacity:0;transform:scale(.8);transition:all .8s ease-in-out;color:#d4d4d4}.lose-animation.animate{opacity:1;transform:scale(1)}.dark-container{position:relative;padding:30px;text-align:center;height:100%}.floating-candles{position:absolute;top:10px;width:100%;left:0}.candle{position:absolute;font-size:1.5em;animation:candleFlicker 2s ease-in-out infinite}.candle-1{left:15%;animation-delay:0s}.candle-2{left:50%;animation-delay:.7s}.candle-3{right:15%;animation-delay:1.4s}@keyframes candleFlicker{0%,to{opacity:.8;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}.dark-mist{top:0;left:0;width:100%;height:100%;pointer-events:none}.dark-mist,.mist{position:absolute}.mist{width:100px;height:50px;background:rgba(200,200,200,.1);border-radius:50px;animation:mistFloat 4s ease-in-out infinite}.mist-1{top:20%;left:0;animation-delay:0s}.mist-2{top:50%;right:20%;animation-delay:1.3s}.mist-3{bottom:20%;left:20%;animation-delay:2.6s}@keyframes mistFloat{0%,to{transform:translateX(0) translateY(0);opacity:.3}50%{transform:translateX(20px) translateY(-10px);opacity:.6}}.lose-message{margin:30px 0;z-index:10;position:relative}.lose-title{font-family:Harry;font-size:2em;color:peru;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:titleFade 3s ease-in-out infinite}@keyframes titleFade{0%,to{opacity:.8}50%{opacity:1}}.lose-subtitle{font-size:1.1em;color:#b8b8b8;margin-bottom:25px;line-height:1.4}.word-reveal{margin:25px 0}.word-reveal-label{display:block;font-size:1.1em;color:peru;margin-bottom:15px}.word-reveal-container{display:flex;justify-content:center;gap:5px;margin:15px 0}.reveal-letter{font-family:Harry;font-size:1.8em;line-height:1.8em;color:gold;background:rgba(205,133,63,.2);padding:10px 12px;border-radius:8px;border:1px solid peru;text-shadow:1px 1px 2px rgba(0,0,0,.5);opacity:0;animation:letterReveal .8s ease-out forwards}@keyframes letterReveal{0%{opacity:0;transform:translateY(20px) rotateY(90deg)}to{opacity:1;transform:translateY(0) rotateY(0deg)}}.mysterious-elements{position:relative;top:80%;display:flex;justify-content:space-between;flex-grow:1}.crystal-ball,.potion-bottle,.spell-book{font-size:2em;animation:mysteriousBob 3s ease-in-out infinite}.spell-book{animation-delay:1s}.potion-bottle{animation-delay:2s}@keyframes mysteriousBob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.spirits{top:30%;width:100%}.spirit,.spirits{position:absolute}.spirit{font-size:1.8em;animation:spiritFloat 4s ease-in-out infinite}.spirit-1{left:10%;animation-delay:0s}.spirit-2{right:10%;animation-delay:2s}@keyframes spiritFloat{0%,to{transform:translateY(0);opacity:.4}50%{transform:translateY(-20px);opacity:.8}}.try-again-section{margin-top:30px;position:relative}.phoenix{font-size:2.5em;animation:phoenixRise 3s ease-in-out infinite}@keyframes phoenixRise{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.1)}}.phoenix-text{font-size:1.2em;color:gold;margin:15px 0;font-style:italic}.next-attempt{font-size:1em;color:#b8b8b8;margin-bottom:15px}.sorting-hat{font-size:2em;animation:hatTip 4s ease-in-out infinite}@keyframes hatTip{0%,90%,to{transform:rotate(0deg)}95%{transform:rotate(5deg)}}.hogwarts-night{position:absolute;top:10px;left:10px}.castle{font-size:2em;animation:castleGlow 4s ease-in-out infinite}.stars{top:-10px;left:-20px;width:80px;height:60px}.star,.stars{position:absolute}.star{font-size:.8em;animation:starTwinkle 2s ease-in-out infinite}.star-1{top:0;left:0;animation-delay:0s}.star-2{top:10px;right:0;animation-delay:.7s}.star-3{bottom:0;left:10px;animation-delay:1.4s}@keyframes castleGlow{0%,to{opacity:.8}50%{opacity:1}}@keyframes moonGlow{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}@keyframes starTwinkle{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:12px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.3)}.modal-close{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0);border:none;font-size:32px;cursor:pointer;color:#666;width:auto;height:auto;padding:5px 10px;transition:color .2s ease;z-index:10}.modal-close:hover{color:darkred}.lose-animation .modal-close,.win-animation .modal-close{color:hsla(0,0%,100%,.8);text-shadow:0 2px 4px rgba(0,0,0,.5)}.lose-animation .modal-close:hover,.win-animation .modal-close:hover{color:#fff}.modal-title{font-family:Harry;font-size:2em;color:darkred;margin-bottom:20px;text-align:center}.modal-body{color:#333;line-height:1.6}.modal-intro{font-size:1.1em;text-align:center;font-weight:500}.examples-section,.modal-intro,.rules-section,.tips-section{margin-bottom:25px}.examples-section h3,.rules-section h3,.tips-section h3{font-size:1.3em;color:darkred;margin-bottom:12px;font-weight:700}.examples-section ul,.rules-section ul,.tips-section ul{list-style-type:none;padding-left:0}.examples-section ul li,.rules-section ul li,.tips-section ul li{padding:8px 0 8px 25px;position:relative}.examples-section ul li:before,.rules-section ul li:before,.tips-section ul li:before{content:"⚡";position:absolute;left:0;color:#d4af37}.example{margin-bottom:20px}.example-row{gap:5px;margin-bottom:10px}.example-letter,.example-row{display:flex;justify-content:center}.example-letter{border:2px solid #ddd;width:40px;height:40px;align-items:center;border-radius:4px;text-transform:uppercase;font-weight:700;font-size:18px}.example-text{text-align:center;font-size:.95em;margin:0}