:root{--bg: #1a0a14;--surface: #2a1220;--surface-light: #3d1a30;--text: #fff0f5;--text-dim: rgba(255, 240, 245, .5);--red: #dc2626;--amber: #f59e0b;--purple: #7c3aed;--green: #16a34a;--pink: #ec4899}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.game-wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}.menu-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1a0a14,#2d0f20,#1a0a14)}.menu-content{max-width:480px;width:100%;padding:1.5rem;text-align:center}.title-area{margin-bottom:2rem}.cherry-icon-big{font-size:4rem;display:block;margin-bottom:.5rem;filter:drop-shadow(0 0 20px rgba(220,38,38,.5));animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.menu-content h1{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#f87171,#fbbf24,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1rem;color:var(--text-dim);margin-top:.25rem}.level-select{margin-bottom:1.5rem}.level-select h2{font-size:1rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.level-btn{background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:.75rem .5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:all .15s ease;color:var(--text)}.level-btn:hover{background:var(--surface-light);border-color:#ffffff26;transform:translateY(-2px)}.level-btn:active{transform:translateY(0)}.level-num{font-size:1.25rem;font-weight:700}.level-name{font-size:.5rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.how-to-play{background:var(--surface);border-radius:.75rem;padding:1rem 1.25rem;text-align:left;border:1px solid rgba(255,255,255,.05)}.how-to-play h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.5rem}.how-to-play ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}.how-to-play li{font-size:.8rem;color:#fff0f5b3;padding-left:1.25rem;position:relative}.how-to-play li:before{content:"•";position:absolute;left:0;color:#f87171}.hud{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#0006;border-bottom:1px solid rgba(255,255,255,.06);z-index:10;min-height:52px}.hud-left,.hud-right{flex:1}.hud-right{text-align:right;display:flex;justify-content:flex-end;align-items:center}.hud-center{flex:0 0 auto}.hud-item{display:flex;flex-direction:column}.hud-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.hud-sublabel{font-size:.6rem;color:#ffffff4d}.score-display{flex-direction:row;align-items:baseline;gap:.25rem}.hud-value{font-size:1.25rem;font-weight:700}.timer{width:44px;height:44px;position:relative}.timer-ring{width:100%;height:100%}.timer-progress{transition:stroke-dasharray 1s linear}.timer-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}.timer-danger .timer-text{color:#ef4444;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.7}to{opacity:1}}.combo-display{background:linear-gradient(135deg,#f59e0b33,#ef444433);border:1px solid rgba(245,158,11,.3);border-radius:.5rem;padding:.25rem .6rem;display:flex;align-items:center;gap:.3rem;animation:combo-pop .2s ease-out}@keyframes combo-pop{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}.combo-fire{background:linear-gradient(135deg,#ef44444d,#f59e0b4d);border-color:#ef444480;box-shadow:0 0 12px #ef44444d}.combo-count{font-size:1.1rem;font-weight:800;color:#fbbf24}.combo-label{font-size:.5rem;font-weight:700;letter-spacing:.1em;color:#fbbf24b3}.score-bar-container{height:3px;background:#ffffff0f;position:relative;z-index:10}.score-bar-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#ef4444);transition:width .3s ease;box-shadow:0 0 8px #f59e0b66}.game-area{flex:1;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0%,rgba(124,58,237,.06) 0%,transparent 50%),radial-gradient(circle at 50% 100%,rgba(220,38,38,.06) 0%,transparent 50%)}.falling-cherry{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:5;transition:none}.cherry-emoji{display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));animation:wobble 2s ease-in-out infinite}@keyframes wobble{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.cherry-glow{position:absolute;width:20px;height:20px;border-radius:50%;bottom:-4px;left:50%;transform:translate(-50%);opacity:.3;filter:blur(8px)}.next-indicator{position:absolute;top:.5rem;left:50%;transform:translate(-50%);background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:2rem;padding:.25rem .75rem;display:flex;align-items:center;gap:.4rem;z-index:8}.next-label{font-size:.5rem;font-weight:700;letter-spacing:.1em;color:var(--text-dim)}.next-emoji{font-size:1.2rem}.next-name{font-size:.7rem;font-weight:600}.hit-effect{position:absolute;transform:translate(-50%,-50%);font-size:2rem;font-weight:800;z-index:20;pointer-events:none;animation:hit-pop .6s ease-out forwards}.hit-correct{color:#4ade80;text-shadow:0 0 12px rgba(74,222,128,.6)}.hit-wrong{color:#ef4444;text-shadow:0 0 12px rgba(239,68,68,.6)}@keyframes hit-pop{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}30%{transform:translate(-50%,-50%) scale(1.3)}to{opacity:0;transform:translate(-50%,-100%) scale(.8)}}.particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:15;transform:translate(-50%,-50%);animation:particle-burst .8s ease-out forwards}@keyframes particle-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--dx, 0px)),calc(-50% + var(--dy, 0px))) scale(0)}}.particle:nth-child(1){--dx: -30px;--dy: -40px;animation-delay:0s}.particle:nth-child(2){--dx: 35px;--dy: -30px;animation-delay:.05s}.particle:nth-child(3){--dx: -25px;--dy: 25px;animation-delay:.1s}.particle:nth-child(4){--dx: 40px;--dy: 20px;animation-delay:.05s}.particle:nth-child(5){--dx: -10px;--dy: -45px;animation-delay:.08s}.particle:nth-child(6){--dx: 15px;--dy: 35px;animation-delay:.03s}.jars-row{display:flex;justify-content:center;gap:.5rem;padding:.75rem .5rem 1.25rem;background:linear-gradient(180deg,#00000080,#000c);border-top:1px solid rgba(255,255,255,.06);z-index:10}.jar-btn{background:none;border:none;cursor:pointer;padding:0;transition:transform .1s ease;-webkit-tap-highlight-color:transparent}.jar-btn:active,.jar-selected{transform:scale(.92)}.jar-shake{animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.jar-body{display:flex;flex-direction:column;align-items:center;gap:0}.jar-label{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;padding:.15rem .5rem;border-radius:.25rem .25rem 0 0}.jar-glass{width:56px;height:64px;background:linear-gradient(180deg,#ffffff14,#ffffff08);border-left:2px solid rgba(255,255,255,.15);border-right:2px solid rgba(255,255,255,.15);border-bottom:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;position:relative}.jar-glass:before{content:"";position:absolute;top:0;left:6px;width:2px;height:60%;background:#ffffff1a;border-radius:1px}.jar-emoji{font-size:1.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.jar-base{width:62px;height:6px;border-radius:0 0 4px 4px;opacity:.7}.result-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1a0a14,#2d0f20,#1a0a14)}.result-content{max-width:360px;width:100%;padding:1.5rem;text-align:center}.result-icon{font-size:3.5rem;display:block;margin-bottom:.75rem}.result-content h1{font-size:1.8rem;font-weight:800;margin-bottom:.25rem}.result-content h2{font-size:1rem;font-weight:500;color:var(--text-dim);margin-bottom:1.5rem}.result-stats{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:1rem;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.6rem}.stat-row{display:flex;justify-content:space-between;align-items:center}.stat-label{font-size:.8rem;color:var(--text-dim)}.stat-value{font-size:1rem;font-weight:700}.stat-value.highlight{color:#fbbf24}.result-buttons{display:flex;flex-direction:column;gap:.5rem}.btn{width:100%;padding:.8rem;border-radius:.6rem;font-size:.95rem;font-weight:600;cursor:pointer;border:none;transition:all .15s ease}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:0 4px 16px #dc26264d}.btn-primary:hover{box-shadow:0 6px 24px #dc262666}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:var(--surface-light)}.btn-ghost{background:transparent;color:var(--text-dim)}.btn-ghost:hover{color:var(--text)}