*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark}body,#app{min-height:100dvh}.cannon-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;background:radial-gradient(ellipse at 50% -20%,#1e1b4b,#0f0e17 55%);color:#fff;user-select:none;-webkit-user-select:none;overflow:hidden}.cannon-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative}.confetti-overlay{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:100}.confetti-particle{position:absolute;left:var(--ox);top:var(--oy);width:var(--size);height:var(--size);background-color:var(--color);animation:confetti-fly var(--duration) ease-out forwards;will-change:transform,opacity}.shape-circle{border-radius:50%}.shape-ribbon{width:calc(var(--size) * .35);height:calc(var(--size) * 1.6);border-radius:2px}@keyframes confetti-fly{0%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}65%{opacity:1}to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rotation)) scale(.3);opacity:0}}.cannon-btn{position:relative;background:#ffffff0d;border:none;cursor:pointer;padding:1.25rem;border-radius:1.5rem;transition:transform .15s ease,filter .15s ease,background .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline:none;animation:cannon-idle 3s ease-in-out infinite}@keyframes cannon-idle{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.025) rotate(.8deg)}}.cannon-btn:hover{animation:none;background:#ffffff1a;transform:scale(1.05);filter:drop-shadow(0 0 24px rgba(200,100,255,.45))}.cannon-btn:focus-visible{outline:3px solid #4D96FF;outline-offset:6px}.cannon-btn:active:not(.cannon-btn--firing){animation:none;transform:scale(.93) translateY(5px);filter:brightness(1.25)}.cannon-btn--firing{animation:cannon-recoil .45s ease-out forwards}@keyframes cannon-recoil{0%{transform:scale(.91) translate(-10px) translateY(6px);filter:brightness(1.4)}40%{transform:scale(.96) translate(-4px) translateY(2px);filter:brightness(1.15)}to{transform:scale(1) translate(0) translateY(0);filter:brightness(1)}}.cannon-btn--firing:after{content:"";position:absolute;top:52%;right:1.5rem;width:56px;height:56px;transform:translate(50%,-50%);background:radial-gradient(circle,#ffffff 0%,#FFD93D 35%,#FF9F1C 65%,transparent 100%);border-radius:50%;animation:muzzle-flash .25s ease-out forwards;pointer-events:none;z-index:1}@keyframes muzzle-flash{0%{opacity:1;transform:translate(50%,-50%) scale(.1)}35%{opacity:1;transform:translate(50%,-50%) scale(1.1)}to{opacity:0;transform:translate(50%,-50%) scale(2)}}.cannon-svg{width:clamp(200px,50vw,320px);height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}.barrel-tip{position:absolute;top:52%;right:1.5rem;width:2px;height:2px;pointer-events:none}.stats-bar{display:flex;width:min(380px,90vw);background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:1rem;overflow:hidden;flex-shrink:0;margin-bottom:1.25rem}.stat-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.7rem .5rem}.stat-item+.stat-item{border-left:1px solid rgba(255,255,255,.1)}.stat-value{font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.2rem}.stat-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5;font-weight:600}.streak-value{animation:streak-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes streak-pop{0%{transform:scale(1)}45%{transform:scale(1.4)}to{transform:scale(1)}}.streak-emoji{font-size:1rem;line-height:1}.streak-level-hot .stat-value{color:#ffd93d}.streak-level-on-fire .stat-value{color:#ff9f1c}.streak-level-blazing .stat-value{color:#ff6b6b}.streak-level-legendary .stat-value{color:#c77dff}@media(prefers-color-scheme:light){.cannon-page{background:radial-gradient(ellipse at 50% -20%,#ede9fe,#f5f3ff 55%);color:#1a1a3e}.cannon-btn{background:#0000000a}.cannon-btn:hover{background:#00000014;filter:drop-shadow(0 0 24px rgba(100,50,200,.3))}.stats-bar{background:#0000000a;border-color:#00000014}.stat-item+.stat-item{border-left-color:#00000014}}
