/*
 * Russian Roulette. The shared shell and felt (common.css), like blackjack; this adds the
 * duellists, the pot, the cylinder and the shot-by-shot log.
 */

.rr-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  overflow-y: auto;
}

.rr-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: rgba(0, 0, 0, 0.25);
  text-align: center;
}

.rr-player:empty { visibility: hidden; }

.rr-player.dead {
  border-color: var(--lose);
  opacity: 0.75;
}

.rr-player.won { border-color: var(--win); }

.rr-player.dead .avatar { filter: grayscale(1); }

.rr-player .avatar {
  width: 56px;
  height: 56px;
}

.rr-name {
  font-weight: 700;
  font-size: 15px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 150px;
}

.rr-gif {
  width: 150px;
  border-radius: 8px;
}

.rr-stake {
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.rr-pot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rr-pot:empty { display: none; }

.rr-caption {
  margin: 0;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  max-width: 220px;
}

/* Shot-by-shot record under the cylinder. */
.rr-log {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
  max-height: 120px;
  overflow-y: auto;
}

.rr-log li.bang {
  color: var(--lose);
  font-weight: 700;
}

.rr-log:empty { display: none; }

/* The cylinder: six chambers set round a circle, turned one chamber per pull survived. */
.rr-cylinder {
  --turn: 0;
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #4a4a4a 0%, #262626 70%, #161616 100%);
  box-shadow: inset 0 0 0 3px #555, 0 6px 18px rgba(0, 0, 0, 0.5);
  transform: rotate(calc(var(--turn) * -60deg));
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.rr-cylinder:empty { display: none; }

.chamber {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  transform: rotate(calc(var(--i) * 60deg)) translateY(-34px);

  /* Unknown: dark, as a loaded or empty chamber both look from outside. */
  background: radial-gradient(circle, #111 0%, #000 70%);
  box-shadow: inset 0 0 0 2px #6b6b6b;
}

.chamber.spent {
  background: #2c2c2c;
  box-shadow: inset 0 0 0 2px #444;
  opacity: 0.55;
}

.chamber.fired {
  background: radial-gradient(circle, #ffd27a 0%, #e0564f 55%, #7a1111 100%);
  box-shadow: 0 0 14px #e0564f;
}

/* The duels to pick from, across the top of the stage. */
.rr-duels {
  grid-column: 1 / -1;
  justify-self: center;
  flex-wrap: wrap;
  border-radius: 14px;
  max-width: 100%;
}

.rr-duels:empty { display: none; }

.rr-double-row { margin-bottom: 8px; }
.rr-double-row .button { flex: 1 1 auto; }

/* Starting a duel: search, bet, go - and who the search found, underneath. */
.rr-new-row { flex-wrap: nowrap; }
.rr-search { flex: 1 1 auto; }
.rr-bet { flex: 0 0 96px; font-variant-numeric: tabular-nums; }

.rr-results {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rr-results:empty { display: none; }

.rr-result {
  appearance: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  max-width: 100%;
}

.rr-result span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-result .rr-result-chips {
  color: var(--gold);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* One-shot reactions: a pale blink for an empty chamber, a red flash and a jolt for the other. */
.rr-stage.flash-clink { animation: rr-clink 0.35s ease-out; }
.rr-stage.flash-bang { animation: rr-bang 0.7s ease-out; }

@keyframes rr-clink {
  0% { background: rgba(255, 255, 255, 0.12); }
  100% { background: transparent; }
}

@keyframes rr-bang {
  0% { background: color-mix(in srgb, var(--lose) 75%, transparent); transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(2px); }
  100% { background: transparent; transform: none; }
}

@media (max-width: 460px) {
  .rr-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "duels duels"
      "center center"
      "target challenger";
  }

  .rr-new-row { flex-wrap: wrap; }
  .rr-search { flex-basis: 100%; }
  .rr-bet { flex: 1 1 auto; }

  .rr-duels { grid-area: duels; }
  .rr-center { grid-area: center; }
  #rr-target { grid-area: target; }
  #rr-challenger { grid-area: challenger; }
}