/*
 * Joe's Jam Session — match-3 styles (loads after joe-games.css).
 * Cream #FAF3E7, maroon #7B2D26, gold #C98A2D, charcoal #2B2320.
 * Headings: Rokkitt. Body: Nunito Sans. All classes prefixed jj-.
 *
 * Container-relative sizing throughout (the v1.0.2 rule): the board is
 * width: 100% of the game card with 1fr grid columns and aspect-ratio
 * tiles — never viewport units — so an 8-wide board 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 / moves / best ---------- */

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

.jj-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;
}

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

/* ---------- flair + message lines ---------- */

.jj-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;
}

.jj-message {
  min-height: 1.4em;
  text-align: center;
  font-weight: 700;
  color: #9A3B26;
  margin: 8px 0 10px;
}

/* ---------- board + tiles ---------- */

.jj-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.jj-board.jj-shake { animation: jj-shake 0.28s ease-in-out; }

@keyframes jj-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

.jj-tile {
  aspect-ratio: 1 / 1;
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(43, 35, 32, 0.18);
  border-radius: 10px;
  padding: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
}

/* Pantry tile colors — one per type (order matches TILE_DEFS in JS). */
.jj-t0 { background: #7D5BA6; }  /* jam jar — grape */
.jj-t1 { background: #C73E4E; }  /* strawberry — crimson */
.jj-t2 { background: #F0BE3C; }  /* corn — bright gold */
.jj-t3 { background: #FBF6E9; border-color: #D8C9A3; }  /* egg — shell cream */
.jj-t4 { background: #E4572E; }  /* tomato — orange-red */
.jj-t5 { background: #B97F2E; }  /* honey — deep amber */

.jj-tile.jj-selected {
  box-shadow: 0 0 0 3px #C98A2D, 0 0 0 5px #7B2D26;
  transform: scale(1.07);
  z-index: 1;
}

.jj-tile.jj-hint { animation: jj-pulse 0.5s ease-in-out 2; }

@keyframes jj-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 138, 45, 0); }
  50% { box-shadow: 0 0 0 4px #C98A2D; transform: scale(1.08); }
}

.jj-tile.jj-clearing { animation: jj-pop 0.23s ease-in forwards; }

@keyframes jj-pop {
  40% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(0.6); opacity: 0; }
}

.jj-tile.jj-fall { animation: jj-fall 0.18s ease-out; }

@keyframes jj-fall {
  from { transform: translateY(-10px); opacity: 0.35; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- controls + end panel ---------- */

.jj-controls {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.jj-controls .jj-start { flex: 1; }

.jj-controls .jj-hint { flex: 0 0 auto; }

.jj-controls .jj-hint:disabled { opacity: 0.45; cursor: default; }

.jj-end { text-align: center; margin-top: 14px; }

.jj-end[hidden] { display: none; }

.jj-final { font-weight: 700; margin: 0 0 6px; }

.jj-joe-line {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.15rem;
  color: #7B2D26;
  margin: 0 0 10px;
}

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

@media (max-width: 400px) {
  .jj-board { gap: 4px; }
  .jj-tile { font-size: 1.15rem; border-radius: 8px; }
  .jj-stat strong { font-size: 1.1rem; }
  .jj-flair { font-size: 0.98rem; }
}