@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #102222;--primary: #13ecec;--primary-dim: rgba(19, 236, 236, .4);--primary-20: rgba(19, 236, 236, .2);--primary-10: rgba(19, 236, 236, .1);--pearl: #1c1c1c;--white: #ffffff;--white-10: rgba(255, 255, 255, .1);--white-20: rgba(255, 255, 255, .2);--white-40: rgba(255, 255, 255, .4);--white-60: rgba(255, 255, 255, .6);--gold: #FFD700;--gold-light: #FFFACD;--font: "Space Grotesk", sans-serif}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--font);color:var(--white);-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none}#root{width:100%;height:100%}.app-root{width:100%;height:100%;position:relative;overflow:hidden}.menu-screen{width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}.menu-bg{position:fixed;inset:0;z-index:0;background:var(--bg)}.splash{position:absolute;border-radius:50%;filter:blur(40px);opacity:.25}.splash-1{top:20%;left:-10%;width:250px;height:250px;background:var(--primary-20);animation:float 6s ease-in-out infinite}.splash-2{bottom:25%;right:-10%;width:300px;height:300px;background:#ff69b426;animation:float 8s ease-in-out infinite reverse}.menu-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(16,34,34,.5) 50%,var(--bg))}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(15px,-20px)}}.bg-particles{position:fixed;inset:0;pointer-events:none;z-index:1}.bg-pearl{position:absolute;background:#1c1c1c59;border-radius:50%;filter:blur(2px);animation:drift 12s ease-in-out infinite}@keyframes drift{0%,to{transform:translateY(0) scale(1);opacity:.3}50%{transform:translateY(-15px) scale(1.05);opacity:.5}}.menu-content{position:relative;z-index:10;width:100%;max-width:430px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:60px 24px 40px}.menu-header{text-align:center}.game-title{font-size:56px;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase;color:var(--primary);text-shadow:0 0 15px rgba(19,236,236,.8),0 0 30px rgba(19,236,236,.4)}.game-subtitle{color:var(--primary-dim);font-size:12px;font-weight:600;letter-spacing:6px;margin-top:8px}.menu-character{position:relative;display:flex;flex-direction:column;align-items:center}.character-shadow{width:80px;height:12px;background:#00000059;border-radius:50%;filter:blur(6px);position:absolute;bottom:-20px}.boba-hero{width:160px;height:160px;background:var(--pearl);border-radius:50%;border:3.5px solid var(--primary-dim);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 0 40px #13ecec33;animation:heroFloat 2.5s ease-in-out infinite}@keyframes heroFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(.97,1.03)}}.boba-gloss{position:absolute;top:16px;left:24px;width:40px;height:20px;background:var(--white-20);border-radius:50%;transform:rotate(-30deg)}.boba-eyes{display:flex;gap:28px}.boba-eye{width:20px;height:20px;border:3.5px solid var(--primary);border-radius:50%}.menu-actions{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:20px}.play-btn{width:100%;height:72px;background:var(--primary);border:none;border-radius:9999px;color:var(--bg);font-family:var(--font);font-size:28px;font-weight:700;letter-spacing:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 30px #13ecec80;transition:transform .1s}.play-btn:active{transform:scale(.94)}.play-arrow{font-size:22px}.secondary-actions{display:flex;justify-content:space-between;width:100%;padding:0 8px}.action-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--white);font-family:var(--font);transition:transform .1s}.action-btn:active{transform:scale(.92)}.action-icon{width:56px;height:56px;background:#102222b3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--primary-20);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;transition:background .2s}.action-btn:hover .action-icon{background:var(--primary-10)}.action-label{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--primary-dim);text-transform:uppercase}.action-value{font-size:11px;font-weight:700;color:var(--white-60)}.gameover-screen{width:100%;height:100%;position:relative;overflow-y:auto;overflow-x:hidden;background:var(--bg)}.gameover-bg{position:fixed;inset:0;z-index:0}.gameover-content{position:relative;z-index:10;max-width:430px;margin:0 auto;padding:40px 24px 30px;display:flex;flex-direction:column;align-items:center;min-height:100%}.gameover-nav{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.nav-circle{width:44px;height:44px;border-radius:50%;background:var(--primary-10);border:1px solid var(--primary-20);color:var(--primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s}.nav-circle:active{transform:scale(.9)}.star-display{background:var(--primary-10);border:1px solid var(--primary-20);padding:6px 16px;border-radius:9999px;font-size:14px;font-weight:700;color:var(--primary)}.gameover-score-section{text-align:center;margin-bottom:24px}.session-label{font-size:16px;font-weight:700;letter-spacing:6px;text-transform:uppercase;color:var(--white-40)}.final-score{font-size:64px;font-weight:900;line-height:1;margin-top:8px}.high-score-badge{font-size:20px;font-weight:900;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(45deg,var(--gold),var(--gold-light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:8px;animation:shimmer 2s ease-in-out infinite}@keyframes shimmer{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:20px}.stat-card{background:var(--primary-10);border:1px solid var(--primary-10);border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:4px}.stat-icon{font-size:24px;margin-bottom:4px}.stat-label{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--white-60);text-transform:uppercase}.stat-value{font-size:28px;font-weight:700}.unlock-card{width:100%;background:var(--white-10);border:1px solid var(--white-10);border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;margin-bottom:20px}.unlock-icon{width:52px;height:52px;border-radius:50%;background:var(--bg);border:1px solid var(--primary-dim);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.unlock-silhouette{font-size:20px;opacity:.3;font-weight:700}.unlock-info{flex:1}.unlock-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.unlock-name{font-size:13px;font-weight:700}.unlock-percent{font-size:12px;font-weight:700;color:var(--primary)}.unlock-bar{width:100%;height:10px;background:var(--white-10);border-radius:9999px;overflow:hidden}.unlock-fill{height:100%;background:var(--primary);border-radius:9999px;box-shadow:0 0 10px #13ecec99;transition:width .5s ease-out}.gameover-actions{width:100%;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.play-again-btn{width:100%;padding:18px;background:var(--primary);color:var(--bg);border:none;border-radius:9999px;font-family:var(--font);font-size:18px;font-weight:900;letter-spacing:2px;cursor:pointer;box-shadow:0 0 20px #13ecec66;transition:transform .1s}.play-again-btn:active{transform:scale(.95)}.share-btn{width:100%;padding:18px;background:transparent;color:var(--primary);border:1px solid var(--primary-dim);border-radius:9999px;font-family:var(--font);font-size:16px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:background .2s,transform .1s}.share-btn:hover{background:var(--primary-10)}.share-btn:active{transform:scale(.95)}.dizzy-boba-cup{width:100%;display:flex;justify-content:center;pointer-events:none;margin-top:auto}.cup-body{width:260px;height:200px;border:10px solid var(--white-10);border-top:none;border-radius:0 0 16px 16px;position:relative;overflow:hidden}.cup-liquid{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--primary-20),transparent)}.dizzy-boba{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:90px;height:90px;background:var(--primary-20);border-radius:50%;border:3px solid var(--primary-dim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.dizzy-eyes{display:flex;gap:20px;color:var(--primary);font-size:18px;font-weight:900}.dizzy-mouth{width:24px;height:6px;background:var(--primary-dim);border-radius:9999px}.dizzy-swirl{position:absolute;font-size:14px;animation:spin 2s linear infinite}.dizzy-swirl.s1{top:-8px;right:8px}.dizzy-swirl.s2{top:-8px;left:8px;animation-delay:-1s}@keyframes spin{to{transform:rotate(360deg)}}.stray-pearl{position:absolute;background:var(--primary-10);border-radius:50%;border:1px solid var(--primary-20)}.stray-pearl.p1{bottom:8px;left:16px;width:24px;height:24px}.stray-pearl.p2{bottom:12px;right:24px;width:18px;height:18px}.stray-pearl.p3{bottom:24px;left:40px;width:30px;height:30px}.skins-screen{width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:40px 24px;max-width:430px;margin:0 auto;overflow-y:auto}.skins-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.back-btn{background:none;border:none;color:var(--primary);font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer}.skins-title{font-size:18px;font-weight:700;letter-spacing:4px;color:var(--white)}.skins-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.skin-card{background:var(--white-10);border:1px solid var(--white-10);border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:transform .15s,border-color .2s;font-family:var(--font)}.skin-card:active{transform:scale(.95)}.skin-card.equipped{border-color:var(--primary);background:var(--primary-10)}.skin-card.locked{opacity:.5;cursor:default}.skin-preview{width:64px;height:64px;border-radius:50%;border:3px solid;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.skin-gloss{position:absolute;top:8px;left:12px;width:16px;height:8px;background:var(--white-20);border-radius:50%;transform:rotate(-30deg)}.skin-eyes{display:flex;gap:12px}.skin-eye{width:10px;height:10px;border:2.5px solid;border-radius:50%}.lock-icon{font-size:22px}.skin-name{font-size:12px;font-weight:700;color:var(--white)}.skin-req{font-size:10px;color:var(--white-40);text-align:center}.equipped-badge{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--primary);background:var(--primary-10);padding:3px 10px;border-radius:9999px;border:1px solid var(--primary-20)}.settings-screen{width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column;max-width:430px;margin:0 auto;overflow-y:auto}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:40px 24px 20px;flex-shrink:0}.settings-title{font-size:18px;font-weight:700;letter-spacing:4px;color:var(--white)}.settings-body{flex:1;padding:0 24px 40px;display:flex;flex-direction:column;gap:16px}.setting-row{display:flex;justify-content:space-between;align-items:center;background:var(--white-10);border:1px solid var(--white-10);border-radius:16px;padding:16px 20px}.setting-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--white)}.setting-icon{font-size:20px}.slider-group{display:flex;align-items:center;gap:10px}.volume-slider{-webkit-appearance:none;appearance:none;width:100px;height:6px;background:var(--white-20);border-radius:9999px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);border:2px solid var(--bg);box-shadow:0 0 8px #13ecec80;cursor:pointer}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);border:2px solid var(--bg);box-shadow:0 0 8px #13ecec80;cursor:pointer}.slider-value{font-size:12px;font-weight:700;color:var(--primary);min-width:38px;text-align:right}.toggle-btn{padding:8px 20px;border-radius:9999px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:2px;cursor:pointer;border:1px solid;transition:all .2s}.toggle-btn.on{background:var(--primary);color:var(--bg);border-color:var(--primary)}.toggle-btn.off{background:transparent;color:var(--white-40);border-color:var(--white-20)}.settings-divider{height:1px;background:var(--white-10);margin:8px 0}.settings-section-label{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--white-40);text-transform:uppercase}.settings-section-label.danger{color:#ff6b6b}.stats-list{display:flex;flex-direction:column;gap:2px;background:var(--white-10);border-radius:16px;overflow:hidden}.stats-row{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;font-size:13px;color:var(--white-60)}.stats-row:not(:last-child){border-bottom:1px solid var(--white-10)}.stats-val{font-weight:700;color:var(--white)}.reset-btn{width:100%;padding:14px;background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3);border-radius:12px;color:#ff6b6b;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}.reset-btn:hover{background:#ff6b6b33}.reset-confirm{background:#ff6b6b14;border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:16px}.reset-warning{font-size:13px;color:#ff6b6b;margin-bottom:12px;line-height:1.4}.reset-actions{display:flex;gap:10px}.reset-yes{flex:1;padding:10px;background:#ff6b6b;color:var(--bg);border:none;border-radius:9999px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer}.reset-no{flex:1;padding:10px;background:var(--white-10);color:var(--white);border:none;border-radius:9999px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer}.version-label{text-align:center;font-size:11px;color:var(--white-20);margin-top:auto;padding-top:24px}.onboarding-overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.onboarding-backdrop{position:absolute;inset:0;background:#102222eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.onboarding-card{position:relative;z-index:10;width:90%;max-width:360px;background:#13ecec0f;border:1px solid var(--primary-20);border-radius:24px;padding:36px 28px 28px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.onboarding-card.slide-in{animation:cardSlideIn .3s ease-out}.onboarding-card.slide-out{animation:cardSlideOut .25s ease-in forwards}@keyframes cardSlideIn{0%{opacity:0;transform:translate(30px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes cardSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-30px) scale(.95)}}.onboarding-dots{display:flex;gap:8px;margin-bottom:4px}.onboarding-dot{width:8px;height:8px;border-radius:50%;background:var(--white-20);transition:all .3s}.onboarding-dot.active{background:var(--primary);box-shadow:0 0 8px #13ecec99;transform:scale(1.25)}.onboarding-dot.done{background:var(--primary-dim)}.onboarding-icon{font-size:56px;line-height:1;animation:iconPop .4s ease-out}@keyframes iconPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.onboarding-title{font-size:22px;font-weight:900;letter-spacing:4px;color:var(--primary);text-shadow:0 0 12px rgba(19,236,236,.4)}.onboarding-desc{font-size:14px;line-height:1.6;color:var(--white-60);max-width:280px}.onboarding-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--white-40)}.hint-tag{font-size:9px;font-weight:900;letter-spacing:1px;color:var(--bg);background:var(--primary);padding:2px 8px;border-radius:4px}.onboarding-actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}.onboarding-next{width:100%;padding:14px;background:var(--primary);color:var(--bg);border:none;border-radius:9999px;font-family:var(--font);font-size:15px;font-weight:800;letter-spacing:2px;cursor:pointer;box-shadow:0 0 20px #13ecec66;transition:transform .1s}.onboarding-next:active{transform:scale(.95)}.onboarding-skip{background:none;border:none;color:var(--white-40);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;padding:4px 12px;transition:color .2s}.onboarding-skip:hover{color:var(--white-60)}.onboarding-tap-hint{position:relative;z-index:10;margin-top:24px;font-size:12px;color:var(--white-20);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.8}}