.sudoku-page{max-width:1080px;margin:0 auto}.sudoku-heading{margin-bottom:1.25rem}.sudoku-heading h1{font-weight:800}.sudoku-heading p:last-child{max-width:760px}.sudoku-layout{display:grid;grid-template-columns:minmax(280px,540px) minmax(260px,1fr);gap:clamp(1rem,4vw,3rem);align-items:start}.sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,540px);aspect-ratio:1;border:3px solid #172033;background:#172033;gap:1px}.sudoku-cell{min-width:0;width:100%;height:100%;border:0;border-radius:0;text-align:center;font:600 clamp(1rem,3.2vw,1.7rem)/1 system-ui;background:#fff;color:#315f9a;padding:0}.sudoku-cell:nth-child(9n+3),.sudoku-cell:nth-child(9n+6){border-right:3px solid #172033}.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:3px solid #172033}.sudoku-cell.given{font-weight:850;color:#111827;background:#f3f4f6}.sudoku-cell.solved{color:#145e75;background:#eefaff}.sudoku-cell.invalid{outline:3px solid #b42318;outline-offset:-3px;background:#fff1f0}.sudoku-cell:focus{position:relative;z-index:2;outline:4px solid #ffb000;outline-offset:-3px}.cell-key{display:flex;gap:.45rem;align-items:center;margin:.75rem 0;color:#4b5563;font-size:.9rem}.given-swatch,.solved-swatch{width:1rem;height:1rem;border:1px solid #687181}.given-swatch{background:#f3f4f6}.solved-swatch{background:#eefaff;margin-left:.6rem}.sudoku-controls{display:grid;gap:.6rem}.sudoku-controls label{font-weight:700}.sudoku-controls textarea{width:100%;font:500 .9rem/1.4 ui-monospace,monospace;border:1px solid #9ca3af;border-radius:.4rem;padding:.7rem;resize:vertical}.sudoku-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.sudoku-actions .btn{min-height:44px}.server-note{font-size:.85rem;color:#5f6773}.sudoku-status{margin-top:1.25rem;border-left:5px solid #64748b;background:#f8fafc;padding:.8rem 1rem}.sudoku-status h2{font-size:1.15rem;margin:0 0 .25rem}.sudoku-status p{margin:0}.sudoku-status.success{border-color:#287a45}.sudoku-status.warning{border-color:#a06400}.sudoku-status.error{border-color:#b42318}.search-summary{font-weight:650;margin-top:.4rem!important}.validation-issues{margin-top:.8rem}.metrics-panel,.steps-panel{margin-top:1.25rem;border:1px solid #d7dce2;border-radius:.5rem;padding:1rem}.metrics-panel h2{font-size:1.2rem}.metrics-panel>p{font-size:.85rem;color:#5f6773}.metrics-panel dl{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:.65rem;margin:0}.metrics-panel dl div{background:#f7f8fa;padding:.55rem}.metrics-panel dt{font-size:.78rem;color:#56606d}.metrics-panel dd{font-weight:750;margin:0}.steps-panel summary{cursor:pointer;font-weight:750}.steps-panel li{margin:.7rem 0}.steps-panel li span{display:block;color:#4b5563}.sudoku-form[aria-busy=true]{opacity:.72;pointer-events:none}@media(max-width:760px){.sudoku-layout{grid-template-columns:1fr}.metrics-panel dl{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.sudoku-page{margin-inline:-.35rem}.sudoku-grid{width:100%}.sudoku-actions{grid-template-columns:1fr}.sudoku-cell{font-size:1.15rem}.metrics-panel dl{grid-template-columns:1fr 1fr}.metrics-panel,.steps-panel{padding:.75rem}}

.sudoku-mode-tabs{display:flex;gap:.5rem;margin-bottom:1rem}.sudoku-cell-wrap{position:relative;min-width:0;min-height:0;background:#fff}.sudoku-cell-wrap:nth-child(9n+3),.sudoku-cell-wrap:nth-child(9n+6){border-right:3px solid #172033}.sudoku-cell-wrap:nth-child(n+19):nth-child(-n+27),.sudoku-cell-wrap:nth-child(n+46):nth-child(-n+54){border-bottom:3px solid #172033}.sudoku-cell-wrap>.sudoku-cell{position:absolute;inset:0}.sudoku-cell-wrap>.sudoku-cell:nth-child(n){border-right:0;border-bottom:0}.sudoku-cell.player-value{color:#215ea8}.sudoku-cell.play-conflict{outline:3px dashed #b42318;outline-offset:-3px;background:#fff1f0}.cell-notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font:600 clamp(.42rem,1.25vw,.68rem)/1 system-ui;color:#506070;pointer-events:none;z-index:1}.cell-notes span{display:grid;place-items:center}.sudoku-cell:focus{z-index:3}.play-controls{display:grid;gap:.6rem}.play-controls h2{font-size:1.3rem}.number-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.number-pad button{min-height:44px;border:1px solid #7b8794;border-radius:.35rem;background:#fff;font-weight:750}.history-actions,.play-actions{display:flex;flex-wrap:wrap;gap:.45rem}.play-controls .btn{min-height:44px}.play-message{border-left:4px solid #64748b;padding:.55rem .7rem;background:#f8fafc}.play-message.error{border-color:#b42318;font-weight:650}.play-message.success{border-color:#287a45;font-weight:650}@media(max-width:420px){.sudoku-mode-tabs .btn{flex:1}.number-pad{grid-template-columns:repeat(5,1fr)}}
.generator-controls{display:grid;gap:.7rem}.generator-controls .btn{min-height:44px}.generator-symmetry{padding-left:1.7rem}.generation-result{margin-top:1rem;padding:.7rem;background:#f1f7fb;border-left:4px solid #315f9a}.canonical-copy{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:.8rem}.canonical-copy label{grid-column:1/-1;font-weight:700}.canonical-copy input{min-width:0;font:500 .8rem ui-monospace,monospace;padding:.55rem}.canonical-copy .btn{min-height:44px}@media(max-width:420px){.sudoku-mode-tabs{flex-wrap:wrap}.sudoku-mode-tabs .btn{min-height:44px}.canonical-copy{grid-template-columns:1fr}.canonical-copy label{grid-column:auto}}
.sudoku-mode-tabs .btn{min-height:44px}.generator-controls select,.generator-controls .form-check{min-height:44px}.generator-controls select{padding-block:.55rem}.copy-status{grid-column:1/-1;min-height:1.25rem;font-size:.85rem;color:#315f9a}@media(prefers-reduced-motion:reduce){.sudoku-form[aria-busy=true]{transition:none}}
