.kn{--kw:min(100cqw, calc((100cqh - 118px) * 1.58));justify-content:center;gap:16px}.kn-head{width:var(--kw);height:28px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;flex:none;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:500;display:flex}.kn-count b,.kn-drawn b{font-family:var(--display);letter-spacing:0;margin-right:2px;font-size:22px;font-weight:600}.kn-count b{color:var(--gold-3)}.kn-drawn b{color:var(--win);margin-left:4px}.kn-board{width:var(--kw);background:var(--bg);border-radius:var(--radius-sm);border:1px solid #ffc53d4d;flex:none;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,1.4cqw,12px);padding:clamp(10px,2cqw,20px);display:grid}.kn-tile{aspect-ratio:1;border:1px solid var(--line-2);background:var(--panel);width:100%;box-shadow:inset 0 0 0 3px var(--panel), inset 0 0 0 4px #ffc53d1f;font-family:var(--display);font-variant-numeric:tabular-nums lining-nums;color:var(--text);border-radius:50%;place-items:center;padding:0;font-size:clamp(14px,min(4.2cqw,6.6cqh),30px);font-weight:600;transition:background .2s,border-color .2s,color .2s,opacity .2s,transform .12s;display:grid;position:relative}.kn-tile:hover:not(:disabled){border-color:var(--gold-2)}.kn-tile:disabled{cursor:default}.kn-tile.picked{border-color:var(--gold);color:var(--gold-3);background:var(--gold-soft);box-shadow:inset 0 0 0 3px #182344,inset 0 0 0 4px #ffc53d80}.kn-tile:active:not(:disabled){transform:scale(.95)}.kn-tile:focus-visible{outline:1px solid var(--gold-3);outline-offset:2px}.kn-tile.drawn{color:var(--loss);background:#1d1415;border-color:#7a1f2be6;animation:.25s kn-in;box-shadow:inset 0 0 0 3px #1d1415,inset 0 0 0 4px #7a1f2b73}.kn-tile.hit{border-color:var(--gold-3);background:var(--gold);color:#18244b;box-shadow:inset 0 0 0 3px var(--gold), inset 0 0 0 4px #14100959;z-index:1;animation:.3s cubic-bezier(.2,.8,.3,1) kn-in}.kn-tile.miss{opacity:.5}@keyframes kn-in{0%{opacity:.3;transform:scale(.88)}}.kn-pay{width:var(--kw);border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--line);flex:none;gap:0;height:48px;display:flex;overflow-x:auto}.kn-pay-empty{text-align:center;color:var(--dim);letter-spacing:.16em;text-transform:uppercase;flex:1;align-self:center;font-size:10.5px;font-weight:500}.kn-pay-cell{border-left:1px solid var(--line);flex-direction:column;flex:1 0 44px;justify-content:center;align-items:center;gap:2px;padding:0 4px;transition:background .2s;display:flex}.kn-pay-cell:first-child{border-left:0}.kn-pay-cell b{white-space:nowrap;color:var(--dim);font-size:13px;font-weight:500}.kn-pay-cell.pays b{color:var(--gold-3)}.kn-pay-cell small{letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--dim);font-size:9px;font-weight:500}.kn-pay-cell.on{background:var(--gold-soft);box-shadow:inset 0 -2px 0 var(--gold)}.kn-pay-cell.on b{color:var(--gold-3)}.kn-pay-cell.on small{color:var(--text)}@container (width<=520px){.kn-pay:has(.kn-pay-cell:nth-child(7)){grid-template-columns:repeat(6,minmax(0,1fr));height:auto;display:grid}.kn-pay-cell{min-width:0;height:38px;padding:0 2px}.kn-pay-cell:nth-child(6n+1){border-left:0}.kn-pay-cell:nth-child(n+7){border-top:1px solid var(--line)}.kn-pay-cell b{font-size:12px}}@media (width<=900px){.kn{--o-mh:364px;gap:12px}}.kn-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.kn-actions .btn{min-width:0;padding:0 10px}.kn-drawn b{display:inline-block}.kn-board{transition:border-color .3s;position:relative}.kn-board.drawing{border-color:#ffc53d73}.kn-board.won{border-color:var(--gold)}.kn-board.won:after{content:"";pointer-events:none;background:linear-gradient(105deg,#0000 40%,#ffe08a24 50%,#0000 60%);width:250%;animation:1s ease-out both kn-sweep;position:absolute;top:0;bottom:0;left:0;transform:translate(-60%)}.kn-board.won.w2:after{background-image:linear-gradient(105deg,#0000 38%,#ffe08a33 50%,#0000 62%);animation-duration:1.3s}.kn-board.won.w3{box-shadow:inset 0 0 0 1px var(--gold-3)}.kn-board.won.w3:after{background-image:linear-gradient(105deg,#0000 36%,#ffe08a42 50%,#0000 64%);animation:1.4s ease-out 2 both kn-sweep}@keyframes kn-sweep{0%{transform:translate(-60%)}to{transform:translate(30%)}}.kn-pay-cell.won{background:var(--gold-soft);box-shadow:inset 0 -2px 0 var(--gold-3), inset 0 0 0 1px var(--gold)}.kn-pay-cell.won b{color:var(--gold-3);font-weight:600}.kn[data-tier] .result-banner.win{border-color:var(--gold-3)}.kn[data-tier=w3] .result-banner.win{box-shadow:0 20px 60px #0000008c, inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--gold-2)}@media (prefers-reduced-motion:reduce){.kn-tile.drawn,.kn-tile.hit,.kn-board.won:after{animation:none}.kn-tile:active:not(:disabled){transform:none}}.kn-actions~.o-payout span{white-space:nowrap;text-overflow:ellipsis;min-width:0;margin-right:8px;overflow:hidden}@media (width<=900px){.kn-head{font-size:12px}.kn-pay-cell small{letter-spacing:.04em;font-size:12px}}@media (width>=521px) and (width<=900px){.kn{--o-mh:440px}}@media (width<=520px){.kn{--o-mh:clamp(500px, calc(100svh - 212px), 548px);--kw:100%;gap:8px}.kn-board{flex:1 1 0;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px 8px;min-height:0;padding:10px}.kn-tile{aspect-ratio:auto;border-radius:999px;height:100%;font-size:17px}}.kn-board.won{overflow:clip}