/* 每日何切页面样式 */

@font-face {
  font-family: 'I.MahjongJP';
  src: url('knowledge/assets/fonts/I.MahjongJP.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.qiecuo-page {
  background: linear-gradient(180deg, #f7f8fa 0%, #e8f5f3 100%);
  min-height: 100vh;
}

.qiecuo-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* Hero */
#qiecuo-hero {
  text-align: center;
  margin-bottom: 28px;
}
#qiecuo-hero h1 {
  font-size: 2em;
  margin: 12px 0 6px;
  color: #00695c;
}
.qiecuo-date {
  color: #888;
  font-size: 0.9em;
}

/* Progress */
#qiecuo-progress {
  background: white;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.qc-progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
#qc-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #00695c, #26a69a);
  width: 0%;
  transition: width 0.3s ease;
}
.qc-progress-text {
  font-size: 0.9em;
  color: #555;
  margin: 0;
}
.qc-progress-text span {
  font-weight: 600;
  color: #00695c;
}

/* Stage / Card */
#qiecuo-stage { margin-bottom: 28px; }

.qc-card {
  background: white;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  min-height: 380px;
}

.qc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.85em;
  color: #666;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eee;
}
.qc-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.qc-meta-label { color: #999; font-size: 0.85em; }
.qc-meta-value { font-weight: 600; color: #00695c; }
.qc-meta-value .qc-tile { font-size: 1.8em; vertical-align: middle; }

/* 手牌区 */
.qc-hand-block { margin-bottom: 22px; }
.qc-hand-label {
  font-size: 0.85em;
  color: #888;
  margin-bottom: 6px;
}
.qc-tiles {
  background: #f5f5f5;
  padding: 16px 14px;
  border-radius: 8px;
  word-break: break-all;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 70px;
}

/* 单个牌图块：Unicode 麻将牌字符（I.MahjongJP 字体渲染为牌面图案） */
.qc-tile {
  display: inline-block;
  font-family: 'I.MahjongJP', -apple-system, sans-serif;
  text-align: center;
  position: relative;
  vertical-align: middle;
  user-select: none;
  color: #1a1a1a;
  font-weight: normal;
  /* 字号由父级上下文控制，各区域独立设置 */
  font-size: 1em;
  line-height: 1.2;
}

/* 选项卡里的牌：再大一点 */
.qc-tile-large {
  font-size: 1.1em;
  line-height: 1.1;
}

/* 各区域牌的字号独立设置 */
.qc-tiles .qc-tile {
  font-size: 2.9em;
  line-height: 1.1;
}
.qc-option-tile {
  font-size: 3.1em;
  line-height: 1.2;
  margin-bottom: 6px;
  font-weight: normal;
}
.qc-status strong .qc-tile {
  font-size: 2.1em;
  line-height: 1.1;
  color: inherit;
  font-weight: normal;
}
.qc-reveal-answer .qc-tile {
  font-size: 1em;
  line-height: 1.2;
}
.qc-meta-value .qc-tile {
  font-size: 1.8em;
  vertical-align: middle;
}

/* 摸牌：在牌阵末尾用高亮表示，与手牌间隔 12px */
.qc-tile-draw {
  position: relative;
  margin-left: 12px;
}
/* 注：摸进牌标记已去掉「摸」字，仅保留间距，通过 HTML class 表现 */

/* 赤宝牌：不再用 CSS 标红，I.MahjongJP 字体通过 OpenType ligature
   （"0b"/"0p"/"0m" 文本）原生渲染红 5 牌面，红色来自字形本身。 */

/* 副露 */
.qc-melds {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}
.qc-meld {
  background: #fff3e0;
  border: 1px solid #ffb74d;
  border-radius: 4px;
  padding: 0;
  display: flex;
  gap: 0;
}
.qc-meld .qc-tile {
  border: none;
  box-shadow: none;
  font-size: 1.4em;
  border-radius: 0;
}
.qc-meld .qc-tile:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.qc-meld .qc-tile:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.qc-meld-type {
  font-size: 0.7em;
  color: #e65100;
  margin-right: 4px;
  font-weight: 600;
  align-self: center;
}

/* 候选区 */
.qc-options-label {
  font-size: 0.85em;
  color: #888;
  margin-bottom: 8px;
}

/* 状态反馈行：答完立刻看到对错 */
.qc-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 0.95em;
  background: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}
.qc-status[data-state="correct"] {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #66bb6a;
  font-weight: 500;
}
.qc-status[data-state="wrong"] {
  background: #ffebee;
  color: #c62828;
  border-color: #ef5350;
  font-weight: 500;
}
.qc-status-icon {
  font-size: 1.3em;
  font-weight: 700;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  text-align: center;
  line-height: 1.4em;
  border-radius: 50%;
  background: white;
}
.qc-status[data-state="correct"] .qc-status-icon { color: #2e7d32; }
.qc-status[data-state="wrong"] .qc-status-icon { color: #c62828; }
.qc-status-text { font-weight: 600; }
.qc-status-hint { color: inherit; opacity: 0.85; }
.qc-status strong {
  font-family: 'I.MahjongJP', sans-serif;
  color: inherit;
  font-weight: normal;
}
.qc-status a {
  color: inherit;
  text-decoration: underline;
  margin-left: 6px;
}
.qc-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.qc-option {
  background: #fafafa;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.qc-option:hover {
  background: #e0f2f1;
  border-color: #26a69a;
  transform: translateY(-2px);
}
.qc-option.selected {
  background: #b2dfdb;
  border-color: #00695c;
}
.qc-option.correct {
  background: #c8e6c9;
  border-color: #388e3c;
  animation: qc-pulse 0.5s;
}
.qc-option.wrong {
  background: #ffcdd2;
  border-color: #c62828;
  animation: qc-shake 0.4s;
}
.qc-option.disabled {
  cursor: default;
  opacity: 0.85;
}
.qc-option.disabled.correct,
.qc-option.disabled.wrong {
  opacity: 1;  /* 对错牌保持满色，最重要 */
}
.qc-option-tile {
  display: inline-block;
  font-family: 'I.MahjongJP', -apple-system, sans-serif;
  line-height: 1.2;
  margin-bottom: 6px;
  font-weight: normal;
}
.qc-option-ukeire {
  font-size: 0.8em;
  color: #666;
}
.qc-option-ukeire::before { content: "("; }
.qc-option-ukeire::after { content: " 张)"; }

@keyframes qc-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes qc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* 揭晓区 */
.qc-reveal {
  margin-top: 22px;
  padding: 16px;
  background: #fff8e1;
  border-left: 4px solid #ff6f00;
  border-radius: 6px;
  display: none;
}
.qc-reveal.show { display: block; animation: qc-fadein 0.3s; }
.qc-reveal-answer {
  font-size: 1.1em;
  margin-bottom: 10px;
}
.qc-reveal-answer strong {
  font-family: 'I.MahjongJP', sans-serif;
  font-size: 1em !important;
  color: #d32f2f;
  font-weight: normal;
}
.qc-reveal-answer .qc-tile,
#qc-reveal .qc-tile {
  font-size: 1em !important;
}
.qc-reveal-explain {
  font-size: 0.92em;
  color: #444;
  line-height: 1.6;
  white-space: pre-wrap;
}
.qc-reveal-source {
  font-size: 0.8em;
  color: #999;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
}
.qc-reveal-source a { color: #00695c; }

@keyframes qc-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 控制按钮 */
.qc-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
.qc-btn {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}
.qc-btn-primary { background: #00695c; color: white; }
.qc-btn-primary:hover { background: #00897b; }
.qc-btn-secondary { background: #e0e0e0; color: #333; }
.qc-btn-secondary:hover { background: #bdbdbd; }
.qc-btn-ghost { background: transparent; color: #00695c; border: 1px solid #00695c; }
.qc-btn-ghost:hover { background: #e0f2f1; }
.qc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* Loading / Error */
.qc-loading, .qc-error {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}
.qc-error {
  color: #c62828;
  background: #ffebee;
  border-radius: 8px;
}

/* footer */
footer {
  text-align: center;
  padding: 30px 20px;
  color: #888;
  font-size: 0.85em;
}
.footer-hint { font-size: 0.8em; color: #aaa; margin-top: 4px; }

/* 响应式 */
@media (max-width: 600px) {
  .qiecuo-main { padding: 16px 12px 60px; }
  .qc-card { padding: 20px 14px; }
  .qc-tiles { font-size: 1.6em; padding: 10px 8px; }
  .qc-tiles .qc-tile { font-size: 2.6em; }
  .qc-options { grid-template-columns: repeat(2, 1fr); }
  .qc-controls { flex-wrap: wrap; }
  .qc-btn { padding: 10px 16px; font-size: 0.9em; flex: 1; min-width: 90px; }
}