@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.0y4xxz2y19qqs.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.0yczt4r3j28ff.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.0ez3bnoxb63ra.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.0y4xxz2y19qqs.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.0yczt4r3j28ff.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.0ez3bnoxb63ra.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka Fallback;src:local(Arial);ascent-override:95.64%;descent-override:23.17%;line-gap-override:0.0%;size-adjust:101.84%}.fredoka_241dfad9-module__cqzEva__className{font-family:Fredoka,Fredoka Fallback;font-style:normal}
:root{--bg-color:#1a0b2e;--text-color:#fff;--accent-cyan:#00f0ff;--accent-pink:#ff007f;--accent-lime:#39ff14;--accent-yellow:#fffb00}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);background-image:radial-gradient(circle,#2d1b4e 0%,#1a0b2e 100%);justify-content:center;align-items:flex-start;min-height:100vh;display:flex;overflow:hidden auto}#app{text-align:center;flex-direction:column;width:100%;max-width:800px;min-height:100vh;padding:20px 10px;display:flex}header h1{color:var(--accent-yellow);text-transform:uppercase;letter-spacing:2px;-webkit-text-stroke:3px #000;text-shadow:4px 4px #000,0 0 20px #fffb0099;margin-bottom:20px;font-size:clamp(2.5rem,8vw,3.5rem);animation:2s ease-in-out infinite bounce}.game-container{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;display:flex}.roulette-wrapper{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.view-section{flex-direction:column;align-items:center;width:100%;animation:.5s ease-in-out fadeIn;display:flex}.subtitle{color:var(--accent-cyan);margin-bottom:20px;font-size:clamp(1.2rem,5vw,1.5rem)}.games-grid{flex-wrap:wrap;justify-content:center;gap:20px;width:100%;display:flex}.game-card{border:6px solid var(--accent-pink);cursor:pointer;background-color:#ffffff1a;border-radius:30px;flex-direction:column;align-items:center;gap:15px;width:100%;max-width:250px;padding:20px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:6px 6px #000}.game-card:hover{background-color:#fff3;transform:translateY(-5px);box-shadow:10px 10px #000,0 0 30px #ff007f99}.card-icon{object-fit:contain;--rot:0deg;width:100px;height:100px;animation:4s ease-in-out infinite float}.game-card h2{color:var(--accent-yellow);-webkit-text-stroke:1.5px #000;text-shadow:2px 2px #000;font-size:1.5rem}.game-card p{font-size:1rem}.btn-back{background-color:var(--accent-cyan);color:#000;cursor:pointer;border:4px solid #000;border-radius:20px;margin-bottom:20px;padding:10px 20px;font-size:1rem;font-weight:700;transition:transform .1s;box-shadow:4px 4px #000}.btn-back:hover{transform:translateY(-2px);box-shadow:6px 6px #000}.letter-display{color:var(--accent-cyan);-webkit-text-stroke:clamp(4px, 1.5vw, 8px) #000;text-shadow:10px 10px #000,0 0 40px #00f0ffcc;aspect-ratio:1;width:100%;max-width:400px;box-shadow:inset 0px 0px 30px #00f0ff4d, 10px 10px 0px var(--accent-pink);background-color:#ffffff1a;border:8px solid #000;border-radius:40px;justify-content:center;align-items:center;font-size:clamp(8rem,30vw,15rem);font-weight:700;line-height:1;transition:transform .1s;display:flex}.letter-display.spinning{color:var(--accent-lime);text-shadow:10px 10px #000,0 0 40px #39ff14cc;box-shadow:inset 0px 0px 30px #39ff144d, 10px 10px 0px var(--accent-yellow);transform:scale(1.05)}.letter-display.winner{color:var(--accent-pink);text-shadow:10px 10px #000,0 0 50px #ff007fe6;box-shadow:inset 0px 0px 30px #ff007f4d, 10px 10px 0px var(--accent-cyan);animation:1s ease-in-out tada}.btn-spin{color:#fff;background-color:var(--accent-pink);cursor:pointer;text-transform:uppercase;-webkit-text-stroke:2px #000;border:6px solid #000;border-radius:50px;padding:15px clamp(20px,8vw,50px);font-size:clamp(2rem,8vw,3rem);font-weight:700;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:6px 6px #000}.btn-spin:hover{background-color:#f39;transform:translateY(-5px)scale(1.05);box-shadow:10px 10px #000,0 0 30px #ff007f99}.btn-spin:active{transform:translateY(2px)scale(.95);box-shadow:3px 3px #000}.btn-spin:disabled{color:#aaa;cursor:not-allowed;-webkit-text-stroke:1px #333;background-color:#555;transform:none;box-shadow:6px 6px #000}.btn-action{font-family:var(--font-family);color:#fff;cursor:pointer;text-transform:uppercase;-webkit-text-stroke:1px #000;border:4px solid #000;border-radius:40px;padding:10px clamp(15px,4vw,30px);font-size:clamp(1rem,4vw,1.8rem);font-weight:700;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:4px 4px #000}.btn-action:hover{transform:translateY(-4px);box-shadow:6px 6px #000}.btn-action:active{transform:translateY(2px);box-shadow:2px 2px #000}.btn-clear{background-color:var(--accent-pink)}.btn-next{background-color:var(--accent-lime);color:#000;-webkit-text-stroke:0px}.btn-verify{background-color:var(--accent-cyan);color:#000;-webkit-text-stroke:0px}.feedback-msg{text-align:center;border:4px solid #000;border-radius:20px;width:100%;padding:10px 20px;font-size:clamp(1.2rem,5vw,2rem);font-weight:700;animation:.5s ease-in-out bounce;box-shadow:4px 4px #000}.feedback-msg.success{background-color:var(--accent-lime);color:#000}.feedback-msg.fail{background-color:var(--accent-pink);color:#fff}.letters-grid-container{flex-direction:column;align-items:center;width:100%;display:flex}.letters-grid{flex-wrap:wrap;justify-content:center;gap:10px;max-width:600px;padding-bottom:40px;display:flex}.letter-cell{width:clamp(50px,15vw,70px);height:clamp(50px,15vw,70px);font-family:var(--font-family);color:var(--accent-yellow);border:3px solid var(--accent-cyan);cursor:pointer;-webkit-text-stroke:1.5px #000;background-color:#ffffff1a;border-radius:12px;font-size:clamp(1.5rem,6vw,2.5rem);font-weight:700;transition:transform .1s,box-shadow .1s;position:relative;box-shadow:3px 3px #000}.letter-cell:hover{background-color:#fff3;transform:translateY(-3px);box-shadow:5px 5px #000}.letter-cell.completed{border-color:var(--accent-lime);background-color:#39ff1433}.star-icon{filter:drop-shadow(2px 2px #000);-webkit-text-stroke:0;font-size:clamp(1rem,4vw,1.5rem);animation:2s ease-in-out infinite tada;position:absolute;top:-10px;right:-10px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0px) rotate(var(--rot))}50%{transform:translateY(-15px) rotate(var(--rot))}to{transform:translateY(0px) rotate(var(--rot))}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1)rotate(3deg)}40%,60%,80%{transform:scale(1.1)rotate(-3deg)}to{transform:scale(1)}}