/*
 * The coin flip.
 *
 * Same furniture as the wheel, arranged around a different question: on the
 * wheel you watch one strip and everyone shares it, here every row is its own
 * game between two people, so the row has to read at a glance as who, how
 * much, and whether you can still get in.
 *
 * The coin is a real two sided disc turned in 3D. It spins while the game is
 * counting down and stops on the face that won, which is the whole of the
 * animation: no confetti, no shaking, nothing that would make a loss feel
 * like a bug.
 */

/*
 * The coin wears the wheel's colours: green for Solana, blue for Robinhood.
 * The old CT and T names are kept as aliases for a page that has not been
 * reloaded since they were renamed.
 */
:root {
  --ct: var(--solana);
  --t: var(--robinhood);
}

/* --------------------------------------------------------------- the views */

.views {
  display: flex;
  gap: 4px;
  margin-left: 18px;
}

.view-tab {
  height: 34px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 120ms ease,
    background 120ms ease;
}

.view-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.view-tab.is-on {
  color: var(--text);
  background: #16243c;
  border-color: var(--line-2);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.view[hidden] {
  display: none;
}

/* -------------------------------------------------------------- the create */

.flip-create,
.flip-lobby,
.flip-history {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.flip-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.flip-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flip-fine {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint);
}

.flip-create-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.side-pick {
  display: flex;
  gap: 8px;
}

.side-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #0b1424;
  color: var(--text-dim);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    color 120ms ease,
    background 120ms ease;
}

.side-choice:hover {
  color: var(--text);
}

.side-choice.solana.is-on {
  color: #c9f7dc;
  border-color: var(--solana);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04));
}

.side-choice.robinhood.is-on {
  color: #cfe2ff;
  border-color: var(--robinhood);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.04));
}

/* ------------------------------------------------------------------ a face */

.flip-face {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: radial-gradient(circle at 50% 30%, #182a45, #070c15);
}

.flip-face svg {
  width: 58%;
  height: 58%;
}

.flip-face.solana,
.flip-face.ct {
  color: var(--solana);
}

.flip-face.robinhood,
.flip-face.t {
  color: var(--robinhood);
}

.flip-face img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  border-radius: 50%;
}

/* ------------------------------------------------------------------ lobby */

.flip-list,
.flip-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 150px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.flip-row:last-child {
  border-bottom: 0;
}

.flip-row.is-mine {
  box-shadow: inset 2px 0 0 var(--gold);
}

.flip-row.is-locked {
  background: rgba(63, 140, 255, 0.04);
}

.flip-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.flip-player:last-of-type {
  flex-direction: row-reverse;
  text-align: right;
}

.flip-player.empty {
  opacity: 0.55;
}

.flip-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flip-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flip-side {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flip-side.solana {
  color: var(--solana);
}

.flip-side.robinhood {
  color: var(--robinhood);
}

.flip-slot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px dashed var(--line-2);
}

.flip-waiting {
  font-size: 13px;
  color: var(--text-faint);
}

.flip-middle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flip-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.flip-pot-value {
  font-size: 16px;
  font-weight: 600;
}

.flip-pot-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.flip-action {
  display: flex;
  justify-content: flex-end;
}

.flip-countdown {
  font-size: 15px;
  color: var(--gold);
}

.flip-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--text-faint);
}

.flip-empty.small {
  padding: 12px;
  font-size: 12px;
}

/* ------------------------------------------------------------- the coin */

.flip-coin {
  width: 46px;
  height: 46px;
  perspective: 500px;
}

/* A span is inline until told otherwise, and an inline box has no height. */
.flip-coin-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.flip-coin .flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-coin .flip-face.back {
  transform: rotateY(180deg);
}

.flip-coin.is-spinning .flip-coin-inner {
  animation: coin-turn 700ms linear infinite;
}

/*
 * Landing is a fixed half turn.
 *
 * The front face is the side the creator took, so stopping at zero or at half
 * a turn shows the side that actually won, whichever pair of markets the coin
 * happens to be carrying.
 */
.flip-coin.is-landed.landed-front .flip-coin-inner {
  animation: none;
  transform: rotateY(0deg);
}

.flip-coin.is-landed.landed-back .flip-coin-inner {
  animation: none;
  transform: rotateY(180deg);
}

@keyframes coin-turn {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-coin.is-spinning .flip-coin-inner {
    animation-duration: 2.4s;
  }
}

/* ----------------------------------------------------------- the history */

.flip-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

.flip-past {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #0b1424;
  font-size: 12px;
}

.flip-past .flip-face {
  width: 22px;
  height: 22px;
  border-width: 1px;
}

.flip-past.solana {
  border-color: rgba(34, 197, 94, 0.4);
}

.flip-past.robinhood {
  border-color: rgba(59, 130, 246, 0.4);
}

/* ---------------------------------------------------------- narrow glass */

@media (max-width: 900px) {
  .flip-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .flip-action {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .flip-action .button {
    width: 100%;
  }

  .views {
    margin-left: 8px;
  }

  .view-tab {
    padding: 0 10px;
    font-size: 15px;
  }
}

/* ==========================================================================
 * Playing the house
 *
 * An opponent that is always there, at odds that are not even. The control
 * carries the number rather than a footnote, and the row it produces looks
 * like any other row so that nothing about it is quietly different.
 */

.flip-house {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0b1424;
  cursor: pointer;
}

.flip-house[hidden] {
  display: none;
}

.flip-house input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}

.flip-house-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.flip-house-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flip-house-note {
  font-size: 12px;
  color: var(--text-faint);
}

.flip-player.house .flip-name {
  color: var(--gold);
}

.house-mark {
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-dark);
  border-style: solid;
  color: var(--gold);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  background: rgba(245, 185, 66, 0.08);
}