/* HaiGames SDK — 20 Questions game specific styles
 *
 * 共用的 overlay/sheet/header/status/comment/action-btn 在 games/games.css。
 * 本文件只放 TwentyQ 特有元素。
 */

.hg-20q-sheet { max-width: 520px; }

/* ── Mode toggle ─────────────────────────────────────────────────────────── */
.hg-20q-mode-toggle {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; padding: 4px;
}
.hg-20q-mode-btn {
  flex: 1; padding: 10px 8px;
  background: transparent; border: none; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55);
  cursor: pointer; transition: background 0.18s, color 0.18s;
}
.hg-20q-mode-btn:hover { color: rgba(255, 255, 255, 0.85); }
.hg-20q-mode-btn.is-active {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.32) 0%, rgba(139, 92, 246, 0.42) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.25);
}

/* ── Setup panel ─────────────────────────────────────────────────────────── */
.hg-20q-setup-desc {
  font-size: 13px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
}
.hg-20q-hint-row { margin-bottom: 14px; }
.hg-20q-hint-label {
  display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.hg-20q-hint-input {
  width: 100%; padding: 11px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-size: 14px; color: rgba(255, 255, 255, 0.9);
  outline: none; transition: border-color 0.15s, background 0.15s;
}
.hg-20q-hint-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.hg-20q-hint-input:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(167, 139, 250, 0.45);
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.hg-20q-progress {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 12px; color: rgba(255, 255, 255, 0.6);
}
.hg-20q-progress-bar {
  flex: 1; height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px; overflow: hidden;
}
.hg-20q-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #a78bfa, #f472b6);
  transition: width 0.3s ease;
}

/* ── History list ────────────────────────────────────────────────────────── */
.hg-20q-history {
  max-height: 260px; min-height: 80px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px; line-height: 1.45;
}
.hg-20q-history::-webkit-scrollbar { width: 6px; }
.hg-20q-history::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.3); border-radius: 3px;
}
.hg-20q-hist-row { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.hg-20q-hist-row:last-child { border-bottom: none; }
.hg-20q-hist-q { color: rgba(255, 255, 255, 0.88); }
.hg-20q-hist-q .hg-20q-hist-n {
  display: inline-block; min-width: 28px;
  font-weight: 700; color: rgba(167, 139, 250, 0.9);
  margin-right: 4px;
}
.hg-20q-hist-q .hg-20q-hist-asker {
  font-size: 11px; color: rgba(255, 255, 255, 0.45);
  margin-right: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.hg-20q-hist-a {
  margin-top: 3px; margin-left: 32px;
  color: rgba(255, 255, 255, 0.7); font-size: 13px;
}

/* ── Current question (user_thinks mode) ─────────────────────────────────── */
.hg-20q-current-q {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.14) 0%, rgba(139, 92, 246, 0.2) 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 14px;
  font-size: 15px; font-weight: 600; line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 12px;
}

/* ── Input rows ──────────────────────────────────────────────────────────── */
.hg-20q-input-row {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.hg-20q-input-ask .hg-20q-q-input {
  flex: 1; padding: 11px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-size: 14px; color: rgba(255, 255, 255, 0.9);
  outline: none;
}
.hg-20q-input-ask .hg-20q-q-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.hg-20q-input-ask .hg-20q-q-input:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(167, 139, 250, 0.45);
}
.hg-20q-btn-ask,
.hg-20q-btn-yes,
.hg-20q-btn-no,
.hg-20q-btn-maybe {
  padding: 11px 16px; min-width: 76px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.hg-20q-btn-ask {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.32) 0%, rgba(139, 92, 246, 0.42) 100%);
}
.hg-20q-btn-yes   { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.4); }
.hg-20q-btn-no    { background: rgba(244, 63, 94, 0.18); border-color: rgba(244, 63, 94, 0.4); }
.hg-20q-btn-maybe { background: rgba(234, 179, 8, 0.16); border-color: rgba(234, 179, 8, 0.4); }
.hg-20q-btn-yes:active, .hg-20q-btn-no:active, .hg-20q-btn-maybe:active,
.hg-20q-btn-ask:active { transform: scale(0.97); }
.hg-20q-btn-ask:hover {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.42) 0%, rgba(139, 92, 246, 0.55) 100%);
}
.hg-20q-btn-yes:hover   { background: rgba(34, 197, 94, 0.28); }
.hg-20q-btn-no:hover    { background: rgba(244, 63, 94, 0.28); }
.hg-20q-btn-maybe:hover { background: rgba(234, 179, 8, 0.26); }
.hg-20q-btn-ask:disabled,
.hg-20q-btn-yes:disabled,
.hg-20q-btn-no:disabled,
.hg-20q-btn-maybe:disabled { opacity: 0.4; cursor: not-allowed; }

.hg-20q-answer-row { justify-content: space-between; }
.hg-20q-answer-row > button { flex: 1; }

.hg-20q-btn-row { margin-bottom: 10px; }

.hg-20q-btn-guess {
  width: 100%; padding: 11px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.75);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.hg-20q-btn-guess:hover {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.45);
  color: #fff;
}
.hg-20q-btn-guess:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── End screen ──────────────────────────────────────────────────────────── */
.hg-20q-end { text-align: center; padding: 10px 0 6px; }
.hg-20q-end-verdict {
  font-size: 22px; font-weight: 800; margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.95);
}
.hg-20q-end-detail {
  font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
}
.hg-20q-end-detail b { color: #a78bfa; }