/* ===========================================================
   Higher or Lower — game-specific styles only.
   Chrome, buttons, #status, .hint, .stat all come from shared.css.
   =========================================================== */

/* a touch less gap than the shared default so the column feels tight */
body { gap: 16px; }

/* ---------- streak chips row ---------- */
.chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- card stage ----------
   The stage is a fixed-size frame so layout never jumps while the
   card flips. The single .card sits centred inside it. */
#stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 240px;
  /* keep the card a steady playing-card aspect ratio */
  aspect-ratio: 5 / 7;
  perspective: 1000px;
}

/* ---------- the card itself ---------- */
.card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  transform-style: preserve-3d;
  will-change: transform;
}

/* a single face (we only ever show the front; the flip is purely visual) */
.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 24px var(--shadow);
  border: 1px solid var(--border);
  backface-visibility: hidden;
}

/* the big centre rank+suit */
.pip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.8rem, 16vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
}

/* small mirrored corner labels */
.corner {
  font-size: clamp(1rem, 5vw, 1.4rem);
  font-weight: 700;
  line-height: 1;
  white-space: pre;        /* rank above suit on two lines */
  text-align: center;
}
.corner.tl { align-self: flex-start; }
.corner.br { align-self: flex-end; transform: rotate(180deg); }

/* suit colours — red ♥♦ vs. black ♠♣ (themed via tokens) */
.card.red  .pip,
.card.red  .corner { color: var(--red); }
.card.black .pip,
.card.black .corner { color: var(--text); }

/* ---------- flip animation ----------
   Added briefly when the next card is revealed, then removed. */
.card.flipping {
  animation: flip 0.45s ease;
}
@keyframes flip {
  0%   { transform: rotateY(0deg)   scale(1); }
  50%  { transform: rotateY(90deg)  scale(0.96); }
  100% { transform: rotateY(0deg)   scale(1); }
}

/* brief colour pulses on the outcome */
.card.correct { animation: flip 0.45s ease, glowGood 0.6s ease 0.45s; }
.card.wrong   { animation: flip 0.45s ease, glowBad  0.6s ease 0.45s; }
@keyframes glowGood {
  0%, 100% { box-shadow: 0 8px 24px var(--shadow); }
  40%      { box-shadow: 0 0 0 4px var(--green), 0 8px 24px var(--shadow); }
}
@keyframes glowBad {
  0%, 100% { box-shadow: 0 8px 24px var(--shadow); }
  40%      { box-shadow: 0 0 0 4px var(--red), 0 8px 24px var(--shadow); }
}

/* ---------- guess buttons ---------- */
.controls {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}
.guess {
  flex: 1;
  padding: 16px 8px;
  font-size: 1.05rem;
}
/* tint the two choices with the game palette */
#higher { background: var(--green); color: #fff; }
#lower  { background: var(--red);   color: #fff; }

/* disabled state while the reveal animation plays */
.guess:disabled { opacity: 0.45; cursor: default; }

/* ---------- new game button (hidden until a loss) ---------- */
.hidden { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 380px) {
  #stage { max-width: 200px; }
  .controls { max-width: 280px; }
}