.maze-board{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;width:min(100%,440px);aspect-ratio:1;margin:auto;border:1px solid #dee6f1;border-radius:12px;background:#edf2f9;padding:4px}
.maze-cell{position:relative;display:grid;place-items:center;border-radius:8px;min-width:0;min-height:0;background:#dce5f1}
.maze-cell.path{background:#fff;border:1px solid #d9e2ee}.maze-cell.start{background:#e3f5eb;border-color:#b9dac8}.maze-cell.goal{background:#eff2ff;border-color:#c4cdf4}
.maze-cell>span{font-size:10px;font-weight:950;color:#8090a4}.maze-cell.goal>span{color:#6581c0}.maze-cell.start>span{color:#6a9d80}
.maze-switch{display:grid;place-items:center;width:100%;height:100%;padding:0;min-width:0;border:1px solid #bbd0ec;border-radius:8px;color:#416fc6;background:#eaf2ff;font-size:clamp(19px,5.4vw,31px);font-weight:800;cursor:pointer}
.maze-switch:hover{background:#dce9ff;border-color:#83a8e8}.maze-switch:active{transform:scale(.95)}
.maze-runner{position:absolute;width:20px;height:20px;z-index:5;border-radius:50%;background:#eda04f;box-shadow:inset 0 -3px 0 #bd7b3370,0 2px 7px #80542948;pointer-events:none;transition:left .26s ease,top .26s ease}
.maze-runner:before{content:"";display:block;width:7px;height:7px;background:#fff8e8;border-radius:50%;margin:5px auto}
@media(max-width:420px){.maze-board{gap:3px;padding:3px}.maze-cell,.maze-switch{border-radius:5px}.maze-cell>span{font-size:8px}.maze-runner{width:16px;height:16px}.maze-runner:before{width:6px;height:6px;margin:4px auto}}