/* Jeopardy Studio — showtime: the board's opening, clue text and media, clocks, score pops, settings */

/* ---------- the board's opening: values light up one by one, categories revealed in turn ---------- */
.opening-wrap { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.opening-bar { display: flex; justify-content: center; align-items: center; gap: 12px; }
.opening-bar kbd { margin-left: 8px; opacity: 0.7; }
.board.opening .tile { animation: none; color: transparent; text-shadow: none; filter: brightness(0.55) saturate(0.8); }
.board.opening .tile.tile-lit,
.board.opening.lit .tile {
  color: var(--gold); filter: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 199, 61, 0.3);
}
.board.opening .tile.tile-lit { animation: tile-light 0.35s var(--ease-out); }
@keyframes tile-light {
  0% { filter: brightness(2.2); transform: scale(0.94); }
  100% { filter: none; transform: none; }
}
.cat-cell.cat-hidden {
  color: transparent; text-shadow: none;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(74, 99, 255, 0.25), transparent 70%),
    linear-gradient(180deg, #0f1538, #0a0e29);
}
.cat-cell.cat-hidden::after {
  content: '$'; font-family: var(--f-display); font-size: clamp(16px, 2vw, 30px); color: rgba(255, 199, 61, 0.22);
}
.cat-cell.cat-reveal { animation: cat-reveal 0.6s var(--ease-out); }
@keyframes cat-reveal {
  0% { transform: scale(1.9); opacity: 0; filter: blur(6px); }
  60% { opacity: 1; filter: none; }
  100% { transform: none; }
}

/* ---------- a clue's picture or sound ---------- */
.clue-media { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; max-height: 58%; }
.clue-media:empty { display: none; }
.clue-media img {
  max-width: min(100%, 1400px); max-height: 100%; min-height: 0; object-fit: contain;
  border-radius: var(--r-md); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: prompt-in 0.55s var(--ease-out) backwards;
}

/* ---------- ring clocks: the Final's think clock and the optional answer clock ---------- */
.ring-clock {
  --p: 1;
  position: absolute; right: clamp(14px, 3vw, 40px); bottom: clamp(110px, 18vh, 200px);
  width: clamp(64px, 7vw, 120px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.1) 0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 199, 61, 0.2);
  animation: fade-in 0.4s;
}
.ring-clock span {
  width: 80%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: #070b3a; font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 46px); color: var(--ink);
}
.ring-clock.done { background: rgba(255, 85, 102, 0.35); }
.ring-clock.done span { color: var(--bad); }

/* ---------- scores: a floating +/- on each change ---------- */
.score-card { position: relative; }
.score-pop {
  position: absolute; right: 12px; top: -8px; pointer-events: none;
  font-family: var(--f-display); font-size: clamp(16px, 1.8vw, 28px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  animation: score-pop 1.6s var(--ease-out) forwards;
}
.score-pop.up { color: var(--ok); }
.score-pop.down { color: var(--bad); }
@keyframes score-pop {
  0% { transform: translateY(10px) scale(0.6); opacity: 0; }
  15% { transform: translateY(-10px) scale(1.15); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-42px); opacity: 0; }
}

/* ---------- the pointer hides while the mouse rests in a game ---------- */
body.idle, body.idle * { cursor: none !important; }

/* ---------- settings ---------- */
.settings-modal { max-width: 520px; }
.settings-modal .set-group { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.settings-modal .set-head { font-family: var(--f-cond); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; color: var(--gold); }
.settings-modal .set-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.settings-modal .set-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }
.settings-modal .set-line { justify-content: space-between; flex-wrap: wrap; }
.settings-modal .set-line input[type="range"] { flex: 1; max-width: 260px; accent-color: var(--gold); }
.settings-modal .set-seg { display: flex; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .board.opening .tile.tile-lit, .cat-cell.cat-reveal, .score-pop, .clue-media img { animation: none; }
}

/* the board never grows wider than its screen (a column's $1,000 used to push the 6th off a phone) */
.board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.board .tile, .board .cat-cell { min-width: 0; overflow: hidden; }
.opening-wrap { min-width: 0; }
@media (max-width: 700px) {
  .opening-bar .btn-big { font-size: 15px; padding: 10px 16px; }
  .board .tile { font-size: clamp(11px, 3.6vw, 18px); }
}
@media (pointer: coarse) {
  .opening-bar kbd { display: none; }
}