/* Trivia's shared look: theme colours, the four answer tiles, the countdown and
   the podium. Used by board.html (TV), player.html (phone) and home.html, on top
   of /shared.css. */

:root {
  --tv-bg: #46178f;
  --tv-bg-light: #6a2fc4;
  --tv-bg-dark: #1e0a4a;
  /* the four answers, always in this order: red ▲, blue ◆, yellow ●, green ■ */
  --opt-0: #e21b3c;
  --opt-1: #1368ce;
  --opt-2: #d89e00;
  --opt-3: #26890c;
  --good: #2fbf71;
  --bad: #e5484d;
}

.hidden { display: none !important; }

/* ===================================================================== */
/* Answer tiles                                                          */
/* ===================================================================== */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt {
  --c: var(--opt-0);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  background: var(--c);
  color: #fff;
  border-radius: 12px;
  padding: 0.8em 1em;
  font-weight: 800;
  text-align: left;
  line-height: 1.25;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.opt.o0 { --c: var(--opt-0); }
.opt.o1 { --c: var(--opt-1); }
.opt.o2 { --c: var(--opt-2); }
.opt.o3 { --c: var(--opt-3); }
.opt .shape { flex: none; width: 1.3em; font-size: 1.3em; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.opt .otext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.opt .count {
  flex: none;
  margin-left: auto;
  min-width: 2em;
  padding: 0.1em 0.55em;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.opt .tick { flex: none; font-size: 1.2em; }
/* after the reveal: the right answer glows, the others fade back */
.opt.correct { box-shadow: 0 0 0 4px #fff, 0 0 26px 4px rgba(255, 255, 255, 0.55); transform: scale(1.02); z-index: 1; }
.opt.wrong { opacity: 0.32; filter: saturate(0.55); }

/* ===================================================================== */
/* Countdown ring (board) and bar (phone). JS sets --p from 1 down to 0. */
/* ===================================================================== */
.timer {
  --p: 1;
  --size: 120px;
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.timer::before {
  content: "";
  position: absolute;
  top: 10%; right: 10%; bottom: 10%; left: 10%;
  border-radius: 50%;
  background: var(--tv-bg-dark);
}
.timer .num {
  position: relative;
  font-size: calc(var(--size) * 0.36);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.timer.low { background: conic-gradient(var(--bad) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0); }
.timer.low .num { color: #ffb4b6; animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.timebar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.timebar > span {
  --p: 1;
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  background: var(--gold);
  border-radius: 99px;
}
.timebar.low > span { background: var(--bad); }

/* ===================================================================== */
/* Podium + the rest of the standings (final results)                    */
/* ===================================================================== */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.podium .step { display: flex; flex-direction: column; align-items: center; width: 180px; min-width: 0; }
.podium .medal { font-size: 2.6rem; line-height: 1; margin-bottom: 4px; }
.podium .pname {
  max-width: 100%;
  font-weight: 900;
  font-size: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium .ppts { font-weight: 700; opacity: 0.75; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.podium .block {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
  animation: podium-rise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.podium .p1 .block { height: 150px; background: linear-gradient(180deg, #f5c542, #c8961a); animation-delay: 0.9s; }
.podium .p2 .block { height: 110px; background: linear-gradient(180deg, #cfd6e0, #8e99a8); animation-delay: 0.5s; }
.podium .p3 .block { height: 80px; background: linear-gradient(180deg, #e3a06b, #a8642f); animation-delay: 0.1s; }
@keyframes podium-rise { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }

.others { list-style: none; margin: 18px auto 0; padding: 0; max-width: 520px; }
.others li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 9px;
  font-weight: 700;
  text-align: left;
}
.others li:nth-child(odd) { background: rgba(0, 0, 0, 0.05); }
.others .rk { width: 2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.others .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.others .pt { font-variant-numeric: tabular-nums; color: var(--muted); }