.kropki-shell{display:grid;gap:1rem;justify-items:center;width:min(100%,54rem);margin:0 auto}.kropki-board{--kropki-size:5;display:grid;grid-template-columns:repeat(var(--kropki-size),1fr);width:min(92vw,42rem);border:2px solid var(--text-strong,#172033);border-radius:.7rem;background:var(--surface-elevated,#fff);overflow:visible;box-shadow:0 18px 45px rgba(15,23,42,.12)}.kropki-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:0;border-right:1px solid rgba(100,116,139,.38);border-bottom:1px solid rgba(100,116,139,.38);background:var(--surface-elevated,#fff);color:var(--text-strong,#172033);font:800 clamp(.95rem,4vw,1.65rem)/1 system-ui,sans-serif;cursor:pointer;transition:background-color .12s ease,box-shadow .12s ease}.kropki-cell:hover:not(.is-given){background:color-mix(in srgb,var(--surface-elevated,#fff) 88%,var(--game-accent,#f59e0b) 12%)}.kropki-cell.is-given{background:color-mix(in srgb,var(--surface-elevated,#fff) 92%,#94a3b8 8%);font-weight:950;cursor:default}.kropki-cell.is-selected{z-index:3;background:color-mix(in srgb,var(--surface-elevated,#fff) 72%,var(--game-accent,#f59e0b) 28%);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--game-accent,#f59e0b) 72%,transparent)}.kropki-cell.is-conflict{color:#b91c1c;background:#fee2e2}.kropki-cell:focus-visible{z-index:5;outline:3px solid color-mix(in srgb,var(--game-accent,#f59e0b) 65%,transparent);outline-offset:-3px}.kropki-dot{position:absolute;z-index:6;width:clamp(.45rem,1.5vw,.72rem);height:clamp(.45rem,1.5vw,.72rem);border-radius:999px;pointer-events:none}.kropki-dot--h{right:0;top:50%;transform:translate(50%,-50%)}.kropki-dot--v{left:50%;bottom:0;transform:translate(-50%,50%)}.kropki-dot--black{background:#111827;border:2px solid #111827}.kropki-dot--white{background:#fff;border:2px solid #111827}.kropki-keypad{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(2.65rem,3.4rem);gap:.45rem;max-width:100%;overflow-x:auto;padding:.2rem}.kropki-keypad button{display:grid;place-items:center;min-height:2.85rem;border:1px solid var(--border-subtle,#d7dbe4);border-radius:.65rem;background:var(--surface-elevated,#fff);color:var(--text-strong,#172033);font:800 1rem/1 system-ui,sans-serif;cursor:pointer}.kropki-keypad button:hover:not(:disabled){border-color:var(--game-accent,#f59e0b);background:color-mix(in srgb,var(--surface-elevated,#fff) 84%,var(--game-accent,#f59e0b) 16%)}.kropki-keypad button:disabled{opacity:.42;cursor:not-allowed}@media(max-width:620px){.kropki-shell{gap:.75rem}.kropki-board{width:min(94vw,38rem);border-radius:.5rem}.kropki-cell{font-size:clamp(.82rem,5.2vw,1.3rem)}.kropki-dot{width:.48rem;height:.48rem}.kropki-keypad{grid-auto-columns:2.8rem;gap:.3rem}.kropki-keypad button{min-height:2.65rem}}@media(prefers-reduced-motion:reduce){.kropki-cell{transition:none}}