*{margin:0;padding:0;box-sizing:border-box;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}:root{--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);--safe-area-inset-left: env(safe-area-inset-left, 0px);--safe-area-inset-right: env(safe-area-inset-right, 0px)}html,body{width:100%;height:100%;overflow:hidden;position:fixed}body{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;justify-content:center;align-items:center;padding:var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left)}#game{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;max-width:100vw;max-height:100vh}canvas{background:#111;border:3px solid #fff;box-shadow:0 0 20px #ffffff80,inset 0 0 20px #ffffff1a;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;display:block;max-width:100%;max-height:100%}#ui{position:absolute;top:calc(var(--safe-area-inset-top) + 8px);left:calc(var(--safe-area-inset-left) + 8px);right:calc(var(--safe-area-inset-right) + 8px);font-size:clamp(14px,4vw,20px);font-weight:700;display:flex;justify-content:space-between;gap:10px;z-index:10;pointer-events:none}.counter{opacity:.9;display:flex;align-items:center;gap:4px;background:#000000b3;padding:4px 8px;border-radius:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.counter:before{font-size:.75em;opacity:.7;text-transform:uppercase;letter-spacing:.5px}#level:before{content:"LVL"}#pieces:before{content:"PCS"}#moves:before{content:"MVS"}@media (max-width: 480px){#ui{font-size:14px}.counter{padding:2px 6px}.counter:before{display:none}}#win{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;font-size:clamp(48px,15vw,80px);background:#000000d9;opacity:0;pointer-events:none;transition:opacity .3s ease-out;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}#win.show{opacity:1}.message{animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}.game-hud{position:fixed;top:1rem;left:0;right:0;padding:.5rem;display:flex;justify-content:center;gap:1rem;z-index:15;pointer-events:none;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.hud-item{text-align:center;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8)}.hud-label{font-size:.8rem;opacity:.7;margin-bottom:.2rem;letter-spacing:.1em}.hud-value{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}.score-value{color:gold}.combo-value{color:#ff6b6b;transition:all .3s ease}.combo-active{transform:scale(1.1);color:#f44}.combo-hot{animation:pulse .5s infinite;color:red}.timer-value{color:#4ecdc4}.timer-warning{color:#ff6b6b;animation:blink 1s infinite}.level-value{color:#95e1d3}.floating-score{position:fixed;color:gold;font-size:1.5rem;font-weight:700;pointer-events:none;z-index:20;animation:floatUp 1.5s ease-out forwards;text-shadow:0 2px 4px rgba(0,0,0,.8)}@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-100px) scale(1.5);opacity:0}}@keyframes pulse{0%,to{transform:scale(1.1)}50%{transform:scale(1.3)}}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:.5}}.game-over-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-over-overlay.hidden{display:none}.game-over-content{text-align:center;color:#fff}.game-over-content h1{font-size:3rem;margin-bottom:1rem;color:#ff6b6b;text-shadow:0 4px 8px rgba(255,0,0,.5)}.final-score{font-size:1.5rem;margin-bottom:2rem;color:gold}.restart-button{padding:1rem 2rem;font-size:1.2rem;background:#4ecdc4;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .3s ease}.restart-button:hover{background:#45b7aa;transform:scale(1.05)}.mobile-controls{position:fixed;bottom:calc(var(--safe-area-inset-bottom) + 1rem);left:0;right:0;display:none;justify-content:space-between;align-items:center;padding:0 1rem;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease}.mobile-controls.visible{opacity:1;pointer-events:auto}.control-button{width:60px;height:60px;border-radius:50%;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);color:#fff;font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.control-button:active{transform:scale(.9);background:#fff3}.control-button:disabled{opacity:.3;cursor:not-allowed}.control-hint{color:#ffffffb3;font-size:.9rem;text-align:center;padding:0 1rem}@media (hover: none) and (pointer: coarse){.mobile-controls{display:flex}}@media (max-width: 480px){.game-hud{top:0;padding:.25rem;gap:.5rem}.hud-label{font-size:.6rem}.hud-value{font-size:1rem}.game-over-content h1{font-size:2rem}.final-score{font-size:1.2rem}.restart-button{padding:.75rem 1.5rem;font-size:1rem}.mobile-controls{bottom:calc(var(--safe-area-inset-bottom) + .5rem)}.control-button{width:50px;height:50px;font-size:1.2rem}.control-hint{font-size:.8rem}}