html{overflow-y:scroll}body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f7f7f7}:root{--grid-size: 7;--cell-size: 60px;--border-color: #555;--wall-color: #333;--path-color: #eee;--start-color: #4a90e2;--goal-color: #e24a4a;--trace-color: #f5a623}.puzzle-container{display:flex;flex-direction:column;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.message-area{margin:20px;padding:10px 20px;min-height:2em;font-size:1.1em;font-weight:700;background-color:#f0f0f0;border-radius:8px;text-align:center}.grid{display:grid;grid-template-columns:repeat(var(--grid-size),var(--cell-size));grid-template-rows:repeat(var(--grid-size),var(--cell-size));border:2px solid var(--border-color);background-color:#111;user-select:none;-webkit-user-select:none}.cell{width:var(--cell-size);height:var(--cell-size);box-sizing:border-box;border:1px solid var(--border-color);transition:background-color .1s ease;position:relative}.cell.wall{background-color:var(--wall-color)}.cell.path{background-color:var(--path-color)}.cell.start{background-color:var(--start-color)}.cell.goal{background-color:var(--goal-color)}.cell.traced{background-color:var(--trace-color)}.cell.traced:after{content:"";position:absolute;top:50%;left:50%;width:30%;height:30%;background-color:#ffffff80;border-radius:50%;transform:translate(-50%,-50%)}.reset-button{margin-top:20px;padding:10px 25px;font-size:1em;font-weight:700;color:#fff;background-color:#333;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s}.reset-button:hover{background-color:#555}.cell.pass-twice{background-color:#e0e0e0;position:relative}.cell.pass-twice:before{content:"";position:absolute;top:50%;left:50%;width:40%;height:40%;background-color:#9e9e9e;border-radius:50%;transform:translate(-50%,-50%);transition:transform .2s}.cell.pass-twice.first-pass{background-color:var(--trace-color);opacity:.7}.cell.pass-twice.traced:not(.first-pass){background-color:var(--trace-color);opacity:1}.cell.pass-twice.traced:not(.first-pass):before{transform:translate(-50%,-50%) scale(0)}.difficulty-selector{display:flex;gap:10px;margin-bottom:20px}.difficulty-button{padding:8px 16px;font-size:.9em;font-weight:700;color:#333;background-color:#f0f0f0;border:2px solid #ccc;border-radius:8px;cursor:pointer;transition:all .2s}.difficulty-button:hover{background-color:#e0e0e0;border-color:#999}.difficulty-button.active{color:#fff;background-color:#333;border-color:#333}