.bk{position:absolute;inset:0;container-type:size;overflow:hidden;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 0%,rgb(124 77 255 / .2),transparent 70%),radial-gradient(60% 60% at 100% 100%,rgb(22 184 232 / .1),transparent 70%);--empty: #232A4D;--frame: #151A33;--frame-2: #2E3766;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.bk-screen{width:100%;height:100%;display:grid;place-items:center;padding:clamp(8px,2.4cqmin,24px);animation:bk-in .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto}@keyframes bk-in{0%{opacity:0;transform:scale(.97)}}:is(.bk,.bk-float) .c1{--c: #FF5574}:is(.bk,.bk-float) .c2{--c: #FF8A3D}:is(.bk,.bk-float) .c3{--c: #FFC21A}:is(.bk,.bk-float) .c4{--c: #55D65A}:is(.bk,.bk-float) .c5{--c: #16B8E8}:is(.bk,.bk-float) .c6{--c: #4D7CFF}:is(.bk,.bk-float) .c7{--c: #8B6CFF}:is(.bk,.bk-float) .c8{--c: #FF6AD5}:is(.bk,.bk-float) :is(.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8){--bev: inset 0 calc(var(--u) * -.13) 0 rgb(0 0 0 / .3), inset 0 calc(var(--u) * .1) 0 rgb(255 255 255 / .38), inset calc(var(--u) * .08) 0 0 rgb(255 255 255 / .12)}.bk-board .cell,.bk-piece i{background:var(--c, var(--empty)) padding-box;border:calc(var(--u) * .05) solid transparent;border-radius:calc(var(--u) * .2);box-shadow:var(--bev, inset 0 calc(var(--u) * .06) 0 rgb(0 0 0 / .25))}.bk-piece i.e{background:none;box-shadow:none}.bk-menu{width:min(100%,680px);display:grid;gap:clamp(10px,2.2cqh,18px);text-align:center}.bk-menu h2{font-size:clamp(26px,7cqmin,44px);font-weight:900;letter-spacing:-.03em;margin:0}.bk-logo{display:flex;justify-content:center}.bk-logo-grid{--u: clamp(14px, 4.4cqmin, 26px);display:grid;grid-template-columns:repeat(4,var(--u));grid-auto-rows:var(--u);padding:calc(var(--u) * .15);background:var(--frame);border-radius:calc(var(--u) * .35);transform:rotate(-6deg);box-shadow:0 8px 24px #0000004d}.bk-logo-grid i{background:var(--c, var(--empty)) padding-box;border:calc(var(--u) * .05) solid transparent;border-radius:calc(var(--u) * .2);box-shadow:var(--bev, none);animation:bk-pop .5s var(--d) both cubic-bezier(.3,1.6,.5,1)}.bk-nick{display:flex;align-items:center;gap:10px;justify-content:center}.bk-nick label{font-size:13px;color:var(--muted);font-weight:600}.bk-nick input,.bk-join input{padding:8px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;font-size:16px}.bk-nick input{width:180px}.bk-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.bk-mode{display:grid;gap:8px;align-content:start;padding:14px;border-radius:var(--radius, 16px);background:var(--surface);border:1px solid var(--line);color:var(--text);font:inherit;text-align:left}.bk-mode h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px}.bk-mode p{margin:0;font-size:13px;color:var(--muted)}.bk-mode .ico{font-size:22px}button.bk-mode{cursor:pointer;transition:transform .15s,border-color .15s}button.bk-mode:hover{transform:translateY(-2px);border-color:var(--yellow)}.bk-mode.solo{background:linear-gradient(135deg,rgb(124 77 255 / .22),var(--surface) 70%)}.bk-best{font-size:13px;color:var(--yellow)}.bk-pills{display:flex;gap:6px;flex-wrap:wrap}.bk-pill{flex:1;padding:9px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer;touch-action:manipulation;white-space:nowrap}.bk-pill:hover{border-color:var(--yellow)}.bk-pill.primary{background:var(--yellow);color:#1a1300;border-color:transparent}.bk-join{display:flex;gap:6px}.bk-join input{width:0;flex:1;text-transform:uppercase;letter-spacing:.15em;text-align:center;font-weight:700}.bk-join .bk-pill{flex:none}.bk-rules{margin:0;font-size:13px;color:var(--muted);line-height:1.5}.bk-wait{display:grid;gap:14px;justify-items:center;text-align:center;max-width:420px}.bk-wait h3{margin:0;font-size:20px}.bk-wait .bk-logo-grid{animation:bk-spin 2.4s ease-in-out infinite}@keyframes bk-spin{50%{transform:rotate(6deg) scale(1.05)}}.bk-code{font-size:34px;font-weight:900;letter-spacing:.25em;padding:6px 18px;border-radius:12px;background:var(--surface);border:2px dashed var(--line-strong)}.muted{color:var(--muted);margin:0}.bk-btn{padding:11px 20px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}.bk-btn.primary{background:var(--yellow);color:#1a1300;border-color:transparent}.bk-btn.ghost{background:transparent}.bk-btn:disabled{opacity:.7;cursor:default}.bk-play{--B: min(94cqw, calc((100cqh - 118px) / 1.38), 540px);--cs: calc(var(--B) / 9);--pc: calc(var(--cs) * .5);width:var(--B);display:grid;gap:clamp(6px,1.4cqh,12px);grid-template-areas:"top" "arena" "hand" "partner" "foot"}.bk-play.kind-coop{--B: min(94cqw, calc((100cqh - 162px) / 1.38), 540px)}.bk-play.kind-battle{--B: min(94cqw, calc((100cqh - 136px) / 1.38), 540px)}.bk-screen:has(.bk-play){padding-block:clamp(6px,1.6cqh,16px)}.bk-top{grid-area:top;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.bk-box{display:grid;line-height:1.1;min-width:0}.bk-box small{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-box b{font-size:clamp(22px,5.5cqmin,34px);font-weight:900;font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center}.bk-box.right{text-align:right}.bk-box.right b{transform-origin:right center}.bk-mid{display:grid;justify-items:center;gap:4px;min-width:90px}.bk-mid small{font-size:11px;color:var(--muted)}.bk-combo{padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,#ff5574,#ffc21a);color:#1a1300;font-weight:900;font-size:14px;animation:bk-pop .3s cubic-bezier(.3,1.6,.5,1)}.bk-clock{font-size:clamp(20px,5cqmin,30px);font-weight:900;font-variant-numeric:tabular-nums;padding:2px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}.bk-clock.low{color:#fff;background:#e8364f;border-color:transparent;animation:bk-beat 1s infinite}@keyframes bk-beat{50%{transform:scale(1.08)}}.bk-turn{font-size:13px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);white-space:nowrap}.bk-turn.me{background:var(--green);color:#062b08;border-color:transparent}.bk-turnbar{display:block;width:90px;height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}.bk-turnbar b{display:block;height:100%;background:var(--yellow);transform-origin:left;transition:transform .25s linear}.bk-arena{grid-area:arena;display:grid;gap:10px}.bk-board-wrap{position:relative;width:var(--B);aspect-ratio:1}.bk-board{--u: var(--cs);position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);outline:calc(var(--cs) * .14) solid var(--frame);border-radius:calc(var(--cs) * .12);background:var(--frame);box-shadow:0 0 0 calc(var(--cs) * .14 + 2px) var(--frame-2),0 14px 40px #00000059;touch-action:none}.bk-board .cell.ghost{opacity:.5}.bk-board .cell.will-clear{filter:brightness(1.3) saturate(1.2)}.bk-board .cell.will-clear:not(.ghost){box-shadow:var(--bev, none),0 0 calc(var(--u) * .35) #ffffff59}.bk-board .cell.pop{animation:bk-pop .22s cubic-bezier(.3,1.6,.5,1)}.bk-board .cell.clearing{animation:bk-clear .38s var(--d, 0ms) ease-in forwards}@keyframes bk-pop{0%{transform:scale(.55)}}@keyframes bk-clear{0%{filter:brightness(1)}35%{filter:brightness(2.4);transform:scale(1.12)}to{filter:brightness(2.4);transform:scale(0) rotate(25deg);opacity:0}}.bk-fx{position:absolute;inset:0;pointer-events:none;z-index:2}.bk-float-text{position:absolute;transform:translate(-50%,-50%);font-weight:900;white-space:nowrap;text-shadow:0 2px 0 rgb(0 0 0 / .45),0 0 12px rgb(0 0 0 / .4);animation:bk-rise 1.05s ease-out forwards}.bk-float-text.pts{font-size:calc(var(--cs) * .55);color:#fff}.bk-float-text.combo{font-size:calc(var(--cs) * .8);color:var(--yellow);animation-name:bk-zoom}.bk-float-text.praise{font-size:calc(var(--cs) * .65);color:#7cf0ff;animation-name:bk-zoom;animation-delay:.08s}@keyframes bk-rise{0%{opacity:1;translate:0 0}70%{opacity:1}to{opacity:0;translate:0 calc(var(--cs) * -1.2)}}@keyframes bk-zoom{0%{opacity:0;scale:.4}20%{opacity:1;scale:1.15}35%{scale:1}80%{opacity:1}to{opacity:0;scale:1.05;translate:0 calc(var(--cs) * -.5)}}.bk-hand{grid-area:hand;display:grid;grid-template-columns:repeat(3,1fr);height:calc(var(--B) * .36)}.bk-slot{display:grid;place-items:center;touch-action:none;cursor:grab;border-radius:14px;transition:opacity .2s,filter .2s}.bk-slot.empty{cursor:default}.bk-slot.nofit{opacity:.35;filter:grayscale(.6)}.bk-slot.dragging .bk-piece{opacity:0}.bk-hand.locked .bk-slot{cursor:default;opacity:.45;filter:grayscale(.4)}.bk-piece{--u: var(--pc);display:grid;grid-template-columns:repeat(var(--w),var(--u));grid-auto-rows:var(--u);pointer-events:none}.bk-piece.deal{animation:bk-deal .32s cubic-bezier(.3,1.5,.5,1) both}.bk-slot:nth-child(2) .bk-piece.deal{animation-delay:.05s}.bk-slot:nth-child(3) .bk-piece.deal{animation-delay:.1s}@keyframes bk-deal{0%{opacity:0;transform:translateY(14px) scale(.6)}}.bk-float{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;will-change:transform}.bk-float .bk-piece{--u: var(--cell);filter:drop-shadow(0 10px 14px rgb(0 0 0 / .4));transition:filter .1s}.bk-float.snap .bk-piece{filter:drop-shadow(0 4px 6px rgb(0 0 0 / .3))}.bk-partner{grid-area:partner;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--muted)}.bk-partner>div{display:flex;gap:8px}.bk-mini-slot{display:grid;place-items:center;min-width:40px;height:34px;padding:2px 4px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}.bk-piece.tiny{--u: 6px}.bk-opp-row{display:flex;align-items:center;justify-content:flex-end;gap:8px}.bk-mini{--u: clamp(4px, 1cqh, 8px);display:grid;grid-template-columns:repeat(9,var(--u));grid-auto-rows:var(--u);padding:2px;background:var(--frame);border-radius:4px;flex:none}.bk-mini i{background:var(--c, var(--empty));border-radius:1px;margin:.5px;transition:background-color .2s}.bk-opp.out .bk-mini{opacity:.5;filter:grayscale(.7)}.bk-foot{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}.bk-status{font-size:12px;line-height:1.25;color:var(--muted);font-weight:600}.bk-status.good{color:var(--green)}.bk-status.bad{color:var(--pink)}.bk-tools{display:flex;gap:6px;flex:none}.bk-icon{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:16px;cursor:pointer;display:grid;place-items:center;touch-action:manipulation}.bk-over{position:absolute;inset:calc(var(--cs) * -.14);z-index:3;display:grid;place-items:center;background:#0a0c1cb8;border-radius:calc(var(--cs) * .2);animation:bk-in .3s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.bk-over-card{display:grid;gap:10px;justify-items:center;text-align:center;padding:18px;color:#fff}.bk-over-card h3{margin:0;font-size:clamp(22px,6cqmin,34px);font-weight:900}.bk-over-card p{margin:0;font-size:15px;opacity:.9}.bk-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}.bk-over .bk-btn.ghost{color:#fff;border-color:#fff6}.bk-confetti{position:absolute;left:50%;top:45%;pointer-events:none;z-index:5}.bk-confetti i{position:absolute;width:9px;height:13px;border-radius:2px}@container (min-aspect-ratio: 5/4){.bk-play{--B: min( calc(100cqh - 140px) , 58cqw, 600px);width:auto;grid-template-columns:var(--B) calc(var(--B) * .42);grid-template-areas:"top top" "arena hand" "arena partner" "foot foot";grid-template-rows:auto 1fr auto auto;column-gap:clamp(14px,3cqw,36px)}.bk-play.kind-coop{--B: min( calc(100cqh - 140px) , 56cqw, 600px)}.bk-play.kind-battle{--B: min( calc(100cqh - 160px) , 58cqw, 600px)}.bk-mini{--u: clamp(5px, 1.2cqh, 8px)}.bk-hand{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);height:auto;align-self:stretch}.bk-partner{flex-direction:column}}@media(prefers-reduced-motion:reduce){.bk *,.bk-float *{animation:none!important;transition:none!important}}