/* ==========================================================================
   High-Low — builds on common.css tokens
   ========================================================================== */
:root {
  --card-face: #f3f1e8;
  --card-ink: #14130f;
  --card-red: #b3122a;
}

body { padding-bottom: 178px; }

.board-wrap { max-width: 560px; margin: 0 auto; padding: 6px 14px; text-align: center; }
.board-title { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }

.hilo-stage {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: 24px 0 26px; perspective: 700px;
}
.hilo-arrow { font-size: 22px; color: var(--gold); opacity: 0.7; }

.hilo-card {
  width: 108px; height: 150px;
  background: var(--card-face);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: transform 0.35s ease, opacity 0.35s ease;
  backface-visibility: hidden;
}
.hilo-card.hidden { opacity: 0.25; transform: scale(0.92); }
.hilo-card.flip-in { animation: hiloFlipIn 0.4s ease; }
@keyframes hiloFlipIn {
  0% { transform: rotateY(90deg) scale(0.9); opacity: 0.2; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.hilo-rank { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--card-ink); line-height: 1; }
.hilo-suit { font-size: 28px; color: var(--card-ink); }
.hilo-card.red .hilo-rank, .hilo-card.red .hilo-suit { color: var(--card-red); }

.hilo-card.flash-win { animation: hiloWin 0.9s ease; }
.hilo-card.flash-lose { animation: hiloLose 0.9s ease; }
@keyframes hiloWin { 0% { box-shadow: 0 0 0 0 rgba(79,174,124,0.9); } 50% { box-shadow: 0 0 0 12px rgba(79,174,124,0); } 100% { box-shadow: 0 0 0 0 rgba(79,174,124,0); } }
@keyframes hiloLose { 0% { box-shadow: 0 0 0 0 rgba(192,82,63,0.9); } 50% { box-shadow: 0 0 0 12px rgba(192,82,63,0); } 100% { box-shadow: 0 0 0 0 rgba(192,82,63,0); } }

.outcome-box {
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3);
  font-size: 13px; font-weight: 700; text-align: center; padding: 10px 14px;
  border-radius: 10px; display: none; margin-top: 6px;
}

.hilo-guess { flex: 1; }

@media (max-width: 420px) {
  .hilo-card { width: 92px; height: 130px; }
  .hilo-rank { font-size: 32px; }
  .hilo-suit { font-size: 22px; }
}