/* ============================================================
 * H20 答题回忆系统 + 彩蛋第二批 · 独立样式（docs/08 §4）
 * 视觉语言：暖白卡片(--cream) + ink 字(0x2b2118) + 雾金点缀(0xc9a86a)
 * ============================================================ */

/* ---------- 答题卡（三选一） ---------- */
.h20-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 18, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s;
}
.h20-overlay.on { opacity: 1; pointer-events: auto; }

.h20-card {
  width: min(430px, 92vw);
  border-radius: 14px;
  background: linear-gradient(165deg, #f7efdd, #efe2c8);
  border: 1px solid rgba(201, 168, 106, 0.75);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(247, 239, 221, 0.25);
  padding: 18px 20px 16px;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.35s;
  color: #2b2118;
}
.h20-overlay.on .h20-card { transform: translateY(0) scale(1); }

.h20-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.h20-gold-text {
  font-size: 13px; letter-spacing: 4px; color: #9a7a3e;
  border-bottom: 1px solid rgba(201, 168, 106, 0.6); padding-bottom: 3px;
}
#h20-quiz-prog { font-size: 12px; color: #8a7a5e; letter-spacing: 1px; }

.h20-quiz-photo {
  border-radius: 10px; overflow: hidden;
  border: 6px solid #fffdf6;
  box-shadow: 0 3px 14px rgba(43, 33, 24, 0.28);
  background: #ddd;
}
.h20-quiz-photo img { display: block; width: 100%; max-height: 300px; object-fit: cover; }

.h20-quiz-q {
  text-align: center; margin: 13px 0 11px;
  font-size: 16px; letter-spacing: 2px; color: #2b2118;
}

#h20-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.h20-opt {
  padding: 11px 14px; font-size: 15px; letter-spacing: 3px;
  color: #4a3a28; background: rgba(255, 252, 244, 0.85);
  border: 1px solid rgba(201, 168, 106, 0.55); border-radius: 9px;
  cursor: pointer; transition: all 0.18s;
  font-family: inherit;
}
.h20-opt:hover:not(:disabled) {
  background: #c9a86a; color: #fffdf4; border-color: #b08d4e;
  transform: translateY(-1px);
}
.h20-opt:disabled { opacity: 0.45; cursor: default; }

#h20-quiz-msg {
  min-height: 22px; margin-top: 10px; text-align: center;
  font-size: 13.5px; letter-spacing: 1px;
}
.h20-msg-ok  { color: #7a5a1e; font-weight: 600; }
.h20-msg-bad { color: #a4552e; }
.h20-msg-warn { color: #8a6a48; }

.h20-card-foot { margin-top: 8px; text-align: center; }
.h20-btn-ghost {
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; letter-spacing: 3px; color: #9a8a6a;
  padding: 6px 14px; font-family: inherit;
}
.h20-btn-ghost:hover { color: #6a5636; }

/* ---------- 星图板第三栏谜面 ---------- */
.h20-riddle {
  margin-top: 20px; padding: 16px 18px 14px;
  border-radius: 12px; text-align: center;
  border: 1px dashed rgba(201, 168, 106, 0.55);
  background: rgba(201, 168, 106, 0.06);
  transition: all 0.6s;
}
.h20-riddle.solved {
  border: 1px solid #c9a86a; border-style: solid;
  background: linear-gradient(160deg, rgba(201, 168, 106, 0.22), rgba(201, 168, 106, 0.08));
  box-shadow: 0 0 26px rgba(201, 168, 106, 0.35) inset, 0 0 18px rgba(201, 168, 106, 0.25);
}
.h20-riddle-title { font-size: 15px; letter-spacing: 3px; color: #c9a86a; }
.h20-riddle-sub   { font-size: 12px; color: #8892a8; margin-top: 5px; letter-spacing: 2px; }
.h20-riddle-ok    { font-size: 14px; color: #ffd9a0; margin-top: 10px; letter-spacing: 2px; }
.h20-riddle-row { margin-top: 12px; display: flex; gap: 8px; justify-content: center; }
#h20-riddle-in {
  width: 130px; padding: 8px 10px; text-align: center;
  font-size: 16px; letter-spacing: 3px; color: #f5ead6;
  background: rgba(10, 14, 34, 0.8);
  border: 1px solid rgba(201, 168, 106, 0.5); border-radius: 8px;
  outline: none; font-family: inherit;
}
#h20-riddle-in:focus { border-color: #c9a86a; box-shadow: 0 0 10px rgba(201, 168, 106, 0.35); }
#h20-riddle-btn {
  padding: 8px 16px; font-size: 13px; letter-spacing: 3px;
  color: #2b2118; background: #c9a86a; border: none; border-radius: 8px;
  cursor: pointer; font-family: inherit;
}
#h20-riddle-btn:hover { background: #dbbd83; }
.h20-shake { animation: h20Shake 0.45s; }
@keyframes h20Shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* ---------- 彩蛋①：登录页 1024 金色按钮 ---------- */
#gate-btn.h20-gold {
  background: linear-gradient(160deg, #e8c87e, #c9a86a);
  color: #2b2118;
  border-color: #f0d9a0;
  box-shadow: 0 0 26px rgba(232, 200, 126, 0.75), 0 0 60px rgba(201, 168, 106, 0.4);
  animation: h20GoldPulse 1.6s ease-in-out infinite;
  font-size: 15px; letter-spacing: 4px;
  width: auto; min-width: 148px; padding: 0 26px;
}
@keyframes h20GoldPulse {
  0%, 100% { box-shadow: 0 0 22px rgba(232, 200, 126, 0.65), 0 0 50px rgba(201, 168, 106, 0.35); }
  50%      { box-shadow: 0 0 34px rgba(232, 200, 126, 0.95), 0 0 80px rgba(201, 168, 106, 0.55); }
}