/*
 * Joe's Coffee Run — Flappy-style styles (loads after joe-games.css).
 * Cream #FAF3E7, maroon #7B2D26, gold #C98A2D, charcoal #2B2320.
 * Headings: Rokkitt. Body: Nunito Sans. All classes prefixed jc-.
 *
 * Container-relative sizing throughout (the v1.0.2 rule): the stage is
 * width: 100% of the game card (capped at 520px) and the canvas keeps
 * its 480x360 shape with aspect-ratio — never viewport units — so the
 * game fits a 320px phone with no horizontal overflow. Shared pieces
 * (.jg-game card, .jg-btn, .joe-nickname-bar, .jg-lb-title) come from
 * joe-games.css.
 */

/* ---------- HUD: score / coffees / best ---------- */

.jc-hud {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 6px;
  width: 100%;
  max-width: 520px;
}

.jc-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: #FFF9EF;
  border: 1px solid #e0d0ab;
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 0.75rem;
  color: #5c5148;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jc-stat strong {
  display: block;
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.3rem;
  color: #7B2D26;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- caffeine flair line ---------- */

.jc-flair {
  min-height: 1.4em;
  text-align: center;
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #C98A2D;
  margin: 2px 0 6px;
}

/* ---------- stage, canvas, overlays ---------- */

.jc-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.jc-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 2px solid #7B2D26;
  border-radius: 12px;
  background: #FDF6E3;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* Both overlays let taps fall through to the canvas (tap = flap /
 * start / restart); only the Play Again button takes clicks. */
.jc-start,
.jc-end {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  pointer-events: none;
}

.jc-start { background: rgba(250, 243, 231, 0.88); }

.jc-start[hidden],
.jc-end[hidden] { display: none; }

.jc-start-title {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #7B2D26;
  margin: 0 0 8px;
}

.jc-start-line {
  font-weight: 700;
  color: #2B2320;
  margin: 0 0 10px;
  max-width: 340px;
}

.jc-start-hint {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9A6A1F;
  margin: 0;
}

.jc-end { background: rgba(43, 35, 32, 0.45); }

.jc-final {
  font-weight: 700;
  font-size: 1.05rem;
  color: #FAF3E7;
  text-shadow: 0 1px 3px rgba(43, 35, 32, 0.8);
  margin: 0 0 6px;
}

.jc-joe-line {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.2rem;
  color: #FAF3E7;
  text-shadow: 0 1px 3px rgba(43, 35, 32, 0.8);
  margin: 0 0 12px;
  max-width: 360px;
}

.jc-end .jc-again { pointer-events: auto; }

/* ---------- keys hint ---------- */

.jc-keys {
  text-align: center;
  font-size: 0.8rem;
  color: #5c5148;
  margin: 8px 0 0;
}

/* ---------- small screens ---------- */

@media (max-width: 400px) {
  .jc-stat strong { font-size: 1.1rem; }
  .jc-flair { font-size: 0.98rem; }
  .jc-start-title { font-size: 1.4rem; }
  .jc-start-line { font-size: 0.92rem; }
  .jc-joe-line { font-size: 1.05rem; }
}