--bg:#0b1020; --panel:#121a33; --panel2:#0f1730; --text:#e9ecff; --muted:#9aa6d6; --accent:#7aa2ff; --good:#4ade80; --warn:#fbbf24; --bad:#fb7185; --stroke: rgba(255,255,255,.08); } *{ box-sizing:border-box; } html,body{ height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: radial-gradient(1200px 700px at 20% 0%, #18235a 0%, var(--bg) 55%); color:var(--text); } .wrap{ height:100%; display:grid; grid-template-columns: 320px 1fr; gap:14px; padding:14px; } .panel{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--stroke); border-radius:16px; padding:14px; box-shadow: 0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(10px); } h1{ font-size:18px; margin:0 0 8px 0; letter-spacing:.3px; display:flex; align-items:center; justify-content:space-between; } .badge{ font-size:12px; color:var(--muted); border:1px solid var(--stroke); padding:4px 8px; border-radius:999px; background: rgba(0,0,0,.18); } .rules{ color:var(--muted); font-size:13px; line-height:1.45; margin:10px 0 12px 0; padding:10px; border-radius:12px; background: rgba(0,0,0,.18); border:1px solid var(--stroke); } .kv{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin:10px 0 12px 0; } .card{ padding:10px; border-radius:12px; background: rgba(0,0,0,.18); border:1px solid var(--stroke); } .card .k{ font-size:12px; color:var(--muted); } .card .v{ font-size:18px; margin-top:4px; font-variant-numeric: tabular-nums; } .controls{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px; } button{ appearance:none; border:1px solid var(--stroke); background: rgba(0,0,0,.22); color:var(--text); padding:10px 10px; border-radius:12px; cursor:pointer; font-weight:600; letter-spacing:.2px; transition: transform .05s ease, background .15s ease, border-color .15s ease; user-select:none; } button:hover{ background: rgba(122,162,255,.12); border-color: rgba(122,162,255,.25); } button:active{ transform: translateY(1px); } .row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } .pill{ font-size:12px; color:var(--muted); padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background: rgba(0,0,0,.18); } .pill strong{ color:var(--text); font-weight:700; } .hint{ margin-top:10px; color:var(--muted); font-size:12px; } .game{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:16px; overflow:hidden; box-shadow: 0 10px 40px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:10px; min-height: 320px; } canvas{ width:100%; height:100%; max-height: calc(100vh - 28px); border-radius:12px; background: radial-gradient(800px 400px at 50% 10%, rgba(122,162,255,.10), rgba(0,0,0,.22)); outline:none; } .toast{ position:absolute; left:16px; right:16px; bottom:16px; padding:12px 14px; border-radius:14px; background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.10); color:var(--text); display:none; backdrop-filter: blur(8px); } .toast.show{ display:block; } .toast .big{ font-size:14px; font-weight:800; } .toast .small{ font-size:12px; color:var(--muted); margin-top:2px; } .statusline{ margin-top:10px; padding:10px; border-radius:12px; background: rgba(0,0,0,.18); border:1px solid var(--stroke); color:var(--muted); font-size:12px; line-height:1.35; } .statusline strong{ color:var(--text); } @media (max-width: 920px){ .wrap{ grid-template-columns: 1fr; } .game{ min-height: 55vh; } }

Maze Runner

TopAIGames

Maze Runner Medium

Goal: Reach the green exit square.

Move: Arrow keys / WASD
Shortcuts: N new maze, R restart, 1/2/3 difficulty, H hint, F fog

Time

00:00.0

Moves

Best (this tab)

—

Maze Size

—

Difficulty: 1 Easy 2 Medium 3 Hard

Click the maze once to focus, then use the keyboard. (Mouse not needed after that.)

Tip: Hard mode uses a bigger maze + fog. Use H sparingly for a hint path.

You win!

Press N for a new maze.