/* Thành phần giao diện kiểu gameshow: ô lục giác, thang thưởng, trợ giúp, đồng hồ */

.show-bg {
  background:
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(60, 120, 255, .10) 0deg 6deg, rgba(0, 0, 0, 0) 6deg 12deg),
    radial-gradient(circle at 50% 45%, #1e57c8 0%, #0d2a72 28%, #050c26 62%, #01030b 100%);
}

/* ---- Ô lục giác dẹt ---- */
.hex {
  --tip: 28px;
  position: relative;
  padding: 3px;
  background: linear-gradient(180deg, #9ad0ff 0%, #3c8cff 45%, #1d55c4 100%);
  clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
  z-index: 1;
}
.hex-in {
  clip-path: polygon(calc(var(--tip) - 1px) 0, calc(100% - var(--tip) + 1px) 0, 100% 50%, calc(100% - var(--tip) + 1px) 100%, calc(var(--tip) - 1px) 100%, 0 50%);
  background: linear-gradient(180deg, #0c1c44 0%, #000 45%, #000 60%, #0c1c44 100%);
  padding: .55em calc(var(--tip) + 12px);
  min-height: 2.6em;
  display: flex;
  align-items: center;
  gap: .4em;
  transition: background .2s;
}

.hex-row { position: relative; display: grid; gap: 14px 22px; }
.hex-row::before {
  content: "";
  position: absolute;
  left: -100vw; right: -100vw; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: linear-gradient(90deg, rgba(60,140,255,0), #3c8cff 20%, #3c8cff 80%, rgba(60,140,255,0));
  z-index: 0;
}
.hex-row.answers { grid-template-columns: 1fr 1fr; }
.hex-row.answers::before { display: none; }
.answer-line { position: relative; display: contents; }
.answers .pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; grid-column: 1 / -1; }
.answers .pair::before {
  content: ""; position: absolute; left: -100vw; right: -100vw; top: 50%; height: 3px; margin-top: -1.5px;
  background: linear-gradient(90deg, rgba(60,140,255,0), #3c8cff 20%, #3c8cff 80%, rgba(60,140,255,0));
}

.q-box .hex-in { justify-content: center; text-align: center; font-weight: 600; font-size: 1em; min-height: 3.6em; }
.q-text.long { font-size: .85em; }
.q-text.xlong { font-size: .72em; }

.opt .hex-in { font-weight: 600; }
.opt .letter { color: var(--orange); font-weight: 800; white-space: nowrap; }
.opt .letter::before { content: "◆"; font-size: .55em; vertical-align: middle; margin-right: .35em; color: #fff; }
.opt .opt-text { flex: 1; }
.opt.selected .hex-in, .opt.locked .hex-in { background: linear-gradient(180deg, #ffd27a 0%, #f6a31b 45%, #d07b00 100%); color: #120a00; }
.opt.selected .letter, .opt.locked .letter, .opt.correct .letter, .opt.wrong .letter { color: #fff; }
.opt.correct .hex-in { background: linear-gradient(180deg, #b7f59a 0%, #4cc93a 45%, #237f19 100%); color: #061a02; }
.opt.correct.flash .hex-in { animation: flashGreen .35s steps(2) 6; }
.opt.wrong .hex-in { background: linear-gradient(180deg, #ff9f99 0%, #e5413a 45%, #9e1c16 100%); color: #fff; }
.opt.removed .hex-in > * { visibility: hidden; }
.opt.mock-tag::after { content: "chọn thử"; position: absolute; right: 36px; top: 4px; font-size: .5em; color: #fff; opacity: .8; z-index: 2; }
@keyframes flashGreen { 0% { filter: brightness(1.6); } 100% { filter: brightness(.7); } }

/* ---- Thang tiền thưởng ---- */
.ladder { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ladder li {
  display: grid; grid-template-columns: 2.2em 1em 1fr; align-items: center;
  padding: 2px 10px; border-radius: 6px; color: #f5a94a; font-weight: 600; font-size: .95em;
}
.ladder li .no { text-align: right; }
.ladder li .dot { text-align: center; color: transparent; font-size: .7em; text-shadow: none; }
.ladder li.passed .dot { color: var(--orange); }
.ladder li .amt { text-align: right; font-variant-numeric: tabular-nums; }
.ladder li.safe { color: #fff; font-weight: 900; text-shadow: 0 0 8px rgba(255, 255, 255, .45); }
.ladder li.top { color: var(--gold); }
.ladder li.current { background: linear-gradient(180deg, #ffc35a, #e08600); color: #1a0f00; }
.ladder li.current .dot { color: #1a0f00; }
.ladder li.won { background: linear-gradient(180deg, #8ae46d, #2f9a22); color: #031400; }

/* ---- Biểu tượng trợ giúp hình bầu dục ---- */
.lifelines { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ll {
  position: relative; width: 6em; height: 3.7em; border-radius: 50%;
  border: 3px solid #e3efff;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, .35), transparent 55%),
    radial-gradient(ellipse at 50% 40%, #3f86f0, #0b2463 75%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1em; color: #fff;
  box-shadow: 0 0 14px rgba(90, 160, 255, .6), inset 0 0 10px rgba(0, 20, 70, .7);
}
.ll .ico { font-size: 1.4em; line-height: 1; text-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.ll .ico.svg { display: flex; width: 2em; height: 2em; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ll .ico.svg svg { width: 100%; height: 100%; display: block; }
.ll.active { border-color: var(--orange); box-shadow: 0 0 22px var(--orange), inset 0 0 10px rgba(0, 20, 70, .7); }
.ll.active .ico.svg { color: var(--orange); }
.ll.used::before, .ll.used::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 4px; background: var(--red); border-radius: 2px;
}
.ll.used::before { transform: rotate(28deg); }
.ll.used::after { transform: rotate(-28deg); }
.ll.used { opacity: .8; }
.ll.locked-out { opacity: .5; }

/* ---- Đồng hồ tròn ---- */
.ring { position: relative; width: 5em; height: 5em; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: rgba(255, 255, 255, .15); }
.ring .arc { stroke: #5fb0ff; transition: stroke-dashoffset .2s linear, stroke .2s; }
.ring.low .arc { stroke: var(--red); }
.ring .num {
  position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, #222 0%, #000 70%);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.6em; color: #fff;
  border: 2px solid #9ac3ff;
}
.ring.paused .num { color: var(--orange); }

/* ---- Biểu đồ khán giả ---- */
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 10em; padding: 8px 10px 0; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar .fill { width: 70%; background: linear-gradient(180deg, #ffd27a, #f6a31b); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .6s ease-out; }
.bar.correct .fill { background: linear-gradient(180deg, #b7f59a, #4cc93a); }
.bar .pct { font-weight: 800; margin-bottom: 4px; }
.bar .lab { font-weight: 800; color: var(--orange); margin-top: 4px; }

/* ---- Lời khuyên ---- */
.advice { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: rgba(10, 25, 60, .85); }
.advice .who { font-weight: 700; color: var(--accent-2); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.advice.ai .who { color: #cbb8ff; }
.advice .say { font-size: 1.05em; }
.advice .pick { font-weight: 800; color: var(--orange); font-size: 1.3em; }
.thinking::after { content: "…"; animation: dots 1.2s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { width: 0; } 100% { width: 1.2em; } }