/* The Ring of Fire table. The ring of cards itself is in site.css, because the home page draws one too. */
.ring[data-locked] .rc { opacity: .5; }
.hub {
  position: absolute;
  inset: 26%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: radial-gradient(circle at 50% 28%, #33297f, #1a1446 70%);
  border-radius: 50%;
  box-shadow: 0 7px 0 #0f0b2e, 0 0 0 7px rgba(255, 255, 255, .05), 0 30px 46px -12px rgba(0, 0, 0, .65), inset 0 2px 0 rgba(255, 255, 255, .14);
}
.hub small { font: 700 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.kings { display: flex; gap: 3px; }
.kings .icon { width: clamp(20px, 6.4vw, 28px); height: clamp(20px, 6.4vw, 28px); color: rgba(255, 255, 255, .16); transition: color .3s, transform .5s var(--spring); }
.kings .icon.on { color: var(--gold); transform: scale(1.14); }

/* Everyone in turn order, with the one whose turn it is picked out */
.strip { display: flex; gap: 6px; margin: 0; padding: 2px 0 6px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip li { flex: none; padding: 5px 14px 5px 5px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: var(--panel); border-radius: 999px; box-shadow: var(--shade); font-size: 17px; font-weight: 600; white-space: nowrap; transition: background .3s, color .3s; }
.strip .ava { width: 30px; height: 30px; font-size: 13px; }
.strip li.now { color: var(--ink); background: var(--white); box-shadow: 0 3px 0 #a79fd6; }
.standing { margin: 0; font-size: 17px; color: var(--muted); }

.reveal-card { flex: none; display: grid; place-items: center; }
.reveal-card .pc { --card-w: min(46vw, 200px); }