#puzzle-app-spiral{display:flex;flex-direction:column;align-items:center;padding:20px;background:#f4f6f9;color:#333;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}
#puzzle-app-spiral h2{margin-bottom:15px;color:#2c3e50}
#puzzle-app-spiral .controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}
#puzzle-app-spiral input[type="number"]{width:130px;padding:10px;border:2px solid #3498db;border-radius:6px;outline:none;font-size:16px}
#puzzle-app-spiral input:focus{border-color:#2980b9;box-shadow:0 0 0 3px rgb(52 152 219 / 20%)}
#puzzle-app-spiral button{padding:10px 20px;border:0;border-radius:6px;background:#3498db;color:#fff;font-size:16px;cursor:pointer;transition:background .2s}
#puzzle-app-spiral button:hover{background:#2980b9}
#puzzle-app-spiral button:active{transform:scale(.98)}
#puzzle-app-spiral .grid-wrapper{max-width:90vw;max-height:70vh;overflow:auto;padding:10px;border-radius:8px;background:#fff;box-shadow:0 4px 12px rgb(0 0 0 / 10%)}
#puzzle-app-spiral .spiral-grid{display:grid;gap:2px}
#puzzle-app-spiral .cell{display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:600;transition:transform .1s}
#puzzle-app-spiral .cell.empty{visibility:hidden}
#puzzle-app-spiral .cell:hover{z-index:2;transform:scale(1.15);box-shadow:0 2px 6px rgb(0 0 0 / 20%)}
#puzzle-app-spiral .info{margin-top:12px;padding:10px 15px;border-radius:6px;background:#e8f4fd;color:#2c3e50;font-size:15px;font-weight:500}
#puzzle-app-spiral .legend{display:flex;gap:15px;margin-top:8px;color:#7f8c8d;font-size:13px}
#puzzle-app-spiral .legend span{display:flex;align-items:center;gap:5px}
#puzzle-app-spiral .dot{width:10px;height:10px;display:inline-block;border-radius:50%}
#puzzle-app-spiral .dot--start{background:#e74c3c}
#puzzle-app-spiral .dot--finish{background:#27ae60}
#puzzle-app-spiral .dot--turn{background:#f39c12}
@media(max-width:32rem){#puzzle-app-spiral{padding:12px}#puzzle-app-spiral .legend{flex-direction:column;gap:6px}}