.bf-shell{--ink:#1a2238;--cream:#f4f0fc;--accent:#a5e5dc;max-width:1040px;margin:auto;background:var(--ink);color:var(--cream);font-family:Arial,sans-serif;border:1px solid #5d726e;border-radius:18px;overflow:hidden;box-shadow:0 22px 65px #16363830}.bf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 26px;background:linear-gradient(110deg,#34324e,#1a2238);border-bottom:1px solid #58726b}.bf-eyebrow{display:block;font-size:10px;letter-spacing:2px;font-weight:700;color:#aadfe7}.bf-header strong{display:block;font-size:26px;letter-spacing:1px;margin-top:7px;font-weight:900}.bf-header em{font-style:normal;color:#dda6dc}.bf-best{font-size:10px;text-align:right;color:#cbded5;letter-spacing:1px}.bf-best b{display:block;font-size:24px;color:var(--accent);margin-top:4px}.bf-hud{display:grid;grid-template-columns:repeat(4,1fr);padding:15px 0;background:#242c46}.bf-hud>div{padding:0 25px;border-right:1px solid #536762}.bf-hud>div:last-child{border:0}.bf-hud small,.bf-strip small{display:block;color:#c9dbd2;font-size:10px;letter-spacing:1px}.bf-hud b{display:block;margin-top:5px;font-size:23px;font-variant-numeric:tabular-nums}.bf-stage{position:relative}.bf-stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.bf-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#152e35ee,#17383bb5);display:grid;place-items:center;text-align:center;padding:24px}.bf-overlay[hidden]{display:none}.bf-card{max-width:560px}.bf-card h2{font-size:clamp(28px,4.5vw,52px);font-family:Georgia,serif;font-weight:500;letter-spacing:-1px;line-height:1.1;margin:17px 0;color:#fff3d4}.bf-card p{font-size:15px;line-height:1.7;color:#d6e7de;margin:10px 0}.bf-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0}.bf-tags span{border:1px solid #839588;border-radius:20px;padding:8px 12px;font-size:10px;letter-spacing:1px}.bf-card button{min-height:50px;border:0;border-radius:8px;background:var(--accent);color:#203735;font-size:16px;font-weight:800;padding:14px 25px;cursor:pointer}.bf-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-bottom:1px solid #4e6e66}.bf-strip b{display:block;color:#bde9ee;font-size:16px;margin-top:6px}.bf-focus{width:24%}.bf-focus>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.bf-focus b{margin:0;font-size:12px;color:var(--accent)}.bf-meter{height:5px;border-radius:5px;background:#496761;margin-top:10px;overflow:hidden}.bf-meter span{display:block;width:100%;height:100%;background:var(--accent)}.bf-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:16px 12px 0}.bf-toolbar button{min-height:44px;padding:10px 15px;background:#343d59;border:1px solid #71918a;color:#f8f0d7;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s}.bf-toolbar button:hover{background:#495572}.bf-toolbar button:disabled{opacity:.5;cursor:default}.bf-toolbar button:first-child{color:var(--accent)}.bf-toolbar kbd{margin-left:8px}.bf-shell button:focus-visible,.bf-stage canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}.bf-help{font-size:12px;line-height:1.8;text-align:center;color:#c5d8cf;padding:13px 14px 19px;margin:0}.bf-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.bf-shell:fullscreen{max-width:none;width:100%;height:100dvh;overflow:auto;border-radius:0}.bf-shell:fullscreen .bf-stage{max-width:1100px;margin:auto}.bf-shell:fullscreen canvas{max-height:calc(100dvh - 310px);object-fit:contain}@media(max-width:600px){.bf-header{padding:15px}.bf-header strong{font-size:19px}.bf-eyebrow{font-size:8px;letter-spacing:.8px}.bf-best{font-size:8px}.bf-best b{font-size:19px}.bf-hud>div{padding:0 12px}.bf-hud b{font-size:18px}.bf-hud small{font-size:8px;letter-spacing:.5px}.bf-overlay{padding:10px}.bf-card h2{font-size:26px;margin:9px 0}.bf-card p{font-size:11px;line-height:1.4;margin:6px 0}.bf-tags{display:none}.bf-card button{min-height:44px;font-size:12px;padding:10px 16px;margin-top:7px}.bf-strip{padding:14px 12px;gap:12px;flex-wrap:wrap}.bf-strip small{font-size:8px;letter-spacing:.4px}.bf-strip b{font-size:13px}.bf-focus{width:100%;display:flex;gap:15px;align-items:center}.bf-focus>div:first-child{min-width:110px}.bf-meter{flex:1;margin:0}.bf-toolbar button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.bf-toolbar button{transition:none}}

.bf-actions{display:flex;justify-content:center;gap:12px;padding:16px 16px 0}.bf-actions button{min-height:50px;min-width:130px;border:1px solid #9aaad1;border-radius:10px;background:#a5e5dc;color:#1a2940;font-size:14px;font-weight:800;cursor:pointer;touch-action:manipulation}.bf-actions button:last-child{background:#e2b6e2}.bf-actions button:disabled{opacity:.45;cursor:default}.bf-actions button:hover{filter:brightness(1.08)}.bf-strip>div{flex:1}.bf-strip b{font-variant-numeric:tabular-nums}.bf-progress{height:4px;background:#49506d}.bf-progress span{height:100%;display:block;background:#cba9e4;width:0}.bf-stage canvas{touch-action:manipulation}@media(max-width:600px){.bf-actions{gap:8px;padding:12px 12px 0}.bf-actions button{min-width:0;flex:1;font-size:12px}.bf-strip{gap:10px}.bf-header strong{font-size:19px}.bf-card h2{font-size:25px}}