.x-sudoku-root{width:100%;outline:none}.x-sudoku-shell{display:grid;gap:1rem;justify-items:center;width:min(100%,46rem);margin:0 auto}.x-sudoku-hud{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;width:100%}.x-sudoku-hud span{display:inline-flex;gap:.35rem;align-items:baseline;padding:.45rem .7rem;border:1px solid var(--border-subtle,#d7dbe4);border-radius:999px;background:var(--surface-elevated,#fff);font-size:.86rem}.x-sudoku-board{display:grid;width:min(92vw,38rem);aspect-ratio:1;border:2px solid var(--text-strong,#172033);border-radius:.85rem;overflow:hidden;background:var(--surface-elevated,#fff);box-shadow:0 18px 45px rgba(15,23,42,.12)}.x-sudoku-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-right:1px solid rgba(100,116,139,.26);border-bottom:1px solid rgba(100,116,139,.26);background:var(--surface-elevated,#fff);color:var(--text-strong,#172033);font:700 clamp(1rem,4vw,1.7rem)/1 system-ui,sans-serif;cursor:pointer;transition:background-color .12s ease,transform .12s ease,color .12s ease}.x-sudoku-cell::before,.x-sudoku-cell::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}.x-sudoku-cell.is-diag-main::before{opacity:1;background:linear-gradient(45deg,transparent 46%,rgba(99,102,241,.16) 46%,rgba(99,102,241,.16) 54%,transparent 54%)}.x-sudoku-cell.is-diag-anti::after{opacity:1;background:linear-gradient(-45deg,transparent 46%,rgba(99,102,241,.16) 46%,rgba(99,102,241,.16) 54%,transparent 54%)}.x-sudoku-cell.is-diag-main.is-diag-anti{background-color:color-mix(in srgb,var(--surface-elevated,#fff) 86%,#6366f1 14%)}.x-sudoku-cell.is-given{font-weight:850;background:color-mix(in srgb,var(--surface-muted,#f4f6fb) 82%,#6366f1 18%);cursor:default}.x-sudoku-cell.is-selected{z-index:2;background:color-mix(in srgb,var(--surface-elevated,#fff) 65%,#6366f1 35%);box-shadow:inset 0 0 0 3px rgba(79,70,229,.55)}.x-sudoku-cell.is-conflict{color:#b91c1c;background:rgba(254,226,226,.92)}.x-sudoku-cell.box-top{border-top:2px solid var(--text-strong,#172033)}.x-sudoku-cell.box-left{border-left:2px solid var(--text-strong,#172033)}.x-sudoku-cell.box-bottom{border-bottom:2px solid var(--text-strong,#172033)}.x-sudoku-cell.box-right{border-right:2px solid var(--text-strong,#172033)}.x-sudoku-cell:focus-visible{z-index:3;outline:3px solid rgba(99,102,241,.45);outline-offset:-3px}.x-sudoku-pad{display:grid;grid-template-columns:repeat(5,minmax(2.8rem,1fr));gap:.55rem;width:min(92vw,34rem)}.x-sudoku-pad button{min-height:2.9rem;border:1px solid var(--border-subtle,#d7dbe4);border-radius:.8rem;background:var(--surface-elevated,#fff);color:var(--text-strong,#172033);font:750 1rem/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(15,23,42,.06)}.x-sudoku-pad button:hover{transform:translateY(-1px);border-color:rgba(99,102,241,.55)}.x-sudoku-pad button:active{transform:translateY(0)}.x-sudoku-pad .x-sudoku-erase{background:var(--surface-muted,#f4f6fb)}@media(max-width:560px){.x-sudoku-shell{gap:.8rem}.x-sudoku-board{width:min(94vw,34rem);border-radius:.55rem}.x-sudoku-cell{font-size:clamp(.9rem,5vw,1.3rem)}.x-sudoku-pad{grid-template-columns:repeat(5,minmax(2.35rem,1fr));gap:.4rem;width:min(94vw,32rem)}.x-sudoku-pad button{min-height:2.65rem;border-radius:.65rem}.x-sudoku-hud{gap:.35rem}.x-sudoku-hud span{font-size:.78rem;padding:.38rem .58rem}}@media(prefers-reduced-motion:reduce){.x-sudoku-cell,.x-sudoku-pad button{transition:none}}