/* Trivia (/games/trivia/). Loaded after games.css, so it reuses the gm- head, pill and box.
   Every class starts with tv-. Phone first; wider screens put the photo and the question side
   by side. Motion is off under prefers-reduced-motion. */

.tv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tv-chip { font: 600 12px var(--mono); padding: 5px 11px; border-radius: 999px; background: var(--sunk); color: var(--txt-2); }
.tv-h { font-size: 18px; grid-column: 1 / -1; }
.tv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tv-next { color: var(--txt-2); margin: 0; }
.tv-next b { font: 600 15px var(--mono); color: var(--txt-hi); }
.tv-done { max-width: 560px; }

/* today's set */
.tv-date { margin: 0 0 4px; font: 600 13px var(--mono); color: var(--grape); }
.tv-cc { font: 600 12px var(--ui); padding: 5px 12px; border-radius: 999px; color: var(--grape); border: 1px solid var(--grape); background: transparent; }
.tv-go { margin: 18px 0 0; }
.tv-start { min-height: 52px; padding: 0 28px; font-size: 16px; }
.tv-guest { margin-top: 14px; }
.tv-photo figcaption .tv-catchip { background: var(--grape); }
.tv-stats.tv-cats-res { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* the question */
.tv { display: grid; gap: 14px; margin-top: 12px; }
.tv-top { display: flex; align-items: center; gap: 12px; }
.tv-dots { display: flex; gap: 4px; flex: 1; }
.tv-dots i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.tv-dots i.ok { background: var(--ok); } .tv-dots i.no { background: var(--danger); } .tv-dots i.now { background: var(--grape); }
.tv-num { font: 600 12px var(--mono); color: var(--txt-3); white-space: nowrap; }
.tv-body { display: grid; gap: 14px; }
.tv-photo { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--sunk); aspect-ratio: 2 / 1; box-shadow: 0 10px 24px var(--shadow); }
.tv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-photo figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.tv-photo figcaption span { font: 600 11px var(--mono); padding: 4px 9px; border-radius: 999px; background: rgba(15, 19, 34, .78); color: #fff; }
.tv-side { display: grid; gap: 12px; align-content: start; }
.tv-q { font: 700 19px/1.3 var(--display); color: var(--txt-hi); margin: 0; }
.tv-clock { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; }
.tv-ring { --p: 1; position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--aqua) calc(var(--p) * 360deg), var(--line) 0); }
.tv-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--card); }
.tv-ring b { position: relative; font: 800 22px var(--display); color: var(--txt-hi); font-variant-numeric: tabular-nums; }
.tv-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.tv-bar i { display: block; height: 100%; background: var(--aqua); transform-origin: left; }
.tv-msg { grid-column: 1 / -1; margin: 0; min-height: 18px; font: 600 12px var(--mono); color: var(--txt-2); }
.tv-opts { display: grid; gap: 8px; }
.tv-opts.wait .tv-opt { visibility: hidden; }
.tv-opt { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; text-align: left; font: 600 16px/1.3 var(--ui); color: var(--txt-hi); cursor: pointer; border: 0; border-radius: var(--r2); background: var(--card); box-shadow: 0 4px 0 var(--line), 0 6px 14px var(--shadow); transition: transform .15s, background .2s, opacity .3s; }
.tv-opt .k { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 700 15px var(--display); color: #fff; background: var(--tang-ink); }
.tv-opt:nth-child(2) .k { background: var(--aqua-ink); } .tv-opt:nth-child(3) .k { background: var(--grape); } .tv-opt:nth-child(4) .k { background: var(--rose); }
:root[data-theme="dark"] .tv-opt .k { color: var(--on-hi); }
.tv-opt:hover:not(:disabled) { transform: translateY(-2px); }
.tv-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.tv-opt:disabled { cursor: default; }
.tv-opt.right { background: var(--ok-bg); box-shadow: 0 4px 0 var(--ok); animation: tv-pop .45s ease; }
.tv-opt.wrong { background: var(--danger-bg); box-shadow: 0 4px 0 var(--danger); animation: tv-shake .35s; }
.tv-opt.dim { opacity: .5; }
@keyframes tv-pop { 50% { transform: scale(1.03); } }
@keyframes tv-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* the results */
.tv-res { display: grid; gap: 14px; margin-top: 12px; }
.tv-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-radius: var(--r); color: #fff; background: linear-gradient(135deg, #3644d6, #232f9e); }
.tv-hero > div:first-child { display: grid; gap: 2px; }
.tv-big { font: 800 52px/1 var(--display); letter-spacing: -.02em; }
.tv-hero span { font-size: 14px; opacity: .92; }
.tv-medal { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 22px var(--display); color: var(--sun-on); background: radial-gradient(circle at 35% 30%, #fff3b0, var(--sun) 45%, #d9a600); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 8px 18px rgba(0, 0, 0, .25); }
.tv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tv-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 10px 12px; }
.tv-stat b { display: block; font: 700 20px var(--display); color: var(--txt-hi); font-variant-numeric: tabular-nums; }
.tv-stat small { font-size: 12px; color: var(--txt-3); }
.tv-signin { display: block; margin: 0; }
.tv-rev { list-style: none; margin: 0; padding: 4px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); }
.tv-rv { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; }
.tv-rv + .tv-rv { border-top: 1px solid var(--line); }
.tv-rv img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.tv-rv > div { display: grid; gap: 2px; font-size: 14px; }
.tv-rv b { color: var(--txt-hi); }
.tv-rv span { color: var(--txt-2); }
.tv-rv em { font: 700 13px var(--mono); font-style: normal; }
.tv-rv.ok em { color: var(--ok); } .tv-rv.no em { color: var(--danger); }

@media (min-width: 720px) {
  .tv-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .tv-photo { aspect-ratio: auto; min-height: 340px; height: 100%; }
  .tv-opts { gap: 10px; }
  .tv-q { font-size: 22px; }
  .tv-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tv-opt { transition: none; }
  .tv-opt.right, .tv-opt.wrong { animation: none; }
}