/* Triviathon — host board HUD + phone controller styles. */

/* ---------- host: deck setup ---------- */
.tvs {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 26px;
}
.tvs-head { font-family: var(--display); font-size: clamp(24px, 4vw, 40px); color: var(--purple); }
.tvs-decks { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 1100px; }
.tvs-deck {
  background: var(--card);
  border: 3px solid transparent;
  border-radius: var(--r-md);
  padding: 16px;
  width: 240px;
  cursor: pointer;
  position: relative;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.tvs-deck:hover { transform: translateY(-3px); }
.tvs-deck.is-sel { border-color: var(--yellow); box-shadow: 0 0 26px rgba(255, 213, 30, 0.3); }
.tvs-deck-name { font-family: var(--display); font-size: 17px; margin-bottom: 4px; }
.tvs-deck-meta { color: var(--ink-dim); font-size: 12.5px; margin-bottom: 10px; }
.tvs-deck-cats { display: flex; gap: 5px; }
.tvs-deck-cat { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); }
.tvs-deck-mine {
  position: absolute; top: -10px; right: -8px;
  background: var(--cyan); color: #05303a;
  font-size: 10px; font-weight: 900;
  border-radius: 999px; padding: 3px 8px; transform: rotate(6deg);
}
.tvs-optlabel { font-family: var(--display); letter-spacing: 0.3em; color: var(--ink-dim); font-size: 13px; }
.tvs-targets { display: flex; gap: 10px; }
.tvs-target {
  font-family: var(--body); font-weight: 900; font-size: 16px;
  background: var(--card); color: var(--ink);
  border: 3px solid transparent; border-radius: var(--r-md);
  padding: 10px 20px; cursor: pointer;
}
.tvs-target.is-sel { border-color: var(--green); color: var(--green); }
.tvs-note { color: var(--ink-dim); font-size: 13px; max-width: 520px; text-align: center; }

/* ---------- host: board + HUD ---------- */
.game-triviathon { position: relative; }
.tv-stage { position: absolute; inset: 0; }
.tv-stage canvas { display: block; }
.tv-hud { position: absolute; inset: 0; pointer-events: none; display: flex; }
.tv-banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 3;
}
.tv-banner.is-hidden { display: none; }
.tv-turnbanner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(18, 4, 31, 0.88);
  border: 2px solid hsl(var(--hue, 280) 80% 60%);
  border-radius: 999px;
  padding: 8px 22px;
  font-weight: 900; font-size: 19px;
  animation: tilePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tv-dice {
  display: flex; align-items: center; gap: 12px;
  background: rgba(18, 4, 31, 0.88);
  border: 2px solid var(--yellow);
  border-radius: var(--r-md);
  padding: 10px 26px;
  animation: dicePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dicePop { from { transform: scale(0.2) rotate(-30deg); opacity: 0; } }
.tv-dice-cube { font-size: 34px; animation: diceShake 0.5s ease; }
@keyframes diceShake { 25% { transform: rotate(-24deg); } 60% { transform: rotate(20deg); } }
.tv-dice-num { font-family: var(--display); font-size: 40px; color: var(--yellow); }

.tv-roster {
  position: absolute; right: 14px; top: 14px;
  display: flex; flex-direction: column; gap: 8px;
  width: 230px; z-index: 2;
}
.tv-rosterrow {
  display: flex; align-items: center; gap: 8px;
  background: rgba(18, 4, 31, 0.82);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 6px 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.tv-rosterrow.is-turn { border-color: hsl(var(--hue, 280) 85% 60%); transform: scale(1.04); }
.tv-rosterrow.is-gone { opacity: 0.4; }
.tv-rr-mid { flex: 1; min-width: 0; }
.tv-rr-name { font-weight: 900; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-pips { display: flex; gap: 3px; margin-top: 3px; }
.tv-pip {
  width: 13px; height: 13px; border-radius: 4px;
  background: transparent; border: 2px solid var(--pipc);
  opacity: 0.45; transition: all 0.3s ease;
}
.tv-pip.is-won { background: var(--pipc); opacity: 1; box-shadow: 0 0 8px var(--pipc); }
.tv-rr-score { font-weight: 900; font-size: 14px; color: var(--cyan); }

.tv-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 2, 20, 0.55);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.tv-overlay.is-hidden { display: none; }
.tv-q {
  background: var(--card);
  border: 3px solid var(--qcolor, var(--purple));
  border-radius: var(--r-lg);
  box-shadow: 0 0 60px color-mix(in srgb, var(--qcolor, #8e5bff) 40%, transparent);
  padding: 30px 40px;
  width: min(88vw, 900px);
  text-align: center;
  animation: qPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes qPop { from { transform: translateY(60px) scale(0.9); opacity: 0; } }
.tv-q-final { color: var(--yellow); font-family: var(--display); font-size: 20px; margin-bottom: 8px; animation: fadePulse 0.9s infinite; }
.tv-q-hq { color: var(--qcolor); font-weight: 900; letter-spacing: 0.2em; font-size: 14px; margin-bottom: 6px; }
.tv-q-cat {
  display: inline-block;
  background: var(--qcolor); color: #14041f;
  font-weight: 900; letter-spacing: 0.08em;
  border-radius: 999px; padding: 5px 18px; font-size: 15px;
  margin-bottom: 14px;
}
.tv-q-text { font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; line-height: 1.3; margin-bottom: 22px; }
.tv-q-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-q-choice {
  display: flex; align-items: center; gap: 12px;
  background: var(--card2);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  padding: 12px 16px;
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 700;
  text-align: left;
  transition: all 0.25s ease;
}
.tv-q-choice.is-correct { border-color: var(--green); background: rgba(35, 240, 160, 0.16); box-shadow: 0 0 22px rgba(35, 240, 160, 0.3); }
.tv-q-letter {
  font-family: var(--display);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px; padding: 3px 10px;
}
.tv-q-who { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tv-q-whochip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(10, 2, 20, 0.55);
  border: 2px solid hsl(var(--hue, 280) 85% 60%);
  border-radius: 999px;
  padding: 2px 10px 2px 3px;
  animation: tilePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tv-q-whoname {
  font-size: 12.5px; font-weight: 900;
  color: hsl(var(--hue, 280) 90% 72%);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-q-count { margin-top: 16px; color: var(--ink-dim); font-weight: 900; }

/* ---------- phone ---------- */
.tvp-wait, .tvp-roll, .tvp-reveal {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 28px 22px;
}
.tvp-wait-emoji { font-size: 64px; animation: fadePulse 1.6s infinite; }
.tvp-wait-msg { font-size: 20px; font-weight: 900; }
.tvp-wait-sub { color: var(--ink-dim); font-size: 14px; font-weight: 700; }

.tvp-roll-label { font-family: var(--display); font-size: 30px; color: var(--yellow); }
.tvp-chain { font-weight: 900; color: var(--orange); }
.tvp-rollbtn { font-size: 34px; padding: 30px 60px; border-radius: 40px; animation: fadePulse 1.4s infinite; }

.tvp-move { flex: 1; display: flex; flex-direction: column; padding: 14px 16px; gap: 6px; }
.tvp-move-head { font-family: var(--display); font-size: 24px; text-align: center; color: var(--yellow); }
.tvp-move-sub { text-align: center; color: var(--ink-dim); font-weight: 700; font-size: 13px; }
.tvp-board { flex: 1; width: 100%; min-height: 0; }
.tvp-board-ring, .tvp-board-line { stroke: rgba(185, 168, 216, 0.3); stroke-width: 0.012; fill: none; }
.tvp-space { opacity: 0.75; }
.tvp-space.is-dest {
  opacity: 1; cursor: pointer;
  stroke: #fff; stroke-width: 0.028;
  animation: destPulse 0.9s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes destPulse { 50% { transform: scale(1.45); } }
.tvp-other { fill: rgba(255, 255, 255, 0.55); }
.tvp-me { fill: hsl(var(--hue, 280) 90% 62%); stroke: #fff; stroke-width: 0.02; }

.tvp-q { flex: 1; display: flex; flex-direction: column; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); gap: 10px; }
.tvp-q-flag { text-align: center; font-weight: 900; color: var(--qcolor, var(--yellow)); letter-spacing: 0.12em; font-size: 13px; }
.tvp-q-flag.is-final { color: var(--yellow); animation: fadePulse 0.9s infinite; font-size: 16px; }
.tvp-q-cat {
  align-self: center;
  background: var(--qcolor, var(--purple)); color: #14041f;
  font-weight: 900; border-radius: 999px; padding: 4px 16px; font-size: 13px;
}
.tvp-q-text { font-size: 19px; font-weight: 900; text-align: center; line-height: 1.35; }
.tvp-q-mover { text-align: center; color: var(--yellow); font-weight: 900; font-size: 13px; }
.tvp-q-along { text-align: center; color: var(--ink-dim); font-weight: 700; font-size: 13px; }
.tvp-answers { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.tvp-answer {
  display: flex; align-items: center; gap: 12px;
  border: 0; border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: var(--body); font-weight: 900; font-size: 17px;
  color: #fff; text-align: left;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease, filter 0.2s ease;
}
.tvp-answer:active { transform: translateY(3px); }
.tvp-answer:disabled { opacity: 0.45; }
.tvp-answer.is-picked { opacity: 1; outline: 4px solid #fff; }
.tvp-answer-0 { background: linear-gradient(135deg, #e5326e, #b81f5b); }
.tvp-answer-1 { background: linear-gradient(135deg, #1f9de0, #1668b8); }
.tvp-answer-2 { background: linear-gradient(135deg, #e8a11c, #c76f12); }
.tvp-answer-3 { background: linear-gradient(135deg, #1fb864, #148a52); }
.tvp-answer-letter {
  font-family: var(--display);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px; padding: 4px 10px;
}
.tvp-answer-text { flex: 1; }

.tvp-reveal-emoji { font-size: 74px; animation: introEmoji 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tvp-reveal-big { font-family: var(--display); font-size: 34px; }
.tvp-reveal.is-right .tvp-reveal-big { color: var(--green); }
.tvp-reveal.is-wrong .tvp-reveal-big { color: var(--red); }
.tvp-reveal-ans { color: var(--ink-dim); font-weight: 700; }
.tvp-reveal-pts { font-size: 26px; font-weight: 900; color: var(--cyan); }
.tvp-reveal-wedge { font-size: 22px; font-weight: 900; color: var(--yellow); animation: tilePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }