:root{color-scheme:dark;--bb-bg: #0c0c1e;--bb-fg: #e8e8ff;--bb-accent: #5ec8ff}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bb-bg);color:var(--bb-fg);font-family:Segoe UI,system-ui,sans-serif}#app{display:flex;justify-content:center;padding:16px}.bb-wrap{width:100%;max-width:680px;display:flex;flex-direction:column;gap:12px}.bb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.bb-head h1{margin:0;font-size:24px;letter-spacing:1px;color:var(--bb-accent);text-shadow:0 0 8px rgba(94,200,255,.5)}.bb-hud{display:flex;gap:16px;font-size:14px;font-family:monospace}.bb-hud b{color:var(--bb-accent)}#bb-canvas{width:100%;max-width:640px;aspect-ratio:320 / 224;image-rendering:pixelated;background:#0a0a2a;border:2px solid #2e3a66;border-radius:6px;display:block;margin:0 auto}.bb-standing{margin:0;min-height:1.2em;text-align:center;font-size:14px;font-family:monospace;color:#ffd27f}.bb-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}.bb-controls label{font-size:13px;display:flex;gap:6px;align-items:center}.bb-controls select,.bb-controls button{background:#1a2244;color:var(--bb-fg);border:1px solid #34406e;border-radius:4px;padding:4px 10px;font-size:13px;cursor:pointer}.bb-controls button:hover{background:#26336a}.bb-help{font-size:12px;line-height:1.5;color:#aab0d8;text-align:center;margin:0}.bb-help b{color:var(--bb-accent)}.bb-online{background:#15173a;border:1px solid #2b2f63;border-radius:10px;padding:12px 18px;margin:10px auto;max-width:380px;text-align:center}.bb-online.hidden{display:none}.bb-online h2{margin:4px 0 8px;color:var(--bb-accent)}.bb-online .bb-code{font-size:1.6rem;letter-spacing:4px;font-weight:700;color:var(--bb-accent)}.bb-online-row{display:flex;gap:8px;justify-content:center;margin:8px 0}.bb-online-row input{text-transform:uppercase;width:7rem;text-align:center}.bb-online button.primary{background:var(--bb-accent);color:#0c0c1e;font-weight:700}