@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #06060c;--surface: #0e0e1a;--border: #1a1a2e;--text: #eeeef4;--text-dim: #55556a}body{font-family:Outfit,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;touch-action:none;position:relative}body:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 20% 50%,rgba(255,107,107,.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(116,192,252,.04) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(177,151,252,.03) 0%,transparent 50%);animation:ambientShift 20s ease-in-out infinite alternate;pointer-events:none;z-index:0}@keyframes ambientShift{0%{transform:translate(0) rotate(0)}to{transform:translate(-2%,1%) rotate(3deg)}}.game-container{width:100%;max-width:400px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:1}.header{width:100%;display:flex;justify-content:space-between;align-items:flex-start}.title{font-size:32px;font-weight:900;letter-spacing:-2px;padding-right:4px;background:linear-gradient(135deg,#ff5a80,#ff8c2e,#ffe234,#69db7c,#74c0fc,#b197fc);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleShimmer 4s ease infinite}@keyframes titleShimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.score-box{text-align:right}.score-label{font-size:10px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px}.score-value{font-size:28px;font-weight:900;letter-spacing:-1px;transition:transform .15s}.score-value.bump{animation:scoreBump .3s cubic-bezier(.34,1.56,.64,1)}@keyframes scoreBump{0%{transform:scale(1)}40%{transform:scale(1.2)}to{transform:scale(1)}}.evolution-bar{width:100%;display:flex;align-items:center;gap:4px;padding:8px 12px;background:var(--surface);border-radius:10px;border:1px solid var(--border)}.evo-dot{width:18px;height:18px;border-radius:5px;transition:all .4s ease;position:relative}.evo-dot.reached{transform:scale(1);opacity:1}.evo-dot.unreached{transform:scale(.85);opacity:.35}.evo-dot.current{transform:scale(1.3);opacity:1;box-shadow:0 0 12px currentColor}.evo-arrow{flex-shrink:0;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--text-dim);opacity:.3}.info-bar{width:100%;display:flex;justify-content:center;align-items:center;gap:20px}.next-preview{display:flex;align-items:center;gap:10px}.next-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;font-weight:500}.next-dot{width:36px;height:36px;border-radius:9px}.moves-count{font-size:11px;color:var(--text-dim);letter-spacing:1px}.combo-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:900;letter-spacing:2px;opacity:0;pointer-events:none;z-index:25;white-space:nowrap;padding:8px 20px;border-radius:12px;background:#06060cbf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.combo-indicator.visible{opacity:1}.combo-indicator.active{opacity:1;animation:comboSlam .5s ease-out}.combo-indicator.c2{color:#ffd43b;text-shadow:0 0 24px rgba(255,212,59,.6)}.combo-indicator.c3{color:#ffa94d;text-shadow:0 0 32px rgba(255,169,77,.7)}.combo-indicator.c4{color:#ff6b6b;text-shadow:0 0 40px rgba(255,107,107,.8)}@keyframes comboSlam{0%{transform:translate(-50%,-50%) scale(1.6);opacity:0}50%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.board-wrapper{width:100%;position:relative}.board{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(7,1fr);gap:5px;width:100%;aspect-ratio:5/7;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:10px;position:relative;overflow:hidden;transition:transform .1s}.board.shake{animation:boardShake .35s ease}@keyframes boardShake{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-3px,1px) rotate(-.5deg)}30%{transform:translate(3px,-1px) rotate(.5deg)}45%{transform:translate(-2px) rotate(-.3deg)}60%{transform:translate(2px,1px) rotate(.3deg)}75%{transform:translate(-1px) rotate(0)}}.board:before{content:"";position:absolute;inset:10px;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:20% calc(100% / 7);pointer-events:none;border-radius:8px}.cell{border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .1s}.cell.empty{background:#ffffff04;border:1px solid rgba(255,255,255,.02)}.cell.filled{border:1px solid rgba(255,255,255,.1)}.cell.just-placed{animation:dropIn .25s ease-out}.cell.filled:after{content:"";position:absolute;top:2px;left:15%;width:70%;height:35%;background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 100%);border-radius:6px 6px 50% 50%;pointer-events:none}.cell.ghost{opacity:.35;animation:ghostPulse 1.2s ease-in-out infinite}.cell.ghost:after{display:none}@keyframes ghostPulse{0%,to{opacity:.28}50%{opacity:.45}}.cell.merging{animation:mergeBlast .45s cubic-bezier(.34,1.56,.64,1);z-index:5}@keyframes dropIn{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes mergeBlast{0%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.15);filter:brightness(1.4)}to{transform:scale(1);filter:brightness(1)}}.color-0{background:linear-gradient(145deg,#ff5a80,#e03860);box-shadow:0 3px 15px #ff5a8059,inset 0 1px #ffffff26}.color-1{background:linear-gradient(145deg,#ff8c2e,#e06a10);box-shadow:0 3px 15px #ff8c2e59,inset 0 1px #ffffff26}.color-2{background:linear-gradient(145deg,#ffe234,#d6c400);box-shadow:0 3px 15px #ffe23459,inset 0 1px #ffffff26}.color-3{background:linear-gradient(145deg,#7be88f,#4fc466);box-shadow:0 3px 15px #69db7c59,inset 0 1px #ffffff26}.color-4{background:linear-gradient(145deg,#8ccfff,#5aadeb);box-shadow:0 3px 15px #74c0fc59,inset 0 1px #ffffff26}.color-5{background:linear-gradient(145deg,#c4aaff,#9578e0);box-shadow:0 3px 15px #b197fc59,inset 0 1px #ffffff26}.color-6{background:linear-gradient(145deg,#ff95be,#e06090);box-shadow:0 3px 15px #f783ac66,inset 0 1px #ffffff26}.color-7{background:linear-gradient(135deg,#ff5a80,#ff8c2e,#ffe234,#69db7c,#74c0fc,#b197fc,#ff5a80);background-size:300% 300%;animation:rainbowFlow 3s ease infinite;box-shadow:0 4px 25px #b197fc66,0 0 40px #ff6b6b33,inset 0 1px #fff3}@keyframes rainbowFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.particle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;border-radius:18px}.score-popup{position:absolute;font-size:14px;font-weight:900;font-family:Outfit,sans-serif;pointer-events:none;z-index:20;animation:scoreFloat .8s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.5)}@keyframes scoreFloat{0%{transform:translateY(0) scale(1.2);opacity:1}to{transform:translateY(-40px) scale(.8);opacity:0}}.controls{width:100%;display:flex;gap:8px}.btn{flex:1;padding:16px;border:none;border-radius:14px;font-family:Outfit,sans-serif;font-size:20px;font-weight:700;cursor:pointer;transition:all .1s;-webkit-tap-highlight-color:transparent;background:var(--surface);border:1px solid var(--border);color:var(--text);position:relative;overflow:hidden}.btn:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.06) 0%,transparent 70%);opacity:0;transition:opacity .2s}.btn:active{transform:scale(.93);border-color:#ffffff1a}.btn:active:after{opacity:1}.btn svg{display:block;margin:0 auto}.inline-dot{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;margin:0 2px}.btn-drop{flex:.8;background:linear-gradient(145deg,#ffffff0f,#ffffff05);border-color:#ffffff14}.swipe-hint{font-size:11px;color:var(--text-dim);text-align:center;opacity:.4;letter-spacing:.5px}.game-over-overlay{position:absolute;inset:0;background:#06060cf0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:17px;gap:14px;z-index:30;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-text{font-size:36px;font-weight:900;letter-spacing:-2px;background:linear-gradient(135deg,#ff5a80,#b197fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.game-over-score{font-size:16px;color:var(--text-dim);text-align:center;line-height:1.6}.btn-restart{padding:14px 40px;background:linear-gradient(135deg,#ff5a80,#b197fc);border:none;border-radius:12px;color:#fff;font-family:Outfit,sans-serif;font-size:17px;font-weight:700;cursor:pointer;transition:transform .1s;box-shadow:0 4px 20px #b197fc4d}.btn-restart:active{transform:scale(.95)}.btn-share{padding:11px 28px;background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text-dim);font-family:Outfit,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.btn-share:active{border-color:var(--text);color:var(--text)}.game-container{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}@media(max-height:700px){.game-container{gap:8px}.title{font-size:26px}.score-value{font-size:22px}.evo-dot{width:14px;height:14px}.evolution-bar{padding:6px 8px;gap:3px}.next-dot{width:28px;height:28px}.btn{padding:12px}.board{padding:6px;gap:4px;border-radius:14px}.cell{border-radius:7px}.game-over-text{font-size:28px}.btn-restart{padding:12px 32px;font-size:15px}}@media(min-width:768px){.game-container{max-width:480px;gap:16px}.title{font-size:40px}.score-value{font-size:34px}.score-label{font-size:12px}.evo-dot{width:22px;height:22px;border-radius:6px}.next-dot{width:44px;height:44px;border-radius:11px}.next-label,.moves-count{font-size:13px}.board{padding:12px;gap:6px;border-radius:22px}.cell{border-radius:12px}.btn{padding:20px;border-radius:16px}.btn svg{width:28px;height:28px}.combo-indicator{font-size:28px}.game-over-text{font-size:44px}.game-over-score{font-size:18px}.btn-restart{padding:16px 48px;font-size:19px}.btn-share{padding:13px 32px;font-size:15px}.swipe-hint{font-size:13px}}