/* Orbit Ball: the fire button, the shop's swatches. The rest comes from /rooms/room.css. */
.dock .ob-fire { min-width: 140px; font-size: 17px; letter-spacing: .04em; }
body.at-table #view { cursor: crosshair; }
.swatch-orbs { background: #05070d; gap: 6px; }
.swatch-orbs i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 18%, #05070d); box-shadow: 0 0 10px var(--c); }
.swatch-space { background: radial-gradient(circle at 30% 40%, var(--neb), transparent 60%), radial-gradient(circle at 75% 70%, var(--neb), transparent 50%), var(--sky); }
.swatch-cannon { background: #05070d; }
.swatch-cannon i { width: 34px; height: 20px; border-radius: 18px 18px 4px 4px; background: linear-gradient(180deg, var(--body), color-mix(in srgb, var(--body) 50%, #000)); }
.swatch-cannon b { width: 10px; height: 10px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); }
.ob-score { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: grid; justify-items: center; text-shadow: 0 0 18px rgba(80, 200, 255, .6); }
.ob-score:empty { display: none; }
.ob-score strong { font: 300 46px/1 "Segoe UI", Arial, sans-serif; color: #eaf8ff; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ob-score small { font-size: 12px; color: #8fb8cc; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
/* the score says it all on a wide screen; the side card stays on a phone */
@media (min-width: 701px) { .score .side { display: none; } }
@media (max-width: 700px) { .ob-score { top: calc(60px + env(safe-area-inset-top, 0px)); } .ob-score strong { font-size: 34px; } }