.hit{--accent:#b08fe8}.hit-board{display:flex;align-items:center;justify-content:center;position:relative;padding:14px}.hit-grid{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:4px;width:min(62vh,100%,480px);aspect-ratio:1}.hit-cell{appearance:none;border:1px solid rgba(176,143,232,.3);border-radius:9px;cursor:pointer;background:rgba(20,26,40,.82);color:#dfe9ff;font:800 clamp(13px,3.2vmin,22px)/1 var(--font-mono);transition:background .15s,color .15s,border-color .15s;touch-action:manipulation;padding:0}.hit-cell:hover{border-color:var(--accent)}.hit-cell.dup{color:#ffce7a}.hit-cell.blk{background:#0a0e18;color:#dfe9ff38;border-color:#b08fe880}.hit-cell.ring{box-shadow:inset 0 0 0 2.5px #b08fe8a6}.hit-cell.bad{background:rgba(224,86,74,.3);border-color:#e0564a}.hit-over[hidden]{display:none}.hit-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(6,10,18,.82);backdrop-filter:blur(4px);border-radius:16px;z-index:5}.hit-over b{font-size:52px;line-height:1}.hit-over span{font:700 15px/1.5 var(--font-sans);color:#dfe9ff;text-align:center;max-width:80%}