/* Higher or Lower, the player's phone: the bet screen (countdown, card, Higher / Lower, Lock in), "Locked in",
   the round result (win / lose / push), the between-match and game-over panels. Built on the player shell
   (20_player_shell.css) and matched to the "Higher or Lower" phone design. */

.gtf-cards__play {
  --cards-amber: oklch(0.78 0.16 70);
}

.gtf-cards__title {
  margin: 24px 0 6px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.gtf-cards__lede {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--gtf-text-2);
}

/* ---------- Bet ---------- */

.gtf-cards__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 8px;

  & .gtf-cards__title {
    margin: 0;
  }
}

.gtf-cards__clock {
  font-family: var(--gtf-mono);
  font-size: 36px;
  line-height: 1;

  &.is-low {
    color: var(--gtf-orange);
  }
}

.gtf-cards__bar {
  height: 8px;
  margin-bottom: 20px;
  border-radius: 4px;
  background: var(--gtf-surface-2);
}

.gtf-cards__bar-fill {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--cards-amber);
}

.gtf-cards__rules {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;

  & .gtf-cards__lede {
    margin: 0;
  }
}

.gtf-cards__picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.gtf-cards__pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  gap: 4px;
  border: 3px solid var(--gtf-surface-4);
  border-radius: 12px;
  background: var(--gtf-surface-2);
  font: inherit;
  color: var(--gtf-cream);
  cursor: pointer;

  &.selected {
    border-color: var(--cards-amber);
    background: var(--cards-amber);
    color: var(--gtf-ink);
  }

  &:disabled:not(.selected) {
    opacity: 0.4;
    cursor: default;
  }

  &:disabled {
    cursor: default;
  }
}

.gtf-cards__pick-arrow {
  font-size: 40px;
  line-height: 1;
}

.gtf-cards__pick-label {
  font-size: 24px;
  font-weight: 900;
}

.gtf-cards__pick-hint {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
}

.gtf-cards__status {
  min-height: 1.5em;
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--gtf-text-2);
}

/* ---------- Cards ---------- */

.gtf-cards__card {
  flex: none;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 22px oklch(0 0 0 / 0.35);
}

.gtf-cards__card--lg { width: 96px; }
.gtf-cards__card--sm { width: 72px; }

/* The cream rank-and-suit card, for when there is no card image */
.gtf-cards__card--face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  background: var(--gtf-cream);
  color: var(--gtf-ink);

  &.is-red { color: oklch(0.55 0.21 27); }
}

.gtf-cards__rank {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.gtf-cards__suit {
  font-size: 34px;
  line-height: 1;
}

.gtf-cards__card--sm.gtf-cards__card--face {
  & .gtf-cards__rank { font-size: 38px; }
  & .gtf-cards__suit { font-size: 26px; }
}

/* The next card, face down */
.gtf-cards__mystery {
  display: grid;
  aspect-ratio: 2 / 3;
  place-items: center;
  border: 3px solid var(--cards-amber);
  background: repeating-linear-gradient(45deg, var(--gtf-surface-2) 0 8px, var(--gtf-ink-hover) 8px 16px);
  box-sizing: border-box;
  font-size: 40px;
  font-weight: 900;
  color: var(--cards-amber);
}

/* ---------- Panels: locked, result, between matches, game over ---------- */

.gtf-cards__panel {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  padding: 28px 16px 30px;
  border: 2px solid var(--gtf-surface-2);
  border-radius: 12px;
  background: var(--gtf-ink);
}

.gtf-cards__panel--row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.gtf-cards__panel--column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.gtf-cards__panel--win { border-color: var(--gtf-success); }
.gtf-cards__panel--lose { border-color: var(--gtf-orange); }
.gtf-cards__panel--push,
.gtf-cards__panel--final { border-color: var(--cards-amber); }

.gtf-cards__arrow {
  font-size: 36px;
  color: var(--cards-amber);
}

.gtf-cards__duel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.gtf-cards__old {
  display: flex;
  opacity: 0.6;
}

.gtf-cards__flip {
  perspective: 600px;

  & .gtf-cards__card {
    backface-visibility: hidden;
    animation: gtf-cards-flip 0.7s ease-out 0.2s both;
  }

  &.is-shaking {
    animation: gtf-cards-shake 0.6s ease-out 0.9s;
  }
}

.gtf-cards__verdict {
  position: relative;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  animation: gtf-cards-pop 0.4s ease-out 0.9s both;

  .gtf-cards__panel--win & { color: var(--gtf-success); }
  .gtf-cards__panel--lose & { color: var(--gtf-orange); }
  .gtf-cards__panel--push &,
  .gtf-cards__panel--final & { color: var(--cards-amber); }
}

.gtf-cards__big {
  position: relative;
  font-family: var(--gtf-mono);
  font-size: 52px;
  line-height: 1;
  animation: gtf-cards-rise 0.5s ease-out 1.1s both;

  .gtf-cards__panel--win & { color: var(--gtf-success); }
  .gtf-cards__panel--lose & { color: var(--gtf-orange); }
  .gtf-cards__panel--push & { color: var(--cards-amber); }

  &.gtf-cards__big--amber {
    color: var(--cards-amber);
    animation-delay: 0.2s;
  }
}

.gtf-cards__sub {
  position: relative;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gtf-cream);
  animation: gtf-cards-rise 0.5s ease-out 1.3s both;

  .gtf-cards__panel--lose &,
  .gtf-cards__panel--final & { color: var(--gtf-text-2); }

  .gtf-cards__big--amber + & { animation-delay: 0.4s; }
  .gtf-cards__sub + & { animation-delay: 0.6s; }
}

.gtf-cards__title--pop {
  margin: 0;
  animation: gtf-cards-pop 0.4s ease-out both;
}

/* Out since an earlier round: nothing to animate each time the screen refreshes */
.gtf-cards__panel--still {
  & .gtf-cards__big,
  & .gtf-cards__sub {
    animation: none;
  }
}

/* Falling coins on a win */
.gtf-cards__coins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gtf-cards__coin {
  position: absolute;
  top: 0;
  aspect-ratio: 1;
  border: 3px solid oklch(0.62 0.13 80);
  border-radius: 50%;
  background: oklch(0.82 0.15 95);
  box-sizing: border-box;
  opacity: 0;
  animation: gtf-cards-coinfall 2s ease-in 1s infinite;

  &:nth-child(1) { left: 2%; width: 16px; animation-duration: 1.8s; animation-delay: 1s; }
  &:nth-child(2) { left: 39%; width: 23px; animation-duration: 2.2s; animation-delay: 2.3s; }
  &:nth-child(3) { left: 76%; width: 18px; animation-duration: 2.6s; animation-delay: 1.6s; }
  &:nth-child(4) { left: 21%; width: 25px; animation-duration: 3s; animation-delay: 2.9s; }
  &:nth-child(5) { left: 58%; width: 20px; animation-duration: 1.8s; animation-delay: 2.2s; }
  &:nth-child(6) { left: 3%; width: 27px; animation-duration: 2.2s; animation-delay: 1.5s; }
  &:nth-child(7) { left: 40%; width: 22px; animation-duration: 2.6s; animation-delay: 2.8s; }
  &:nth-child(8) { left: 77%; width: 17px; animation-duration: 3s; animation-delay: 2.1s; }
  &:nth-child(9) { left: 22%; width: 24px; animation-duration: 1.8s; animation-delay: 1.4s; }
  &:nth-child(10) { left: 59%; width: 19px; animation-duration: 2.2s; animation-delay: 2.7s; }
  &:nth-child(11) { left: 4%; width: 26px; animation-duration: 2.6s; animation-delay: 2s; }
  &:nth-child(12) { left: 41%; width: 21px; animation-duration: 3s; animation-delay: 1.3s; }
  &:nth-child(13) { left: 78%; width: 16px; animation-duration: 1.8s; animation-delay: 2.6s; }
  &:nth-child(14) { left: 23%; width: 23px; animation-duration: 2.2s; animation-delay: 1.9s; }
}

@keyframes gtf-cards-flip {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0); }
}

@keyframes gtf-cards-rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes gtf-cards-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes gtf-cards-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}

@keyframes gtf-cards-coinfall {
  0% { transform: translateY(-40px) rotateY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(360px) rotateY(720deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gtf-cards__flip .gtf-cards__card,
  .gtf-cards__flip.is-shaking,
  .gtf-cards__verdict,
  .gtf-cards__big,
  .gtf-cards__sub,
  .gtf-cards__title--pop {
    animation-duration: 0.01s;
    animation-delay: 0s;
    animation-iteration-count: 1;
  }

  .gtf-cards__coins {
    display: none;
  }
}