/* The bar that says a newer version is live (reload.js). In the top layer, so it stands over a full-screen session as well. */
.update-bar { position: fixed; inset: max(10px, env(safe-area-inset-top)) auto auto 50%; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); font-size: 14px; }
.update-bar button { min-height: 36px; padding: 0 16px; border-radius: 999px; }

/* The reload icon in the header, just left of his medallion (Chris, 25 Oct): a round glass button of the medallion's size, a circling arrow. */
.reload-top { flex: none; margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; }
.reload-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.reload-top:hover, .reload-top:focus-visible { color: var(--gold); border-color: var(--gold); }
.reload-top.spinning svg { animation: reload-spin .6s ease-in-out; }
@keyframes reload-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reload-top.spinning svg { animation: none; } }
/* The medallion's spot follows it closely, wherever the header puts the two. */
.reload-top ~ .mine-spot, .reload-top ~ .mine-open { margin-left: 10px; }
html.yacht3d body.in-room .reload-top ~ .mine-open.pinned, html.yacht3d body.in-room .reload-top ~ .mine-open.pinned.unplaced { margin-left: 10px; }
@media (min-width: 1000px) { .top .reload-top { align-self: flex-start; margin-top: 6px; } }
html.yacht3d body.in-room .reload-top { margin-top: 8px; }
body:has(#detail.fill[open]) .reload-top { display: none; }