*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden;background:#0f172a;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;width:100%;height:100%}#app{width:100vw;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}#game-container{position:relative;width:100%;height:100%;max-width:540px;max-height:960px;background:#1e293b;box-shadow:0 20px 60px #00000080;overflow:hidden;aspect-ratio:9 / 16}@media (min-aspect-ratio: 9/16){#game-container{height:100vh;height:100dvh;width:auto}}@media (max-aspect-ratio: 9/16){#game-container{width:100vw;height:auto}}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#animation-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20;display:block}#left-panel{position:absolute;bottom:20px;left:10px;display:flex;flex-direction:column;gap:12px}#left-panel-top{display:flex;justify-content:center}#left-panel-bottom{position:relative}#next-bubble-preview{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:12px;box-shadow:0 4px 12px #0003;border:2px solid rgba(255,255,255,.2)}.preview-label{font-size:12px;font-weight:600;text-align:center;margin-bottom:6px;color:#fffc;text-transform:uppercase;letter-spacing:1px}#next-bubble-canvas{display:block;border-radius:8px}#shot-progress{position:absolute;left:96px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column-reverse;gap:6px;align-items:center}.progress-circle{width:12px;height:12px;min-width:12px;min-height:12px;max-width:12px;max-height:12px;aspect-ratio:1 / 1;border-radius:50%;background:#ffffff26;border:2px solid rgba(255,255,255,.3);transition:all .3s ease;display:none;flex-shrink:0}.progress-circle.filled{background:linear-gradient(135deg,gold,#ff8c00,#ff4500);border-color:gold;box-shadow:0 0 8px #ffd70099}#right-panel{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:12px}#level-indicator{display:flex;flex-direction:row;align-items:center;gap:3px;background:#6366f133;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:6px;padding:4px 8px;box-shadow:0 4px 12px #0003;border:2px solid rgba(99,102,241,.4)}.level-label{font-size:8px;font-weight:600;color:#fff9;text-transform:uppercase;letter-spacing:.5px}.level-value{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}#score-display{display:flex;flex-direction:column;gap:12px}.score-item{background:linear-gradient(135deg,#6366f126,#8b5cf626);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:12px 18px;box-shadow:0 4px 16px #0000004d;border:2px solid rgba(139,92,246,.3);min-width:110px;position:relative;overflow:hidden;transition:all .3s ease}.score-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}.score-item:hover:before{left:100%}.score-label{font-size:11px;font-weight:700;color:#fffc;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;display:flex;align-items:center;gap:4px}.score-value{font-size:28px;font-weight:800;background:linear-gradient(135deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:right;text-shadow:0 2px 8px rgba(255,215,0,.3);filter:drop-shadow(0 2px 4px rgba(255,215,0,.4));animation:score-glow 2s ease-in-out infinite}@keyframes score-glow{0%,to{filter:drop-shadow(0 2px 4px rgba(255,215,0,.4))}50%{filter:drop-shadow(0 2px 8px rgba(255,215,0,.6))}}.score-item:first-child{border-color:#ff6b9d66;background:linear-gradient(135deg,#ff6b9d26,#ff8bab26)}.score-item:first-child .score-value{animation:score-pulse 1s ease-in-out infinite}@keyframes score-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.score-item:last-child .score-label:before{content:"🏆";font-size:14px}#game-over-screen,#start-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:100;transition:opacity .5s ease;opacity:1}#start-screen{cursor:pointer}#start-screen.fade-out{opacity:0}.hidden{display:none!important}.game-over-content,.start-content{text-align:center;padding:48px 40px;background:linear-gradient(135deg,#1e293bf2,#334155f2);border-radius:32px;border:3px solid rgba(139,92,246,.4);max-width:85%;box-shadow:0 20px 60px #00000080;position:relative;overflow:hidden}.game-over-content:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 70%);animation:rotate-gradient 10s linear infinite}@keyframes rotate-gradient{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.start-icon{width:120px;height:120px;margin:0 auto 24px;display:block;border-radius:20px;box-shadow:0 8px 24px #0000004d;position:relative;z-index:1}.game-over-content h1,.start-content h1{font-size:56px;font-weight:900;margin-bottom:24px;background:linear-gradient(135deg,#a78bfa,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(129,140,248,.5);filter:drop-shadow(0 4px 12px rgba(129,140,248,.6));position:relative;z-index:1}.final-score,.instructions{font-size:24px;margin-bottom:32px;color:#fffffff2;font-weight:600;position:relative;z-index:1}.final-score span{font-size:48px;font-weight:900;background:linear-gradient(135deg,gold,orange,#ff6b9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(255,215,0,.6));display:block;margin-top:12px;animation:score-shimmer 2s ease-in-out infinite}@keyframes score-shimmer{0%,to{filter:drop-shadow(0 2px 8px rgba(255,215,0,.6))}50%{filter:drop-shadow(0 4px 16px rgba(255,215,0,.9))}}.game-button{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border:none;padding:18px 56px;font-size:20px;font-weight:800;border-radius:16px;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #6366f180;pointer-events:all;position:relative;z-index:1;overflow:hidden}.game-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.game-button:hover:before{width:300px;height:300px}.game-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 32px #6366f1b3;background:linear-gradient(135deg,#a78bfa,#818cf8)}.game-button:active{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 16px #6366f180}#high-score-badge{font-size:24px;font-weight:800;color:gold;text-align:center;margin-bottom:20px;padding:12px 24px;background:linear-gradient(135deg,#ffd70033,#ffa50033);border:2px solid #FFD700;border-radius:12px;animation:pulse-badge 1.5s ease-in-out infinite;text-shadow:0 2px 8px rgba(255,215,0,.6)}@keyframes pulse-badge{0%,to{transform:scale(1);box-shadow:0 0 20px #ffd70066}50%{transform:scale(1.05);box-shadow:0 0 30px #ffd70099}}.high-score-celebration{background:linear-gradient(135deg,#1e293bf2,#6366f14d)!important;border:3px solid #FFD700!important;box-shadow:0 0 40px #ffd70080!important}.high-score-celebration h1{color:gold!important;text-shadow:0 0 20px rgba(255,215,0,.6)!important}#rotation-warning{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0f172a;z-index:9999;justify-content:center;align-items:center}.rotation-content{text-align:center;padding:40px;color:#fff}.rotation-icon{font-size:80px;margin-bottom:20px;animation:rotate-pulse 2s ease-in-out infinite}@keyframes rotate-pulse{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}.rotation-content h2{font-size:28px;font-weight:700;margin-bottom:12px;color:#818cf8}.rotation-content p{font-size:18px;color:#fffc}@media (max-width: 1024px) and (orientation: landscape){#rotation-warning{display:flex}#game-container{display:none}}@media (max-width: 600px){#left-panel{left:2vw;gap:3vw;bottom:calc(50px + env(safe-area-inset-bottom))}#next-bubble-preview{padding:1.5vw;border-radius:3vw}.preview-label{font-size:2.2vw;margin-bottom:1vw}#next-bubble-canvas{width:12vw;height:12vw}#shot-progress{left:17vw;gap:.8vw}.progress-circle{width:2vw;height:2vw;min-width:2vw;min-height:2vw;max-width:2vw;max-height:2vw;aspect-ratio:1 / 1}#right-panel{right:2vw;gap:2.5vw;bottom:calc(50px + env(safe-area-inset-bottom))}#level-indicator{padding:1vw 1.5vw;border-radius:1vw;gap:.5vw}.level-label{font-size:1.8vw}.level-value{font-size:2.8vw}.score-item{padding:2vw 2.5vw;min-width:18vw;border-radius:2vw}.score-label{font-size:2vw}.score-value{font-size:4.5vw}.game-over-content h1,.start-content h1{font-size:8vw}.final-score,.instructions{font-size:3.5vw}.game-button{padding:3vw 8vw;font-size:3.5vw}}