.str8ts-shell{display:grid;gap:1rem;justify-items:center;width:min(100%,50rem);margin:0 auto}.str8ts-hud{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%}.str8ts-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:.84rem}.str8ts-board{display:grid;width:min(92vw,39rem);aspect-ratio:1;border:2px solid var(--text-strong,#172033);border-radius:.8rem;overflow:hidden;background:var(--surface-elevated,#fff);box-shadow:0 18px 45px rgba(15,23,42,.12)}.str8ts-cell{display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-right:1px solid rgba(100,116,139,.3);border-bottom:1px solid rgba(100,116,139,.3);background:var(--surface-elevated,#fff);color:var(--text-strong,#172033);font:800 clamp(.95rem,3.8vw,1.65rem)/1 system-ui,sans-serif;cursor:pointer;transition:background-color .12s ease,color .12s ease,transform .12s ease}.str8ts-cell:hover:not(:disabled){background:color-mix(in srgb,var(--surface-elevated,#fff) 86%,#38bdf8 14%)}.str8ts-cell.is-black{background:#172033;color:#fff;cursor:default;text-shadow:0 1px 0 rgba(0,0,0,.35)}.str8ts-cell.is-given{background:color-mix(in srgb,var(--surface-muted,#f4f6fb) 84%,#38bdf8 16%);font-weight:900;cursor:default}.str8ts-cell.is-selected{z-index:2;background:color-mix(in srgb,var(--surface-elevated,#fff) 68%,#38bdf8 32%);box-shadow:inset 0 0 0 3px rgba(2,132,199,.52)}.str8ts-cell.is-conflict{color:#b91c1c;background:rgba(254,226,226,.92)}.str8ts-cell:focus-visible{z-index:3;outline:3px solid rgba(14,165,233,.5);outline-offset:-3px}.str8ts-pad{display:grid;grid-template-columns:repeat(5,minmax(2.7rem,1fr));gap:.5rem;width:min(92vw,34rem)}.str8ts-pad button{min-height:2.8rem;border:1px solid var(--border-subtle,#d7dbe4);border-radius:.75rem;background:var(--surface-elevated,#fff);color:var(--text-strong,#172033);font:800 1rem/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(15,23,42,.06)}.str8ts-pad button:hover{transform:translateY(-1px);border-color:rgba(14,165,233,.55)}.str8ts-pad .str8ts-erase{background:var(--surface-muted,#f4f6fb)}@media(max-width:560px){.str8ts-shell{gap:.8rem}.str8ts-board{width:min(95vw,35rem);border-radius:.55rem}.str8ts-cell{font-size:clamp(.85rem,5vw,1.25rem)}.str8ts-pad{grid-template-columns:repeat(5,minmax(2.25rem,1fr));gap:.38rem;width:min(95vw,32rem)}.str8ts-pad button{min-height:2.55rem;border-radius:.62rem}.str8ts-hud{gap:.35rem}.str8ts-hud span{font-size:.76rem;padding:.38rem .55rem}}@media(prefers-reduced-motion:reduce){.str8ts-cell,.str8ts-pad button{transition:none}}