.page{min-height:100vh;max-width:1024px;margin:0 auto;padding:0 20px 56px;display:flex;flex-direction:column;gap:32px;overflow-x:clip}.controls{position:sticky;height:fit-content;display:flex;flex-direction:column;top:32px;z-index:1}.controls .controls-block{position:relative;display:flex;align-items:end;gap:5px}.controls .controls-block .stats{display:flex;flex-direction:column;justify-content:space-around;background-color:var(--background-2-color);color:var(--background-color);line-height:0;height:80px;width:100%;padding-left:60px;margin-left:50px;border-top-right-radius:18px;box-shadow:0 4px 9px #0003}.controls .controls-block .stats p{display:flex;align-items:center;gap:5px;height:20px;line-height:0;margin:0}.controls .controls-block .actions{display:flex;flex-direction:column;justify-content:space-around;gap:5px;padding-bottom:5px}.controls .controls-block .actions button{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--background-color);height:40px;width:40px;border-radius:50%;border:none;cursor:pointer;box-shadow:0 4px 9px #0003}.controls .points{z-index:5;background-color:var(--background-color);padding:5px 15px;border-radius:18px;font-size:larger;color:var(--text-color);box-shadow:0 4px 9px #0003}.random-sound-btn{position:absolute;display:flex;justify-content:center;align-items:center;aspect-ratio:1/1;width:100px;height:100px;background-color:var(--background-color);border-radius:50%;border:none;cursor:pointer;z-index:10;box-shadow:0 4px 9px #0003;transition:all .2s ease-in-out}.random-sound-btn:hover{transform:scale(102%);box-shadow:0 8px 18px #0003}.random-sound-btn:active{transform:scale(98%);box-shadow:0 4px 9px #0003}.random-sound-btn img{width:70px;height:70px;object-fit:contain}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}.sound-btn-container{position:relative;width:100%;height:100%;min-width:100%;min-height:100%;max-width:100%;max-height:100%;aspect-ratio:1/1;user-select:none}.sound-btn-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.sound-btn-container .overlay .goal{position:absolute;bottom:0;right:0;width:200%;height:30px;transform-origin:center;transform:translate(20%) translateY(20%) rotate(-45deg) translate(20%);background-color:#e61515;display:flex;justify-content:center;align-items:center}.sound-btn{position:relative;width:100%;height:100%;min-width:100%;min-height:100%;max-width:100%;max-height:100%;aspect-ratio:1/1;border-radius:18px;padding:18px;cursor:pointer;background:var(--sound-btn-color, #ff6b6b);transition:all .2s ease-in-out;border:none}.sound-btn:disabled{cursor:not-allowed;opacity:.5}.sound-btn .sparkles{position:absolute;top:8px;left:8px;color:var(--sound-btn-text-color, var(--text-color));fill:var(--sound-btn-text-color, var(--text-color));overflow:hidden;pointer-events:none;user-select:none}.sound-btn div{max-height:100px;overflow:clip}.sound-btn span{position:relative;font-size:1.1rem;font-weight:700;color:var(--sound-btn-text-color, var(--text-color));text-transform:uppercase;letter-spacing:.5px;word-break:break-word}.sound-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 15px #0000004d}.sound-btn:not(:disabled):active{transform:translateY(5px);opacity:.9;box-shadow:0 4px 9px #0003}@media (max-width: 600px){.page{padding:0 16px 42px}.sound-btn{padding:16px}}.hero{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}.hero .title-banner{width:110vw;background-color:#3c3c3c;padding:8px 0;display:flex;justify-content:center;align-items:center}.hero h1{font-size:clamp(2.6rem,6vw,3.5rem);letter-spacing:1px;margin:0;text-transform:uppercase;background:linear-gradient(120deg,#7c3aed,#f59e0b,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{margin:0;color:var(--text-color);font-size:1rem}.btn{background-color:var(--background-color);color:var(--text-color);border:none;border-radius:5px;padding:5px 10px;cursor:pointer;font-size:medium;box-shadow:0 4px 9px #0003;transition:all .2s ease-in-out;will-change:contents}.btn:hover{scale:102%;box-shadow:0 8px 18px #0006}.btn:active{transform:scale(98%);box-shadow:0 4px 9px #0003;opacity:.9}.btn.back{position:sticky;top:13px;width:fit-content;padding:5px 10px;font-size:large;text-align:center;line-height:0;display:flex;align-items:center;gap:5px}.btn.danger{background-color:#eb2e2e;width:100%}.btn.social{display:flex;align-items:center;gap:5px;text-decoration:none}p.error{color:#eb2e2e}p.success{color:#458f09}.socials{display:flex;flex-direction:column;gap:10px}.code-input-container{display:grid;grid-template-columns:auto .5fr;align-items:center;row-gap:10px;margin-bottom:10px;border:1px solid var(--background-2-color);padding:10px;border-radius:5px}.code-input-container p{grid-column:1/3;margin:0;font-size:small}.version{margin-top:16px;text-align:end;font-size:small}@font-face{font-family:Berlin Sans FB;font-style:normal;font-weight:400;src:local("Berlin Sans FB"),url(BRLNSR.woff) format("woff")}@font-face{font-family:Berlin Sans FB Demi Bold;font-style:normal;font-weight:400;src:local("Berlin Sans FB Demi Bold"),url(BRLNSDB.ttf) format("truetype")}@font-face{font-family:Berlin Sans FB Bold;font-style:normal;font-weight:400;src:local("Berlin Sans FB Bold"),url(BRLNSB.woff) format("woff")}:root{--font-family: "Berlin Sans FB Demi Bold", "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif}html{--background-color: #E5B53D;--text-color: #1f1f2b;--background-2-color: #3c3c3c}*{font-family:var(--font-family)}html,body{font-family:var(--font-family);padding:0;margin:0;height:100%;background:var(--background-color);background-size:max(50%,50%);background-position:center;color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}