:root{--bg:#0a0e27;--bg-light:#111638;--dot-inactive:#2a3a5c;--dot-active:#00e5ff;--line-start:#00e5ff;--line-end:#7c4dff;--accent:#7c4dff;--success:#00e676;--error:#ff1744;--text:#e0e0e0;--text-dim:#7a8ba8;--valid-hint:rgba(255,255,255,0.12);--radius:12px;--radius-sm:8px;--font:"Inter",system-ui,sans-serif;--font-display:"Orbitron",var(--font);--transition:0.3s cubic-bezier(.4,0,.2,1);--gold:#ffd600}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent;-moz-user-select:none;user-select:none;-webkit-user-select:none}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease;z-index:1}.screen.active{opacity:1;visibility:visible;z-index:10}#start-screen{background:radial-gradient(ellipse at 50% 40%,#111d4a 0,var(--bg) 70%)}.start-bg-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}.start-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;z-index:2}.logo-container{text-align:center;margin-bottom:16px}.game-logo{font-family:var(--font-display);font-size:clamp(2.8rem,10vw,5rem);font-weight:800;letter-spacing:-1px;line-height:1.1}.logo-connect{background:linear-gradient(135deg,var(--dot-active),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:logoShimmer 4s ease-in-out infinite}.logo-dash{color:var(--accent);opacity:.6}.logo-it{color:var(--text);text-shadow:0 0 30px rgba(0,229,255,.25)}@keyframes logoShimmer{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.tagline{font-size:clamp(.85rem,2.5vw,1.05rem);color:var(--text-dim);letter-spacing:1px;margin-top:8px;animation:fadeInUp .8s .3s both}.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--dot-active);opacity:0;animation:floatUp linear infinite}@keyframes floatUp{0%{transform:translateY(0) scale(0);opacity:0}10%{opacity:.6}90%{opacity:.1}to{transform:translateY(-100vh) scale(1);opacity:0}}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;border:none;cursor:pointer;border-radius:var(--radius);transition:transform var(--transition),box-shadow var(--transition),background var(--transition);overflow:hidden;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.96)}.btn-play{background:linear-gradient(135deg,var(--dot-active),var(--accent));color:#fff;font-size:1.15rem;padding:16px 56px;border-radius:50px;box-shadow:0 4px 24px rgba(0,229,255,.3),0 0 60px rgba(124,77,255,.15);animation:fadeInUp .8s .5s both}.btn-play:hover{box-shadow:0 6px 32px rgba(0,229,255,.45),0 0 80px rgba(124,77,255,.25);transform:translateY(-2px)}.btn-glow{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);animation:btnGlow 3s 1s infinite}@keyframes btnGlow{0%{transform:translateX(-100%)}40%{transform:translateX(100%)}to{transform:translateX(100%)}}.btn-levels{background:transparent;border:1.5px solid rgba(255,255,255,.15);color:var(--text-dim);font-size:.95rem;padding:12px 36px;border-radius:50px;animation:fadeInUp .8s .65s both}.btn-levels:hover{border-color:var(--dot-active);color:var(--dot-active)}.btn-action{background:var(--bg-light);border:1px solid rgba(255,255,255,.08);color:var(--text-dim);font-size:.8rem;padding:10px 18px;border-radius:var(--radius);flex-direction:column;gap:4px}.btn-action svg{opacity:.7}.btn-action:active,.btn-action:hover{background:rgba(0,229,255,.08);color:var(--dot-active);border-color:rgba(0,229,255,.2)}.btn-action:active svg,.btn-action:hover svg{opacity:1}.btn-menu-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text);font-size:1rem;padding:14px 40px;border-radius:var(--radius);width:100%}.btn-menu-item:hover{background:rgba(0,229,255,.08);border-color:rgba(0,229,255,.2);color:var(--dot-active)}.btn-confirm{background:var(--accent);color:#fff;border-radius:var(--radius)}.btn-cancel,.btn-confirm{font-size:.95rem;padding:12px 32px}.btn-cancel{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--text-dim);border-radius:var(--radius)}.btn-share{background:transparent;border:1.5px solid rgba(0,229,255,.3);color:var(--dot-active);font-size:.95rem;padding:12px 36px;border-radius:50px;transition:all var(--transition)}.btn-share:hover{background:rgba(0,229,255,.1);border-color:var(--dot-active)}.icon-btn{background:none;border:none;color:var(--text-dim);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:color var(--transition),background var(--transition)}.icon-btn:hover{color:var(--dot-active);background:rgba(0,229,255,.08)}#level-screen{background:var(--bg);justify-content:flex-start;padding:0 16px}.screen-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:480px;padding:16px 0 24px}.screen-title{font-family:var(--font-display);font-size:1.2rem;font-weight:600;letter-spacing:1px}.star-progress{font-size:.75rem;color:var(--gold);font-weight:600;white-space:nowrap}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:10px;gap:10px;max-width:420px;width:100%;padding:0 8px 40px;overflow-y:auto;max-height:calc(100vh - 80px);-ms-overflow-style:none;scrollbar-width:none}.level-grid::-webkit-scrollbar{display:none}.level-tier{grid-column:1/-1;font-family:var(--font-display);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);padding:12px 0 4px;border-bottom:1px solid rgba(255,255,255,.06)}.level-tier.locked{color:rgba(122,139,168,.4)}.level-tier .tier-unlock-text{display:block;font-family:var(--font);font-size:.6rem;letter-spacing:.5px;text-transform:none;color:var(--text-dim);opacity:.6;margin-top:2px}.level-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;background:var(--bg-light);border:1.5px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);color:var(--text-dim);font-weight:600;font-size:1rem;cursor:pointer;transition:all var(--transition);position:relative}.level-cell:hover{border-color:var(--dot-active);background:rgba(0,229,255,.06);color:var(--dot-active);transform:scale(1.05)}.level-cell.completed{border-color:rgba(0,230,118,.25)}.level-cell.completed:after{content:"";position:absolute;top:4px;right:4px;width:14px;height:14px;background:var(--success);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:9px}.level-cell.current{border-color:var(--dot-active);box-shadow:0 0 16px rgba(0,229,255,.2);color:var(--dot-active)}.level-cell.locked-cell{opacity:.35;pointer-events:none;cursor:default}.level-cell.locked-cell:hover{transform:none;border-color:rgba(255,255,255,.06);background:var(--bg-light);color:var(--text-dim)}.level-cell .best-score{font-size:.55rem;color:var(--text-dim);opacity:.6}.level-cell .cell-stars{display:flex;gap:1px;font-size:.5rem;line-height:1}.level-cell .cell-stars .cell-star{color:rgba(255,255,255,.15)}.level-cell .cell-stars .cell-star.earned{color:var(--gold)}.level-cell .lock-icon{font-size:.8rem;opacity:.5}#stats-screen{background:var(--bg);justify-content:flex-start;padding:0 16px}.stats-container{display:flex;flex-direction:column;gap:16px;max-width:420px;width:100%;padding:0 8px 40px;overflow-y:auto;max-height:calc(100vh - 80px)}.stats-card{background:var(--bg-light);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:20px}.stats-card-title{font-family:var(--font-display);font-size:.8rem;letter-spacing:1px;color:var(--dot-active);margin-bottom:12px}.stats-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}.stats-row:last-child{border-bottom:none}.stats-label{font-size:.85rem;color:var(--text-dim)}.stats-value{font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--dot-active)}.stats-progress-bar{width:100%;height:6px;background:rgba(255,255,255,.06);border-radius:3px;margin:8px 0 4px;overflow:hidden}.stats-progress-fill{height:100%;background:linear-gradient(90deg,var(--dot-active),var(--accent));border-radius:3px;transition:width .5s ease}#game-screen{justify-content:space-between;padding:0}.tutorial-banner{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:20;background:rgba(10,14,39,.85);border:1px solid rgba(0,229,255,.2);border-radius:var(--radius);padding:12px 24px;max-width:340px;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeInUp .4s ease both}.tutorial-banner p{font-size:.85rem;color:var(--dot-active);line-height:1.4}.top-bar{justify-content:space-between;width:100%;padding:12px 16px;z-index:5}.top-bar,.top-bar-item{display:flex;align-items:center}.top-bar-item{flex-direction:column;gap:2px}.top-bar-item .label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim)}.top-bar-item .value{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--dot-active)}.top-bar-right{flex-direction:row;gap:4px}.top-bar-timer .value{color:var(--text-dim);font-size:1rem;font-weight:500}.board-container{flex:1 1;display:flex;align-items:center;justify-content:center;width:100%;padding:8px;position:relative}#game-canvas{display:block;border-radius:var(--radius);touch-action:none}.bottom-bar{gap:16px;width:100%;padding:12px 16px 20px;z-index:5}.bottom-bar,.overlay{display:flex;align-items:center;justify-content:center}.overlay{position:fixed;inset:0;background:rgba(10,14,39,.92);z-index:100;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.overlay.active{opacity:1;visibility:visible}#confetti-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.win-content{text-align:center;z-index:2;animation:popIn .5s both}.win-title{font-family:var(--font-display);font-size:clamp(1.6rem,6vw,2.4rem);font-weight:800;background:linear-gradient(135deg,var(--success),var(--dot-active));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.win-stars{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.win-star{font-size:2.5rem;color:rgba(255,255,255,.12);transition:color .3s ease,transform .3s ease}.win-star.filled{color:var(--gold);text-shadow:0 0 16px rgba(255,214,0,.4);animation:starPop .4s ease both}.win-star.filled:nth-child(2){animation-delay:.15s}.win-star.filled:nth-child(3){animation-delay:.3s}@keyframes starPop{0%{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}.win-stats{display:flex;gap:40px;justify-content:center;margin-bottom:32px}.stat{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim)}.stat-value{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--dot-active)}.confirm-content,.menu-content,.win-buttons{display:flex;flex-direction:column;align-items:center;gap:12px}.confirm-content,.menu-content{width:280px;animation:popIn .3s both}.menu-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--dot-active);margin-bottom:12px}.confirm-text{font-size:1rem;margin-bottom:16px;text-align:center}.confirm-buttons{display:flex;gap:12px}#toast-container{position:fixed;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:200}.toast{background:linear-gradient(135deg,rgba(0,229,255,.15),rgba(124,77,255,.15));border:1px solid rgba(0,229,255,.3);color:var(--dot-active);font-family:var(--font);font-weight:600;font-size:.9rem;padding:12px 28px;border-radius:50px;margin-top:8px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:toastIn .3s ease both;pointer-events:auto}.toast.toast-out{animation:toastOut .3s ease both}@keyframes toastIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(5px)}45%{transform:translateX(-4px)}60%{transform:translateX(3px)}75%{transform:translateX(-2px)}}.shake{animation:shake .4s ease}@media (min-width:600px){.bottom-bar{gap:24px}.btn-action{padding:12px 28px;font-size:.85rem}}@media (min-width:900px){.bottom-bar,.top-bar{max-width:600px;margin:0 auto}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}.game-board-svg{display:block;width:100%;height:100%;max-width:560px;max-height:560px;aspect-ratio:1/1;border-radius:var(--radius);touch-action:none;overflow:visible}.board-grid-line{stroke:rgba(255,255,255,.03);stroke-width:.01}.board-dot-inner{fill:rgba(255,255,255,.3);pointer-events:none}.board-dot-current{animation:dotPulse .6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}@keyframes dotPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.board-valid-hint{animation:hintFade 1s ease-in-out infinite}@keyframes hintFade{0%,to{opacity:.35}50%{opacity:.85}}.board-hint-ring{animation:hintRing .4s ease-in-out infinite}@keyframes hintRing{0%,to{opacity:.4}50%{opacity:.9}}.board-dot-win{animation:dotWin 1.2s ease-out;transform-origin:center;transform-box:fill-box}@keyframes dotWin{0%{filter:drop-shadow(0 0 0 var(--success))}40%{filter:drop-shadow(0 0 8px var(--success))}to{filter:drop-shadow(0 0 0 var(--success))}}.auth-form{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px;padding:0 20px;margin-top:8px}.auth-input{width:100%;padding:14px 16px;background:var(--bg-light);color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);font-family:var(--font);font-size:1rem;outline:none;transition:border-color var(--transition)}.auth-input:focus{border-color:var(--dot-active)}.auth-pw{position:relative;width:100%}.auth-pw .auth-input{padding-right:48px}.auth-pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:none;border:none;cursor:pointer;color:var(--text-dim);transition:color var(--transition)}.auth-pw-toggle:hover{color:var(--text)}.auth-error{color:var(--error);font-size:.9rem;text-align:center}.auth-google{max-width:360px;margin:14px 20px 0;text-decoration:none;text-align:center}.auth-toggle{margin-top:18px;background:none;border:none;cursor:pointer;color:var(--text-dim);font-family:var(--font);font-size:.95rem;text-decoration:underline}.lb-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.05)}.lb-row:last-child{border-bottom:none}.lb-rank{width:48px;color:var(--text-dim);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.lb-name{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-points{font-family:var(--font-display);font-weight:700;color:var(--dot-active);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}