@font-face{font-family:Harry;src:url(/_next/static/media/HarryPotter-ov4z.a5b716c1.ttf) format("truetype")}html{background:radial-gradient(ellipse 160% 70% at 50% -5%,#1e1040 0,#0a0914 65%);min-height:100vh}body{font-family:Arial,sans-serif;max-width:480px;margin:0 auto;padding:20px 12px 36px;color:#e8e0d0}.header{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;position:relative}.header:after{content:"";position:absolute;bottom:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.45),transparent)}h1{font-family:Harry;margin:0;font-size:2.5em;color:#d4af37;text-shadow:0 0 40px rgba(212,175,55,.45),0 2px 6px rgba(0,0,0,.6);letter-spacing:2px}.info-button{background:rgba(0,0,0,0);border:1px solid rgba(212,175,55,.3);color:rgba(212,175,55,.55);font-size:11px;width:20px;height:20px;border-radius:50%;cursor:pointer;transition:all .2s ease;font-weight:700;padding:0;display:flex;align-items:center;justify-content:center;align-self:flex-end;margin-bottom:6px;flex-shrink:0}.info-button:hover{border-color:rgba(212,175,55,.75);color:#d4af37;box-shadow:0 0 12px rgba(212,175,55,.3)}.body,.rowWrapper{display:flex;flex-direction:column;align-items:center}.rowWrapper{width:100%;gap:8px;margin-bottom:8px}.letter{display:flex;width:52px;height:52px;justify-content:center;align-items:center;border-radius:6px;font-size:1.4em;font-weight:700;text-transform:uppercase;transition:border-color .15s ease,box-shadow .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.letter-empty{border:2px solid rgba(212,175,55,.15);background:hsla(0,0%,100%,.02);color:rgba(0,0,0,0)}.letter-active{border:2px solid rgba(212,175,55,.65);background:rgba(212,175,55,.06);color:rgba(0,0,0,0);box-shadow:0 0 14px rgba(212,175,55,.22)}.letter-typing{border:2px solid rgba(212,175,55,.42);background:hsla(0,0%,100%,.05);color:#e8e0d0}.letter-correct{border:2px solid #379c37;background:#2d8a2d;color:#fff;box-shadow:0 0 18px rgba(45,138,45,.65),inset 0 1px 0 hsla(0,0%,100%,.12)}.letter-present{border:2px solid #c9a820;background:#9a7500;color:#fff;box-shadow:0 0 18px rgba(212,175,55,.5),inset 0 1px 0 hsla(0,0%,100%,.12)}.letter-absent{border:2px solid hsla(0,0%,100%,.07);background:#252535;color:hsla(0,0%,100%,.4)}.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)}}.keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:18px}.keyboard-row{display:flex;gap:5px}.key{display:flex;height:52px;width:36px;justify-content:center;align-items:center;border-radius:6px;font-family:Arial,sans-serif;font-weight:700;font-size:13px;cursor:pointer;border:none;background:hsla(0,0%,100%,.09);color:#ddd8cc;text-transform:uppercase;transition:background .12s ease,transform .07s ease,box-shadow .07s ease;box-shadow:0 3px 0 rgba(0,0,0,.5);padding:0}.key:hover:not(:disabled){background:hsla(0,0%,100%,.17);box-shadow:0 3px 0 rgba(0,0,0,.5),0 0 10px hsla(0,0%,100%,.06)}.key:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5)}.key:disabled{opacity:.32;cursor:not-allowed}.key-wide{width:56px;font-size:10px}.key-correct{background:#2d8a2d;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.55),0 0 10px rgba(45,138,45,.3)}.key-correct:hover:not(:disabled){background:#388e38}.key-present{background:#9a7500;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.55),0 0 10px rgba(212,175,55,.22)}.key-present:hover:not(:disabled){background:#b08800}.key-absent{background:hsla(0,0%,100%,.032);color:hsla(0,0%,100%,.24);box-shadow:0 2px 0 rgba(0,0,0,.35)}.result-screen{width:100%;border-radius:16px;padding:36px 24px 32px;text-align:center;animation:resultAppear .6s cubic-bezier(.34,1.4,.64,1) both;position:relative;overflow:hidden}@keyframes resultAppear{0%{opacity:0;transform:scale(.82) translateY(24px)}to{opacity:1;transform:scale(1) translateY(0)}}.result-win{background:linear-gradient(145deg,#1c0d00,#2e1800,#180b00);border:1px solid rgba(212,175,55,.28);box-shadow:0 0 80px rgba(212,175,55,.08),0 6px 24px rgba(0,0,0,.5)}.result-lose{background:linear-gradient(145deg,#060611,#0e0820,#070613);border:1px solid rgba(110,70,180,.2);box-shadow:0 0 80px rgba(80,40,140,.07),0 6px 24px rgba(0,0,0,.6)}.result-icon{font-size:3em;margin-bottom:16px;display:block;animation:iconFloat 3.5s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.result-title{font-family:Harry;font-size:2.4em;margin:0 0 10px;line-height:1.1}.result-win .result-title{color:#d4af37;text-shadow:0 0 35px rgba(212,175,55,.55),0 2px 5px rgba(0,0,0,.5)}.result-lose .result-title{color:#9980c8;text-shadow:0 0 35px rgba(130,90,210,.45),0 2px 5px rgba(0,0,0,.5)}.result-subtitle{font-size:.95em;opacity:.68;margin:0 0 24px;line-height:1.5}.result-stats{font-size:1em;margin-bottom:20px;opacity:.7}.result-stats strong{font-size:1.25em}.result-win .result-stats strong{color:#4db84d}.result-lose .result-stats strong{color:#9980c8}.result-word-label{font-size:.78em;text-transform:uppercase;letter-spacing:2.5px;opacity:.45;margin:0 0 12px}.result-word-tiles{display:flex;justify-content:center;gap:8px;margin:0 0 28px;perspective:500px}.result-word-tile{display:flex;width:52px;height:52px;justify-content:center;align-items:center;border-radius:6px;font-size:1.4em;font-weight:700;text-transform:uppercase;animation:tileReveal .45s ease-out both}@keyframes tileReveal{0%{opacity:0;transform:rotateX(90deg) scale(.8)}to{opacity:1;transform:rotateX(0deg) scale(1)}}.result-win .result-word-tile{background:#2d8a2d;border:2px solid rgba(55,156,55,.4);color:#fff;box-shadow:0 0 22px rgba(45,138,45,.55)}.result-lose .result-word-tile{background:#2c1060;border:2px solid rgba(120,80,200,.35);color:#ccc0ff;box-shadow:0 0 22px rgba(80,40,140,.45)}.result-footer{opacity:.4;font-size:.88em;font-style:italic;margin:8px 0 0}.sparkle-bl,.sparkle-br,.sparkle-tl,.sparkle-tr{position:absolute;font-size:1.1em;pointer-events:none;animation:sparkleFloat 3s ease-in-out infinite}.sparkle-tl{top:14px;left:14px;animation-delay:0s}.sparkle-tr{top:14px;right:14px;animation-delay:.8s}.sparkle-bl{bottom:14px;left:14px;animation-delay:1.6s}.sparkle-br{bottom:14px;right:14px;animation-delay:2.4s}@keyframes sparkleFloat{0%,to{opacity:.35;transform:translateY(0) scale(1)}50%{opacity:.65;transform:translateY(-5px) scale(1.1)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#120d22;border:1px solid rgba(212,175,55,.22);border-radius:14px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;padding:30px;box-shadow:0 4px 40px rgba(0,0,0,.6);color:#e0d8c8}.modal-close{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0);border:none;font-size:28px;cursor:pointer;color:rgba(212,175,55,.45);width:auto;height:auto;padding:5px 10px;transition:color .2s ease;box-shadow:none}.modal-close:hover,.modal-title{color:#d4af37}.modal-title{font-family:Harry;font-size:2em;margin-bottom:20px;text-align:center;text-shadow:0 0 20px rgba(212,175,55,.3)}.modal-body{color:#c0b8a8;line-height:1.6}.modal-intro{font-size:1em;text-align:center;color:#ddd8c8}.examples-section,.modal-intro,.rules-section,.tips-section{margin-bottom:22px}.examples-section h3,.rules-section h3,.tips-section h3{font-size:1.1em;color:#d4af37;margin-bottom:10px;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:6px 0 6px 24px;position:relative}.examples-section ul li:before,.rules-section ul li:before,.tips-section ul li:before{content:"⚡";position:absolute;left:0;color:rgba(212,175,55,.7)}.example{margin-bottom:18px}.example-row{gap:5px;margin-bottom:8px}.example-letter,.example-row{display:flex;justify-content:center}.example-letter{border:2px solid rgba(212,175,55,.25);background:hsla(0,0%,100%,.04);width:40px;height:40px;align-items:center;border-radius:5px;text-transform:uppercase;font-weight:700;font-size:16px;color:#e0d8c8}.example-text{text-align:center;font-size:.9em;margin:0;color:#a09888}