.bnb-game__layout{gap:1.5rem;display:grid}@media (width>=60rem){.bnb-game__layout{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}.bnb-game__play{gap:.75rem;min-width:0;display:grid}.bnb-game__hud{align-items:stretch;gap:.5rem;display:flex}.bnb-game__stat{border-radius:var(--bnb-radius);border:1px solid var(--bnb-line);background:var(--bnb-glass);flex:1;gap:.1rem;padding:.5rem .75rem;display:grid}.bnb-game__stat span{color:var(--bnb-muted);font-family:var(--bnb-font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:700}.bnb-game__stat strong{font-family:var(--bnb-font-display);font-variant-numeric:tabular-nums;font-size:1.35rem;line-height:1.1}.bnb-game[data-hot] [data-hud-combo]{color:var(--bnb-rose);text-shadow:0 0 12px #ff9fceb3}.bnb-game__mute{border-radius:var(--bnb-radius);border:1px solid var(--bnb-line);background:var(--bnb-glass);width:3rem;color:var(--bnb-text);cursor:pointer;flex:none;font-size:1.15rem}.bnb-game__mute:hover{border-color:var(--bnb-line-strong)}.bnb-game__arena{aspect-ratio:4/5;border-radius:var(--bnb-radius-lg);border:1px solid var(--bnb-line-strong);background:radial-gradient(60% 50% at 20% 15%, #4fdbff29, transparent 70%), radial-gradient(55% 45% at 85% 85%, #e3aaff29, transparent 70%), linear-gradient(#9ba8ff0f 1px, transparent 1px) 0 0 / 100% 2.5rem, linear-gradient(90deg, #9ba8ff0f 1px, transparent 1px) 0 0 / 2.5rem 100%, linear-gradient(160deg, var(--bnb-ink-800), var(--bnb-ink-950));max-height:78svh;transition:box-shadow .3s;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #0a0f2ecc,0 20px 60px -30px #4fdbff80}@media (width>=40rem){.bnb-game__arena{aspect-ratio:16/10}}.bnb-game__arena:after{content:"";background:var(--bnb-led);opacity:.55;pointer-events:none;background-size:200% 100%;height:3px;position:absolute;inset:auto 0 0}.bnb-game__arena[data-state=playing]{box-shadow:inset 0 0 60px #0a0f2ecc,0 0 0 1px #4fdbff59,0 20px 60px -24px #4fdbffbf}.bnb-game__arena[data-state=playing]:after{opacity:1;animation:4s linear infinite bnb-led}.bnb-game__canvas{cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.bnb-game__arena[data-state=playing] .bnb-game__canvas{touch-action:none;-webkit-user-select:none;user-select:none}.bnb-game__screen{text-align:center;backdrop-filter:blur(6px);animation:bnb-fade-in .3s var(--bnb-ease);background:#0a0f2eb8;flex-direction:column;justify-content:center;align-items:center;gap:.85rem;padding:1.25rem;display:flex;position:absolute;inset:0;overflow-y:auto}.bnb-game__screen[hidden]{display:none}.bnb-game__logo{animation:4s ease-in-out infinite bnb-float}.bnb-game__logo .bnb-butterfly__wing{transform-box:fill-box;animation:.9s ease-in-out infinite bnb-flap}.bnb-game__logo .bnb-butterfly__wing--left{transform-origin:100%}.bnb-game__logo .bnb-butterfly__wing--right{transform-origin:0}.bnb-game__rules{max-width:30rem;color:var(--bnb-muted);gap:.35rem;margin:0;padding:0;font-size:.95rem;list-style:none;display:grid}.bnb-game__best{color:var(--bnb-sky);font-weight:700}.bnb-game__nojs{color:var(--bnb-muted)}.bnb-game[data-js] .bnb-game__nojs,.bnb-game:not([data-js]) .bnb-game__play-btn{display:none}.bnb-game__over-label{color:var(--bnb-cyan);font-family:var(--bnb-font-mono);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;font-weight:700}.bnb-game__over-score{font-family:var(--bnb-font-display);font-variant-numeric:tabular-nums;font-size:clamp(2.5rem,9vw,4rem);font-weight:800;line-height:1}.bnb-game__over-score small{color:var(--bnb-muted);font-size:.4em}.bnb-game__record{color:var(--bnb-rose);animation:bnb-pop .5s var(--bnb-ease);background:#ff9fce29;border:1px solid #ff9fce99;border-radius:999px;padding:.3rem .85rem;font-size:.9rem;font-weight:700}@keyframes bnb-pop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}to{opacity:1;transform:none}}.bnb-game__results{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:min(100%,26rem);margin:0;display:grid}.bnb-game__results div{border:1px solid var(--bnb-line);background:#111845b3;border-radius:.85rem;padding:.45rem .6rem}.bnb-game__results dt{color:var(--bnb-muted);font-size:.75rem}.bnb-game__results dd{font-variant-numeric:tabular-nums;margin:0;font-weight:700}.bnb-game__form{text-align:left;gap:.4rem;width:min(100%,26rem);display:grid}.bnb-game__form label{color:var(--bnb-muted);font-size:.85rem;font-weight:600}.bnb-game__form-row{gap:.5rem;display:flex}.bnb-game__form input{border:1px solid var(--bnb-line-strong);background:var(--bnb-ink-950);min-width:0;min-height:3rem;color:var(--bnb-text);font:inherit;border-radius:999px;flex:1;padding:.6rem 1rem}.bnb-game__form input:focus-visible{outline:3px solid var(--bnb-cyan);outline-offset:2px}.bnb-game__form .bnb-btn[disabled]{opacity:.55;cursor:default;transform:none}.bnb-game__form-msg{min-height:1.3em;color:var(--bnb-sky);font-size:.85rem}.bnb-game__hint{color:var(--bnb-muted);font-size:.85rem}.bnb-board{border-radius:var(--bnb-radius-lg);border:1px solid var(--bnb-line);background:var(--bnb-glass);gap:.6rem;padding:1.1rem;display:grid}.bnb-board__title{font-family:var(--bnb-font-display);color:var(--bnb-sky);align-items:center;gap:.45rem;font-size:1.25rem;font-weight:800;display:inline-flex}.bnb-board__head,.bnb-board__row{grid-template-columns:2rem minmax(0,1fr) auto 3rem;align-items:center;gap:.5rem;display:grid}.bnb-board__head{color:var(--bnb-muted);font-family:var(--bnb-font-mono);letter-spacing:.1em;text-transform:uppercase;padding-inline:.6rem;font-size:.7rem;font-weight:700}.bnb-board__head span:nth-child(n+3){text-align:right}.bnb-board__list{gap:.3rem;margin:0;padding:0;list-style:none;display:grid}.bnb-board__row{background:#1a256359;border-radius:.8rem;padding:.45rem .6rem;font-size:.95rem}.bnb-board__rank{background:#9ba8ff24;border-radius:50%;place-items:center;width:1.7rem;height:1.7rem;font-size:.85rem;font-weight:800;display:grid}.bnb-board__row:first-child .bnb-board__rank{color:var(--bnb-ink-950);background:linear-gradient(135deg,#fff1b8,#ffc857)}.bnb-board__row:nth-child(2) .bnb-board__rank{background:linear-gradient(135deg, var(--bnb-sky), var(--bnb-periwinkle));color:var(--bnb-ink-950)}.bnb-board__row:nth-child(3) .bnb-board__rank{background:linear-gradient(135deg, var(--bnb-lilac), var(--bnb-rose));color:var(--bnb-ink-950)}.bnb-board__name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.bnb-board__you{background:var(--bnb-cyan);color:var(--bnb-ink-950);vertical-align:.1em;border-radius:999px;margin-left:.4rem;padding:.05rem .45rem;font-size:.7rem;font-weight:800}.bnb-board__score{font-variant-numeric:tabular-nums;text-align:right;font-weight:800}.bnb-board__acc{color:var(--bnb-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:.85rem}.bnb-board__row.is-me{background:#4fdbff24;box-shadow:inset 0 0 0 1px #4fdbff8c}.bnb-board__status{color:var(--bnb-muted);font-size:.9rem}.bnb-board__status:empty{display:none}@media (prefers-reduced-motion:reduce){.bnb-game__logo,.bnb-game__logo .bnb-butterfly__wing,.bnb-game__record,.bnb-game__screen,.bnb-game__arena[data-state=playing]:after{animation:none}}.bnb-notify{gap:.4rem;display:grid}.bnb-notify__btn{width:100%}.bnb-notify__bell{transform-origin:50% 10%;display:inline-block}.bnb-notify__btn:hover .bnb-notify__bell,.bnb-notify[data-state=on] .bnb-notify__bell{animation:bnb-ring .9s var(--bnb-ease)}.bnb-notify[data-state=on] .bnb-notify__btn{background:#ff9fce1f;border-color:#ff9fceb3}.bnb-notify[data-state=busy] .bnb-notify__btn{cursor:progress}.bnb-notify__btn:disabled{opacity:.7;transform:none}.bnb-notify__off{color:var(--bnb-muted);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;justify-self:center;padding:.2rem .5rem;font-size:.875rem;text-decoration:underline}.bnb-notify__off:hover{color:var(--bnb-text)}.bnb-notify__status{color:var(--bnb-muted);margin:0;font-size:.875rem}.bnb-notify__status:empty{display:none}@keyframes bnb-ring{0%,to{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}