:root{--bg:#1a1a2e;--panel:#16213ecc;--accent:#4ecca3;--pipe-off:#394867;--pipe-on:#4ecca3;--text:#eee;--shadow:0 8px 32px 0 #0000005e}body{color:var(--text);background:radial-gradient(circle,#16213e 0%,#0f3460 100%);justify-content:center;align-items:center;height:100vh;margin:0;padding:0;font-family:Inter,Nunito,sans-serif;display:flex;overflow:hidden}#app{box-sizing:border-box;flex-direction:column;gap:20px;width:100%;max-width:600px;padding:20px;display:flex}.header{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);border:1px solid #ffffff1a;border-radius:20px;justify-content:space-between;align-items:center;padding:15px 25px;display:flex}.btn-back{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:10px;padding:8px 15px;font-size:.9rem;font-weight:700;text-decoration:none;transition:background .3s}.btn-back:hover{background:#fff3}.game-info{text-align:right}.game-info h1{color:var(--accent);margin:0;font-size:1.2rem}.level-text{opacity:.8;font-size:.8rem}.grid-wrapper{justify-content:center;align-items:center;gap:15px;width:100%;display:flex}.indicator{color:var(--accent);text-shadow:0 0 10px #4ecca366;white-space:nowrap;font-family:Bungee,Nunito,sans-serif;font-size:1rem;font-weight:900}.grid-container{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);aspect-ratio:1;border:1px solid #ffffff1a;border-radius:25px;flex:1;gap:10px;padding:20px;display:grid}.tile{cursor:pointer;background:#0003;border-radius:12px;justify-content:center;align-items:center;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),background .3s;display:flex;position:relative;overflow:hidden}.tile:hover{background:#0000004d;transform:scale(1.05)}.tile:active{transform:scale(.95)}.pipe{background:var(--pipe-off);transition:background .5s ease-in-out,transform .3s cubic-bezier(.4,0,.2,1);position:absolute}.pipe.active{background:var(--pipe-on);box-shadow:0 0 15px var(--pipe-on)}.pipe-straight{width:20%;height:100%}.pipe-corner{border-bottom-right-radius:10px;border-bottom-left-radius:10px;width:20%;height:60%}.pipe-corner-horizontal{border-top-right-radius:10px;border-bottom-right-radius:10px;width:60%;height:20%}.pipe-svg{width:80%;height:80%;stroke:var(--pipe-off);stroke-width:12px;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,filter .4s}.tile.active .pipe-svg{stroke:var(--pipe-on);filter:drop-shadow(0 0 8px var(--pipe-on))}.overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:fixed;inset:0}.overlay.visible{opacity:1;pointer-events:auto}.modal{background:var(--panel);text-align:center;border:1px solid #fff3;border-radius:30px;padding:40px;transition:transform .5s cubic-bezier(.175,.885,.32,1.275);transform:translateY(20px)}.overlay.visible .modal{transform:translateY(0)}.modal h2{color:var(--accent);margin-bottom:10px;font-size:2.5rem}.btn-next{background:var(--accent);color:#1a1a2e;cursor:pointer;border:none;border-radius:15px;margin-top:20px;padding:15px 40px;font-size:1.2rem;font-weight:900;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 20px #4ecca34d}.btn-next:hover{transform:translateY(-3px);box-shadow:0 15px 25px #4ecca366}.btn-next:active{transform:translateY(0)}