#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#0d0212 0%,#160519 50%,#0d0212 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:relative;overflow-x:hidden}.bg-overlay{pointer-events:none;z-index:5;background:0 0;width:100%;height:100%;transition:background .3s;position:fixed;top:0;left:0}.bg-overlay.darken{background:#00000080}.hud-progress-wrap{z-index:101;width:90%;max-width:1200px;position:fixed;top:12px;left:50%;transform:translate(-50%)}.hud-progress-track{background:#b4005a59;border-radius:10px;height:4px;overflow:hidden}.hud-progress-fill{background:linear-gradient(90deg,#8c0052,#e0006e);border-radius:10px;width:0%;height:100%;transition:width .55s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px #e0006e80}.game-hud{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f030ceb;border:2px solid #b4005a4d;border-radius:50px;justify-content:space-between;align-items:center;width:90%;max-width:1200px;padding:15px 30px;display:flex;position:fixed;top:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000080}.hud-item{color:#fff;text-shadow:0 0 10px #e0006e33;font-size:1.2em;font-weight:700}.hud-title{background:linear-gradient(90deg,#e0006e,#fff,#e0006e);-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;font-size:1.5em}.hud-score{color:gold}.sound-toggle{z-index:101;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background:#0f030ceb;border:2px solid #b4005a4d;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.5em;transition:all .3s;display:flex;position:fixed;top:20px;right:20px}.sound-toggle:hover{background:#461e00e6;transform:scale(1.1)}.sound-toggle.muted{background:#78281e66}.game-container{justify-content:center;align-items:center;min-height:100vh;padding:120px 20px 40px;display:flex}.question-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;background:#0f030cf2;border:2px solid #a000524d;border-radius:30px;width:100%;max-width:800px;padding:40px;transition:all .6s cubic-bezier(.68,-.55,.265,1.55);position:absolute;transform:translateY(100px)scale(.9);box-shadow:0 20px 60px #0009}.question-card.active{opacity:1;transform:translateY(0)scale(1)}.question-card.exit{opacity:.6;transform:scale(.8)}.question-header{text-align:center;color:#e0006e;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 15px #e0006e99;-webkit-user-select:none;user-select:none;margin-bottom:30px;font-family:Bitcount Single,monospace;font-size:3em;font-weight:400}.image-frame{border:3px solid #e0007880;border-radius:20px;max-width:100%;margin:0 auto 40px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 0 30px #e000784d}.image-frame:hover{transform:scale(1.02);box-shadow:0 0 50px #e0007899}.quiz-image{aspect-ratio:5/3;object-fit:cover;width:100%;animation:.5s imageLoad;display:block}@keyframes imageLoad{0%{filter:blur(10px);opacity:0}to{filter:blur();opacity:1}}.word-frame{text-align:center;background:#0f030ceb;border:3px solid #c8006480;border-radius:20px;max-width:100%;margin:0 auto 40px;padding:40px 20px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 0 30px #e1008233}.word-frame:hover{transform:scale(1.02);box-shadow:0 0 50px #e0006e66}.word-display{color:#e0006e;text-shadow:0 0 30px #e0006e80;letter-spacing:3px;margin-bottom:20px;font-size:4em;font-weight:900}.word-question{color:#ffe1c8e6;font-size:1.5em;font-weight:600;line-height:1.8}.options-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.option-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#500532e6,#3c0426e6);border:2px solid #a0005266;border-radius:15px;padding:25px;font-size:1.4em;font-weight:600;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 5px 15px #0006}.option-btn:before{content:"";background:linear-gradient(90deg,#0000,#e0006e14,#0000);width:200%;height:200%;transition:transform .6s;position:absolute;top:-50%;left:-50%;transform:translate(-100%)}.option-btn:hover:before{transform:translate(100%)}.option-btn:hover{border-color:#e0006eb3;transform:translateY(-5px);box-shadow:0 10px 30px #e0006e40}.option-btn:active{transform:translateY(-2px)}@keyframes wrongShake{0%,to{transform:scale(1)}25%{transform:scale(.85)}50%{transform:scale(1.05)}75%{transform:scale(.9)}}.option-btn.wrong{background:linear-gradient(135deg,#c460504d,#c4503c33);border-color:#c46050;animation:.5s wrongShake}.option-btn.correct{position:relative;overflow:hidden}.option-btn.correct:before{content:"";background:radial-gradient(circle,#cc005c,#0000,#0000);width:200%;height:200%;animation:.5s linear infinite moveGradient;position:absolute}@keyframes moveGradient{0%{transform:translate(-100%,-100%)}25%{transform:translateY(-100%)}50%{transform:translate(0)}75%{transform:translate(-100%)}to{transform:translate(-100%,-100%)}}.option-btn.correct:after{content:"";z-index:1;background:#dc006e26;border-radius:12px;position:absolute;inset:3px}.option-btn.correct{color:#cc005c}@keyframes cuteBounce{0%{transform:scale(1)translateY(0)}30%{transform:scale(1.07)translateY(-5px)}60%{transform:scale(.96)translateY(2px)}80%{transform:scale(1.02)translateY(-1px)}to{transform:scale(1)translateY(0)}}@keyframes revealBorderShake{0%{border-color:#ff69b4;box-shadow:0 0 24px 8px #ff69b4,0 0 50px 18px #ff69b473}20%{border-color:#fff;box-shadow:0 0 28px 10px #fff,0 0 60px 22px #ffffff59}40%{border-color:#e0006e;box-shadow:0 0 24px 8px #e0006e,0 0 50px 18px #e0006e73}60%{border-color:#ffb8d9;box-shadow:0 0 28px 10px #ffb8d9,0 0 60px 22px #ffb8d966}80%{border-color:#fff;box-shadow:0 0 24px 8px #fff,0 0 50px 18px #ffffff59}to{border-color:#ff69b4;box-shadow:0 0 24px 8px #ff69b4,0 0 50px 18px #ff69b473}}.option-btn.reveal-correct{color:#fff!important;text-shadow:0 0 18px #ffd2e6f2,0 0 6px #fff!important;background:linear-gradient(135deg,#f0a0c047,#dc82aa2e)!important;border:3px solid #ff69b4!important;font-size:1.8em!important;font-weight:900!important;animation:.6s cubic-bezier(.68,-.55,.265,1.55) cuteBounce,.25s linear infinite revealBorderShake!important}.option-btn>span{z-index:2;position:relative}.message-overlay{text-transform:uppercase;pointer-events:none;opacity:0;z-index:200;text-shadow:0 0 30px;font-size:6em;font-weight:900;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes messagePopIn{0%{opacity:0;transform:translate(-50%,-50%)scale(0)rotate(-10deg)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.2)rotate(5deg)}to{opacity:0;transform:translate(-50%,-50%)scale(0)rotate(10deg)}}@keyframes messageShake{0%,to{transform:translate(-50%,-50%)rotate(0)}25%{transform:translate(-50%,-50%)rotate(-5deg)scale(1.1)}50%{transform:translate(-50%,-50%)rotate(5deg)scale(1.2)}75%{transform:translate(-50%,-50%)rotate(-3deg)scale(1.1)}}.message-overlay.show.correct{color:#cc005c;animation:.3s messagePopIn}.message-overlay.show.wrong{color:#c46050;animation:.6s messageShake}.score-popup{color:#e0006e;text-shadow:0 0 20px #e0006ecc;opacity:0;pointer-events:none;z-index:201;font-size:3em;font-weight:700;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes scoreFloat{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}50%{opacity:1;transform:translate(-50%,-100%)scale(1.5)}to{opacity:0;transform:translate(-50%,-150%)scale(1)}}.score-popup.show{animation:1s scoreFloat}.particle{pointer-events:none;z-index:199;background:#e0006e;border-radius:50%;width:8px;height:8px;position:fixed;box-shadow:0 0 10px}@keyframes particleFloat{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--tx), var(--ty)) scale(0);opacity:0}}.completion-screen{opacity:0;pointer-events:none;z-index:300;background:radial-gradient(at 20%,#b4005a99 0%,#0000 50%),radial-gradient(at 80% 20%,#aa005680 0%,#0000 40%),radial-gradient(at 50% 80%,#8c004866 0%,#0000 40%),linear-gradient(#0d0212 0%,#160519 40%,#120416 70%,#0e0313 100%);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:fixed;top:0;left:0;overflow:hidden}.completion-screen:before{content:"";background:conic-gradient(#0000 0deg,#dc00760a 60deg,#0000 120deg,#e100820a 180deg,#0000 240deg,#a000520a 300deg,#0000 360deg);width:200%;height:200%;animation:20s linear infinite auroraRotate;position:absolute;top:-50%;left:-50%}.completion-screen.show{opacity:1;pointer-events:all}.completion-particle{width:2px;height:2px;animation:starRise var(--duration) linear infinite, starTwinkle var(--twinkle) ease-in-out infinite;background:#8c0052;border-radius:50%;position:absolute}.completion-particle:nth-child(odd){width:3px;height:3px;box-shadow:0 0 6px #e0006e99}.completion-particle:nth-child(3n){box-shadow:0 0 6px #8c005080}.completion-card{-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);z-index:1;background:#12030ef7;border:2px solid #b4005a59;border-radius:24px;flex-direction:column;align-items:center;width:90%;max-width:550px;padding:60px 50px;animation:3s ease-in-out infinite cardFloat;display:flex;position:relative;box-shadow:0 0 40px #0009,0 0 80px #b4005a33,inset 0 1px #e0007826}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.completion-card:before{content:"";background:linear-gradient(90deg,#0000,#e0006e99,#0000);height:1px;position:absolute;top:0;left:20%;right:20%}.completion-title{background:linear-gradient(90deg,#8c0052,#e0006e,#8c0052);-webkit-text-fill-color:transparent;letter-spacing:5px;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:4em;font-weight:900;animation:2s infinite titleGlow}@keyframes titleGlow{0%,to{filter:brightness()}50%{filter:brightness(1.5)}}.completion-score{color:gold;text-shadow:0 0 20px #ffd70066;margin-bottom:10px;font-size:2.5em}.completion-max{color:#fff;letter-spacing:2px;margin-bottom:35px;font-size:2em}.name-input-area{justify-content:center;width:100%;margin-bottom:30px;display:flex}.name-input{text-align:center;color:#fff;letter-spacing:2px;background:#10030dfa;border:2px solid #b4005a80;border-radius:15px;outline:none;width:320px;max-width:100%;padding:16px 25px;font-size:1.3em;font-weight:600;transition:all .3s;box-shadow:inset 0 0 20px #0003}.name-input::placeholder{color:#b45a00b3;letter-spacing:1px}.name-input:focus{background:#140410;border-color:#e0006ee6;box-shadow:0 0 25px #e0006e33,inset 0 0 20px #0003}.restart-btn{letter-spacing:2px;color:#fff;cursor:pointer;border:none;border-radius:5px;outline:none;width:200px;padding:18px 0;font-size:1.3em;font-weight:700;transition:all .15s;position:relative}#saveBtn{background:linear-gradient(#c0006a 0%,#7a003e 60%,#4a0025 100%);box-shadow:0 6px #2a0015,0 8px 16px #0009,inset 0 1px #ff96c859}#saveBtn:hover{background:linear-gradient(#d8007a 0%,#9a004e 60%,#5e0030 100%);transform:translateY(-2px);box-shadow:0 6px #2a0015,0 10px 22px #e0006e73,inset 0 1px #ff96c866}#saveBtn:active{transform:translateY(4px);box-shadow:0 2px #2a0015,0 4px 8px #00000080,inset 0 1px #ff96c833}#restartBtn{background:linear-gradient(#3a3a5c 0%,#22223a 60%,#111120 100%);box-shadow:0 6px #08080f,0 8px 16px #0009,inset 0 1px #a0a0ff40}#restartBtn:hover{background:linear-gradient(#4e4e7a 0%,#2e2e50 60%,#181830 100%);transform:translateY(-2px);box-shadow:0 6px #08080f,0 10px 22px #6464c859,inset 0 1px #a0a0ff4d}#restartBtn:active{transform:translateY(4px);box-shadow:0 2px #08080f,0 4px 8px #00000080,inset 0 1px #a0a0ff26}@media (width<=768px){.game-hud{flex-wrap:wrap;gap:10px;padding:10px 15px}.hud-item{font-size:.9em}.hud-title{text-align:center;width:100%;font-size:1.2em}.question-card{padding:15px}.word-frame{margin-bottom:16px;padding:20px 15px}.options-grid{grid-template-columns:1fr;gap:10px}.message-overlay,.completion-title{font-size:3em}.completion-card{padding:30px 20px}.restart-btn{padding:15px 30px;font-size:1.2em}.word-display{letter-spacing:2px;margin-bottom:10px;font-size:2.5em}.question-header{margin-bottom:15px;font-size:2em}}.disabled{pointer-events:none}.click-particle{pointer-events:none;z-index:10003;animation:clickParticleRise var(--duration) ease-out forwards, starTwinkle var(--twinkle) ease-in-out infinite;border-radius:50%;position:fixed}@keyframes clickParticleRise{0%{opacity:1;transform:translate(0)scale(1.5)}10%{transform:translate(var(--burst-x), var(--burst-y)) scale(1);opacity:1}90%{opacity:.8}to{transform:translate(var(--burst-x), calc(var(--burst-y) - 110vh));opacity:0}}.smoke{pointer-events:none;z-index:9999;background:radial-gradient(circle,#e0006e40 0%,#8c00501a 40%,#0000 80%);border-radius:100%;width:10px;height:10px;animation:2s ease-out forwards smokeAnimation;position:fixed}@keyframes smokeAnimation{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(10)translateY(-10px)}}.intro-screen{z-index:10000;background:radial-gradient(at 20%,#b4005a99 0%,#0000 50%),radial-gradient(at 80% 20%,#aa005680 0%,#0000 40%),radial-gradient(at 50% 80%,#8c004866 0%,#0000 40%),linear-gradient(#0d0212 0%,#160519 40%,#120416 70%,#0e0313 100%);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s,transform .8s;display:flex;position:fixed;top:0;left:0;overflow:hidden}.intro-screen.hide{opacity:0;pointer-events:none;transform:scale(1.1)}.intro-screen:before{content:"";background:conic-gradient(#0000 0deg,#dc00760a 60deg,#0000 120deg,#e100820a 180deg,#0000 240deg,#a000520a 300deg,#0000 360deg);width:200%;height:200%;animation:20s linear infinite auroraRotate;position:absolute;top:-50%;left:-50%}@keyframes auroraRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.intro-particle{width:2px;height:2px;animation:starRise var(--duration) linear infinite, starTwinkle var(--twinkle) ease-in-out infinite;background:#8c0052;border-radius:50%;position:absolute}.intro-particle:nth-child(odd){width:3px;height:3px;box-shadow:0 0 6px #e0006e99}.intro-particle:nth-child(3n){box-shadow:0 0 6px #8c005099}@keyframes starRise{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(-110vh)}}@keyframes starTwinkle{0%,to{opacity:.2}50%{opacity:1}}.intro-text-container{-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);opacity:0;background:#0f030cf2;border:2px solid #b4005a59;border-radius:24px;max-width:800px;margin-bottom:60px;padding:50px 60px;animation:1s cubic-bezier(.68,-.55,.265,1.55) forwards slideDownBounce;position:relative;box-shadow:0 0 40px #0009,0 0 80px #b4005a33,inset 0 1px #e0007826}.intro-text-container:before{content:"";background:linear-gradient(90deg,#0000,#e0006e99,#0000);height:1px;position:absolute;top:0;left:20%;right:20%}@keyframes slideDownBounce{0%{opacity:0;transform:translateY(-200px)}60%{opacity:1;transform:translateY(20px)}80%{transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.intro-text{color:#fff;text-align:center;white-space:pre-wrap;background:linear-gradient(135deg,#8c0052 0%,#e0006e 50%,#8c0052 100%);-webkit-text-fill-color:transparent;letter-spacing:8px;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;max-width:100%;margin:0 auto;font-size:2.2em;font-weight:800;line-height:1.8}.start-button{color:#fff;cursor:pointer;letter-spacing:12px;opacity:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#642a00e6,#461c00e6);border:2px solid #e0006e80;border-radius:12px;padding:22px 70px;font-size:1.6em;font-weight:700;transition:all .4s cubic-bezier(.4,0,.2,1);animation:1s cubic-bezier(.68,-.55,.265,1.55) forwards slideUpBounce,3s ease-in-out 1.2s infinite buttonBreath;position:relative;overflow:hidden}.start-button:before{content:"";background:linear-gradient(135deg,#e0006e14 0%,#8c005014 100%);border-radius:10px;transition:all .4s;position:absolute;inset:0}.start-button:after{content:"";filter:blur(1px);background:linear-gradient(90deg,#0000,#e0006e,#0000);height:2px;transition:all .4s;position:absolute;bottom:-2px;left:10%;right:10%}@keyframes slideUpBounce{0%{opacity:0;transform:translateY(200px)}60%{opacity:1;transform:translateY(-20px)}80%{transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes buttonBreath{0%,to{border-color:#e0006e66;box-shadow:0 0 20px #e0006e14,inset 0 0 20px #8c00500a}50%{border-color:#e0006ecc;box-shadow:0 0 40px #e0006e33,0 0 80px #8c00501a,inset 0 0 30px #e0006e0f}}.start-button:hover{letter-spacing:16px;border-color:#e0006ee6;transform:translateY(-3px);box-shadow:0 0 30px #e0006e4d,0 0 60px #8c005026,0 20px 40px #00000080}.start-button:hover:before{background:linear-gradient(135deg,#e0006e1f 0%,#8c005014 100%)}.start-button:hover:after{left:5%;right:5%;box-shadow:0 0 10px #e0006e80}.start-button:active{transition-duration:.1s;transform:translateY(-1px)scale(.98)}.flash-overlay{opacity:0;pointer-events:none;z-index:10001;background:radial-gradient(circle,#e0006e4d 0%,#8c00501f 30%,#0000 70%);width:100%;height:100%;position:fixed;top:0;left:0}@keyframes flash{0%{opacity:0}10%{opacity:1}to{opacity:0}}.flash-overlay.active{animation:.8s flash}.start-particle{pointer-events:none;z-index:10002;background:#e0006e;border-radius:50%;width:10px;height:10px;position:fixed;box-shadow:0 0 20px}@keyframes startParticleBurst{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);opacity:0}}.game-hud.slide-in{animation:.6s forwards hudSlideIn}@keyframes hudSlideIn{0%{opacity:0;transform:translate(-50%,-100px)}to{opacity:1;transform:translate(-50%)}}@media (width<=768px){.intro-text{letter-spacing:4px;font-size:1.4em}.start-button{padding:18px 50px;font-size:1.2em}.intro-text-container{margin:0 15px 40px;padding:30px 20px}.game-hud{flex-direction:column;align-items:center;gap:2px;width:calc(100% - 100px);margin:0;padding:8px 12px;left:50%;transform:translate(-50%)}.hud-title{letter-spacing:1px;width:auto;font-size:1.2em}.hud-question{font-size:.95em}.hud-score,.sound-toggle{display:none}.question-card{width:calc(100% - 20px);margin:0 10px}.game-container{padding:120px 10px 40px}.start-button{margin:0 10px}}.link-container{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0a0a;border-top:1px solid #38383b;justify-content:space-between;gap:8px;width:100%;padding:10px 24px 20px;animation:1s cubic-bezier(.68,-.55,.265,1.55) forwards slideUpBounce;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 8px 32px #00000080}.link-button{color:#fff;letter-spacing:1px;cursor:pointer;background:0 0;border:1px solid #38383b;border-radius:24px;padding:10px 20px;font-size:16px;font-weight:400;transition:all .12s ease-out}.link-button:hover{background:#3e424a}.link-button:active{border:1px solid #646464;transform:scale(.94)}.new-start-button{color:#fff;letter-spacing:1px;cursor:pointer;background:#3a56e5;border:none;border-radius:24px;padding:10px 20px;font-size:16px;font-weight:400;transition:all .12s ease-out}.new-start-button:hover{background:#2141e2}.new-start-button:active{transform:scale(.94)}.tlqkf{gap:6px;display:flex}
