@import"https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--pink: #ff6b9d;--orange: #ff8a5c;--yellow: #ffd93d;--white: #ffffff;--shadow: rgba(0, 0, 0, .15)}html,body{margin:0;padding:0;height:100%;background:linear-gradient(135deg,#ffb6c1,#ffa07a,gold)}body{font-family:Nunito,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:100%;min-height:100dvh}.container{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:20px;background:linear-gradient(135deg,#ffb6c1,#ffa07a,gold);position:relative;overflow:hidden}.top-actions{position:fixed;top:20px;right:20px;display:flex;gap:10px;z-index:100}.action-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--white);box-shadow:0 4px 15px var(--shadow);font-size:22px;cursor:pointer;transition:all .2s ease}.action-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px var(--shadow)}.action-btn:active{transform:scale(.95)}.action-btn.active{background:#ffd93d;box-shadow:0 4px 15px #ffd93d66}.modal-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:3000;animation:modal-in .3s ease}@keyframes modal-in{0%{opacity:0}to{opacity:1}}.modal-card{background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:40px 32px;text-align:center;box-shadow:0 20px 60px #0003;max-width:340px;width:90%;animation:modal-card-in .4s ease}@keyframes modal-card-in{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-emoji{font-size:56px;margin-bottom:12px}.modal-title{font-size:24px;font-weight:900;color:#333;margin-bottom:8px}.modal-desc{font-size:14px;color:#888;margin-bottom:24px}.modal-input{width:100%;padding:14px 18px;border:2px solid #eee;border-radius:16px;font-size:18px;font-family:inherit;font-weight:700;text-align:center;outline:none;transition:border-color .2s;box-sizing:border-box}.modal-input:focus{border-color:var(--pink)}.modal-btn{width:100%;margin-top:16px;padding:14px;border:none;border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--orange));color:#fff;font-size:18px;font-weight:900;font-family:inherit;cursor:pointer;transition:all .2s}.modal-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 6px 20px #ff6b9d66}.modal-btn:disabled{opacity:.5;cursor:not-allowed}.lb-backdrop{position:fixed;inset:0;background:#0006;z-index:2000;animation:modal-in .2s ease}.lb-panel{position:fixed;top:0;right:0;width:340px;max-width:85%;height:100%;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:-10px 0 40px #00000026;z-index:2001;display:flex;flex-direction:column;animation:lb-slide .3s ease}@keyframes lb-slide{0%{transform:translate(100%)}to{transform:translate(0)}}.lb-header{display:flex;align-items:center;justify-content:space-between;padding:24px 20px 16px;border-bottom:1px solid #eee}.lb-title{font-size:22px;font-weight:900;color:#333}.lb-close{width:36px;height:36px;border-radius:50%;border:none;background:#f0f0f0;font-size:18px;cursor:pointer;transition:background .2s}.lb-close:hover{background:#ddd}.lb-tabs{display:flex;padding:12px 16px 0;gap:8px}.lb-tab{flex:1;padding:10px;border:none;border-radius:12px;background:#f0f0f0;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;color:#888}.lb-tab.active{background:linear-gradient(135deg,var(--pink),var(--orange));color:#fff;box-shadow:0 4px 12px #ff6b9d4d}.lb-tab:hover:not(.active){background:#e5e5e5}.lb-list{flex:1;overflow-y:auto;padding:12px 0}.lb-row{display:flex;align-items:center;padding:14px 20px;transition:background .2s}.lb-row:hover{background:#00000008}.lb-me{background:#ffd70026!important;border-left:3px solid #ffd700}.lb-rank{width:36px;font-size:20px;font-weight:900;color:#999;text-align:center;flex-shrink:0}.lb-name{flex:1;font-size:16px;font-weight:700;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 12px}.lb-score{font-size:18px;font-weight:900;color:var(--pink);flex-shrink:0}.lb-loading,.lb-empty{padding:40px 20px;text-align:center;color:#999;font-size:15px}.lb-refresh{margin:16px 20px;padding:12px;border:none;border-radius:14px;background:#f5f5f5;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s}.lb-refresh:hover{background:#eee}.toast{position:fixed;top:80px;right:20px;background:#333;color:#fff;padding:12px 24px;border-radius:30px;font-size:16px;font-weight:700;opacity:0;transform:translateY(-10px);transition:all .3s ease;z-index:100;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.button-container{position:relative;display:flex;align-items:center;justify-content:center;width:380px;height:380px;overflow:visible}.particles{position:absolute;width:0;height:0;pointer-events:none}.particle{position:absolute;font-size:28px;animation:particle-fly 1.5s ease-out forwards;animation-delay:var(--delay);will-change:transform,opacity}@keyframes particle-fly{0%{opacity:1;transform:translate(0) scale(0)}20%{opacity:1;transform:translate(0) scale(1.2)}to{opacity:0;transform:translate(calc(cos(var(--angle)) * var(--distance)),calc(sin(var(--angle)) * var(--distance))) scale(.5)}}.main-btn{width:280px;height:280px;border-radius:50%;border:8px solid white;background:transparent;box-shadow:0 10px 40px #ff6b3566,0 0 #ff9a5680;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);animation:glow 2s ease-in-out infinite;position:relative;overflow:hidden;padding:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}.btn-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none;transition:transform .1s ease;-webkit-touch-callout:none}@keyframes glow{0%,to{box-shadow:0 10px 40px #ff6b3566,0 0 #ff9a5680}50%{box-shadow:0 10px 40px #ff6b3566,0 0 30px 15px #ff9a564d}}.floating-text{position:absolute;font-size:28px;font-weight:900;pointer-events:none;z-index:50;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:float-up 1.5s ease-out forwards;transform:rotate(var(--rotation));will-change:transform,opacity}@keyframes float-up{0%{opacity:1;transform:translateY(0) scale(.5) rotate(var(--rotation))}20%{opacity:1;transform:translateY(-20px) scale(1.2) rotate(var(--rotation))}to{opacity:0;transform:translateY(-150px) scale(.8) rotate(var(--rotation))}}.main-btn:hover{transform:scale(1.08)}.main-btn.pressed{animation:bounce-spin .4s ease-out}@keyframes bounce-spin{0%{transform:scale(1) rotate(0)}15%{transform:scale(.85) rotate(-8deg)}35%{transform:scale(1.2) rotate(8deg)}55%{transform:scale(.95) rotate(-4deg)}75%{transform:scale(1.1) rotate(3deg)}90%{transform:scale(.98) rotate(-1deg)}to{transform:scale(1) rotate(0)}}.counter{font-size:24px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.2);background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:16px 32px;border-radius:50px;box-shadow:0 4px 20px var(--shadow)}.count-number{display:inline-block;font-size:36px;font-weight:900;color:#ff6b35;text-shadow:none;-webkit-text-stroke:1px white;transition:transform .1s ease}.count-number.bounce{animation:count-bounce .3s ease}@keyframes count-bounce{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}@media(max-width:480px){.container{gap:20px}.photo-wrapper{width:100px;height:100px}.main-btn{width:220px;height:220px;border-width:6px}.counter{font-size:20px;padding:12px 24px}.count-number{font-size:28px}.share-btn{width:44px;height:44px;font-size:20px}}@media(min-width:768px){.main-btn{width:320px;height:320px}}.combo-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;animation:combo-fade 3s ease-out forwards}@keyframes combo-fade{0%{opacity:0}10%{opacity:1}70%{opacity:1}to{opacity:0}}.combo-text{font-size:52px;font-weight:900;color:#fff;text-shadow:0 0 20px #ff6b9d,0 0 40px #ff6b9d,0 0 60px #ffd93d,3px 3px 0 #ff8a5c,-2px -2px 0 #b784ff;animation:combo-bounce .4s ease-in-out infinite,combo-glow 1s ease-in-out infinite;white-space:nowrap}@keyframes combo-bounce{0%,to{transform:scale(1) rotate(-3deg) translateY(0)}25%{transform:scale(1.08) rotate(2deg) translateY(-8px)}50%{transform:scale(.95) rotate(-2deg) translateY(0)}75%{transform:scale(1.05) rotate(1deg) translateY(-4px)}}@keyframes combo-glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}.firework{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:999;animation:firework-explode 1.5s ease-out forwards;will-change:transform,opacity}@keyframes firework-explode{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}@media(max-width:480px){.combo-text{font-size:32px}}.container.super-mode{animation:super-bg .5s ease infinite alternate}@keyframes super-bg{0%{background:linear-gradient(135deg,#ff6b9d,#ff8a5c,gold)}to{background:linear-gradient(135deg,#b784ff,#ff6b9d,#ffd93d)}}.charge-ring{position:absolute;width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none;z-index:10;opacity:0;transition:opacity .15s ease}.charge-ring.charging{opacity:1}.charge-ring-bg{fill:none;stroke:#ffffff4d;stroke-width:3}.charge-ring-progress{fill:none;stroke:gold;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,215,0,.8))}.charging .charge-ring-progress{transition:stroke-dashoffset 2.5s linear}.super-halo{position:absolute;width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,215,0,.4) 0%,rgba(255,107,157,.2) 50%,transparent 70%);animation:halo-pulse .6s ease-in-out infinite alternate,halo-spin 3s linear infinite}@keyframes halo-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}to{transform:translate(-50%,-50%) scale(1.3);opacity:1}}@keyframes halo-spin{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.main-btn.super-btn{border-color:gold;animation:super-glow .3s ease-in-out infinite alternate;box-shadow:0 0 30px #ffd70099,0 0 60px #ff6b9d66,0 0 90px #b784ff4d}@keyframes super-glow{0%{transform:scale(1);box-shadow:0 0 30px #ffd70099,0 0 60px #ff6b9d66}to{transform:scale(1.05);box-shadow:0 0 50px #ffd700cc,0 0 80px #ff6b9d99,0 0 120px #b784ff66}}.btn-photo.super-photo{animation:super-photo-pulse .2s ease infinite alternate;filter:brightness(1.2) saturate(1.3)}@keyframes super-photo-pulse{0%{transform:scale(1)}to{transform:scale(1.03)}}.super-text{position:absolute;bottom:20px;left:50%;transform:translate(-50%);color:#fff;font-size:18px;font-weight:900;text-shadow:0 0 10px rgba(255,215,0,.8),0 0 20px rgba(255,107,53,.6);white-space:nowrap;animation:super-text-blink .5s ease infinite alternate;z-index:10}@keyframes super-text-blink{0%{opacity:.7}to{opacity:1}}.button-container.super-active{animation:super-shake .15s ease infinite}@keyframes super-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}}.counter.super-counter{background:#ffd7004d;border:2px solid rgba(255,215,0,.5);animation:counter-glow .5s ease infinite alternate}@keyframes counter-glow{0%{box-shadow:0 4px 20px #ffd7004d}to{box-shadow:0 4px 30px #ffd70099}}.count-number.super-count{color:gold;animation:count-flash .2s ease infinite alternate}@keyframes count-flash{0%{transform:scale(1)}to{transform:scale(1.15)}}.super-mode-end{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:none;animation:end-fade 2s ease-out forwards}.super-mode-end-text{font-size:48px;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(255,215,0,.8),0 0 40px rgba(183,132,255,.6);animation:end-bounce .5s ease-out}@keyframes end-fade{0%{opacity:1}60%{opacity:1}to{opacity:0}}@keyframes end-bounce{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@media(max-width:480px){.charge-ring,.super-halo{width:264px!important;height:264px!important}.super-text{font-size:14px;bottom:15px}.super-mode-end-text{font-size:32px}}@media(min-width:768px){.charge-ring,.super-halo{width:380px;height:380px}}
