@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--cyan:#4ae7fa;--pink:#f05bdb}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Outfit,system-ui,sans-serif;color:#fff;background:#080a17;overflow-x:hidden}.ambient{position:fixed;filter:blur(95px);opacity:.27;pointer-events:none;border-radius:50%;width:45vw;height:45vw}.a1{background:#5421ae;left:-20vw;top:-20vw}.a2{background:#00b2bd;right:-25vw;bottom:-24vw}.shell{max-width:770px;margin:auto;padding:22px 22px 15px;position:relative}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.logo{text-decoration:none;color:white;font-size:21px;font-weight:900;letter-spacing:-.7px;display:flex;align-items:center;gap:10px}.logo b{color:var(--cyan)}.logo-mark{width:37px;height:37px;background:linear-gradient(135deg,#41dbf2,#b76eff);display:grid;place-items:center;border-radius:11px;color:#09121e;font-size:27px}.mode{font-size:10px;font-weight:800;color:#9aadc8;letter-spacing:1.2px}.mode i{display:inline-block;width:7px;height:7px;background:#54e3b7;border-radius:50%;margin-right:6px;box-shadow:0 0 12px #54e3b7}.game-wrap{border:1px solid #2b3454;border-radius:22px;background:rgba(14,19,40,.9);padding:15px;box-shadow:0 20px 60px #0008}.topline{display:flex;justify-content:space-around;gap:8px;padding:7px 0 15px}.stat{text-align:center;min-width:90px}.stat small{display:block;color:#8e9bb9;font-size:10px;font-weight:800;letter-spacing:1.8px;margin-bottom:2px}.stat strong{font-size:29px;font-weight:900;line-height:1.2}.stat:nth-child(2) strong{color:#ffcf6a}.stat:nth-child(3) strong{color:#7ce8e6}.game-panel{position:relative;height:min(66vh,570px);min-height:390px;border-radius:15px;overflow:hidden;background:linear-gradient(180deg,#142047,#0c112d 74%,#13152e);border:1px solid #344268;touch-action:none;cursor:pointer}canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;background:linear-gradient(#0b1024ac,#0b1024ed);display:grid;place-items:center;padding:20px;text-align:center;transition:opacity .2s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-inner{max-width:390px}.over-icon{font-size:60px;line-height:1;margin-bottom:12px;color:#5be9f3;text-shadow:0 0 35px #4abfea77}.eyebrow{color:#61e1ee;font-size:11px;letter-spacing:2.5px;font-weight:900;margin:0 0 13px}h1{font-size:clamp(29px,6vw,44px);font-weight:900;line-height:1.12;letter-spacing:-1.4px;margin:0}h1 em{font-style:normal;color:#77eaf4}.over-desc{color:#b1bfd4;font-size:14px;line-height:1.65;margin:17px 0 24px}.primary{border:0;border-radius:12px;padding:17px 24px;width:min(100%,300px);font:800 13px Outfit,sans-serif;letter-spacing:.9px;background:linear-gradient(100deg,#4fe3f2,#87a6ff);color:#091528;cursor:pointer;box-shadow:0 9px 30px #24cbf544;transition:transform .15s}.primary:hover{transform:translateY(-2px)}.primary span{margin-left:15px;font-size:18px}.hint{margin-top:18px;font-size:9px;color:#7286a6;font-weight:800;letter-spacing:1.6px}.float-label{position:absolute;top:37%;left:50%;transform:translate(-50%,-50%);font-size:27px;font-weight:900;opacity:0;pointer-events:none;text-shadow:0 3px 20px #0009;white-space:nowrap}.float-label.show{animation:pop .7s forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,-10%) scale(.7)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}.below{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 6px 5px}.tip{display:flex;gap:13px;align-items:center}.tip span{font-size:23px}.tip p{font-size:12px;line-height:1.5;color:#9daec6;margin:0}.tip b{color:white;font-size:13px}kbd{border:1px solid #4b5570;background:#1c2641;border-radius:4px;padding:1px 4px;font:600 10px Outfit}.sound{border:1px solid #34415e;background:#1c2540;border-radius:8px;padding:10px 13px;white-space:nowrap;color:#bee0ef;font:800 11px Outfit;cursor:pointer}footer{text-align:center;font-size:9px;letter-spacing:1.2px;color:#67728d;margin:18px 0 5px}@media(max-width:530px){.shell{padding:13px 10px}.logo{font-size:17px}.mode{font-size:8px;letter-spacing:.5px}.game-wrap{padding:10px;border-radius:17px}.game-panel{height:min(69dvh,630px);min-height:365px}.stat strong{font-size:25px}.below{padding:15px 2px 4px}.tip p{font-size:11px}.tip span{font-size:19px}footer{font-size:8px;line-height:1.7}}

/* Tela de cadastro inspirada no clima de fantasia roxa, com arte original em CSS */
[hidden]{display:none!important}.auth-scene{position:relative;min-height:100svh;isolation:isolate;display:grid;place-items:center;overflow:hidden;padding:35px 15px;background:radial-gradient(ellipse at 51% 43%,#9b4dce77 0,#7333a666 28%,transparent 70%),radial-gradient(ellipse at 50% 115%,#171653 1%,transparent 67%),linear-gradient(#1b0c55,#3b1887 42%,#4d2486 67%,#100d39)}.auth-scene:before{content:"";inset:0;position:absolute;z-index:-1;background:radial-gradient(circle at 9% 14%,#f8acff 0 1px,transparent 2px),radial-gradient(circle at 80% 24%,#ffd19a 0 1px,transparent 2px),radial-gradient(circle at 25% 72%,#ffffff 0 1px,transparent 2px),radial-gradient(circle at 60% 17%,#ffd2fa 0 1px,transparent 2px);background-size:109px 97px,158px 171px,71px 83px,191px 129px;opacity:.9}.sky-stars{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 13% 77%,#ed659b24,transparent 35%),radial-gradient(ellipse at 92% 64%,#ffd46e19,transparent 38%)}.moon{position:absolute;right:10%;top:13%;width:76px;height:76px;border-radius:50%;z-index:-1;background:#e6afff19;box-shadow:0 0 100px 30px #e5a1ff25,0 0 0 2px #f0b7ff44}.hills{position:absolute;left:-6%;right:-6%;bottom:-8%;height:42%;z-index:-1;background:#160f47;clip-path:polygon(0 38%,7% 53%,12% 17%,18% 61%,26% 25%,36% 66%,44% 44%,52% 71%,63% 23%,71% 58%,78% 35%,84% 65%,93% 20%,100% 46%,100% 100%,0 100%)}.hills.back{background:#28155b88;bottom:-2%;filter:blur(2px)}.hills.front{height:29%;background:#0f1039;clip-path:polygon(0 31%,5% 54%,13% 46%,20% 67%,33% 38%,40% 73%,54% 51%,64% 70%,75% 37%,83% 66%,92% 30%,100% 54%,100% 100%,0 100%)}.sparkle{position:absolute;font-size:27px;filter:drop-shadow(0 0 16px currentColor);pointer-events:none}.s1{left:12%;top:10%;color:#e59bff}.s2{right:12%;top:15%;color:#87efff}.s3{left:20%;bottom:13%;color:#9efaff}.s4{right:22%;bottom:20%;color:#ffcc83}.orb{position:absolute;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:3px solid #ec98ff;background:radial-gradient(circle at 30% 20%,#b46bf7a3,#51168488 70%);box-shadow:0 0 0 6px #ad5fff22,0 0 35px #ce67f099,inset 0 0 15px #ffb7ff99;color:#ffbdec;font-size:35px;text-shadow:0 0 12px #fff;pointer-events:none}.o1{top:3%;left:3%}.o2{bottom:10%;right:5%;width:60px;height:60px;color:#ffc87d;border-color:#ffbf65;box-shadow:0 0 25px #ffa54c99,inset 0 0 15px #ffb962}.o3{right:18%;top:8%;width:45px;height:45px;color:#98ecff;border-color:#83d5ff;font-size:23px}.auth-center{position:relative;width:min(100%,420px);margin:auto;z-index:2}.auth-logo{display:flex;align-items:center;justify-content:center;gap:11px;margin:0 auto 23px;filter:drop-shadow(0 4px 16px #0006)}.badge-star{font-size:38px;color:#ffce79;text-shadow:0 0 14px #a966ff}.auth-logo span{font-weight:900;font-size:22px;letter-spacing:-1px;color:#f7eaff}.auth-logo b{display:block;font-size:28px;line-height:.8;color:#f2c36d;text-shadow:2px 3px #582277}.auth-logo small{display:block;font-size:9px;letter-spacing:2px;color:#d7bbff;margin-top:8px;font-weight:800}.auth-card{border:1px solid #8f56cd52;background:#1e1439e8;box-shadow:0 22px 65px #13082888;border-radius:15px;padding:26px 24px 23px;backdrop-filter:blur(14px)}.auth-card h1{font-size:25px;margin:0 0 5px;font-weight:800;letter-spacing:-.5px}.auth-card>p#authSubtitle{font-size:14px;color:#aaa1c3;margin:0 0 23px;line-height:1.5}.auth-card input{height:51px;border-radius:10px;background:#130f2c;border:1px solid #503183;width:100%;padding:0 15px;outline:none;color:#fff;font:500 15px Outfit,system-ui,sans-serif;margin:0 0 15px;transition:border-color .2s}.auth-card input:focus{border-color:#9965ff;box-shadow:0 0 0 3px #9965ff20}.auth-card input::placeholder{color:#827796}.password-box{position:relative}.password-box input{padding-right:49px}.password-box button{position:absolute;right:10px;top:8px;background:transparent;border:0;color:#a99fca;font-size:20px;cursor:pointer;height:36px;width:36px}.auth-submit{height:48px;width:100%;border:0;border-radius:10px;background:linear-gradient(105deg,#8357fa,#603bf7);color:#fff;font:800 15px Outfit,system-ui,sans-serif;cursor:pointer;box-shadow:0 7px 22px #7346ef55}.auth-submit:hover{filter:brightness(1.12)}.auth-switch{text-align:center;margin:21px 0 0;color:#aaa1c3;font-size:13px}.auth-switch button{border:0;background:none;color:#51cffa;font:600 13px Outfit,system-ui,sans-serif;cursor:pointer}.auth-card .demo-note{font-size:10px;color:#8c80ac;line-height:1.5;margin:18px 0 0;text-align:center}.auth-error{min-height:0;color:#ff9da8;font-size:12px;line-height:1.4;margin:0 0 8px}.auth-error:empty{display:none}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.player-bar{color:#acb9d9;text-align:right;font-size:12px;padding:0 2px 13px}.player-bar button{border:0;background:none;color:#75daee;cursor:pointer;margin-left:12px;font-weight:700}@media(max-width:520px){.auth-scene{padding:20px 16px}.auth-card{padding:22px 19px}.o1{width:48px;height:48px;font-size:22px;left:-9px}.o2{width:44px;height:44px}.auth-logo{margin-bottom:15px}}
