.db-board{--db-u:calc(100cqw / (var(--db-n) + 1));--db-ink-w:max(4px, calc(var(--db-u) * .1));--db-dot:max(9px, calc(var(--db-u) * .17));border-radius:var(--r-xl);background:var(--g-paper);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--g-edge), var(--shadow-1);touch-action:manipulation;-webkit-user-select:none;user-select:none;position:relative;container-type:size}.db-boxes{pointer-events:none;margin:0;padding:0;list-style:none;position:absolute;inset:0}.db-box{border-radius:calc(var(--db-u) * .05);background:color-mix(in srgb, var(--db-owner) 22%, var(--g-paper));color:var(--g-mark);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:calc(var(--db-u) * .42);place-items:center;line-height:1;display:grid;position:absolute}.db-box[data-fresh] .db-box__mark{animation:db-pop var(--dur-3) var(--ease-out)}.db-box[data-fresh]{animation:db-fill var(--dur-3) var(--ease-out)}.db-grid,.db-row{pointer-events:none;position:absolute;inset:0}.db-slot{pointer-events:none;position:absolute}.db-slot .db-hit{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:3px;width:70.71%;height:70.71%;margin:0;padding:0;position:absolute;top:14.645%;left:14.645%;transform:rotate(45deg)}.db-slot .db-hit[aria-disabled=true]{cursor:default}.db-slot .db-hit:focus,.db-slot .db-hit:focus-visible{outline:none}.db-slot .db-hit[data-kit-last]:before{display:none}.db-line{height:calc(var(--db-ink-w) * .5);border-radius:var(--r-pill);background:var(--g-slot);pointer-events:none;transition:background-color var(--dur-1) var(--ease);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.db-slot[data-dir=v] .db-line{width:calc(var(--db-ink-w) * .5);height:auto;inset:0 auto 0 50%;transform:translate(-50%)}.db-line[data-drawn]{height:var(--db-ink-w);background:var(--db-ink)}.db-slot[data-dir=v] .db-line[data-drawn]{width:var(--db-ink-w)}.db-line[data-fresh]{animation:db-draw-h var(--dur-2) var(--ease-out)}.db-slot[data-dir=v] .db-line[data-fresh]{animation-name:db-draw-v}.db-line[data-last]:after{content:"";width:calc(var(--db-dot) * .8);aspect-ratio:1;background:var(--accent-strong);box-shadow:0 0 0 2px var(--g-paper);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.db-board[data-interactive] .db-hit:not([aria-disabled=true]):focus-visible+.db-line,.db-line[data-pending]{height:var(--db-ink-w);background:color-mix(in srgb, var(--db-mover) 55%, var(--g-paper))}.db-board[data-interactive] .db-slot[data-dir=v] .db-hit:not([aria-disabled=true]):focus-visible+.db-line,.db-slot[data-dir=v] .db-line[data-pending]{width:var(--db-ink-w)}@media (hover:hover){.db-board[data-interactive] .db-hit:not([aria-disabled=true]):hover+.db-line{height:var(--db-ink-w);background:color-mix(in srgb, var(--db-mover) 45%, var(--g-paper))}.db-board[data-interactive] .db-slot[data-dir=v] .db-hit:not([aria-disabled=true]):hover+.db-line{width:var(--db-ink-w)}}.db-line[data-pending]{background:color-mix(in srgb, var(--db-mover) 75%, var(--g-paper));outline:2px dashed var(--accent-ring);outline-offset:3px}.db-slot .db-hit:focus-visible+.db-line{outline:var(--focus-w) solid var(--accent-ring);outline-offset:max(3px, calc(var(--db-u) * .06))}.db-dots{pointer-events:none;position:absolute;inset:0}.db-dot{width:var(--db-dot);aspect-ratio:1;background:var(--g-dot);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.db-score{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;line-height:1}.db-result{text-align:center;color:var(--text-muted);margin:0}@keyframes db-draw-h{0%{transform:translateY(-50%)scaleX(0)}to{transform:translateY(-50%)scaleX(1)}}@keyframes db-draw-v{0%{transform:translate(-50%)scaleY(0)}to{transform:translate(-50%)scaleY(1)}}@keyframes db-fill{0%{background:var(--g-paper)}}@keyframes db-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}to{transform:scale(1)}}@media not all and (aspect-ratio>=5/4){.kit-stage:has(.db-board) .kit-strip:is([data-count="3"],[data-count="4"]){grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:visible}.kit-stage:has(.db-board) .kit-strip:is([data-count="3"],[data-count="4"])>li{min-width:0}.kit-stage:has(.db-board) .kit-strip[data-count="3"]>li:last-child{grid-column:1/-1}}@media (width>=600px) and ((aspect-ratio<5/4)){.kit-stage:has(.db-board) .kit-strip:is([data-count="3"],[data-count="4"]){grid-template-columns:none;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.kit-stage:has(.db-board) .kit-strip[data-count="3"]>li:last-child{grid-column:auto}}@media (aspect-ratio>=5/4) and (height<=520px){.kit-stage:has(.db-board) .kit-strip{gap:var(--sp-1);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.kit-stage:has(.db-board) .kit-strip>li{min-width:0}}
