:root{
--cell-size: 64px;
--gap: 6px;
--bg1:#061021;--bg2:#07223a;--accent:#6ee7ff;--accent2:#8a6bff;--error:#ff3d5a;
}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:#e6f7ff;touch-action:none;}
.app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:28px}
.stage{display:flex;flex-direction:column;gap:18px;align-items:center}
.header{display:flex;gap:12px;align-items:center;text-align:center;flex-direction:column;}
.title{font-weight:700;font-size:20px}
.info{font-size:13px;opacity:.9;max-width:300px}
.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px 12px;border-radius:8px;cursor:pointer;color:inherit}
.btn:active{transform:translateY(1px)}
.hud{display:flex;gap:12px;align-items:center;font-size:13px;flex-wrap:wrap;justify-content:center}
.grid-wrap{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));padding:18px;border-radius:14px;box-shadow:0 6px 30px rgba(0,0,0,0.5);position:relative;touch-action:none;}
.grid{display:grid;grid-template-columns:repeat(5, var(--cell-size));grid-auto-rows:var(--cell-size);gap:var(--gap);width:calc(5*var(--cell-size) + 4*var(--gap));height:calc(5*var(--cell-size) + 4*var(--gap));position:relative}
.cell{position:relative;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .25s ease, transform .12s;}
.cell .inner{position:absolute;inset:0;border-radius:6px;pointer-events:none}
.wall-top{border-top:6px solid var(--accent);}
.wall-right{border-right:6px solid var(--accent);}
.wall-bottom{border-bottom:6px solid var(--accent);}
.wall-left{border-left:6px solid var(--accent);}
.show-walls .cell .inner{opacity:1;}
.cell .inner{opacity:0;border-radius:6px;transition:opacity .4s ease}
.player{width:44%;height:44%;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 18px rgba(138,107,255,0.2),0 0 18px rgba(110,231,255,0.08)}
.goal{width:70%;height:70%;border-radius:10px;background:linear-gradient(180deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -6px 10px rgba(0,0,0,0.15)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.msg{padding:18px 22px;background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(255,255,255,0.02));backdrop-filter:blur(6px);border-radius:10px;border:1px solid rgba(255,255,255,0.05)}
.small{font-size:12px;opacity:.9}
.footer{display:flex;gap:10px;align-items:center;color:rgba(230,247,255,.7);font-size:12px;flex-direction:column;text-align:center;}
.ripple{position:absolute;border-radius:50%;pointer-events:none;opacity:.9;transform:scale(0);}
@keyframes rippleAnim{to{transform:scale(6);opacity:0}}
.grid:not(.show-walls) .cell .inner{opacity:0}
.grid.show-walls .cell .inner{opacity:1}
.wave-bg{position:absolute;inset:-30%;background:radial-gradient(circle at 50% 20%, rgba(138,107,255,0.06), transparent 10%), repeating-linear-gradient(180deg, rgba(110,231,255,0.02) 0 2px, transparent 2px 24px);filter:blur(8px);transform:skewY(-6deg);pointer-events:none}
.legend{display:flex;gap:10px;align-items:center}
.legend .dot{width:14px;height:14px;border-radius:4px;background:linear-gradient(180deg,var(--accent2),var(--accent))}
.notes{max-width:360px;text-align:center;font-size:13px;opacity:.9}
@media (max-width:520px){:root{--cell-size:48px}}