.bb-tool{max-width:940px;margin:auto}.bb-setup,.bb-result{border:1px solid var(--line);background:var(--surface);border-radius:1.2rem;padding:clamp(1rem,3vw,2rem)}.bb-kicker{color:var(--focus);letter-spacing:.14em;font-size:.75rem;font-weight:800}.bb-tool h2{letter-spacing:-.04em;margin:.5rem 0 1rem;font-size:clamp(1.5rem,4vw,2.4rem)}.bb-tool p{line-height:1.65}.bb-tool fieldset{border:0;margin:1.5rem 0;padding:0}.bb-tool legend{margin-bottom:.6rem;font-weight:700}.bb-mode{gap:.7rem;display:flex}.bb-mode button{border:1px solid var(--line);background:var(--surface-muted);min-height:48px;color:var(--ink);font:inherit;cursor:pointer;border-radius:.65rem;padding:.8rem 1.2rem}.bb-mode button[aria-pressed=true]{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}.bb-rule{border-left:3px solid var(--focus);background:var(--surface-muted);border-radius:.5rem;padding:1rem}.bb-setup-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.bb-tool label{gap:.4rem;font-weight:650;display:grid}.bb-tool input,.bb-tool select{background:var(--surface-muted);width:100%;min-height:48px;color:var(--ink);border:1px solid var(--line);font:inherit;border-radius:.6rem;padding:.65rem}.bb-names{gap:.6rem;display:grid}.bb-start{width:100%;margin:1rem 0}.bb-help summary,.bb-text-board summary{cursor:pointer;min-height:44px;padding:.65rem 0;font-weight:650}.bb-help p{font-size:.86rem;line-height:1.7}.bb-arena{scroll-margin-top:calc(8px - 2rem);position:relative}.bb-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;max-width:520px;margin:0 auto .8rem;display:grid}.bb-stats>div{background:#0c1b2266;border:1px solid #2e464c;border-radius:.65rem;gap:.3rem;padding:.6rem .75rem;display:grid}.bb-stats span{color:#b8cbc8;font-size:.7rem}.bb-stats strong{font-variant-numeric:tabular-nums;font-size:clamp(1rem,2vw,1.5rem)}.bb-balance{background:#0c1b2266;border:1px solid #3d5954;border-radius:.6rem;max-width:520px;margin:0 auto .8rem;padding:.6rem .8rem}.bb-balance>div:first-child{flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.73rem;display:flex}.bb-balance>div:first-child>strong{color:#b6ee82}.bb-balance-track{background:linear-gradient(90deg,#f5a47b,#2e6257 23% 77%,#f5a47b);border-radius:4px;height:8px;margin:.65rem 0 .35rem;position:relative}.bb-balance-track:after{content:"";background:#d9e8da;width:1px;height:12px;position:absolute;top:-2px;left:50%}.bb-balance-track i{background:#edf8e7;border:1px solid #142229;border-radius:4px;width:8px;height:16px;transition:left .16s cubic-bezier(.2,.7,.2,1);position:absolute;top:-4px;transform:translate(-50%)}.bb-balance-labels{color:#b8cbc8;justify-content:space-between;font-size:.63rem;display:flex}.bb-warning{border-color:#f5a47b}.bb-warning>div:first-child>strong{color:#ffc29a}.bb-warning p{margin:.4rem 0 0;font-size:.75rem}.bb-playfield{grid-template-columns:86px minmax(0,280px) 86px;justify-content:center;align-items:start;gap:12px;display:grid}.bb-board-wrap{background:#101c22;border:2px solid #52716a;border-radius:.35rem;position:relative;overflow:hidden;box-shadow:0 0 0 5px #0b191c88,0 14px 34px #06131677}.bb-canvas{aspect-ratio:1/2;width:100%;height:auto;display:block}.bb-side{text-align:center;background:#0b1b2266;border:1px solid #2e464c;border-radius:.6rem;padding:.5rem}.bb-side h3{color:#d0e1d8;text-transform:uppercase;letter-spacing:.05em;margin:.2rem 0 .4rem;font-size:.7rem}.bb-preview{width:100%;height:auto;max-height:58px;display:block}.bb-side small{color:#b8cbc8;margin:.3rem 0;font-size:.6rem;display:block}.bb-piece-label{color:#d0e1d8;font-size:.62rem;font-weight:700}.bb-next-side>div{margin-bottom:.35rem}.bb-next-side>div:last-child{margin:0}.bb-overlay{text-align:center;background:#0d1b22eb;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;padding:1rem;display:flex;position:absolute;inset:0}.bb-overlay h3{margin:0;font-size:1.5rem}.bb-overlay p{margin:0 0 .6rem;font-size:.85rem}.bb-overlay .button{color:#182721;background:#b6ee82;border-color:#b6ee82}.bb-clear-feedback{color:#d4f9b1;text-align:center;min-height:24px;margin-top:.7rem;font-size:.8rem}.bb-control{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;font:inherit;transition:transform .1s}.bb-control>span{font-size:1.2rem;line-height:1.2;display:block}.bb-control:active{transform:translateY(2px);box-shadow:0 1px #0b171d}.bb-control:disabled{opacity:.4;cursor:default}.bb-arena>.bb-help,.bb-text-board{color:#d1e0db;max-width:520px;margin:auto}.bb-arena>.bb-help summary,.bb-text-board summary{font-size:.8rem}.bb-text-board pre{letter-spacing:.05em;text-align:center;background:#0a171d;padding:.75rem;font-size:.75rem;overflow:auto}.bb-fallback{aspect-ratio:1/2;background:#101c22;grid-template-columns:repeat(10,minmax(0,1fr));display:grid}.bb-fallback span{color:#102025;border:1px solid #20313a;place-items:center;font-size:.6rem;display:grid}.bb-fallback .bb-ghost{outline-offset:-3px;outline:1px solid #9bc5b5}.bb-confirm{z-index:4;background:var(--surface);max-width:430px;color:var(--ink);border:2px solid var(--focus);border-radius:1rem;margin:auto;padding:1.5rem;position:absolute;inset:30% 1rem auto;box-shadow:0 10px 70px #0009}.bb-confirm h3{margin:0 0 1rem}.bb-confirm .button{margin:.3rem .3rem .3rem 0}.bb-result-score{background:var(--surface-muted);border:1px solid var(--line);border-radius:.8rem;gap:.3rem;margin:1rem 0;padding:1.25rem;display:grid}.bb-result-score>strong{color:var(--focus);font-size:3rem}.bb-ranking{gap:.5rem;padding:0;list-style:none;display:grid}.bb-ranking li{border:1px solid var(--line);overflow-wrap:anywhere;border-radius:.6rem;justify-content:space-between;gap:1rem;padding:.8rem;display:flex}.bb-ranking li span{font-size:.85rem}.bb-result-actions{flex-wrap:wrap;gap:.6rem;display:flex}.bb-note,.bb-records{color:var(--muted);font-size:.85rem}.bb-records{line-height:1.8}.bb-tool :is(button,summary,input,select):focus-visible,.bb-arena:focus-visible{outline:3px solid var(--focus);outline-offset:3px}@media (max-width:600px){.bb-setup-grid{grid-template-columns:1fr}.bb-arena{padding:.65rem}.bb-toolbar button{font-size:.75rem}.bb-playfield{grid-template-columns:50px minmax(0,1fr) 50px;gap:6px;max-width:min(100%,23svh + 112px);margin-inline:auto}.bb-side{padding:.2rem}.bb-side h3{font-size:.58rem}.bb-side small{font-size:.5rem}.bb-preview{max-height:36px}.bb-stats>div{padding:.4rem}.bb-stats span{font-size:.63rem}.bb-balance{padding:.45rem}.bb-result-actions>.button{width:100%}.bb-ranking li{flex-direction:column;gap:.3rem}}@media (prefers-reduced-motion:reduce){.bb-balance-track i,.bb-control{transition:none}.bb-control:active{transform:none}}.bb-arena{color:#243438;background:linear-gradient(135deg,#e5e8dc,#cbd4cb);border:1px solid #9dab9f;border-radius:1.5rem 1.5rem 2.8rem;padding:1rem;box-shadow:0 4px #91a097,0 18px 45px #10252c24}.bb-console-label{letter-spacing:.1em;color:#375345;justify-content:space-between;align-items:center;gap:.5rem;margin:0 .2rem .7rem;font-size:.66rem;display:flex}.bb-console-label span{font-family:monospace;font-size:.6rem;font-weight:700}.bb-screen{color:#edf6ee;background:radial-gradient(at 50% 0,#263c3c,#142229 58%);border:3px solid #6c8078;border-radius:1rem;padding:.75rem;box-shadow:inset 0 2px 7px #07191d66}.bb-stats{gap:.4rem;margin-bottom:.6rem}.bb-stats strong{font-family:ui-monospace,monospace}.bb-balance{margin-bottom:.65rem}.bb-controls{grid-template-columns:132px 128px;justify-content:center;align-items:center;gap:10px 32px;max-width:360px;margin:1.25rem auto .5rem;display:grid}.bb-dpad{grid-template-rows:repeat(3,44px);grid-template-columns:repeat(3,44px);gap:0;display:grid}.bb-dpad .bb-control{color:#d8e6d8;background:linear-gradient(135deg,#34483f,#23372f);border-color:#22382d;border-radius:5px;width:44px;height:44px;min-height:44px;padding:0;box-shadow:inset 0 1px #ffffff28,0 3px #142b21}.bb-dpad .bb-control>span{font-size:1.35rem;line-height:44px}.bb-dpad .bb-drop{grid-area:1/2}.bb-dpad .bb-left{grid-area:2/1}.bb-dpad .bb-right{grid-area:2/3}.bb-dpad .bb-down{grid-area:3/2}.bb-pad-center{background:#2b4036;border:1px solid #2b4036;grid-area:2/2;box-shadow:0 3px #142b21}.bb-face-buttons{justify-content:center;gap:12px;display:flex;transform:rotate(-12deg)}.bb-face-buttons .bb-control{color:#fff6fa;background:linear-gradient(135deg,#955875,#75425e);border-color:#673950;border-radius:50%;width:56px;height:56px;min-height:56px;padding:0;box-shadow:inset 0 2px #fff2,0 4px #523346,0 7px 10px #233b312b}.bb-face-buttons .bb-control>span{font-size:1.3rem;font-weight:800;line-height:56px;transform:rotate(12deg)}.bb-system-buttons{grid-column:1/-1;justify-content:center;gap:14px;margin-top:.1rem;display:flex}.bb-system-buttons .bb-control,.bb-console-start{color:#fff;letter-spacing:.06em;cursor:pointer;background:linear-gradient(#849388,#687c6d);border:1px solid #566c5b;border-radius:22px;width:80px;height:44px;min-height:44px;padding:.3rem;font:700 .7rem ui-monospace,monospace;box-shadow:inset 0 1px #ffffff30,0 3px #465e4d}.bb-system-buttons .bb-control>span{font:inherit}.bb-console-start:active{transform:translateY(2px);box-shadow:0 1px #465e4d}.bb-console-start:disabled{opacity:.5}.bb-pad-legend{text-align:center;color:#304e3a;max-width:470px;margin:.65rem auto .5rem;font-size:.72rem;font-weight:600;line-height:1.65}.bb-arena>.bb-help,.bb-arena>.bb-text-board,.bb-arena>.bb-help p{color:#334d3d}.bb-text-board pre{color:#d1e0db}.bb-arena .bb-screen:has(.bb-warning){border-color:#a68668}@media (max-width:600px){.bb-arena{padding:.65rem}.bb-screen{border-width:2px;padding:.45rem}.bb-toolbar span{display:inline}.bb-stats>div{padding:.35rem}.bb-stats span{font-size:.59rem}.bb-stats strong{font-size:.92rem}.bb-playfield{grid-template-columns:42px minmax(0,1fr) 42px;gap:6px;max-width:min(100%,clamp(200px,100svh - 500px,420px)/2 + 96px)}.bb-balance{padding:.4rem .45rem}.bb-balance>div:first-child{font-size:.64rem}.bb-console-label{margin-bottom:.5rem;font-size:.6rem}.bb-controls{grid-template-columns:132px 124px;gap:8px 24px;margin-top:1rem}.bb-pad-legend{font-size:.65rem}.bb-next-side>div{margin-bottom:.2rem}}@media (max-width:360px){.bb-controls{grid-template-columns:132px 100px;column-gap:14px}.bb-face-buttons{gap:8px}.bb-face-buttons .bb-control{width:46px;height:46px;min-height:46px}.bb-face-buttons .bb-control>span{line-height:46px}.bb-balance>div:first-child{font-size:.6rem}}@media (prefers-reduced-motion:reduce){.bb-console-start:active{transform:none}}.bb-reset{color:#334e3a;cursor:pointer;background:#cad4c8;border:1px solid #718879;border-radius:50%;min-width:44px;min-height:44px;font:1.2rem system-ui;box-shadow:0 2px #889c8d}.bb-reset:disabled{opacity:.5}.bb-reset:active{transform:translateY(1px)}@media (min-width:700px){.bb-arena{grid-template-columns:minmax(0,1fr) 268px;gap:10px 18px;display:grid}.bb-console-label{grid-column:1/-1;margin-bottom:.2rem}.bb-screen{grid-area:2/1}.bb-controls{grid-area:2/2;grid-template-columns:132px 124px;align-self:center;column-gap:12px}.bb-playfield{grid-template-columns:70px minmax(0,1fr) 70px;max-width:min(100%,clamp(220px,100svh - 380px,560px)/2 + 164px);margin-inline:auto}.bb-pad-legend{grid-area:3/2;margin:0;font-size:.68rem}.bb-arena>.bb-help,.bb-arena>.bb-text-board{grid-column:1/-1;width:100%}.bb-system-buttons{gap:8px}}@media (max-width:360px){.bb-system-buttons{gap:8px}.bb-system-buttons .bb-control,.bb-console-start{width:76px}}@media (prefers-reduced-motion:reduce){.bb-reset:active{transform:none}}@media (max-width:360px){.bb-playfield{max-width:min(100%,clamp(200px,100svh - 540px,420px)/2 + 96px)}}@media (max-width:600px){.bb-side h3{letter-spacing:0}}.bb-console-label span{overflow-wrap:anywhere;text-align:right;min-width:0}.bb-console-label strong{flex-shrink:0}.bb-piece-label{line-height:1.1;display:block}.bb-next-side>div{font-size:0;line-height:1}