/* The review game, for a wall.
 *
 * Deep blue and gold because that's what the room expects a Jeopardy board to
 * look like, and because it's already the H2H palette. Everything scales with
 * the viewport: the same page runs on a laptop and a projector. */
.jp {
  min-height: 100vh; padding: var(--sp-4) var(--sp-5) var(--sp-6);
  background: var(--navy-deep); color: #fff;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.jp__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.jp__group { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.jp__title { font-family: var(--font-serif); margin: .15rem 0 0; font-size: clamp(1.2rem, 2.2vw, 1.9rem); color: #fff; }
.jp__head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.jp__ghost {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  color: #eef2f8; border-radius: var(--radius); padding: .4rem .8rem;
  font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.jp__ghost:hover { background: rgba(255,255,255,.2); }

/* Five columns that fill the screen: the board is the page. */
.jp__board { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; min-height: 0; }
.jp__col { display: grid; grid-template-rows: auto repeat(5, 1fr); gap: .5rem; min-height: 0; }
.jp__cat {
  display: grid; place-items: center; text-align: center; padding: var(--sp-3) .4rem;
  background: #0b1c3a; border-radius: var(--radius);
  font-family: var(--font-serif); font-size: clamp(.8rem, 1.1vw, 1.1rem); line-height: 1.2;
  text-transform: uppercase; letter-spacing: .04em; color: var(--gold-soft);
}
.jp__cell {
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: #12305f; color: var(--gold); border-radius: var(--radius);
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 2.4rem);
  transition: transform .12s ease, background .12s ease;
}
.jp__cell:hover { background: #1a4180; transform: scale(1.03); }
/* Played cells stay in place so the board keeps its shape — they just empty. */
.jp__cell.is-played { background: #0a1730; color: transparent; cursor: default; transform: none; }

.jp__teams { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.jp__team {
  display: flex; align-items: center; gap: var(--sp-3);
  background: rgba(255,255,255,.07); border-radius: 999px; padding: .3rem .3rem .3rem var(--sp-4);
}
.jp__team-name { font-weight: 600; }
.jp__team-score { font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold); min-width: 2.5rem; text-align: right; }
.jp__team-buttons { display: flex; gap: .2rem; }
.jp__team-buttons button {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1rem; line-height: 1;
}
.jp__team-buttons button:hover { background: rgba(255,255,255,.3); }

/* The clue takes the whole screen: in a room, nothing else should compete. */
.jp__stage { position: fixed; inset: 0; background: #0b1c3a; display: grid; place-items: center; padding: var(--sp-6); z-index: 20; }
.jp__stage-inner { max-width: 62rem; width: 100%; text-align: center; }
.jp__stage-where { margin: 0 0 var(--sp-5); color: var(--gold-soft); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.jp__sep { margin: 0 .5rem; opacity: .5; }
.jp__prompt { font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 3.2rem); line-height: 1.25; margin: 0; }
/* A rotated picture is sized against the viewport's other axis, since after a
 * quarter turn its width is what you see as height. */
.jp__image-box {
  display: grid; place-items: center; margin: 0 auto var(--sp-5);
}
.jp__image { max-height: 42vh; max-width: 100%; border-radius: var(--radius-lg); }
/* Rotated: the layout width becomes the visible height, so the viewport
 * limits swap over. Generous, because this is being read across a room. */
.jp__image-box[style*="height"] .jp__image { max-height: 74vw; max-width: 52vh; }
.jp__answer {
  font-family: var(--font-serif); font-size: clamp(1.3rem, 3vw, 2.4rem);
  margin: var(--sp-6) 0 0; padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.2); color: var(--gold);
}
.jp__stage-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }
.jp__reveal {
  background: var(--gold); color: #1a1207; border: 0; border-radius: var(--radius);
  padding: .6rem 1.4rem; font: inherit; font-weight: 700; cursor: pointer;
}
.jp__daily p {
  font-family: var(--font-serif); font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--gold); margin: 0 0 var(--sp-5); letter-spacing: .04em;
}
.jp__hint { margin: var(--sp-5) 0 0; font-size: var(--text-sm); color: rgba(255,255,255,.45); }

@media (max-width: 48rem) {
  .jp__board { grid-template-columns: 1fr; }
  .jp__col { grid-template-rows: auto; grid-template-columns: auto repeat(5, 1fr); }
}

/* The same scores, beside the clue — points get awarded when the answer has
 * just been read, not after backing out to the board. */
.jp__teams--stage { justify-content: center; margin-top: var(--sp-6); }
.jp__teams--stage:empty { display: none; }

/* The team name is a field, not a prompt. */
.jp__team-name {
  font: inherit; font-weight: 600; color: #fff; background: transparent;
  border: 0; border-bottom: 1px dashed rgba(255,255,255,.3);
  padding: 0 0 .1rem; max-width: 9rem; min-width: 4rem;
}
.jp__team-name:focus { outline: none; border-bottom-color: var(--gold); }