/* ==========================================================
   game-base.css · 游戏通用基础层（与 tool-base.css 对等）
   依赖 tool-base.css 的主题令牌（--ink/--paper/--card/--line/--red/--muted/--mono/--ease 等）
   提供"猜谜 / 比对类"游戏可复用的组件：
     比对反馈色、状态行（计数+图例）、模式提示、输入栏、结果弹层
   引用顺序：tool-base.css → game-base.css → 各自游戏 game.css
   ========================================================== */

/* 比对反馈色：随站点亮/暗主题翻转 */
:root {
  --g-correct: #2f6b33;
  --g-correct-soft: rgba(47, 107, 51, .12);
  --g-close: #a06a1f;
  --g-close-soft: rgba(160, 106, 31, .12);
  --g-wrong-soft: rgba(43, 37, 28, .05);
  --g-wrong-ink: var(--muted);
}

[data-theme="dark"] {
  --g-correct: #51d795;
  --g-correct-soft: rgba(81, 215, 149, .14);
  --g-close: #e0a04f;
  --g-close-soft: rgba(224, 160, 79, .14);
  --g-wrong-soft: rgba(234, 223, 196, .04);
  --g-wrong-ink: var(--muted);
}

/* 页面主体（与 tool-main 相同的留白节奏） */
.game-main {
  padding: 52px 0 80px;
}

/* ========== 状态行：计数 + 图例 ========== */
.game-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-2);
  margin-bottom: 14px;
}

.game-status b {
  color: var(--red);
  font-size: 1rem;
}

.game-status .legend {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: .04em;
}

.game-status .legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot.correct {
  background: var(--g-correct);
}

.dot.close {
  background: var(--g-close);
}

.dot.wrong {
  background: var(--g-wrong-ink);
}

/* ========== 模式提示 ========== */
.mode-hint {
  font-size: .8rem;
  color: var(--ink-2);
  text-align: center;
  margin-bottom: 18px;
}

.mode-hint strong {
  color: var(--red);
  font-weight: 600;
}

/* ========== 输入栏 ========== */
.input-bar {
  display: flex;
  width: 100%;
}

.input-bar .input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.input-bar input {
  font-size: .86rem;
}

.input-bar input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(179, 38, 30, .12);
}

.input-bar input::placeholder {
  color: var(--muted);
}

.input-bar .btn {
  flex: 0 0 auto;
  margin-left: 10px;
  padding: 12px 22px;
  white-space: nowrap;
}

.input-bar .btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ========== 结果弹层 ========== */
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(28, 24, 18, .55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.result-overlay.active {
  display: flex;
}

.result-card {
  background: var(--card);
  border: 3px double var(--ink);
  padding: 34px 40px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 28px 70px rgba(28, 24, 18, .3);
  animation: result-pop .4s var(--ease);
}

@keyframes result-pop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.result-card .emoji {
  font-size: 3rem;
  margin-bottom: 8px;
}

.result-card h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.result-card p {
  color: var(--ink-2);
  font-size: .9rem;
  margin-bottom: 16px;
}

.result-card .answer-reveal {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px 16px;
  margin-bottom: 20px;
}

.result-card .answer-reveal .name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--red);
  font-family: var(--serif);
}

.result-card .answer-reveal .detail {
  font-size: .8rem;
  color: var(--ink-2);
  margin-top: 4px;
  font-family: var(--mono);
}

/* ========== 响应式 ========== */
@media (max-width: 640px) {
  .result-card {
    padding: 24px;
  }

  .game-status .legend {
    margin-left: 0;
  }
}