/* 灯谜·谜语·歇后语 —— 卡片式趣味问答，复用站点变量，H5 自适应 */
.riddle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.riddle-grid.one { grid-template-columns: 1fr; max-width: 640px; }

.riddle-card {
  background: var(--c-card, #fff); border: 1px solid var(--c-line, #ece7dd);
  border-radius: 12px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .2s, border-color .2s;
}
.riddle-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.riddle-card.ok { border-color: #2e9e5b; }
.riddle-card.no { border-color: #d06; }

.rc-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-kind, .rc-cat, .rc-type {
  font-size: var(--t-xs, .72rem); padding: 2px 8px; border-radius: 999px; line-height: 1.6;
}
.rc-kind { background: var(--c-gold-soft, #f6ecd2); color: var(--c-gold-ink, #8a6d1f); font-weight: 600; }
.rc-cat { background: #eef2f7; color: #567; }
.rc-type { background: #f3eefb; color: #75a; }

.rc-q { font-size: var(--t-lg, 1.08rem); line-height: 1.7; color: var(--c-ink, #2b2b2b); font-weight: 600; }
.rc-dash { color: var(--c-muted, #999); font-weight: 400; }
.rc-hint { font-size: var(--t-sm, .86rem); color: var(--c-muted, #888); }

.rc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-opt {
  padding: 9px 10px; border: 1px solid var(--c-line, #ddd); border-radius: 8px; background: #fff;
  cursor: pointer; font-size: var(--t-sm, .9rem); text-align: center; transition: background .15s, border-color .15s;
}
.rc-opt:hover:not(:disabled) { border-color: var(--c-gold, #c9a94e); background: #fffdf6; }
.rc-opt:disabled { cursor: default; }
.rc-opt.is-correct { background: #e8f7ee; border-color: #2e9e5b; color: #1f7a44; font-weight: 700; }
.rc-opt.is-wrong { background: #fdecef; border-color: #d06; color: #b0264c; text-decoration: line-through; }

.rc-reveal { align-self: flex-start; }

.rc-a { border-top: 1px dashed var(--c-line, #e5e0d8); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rc-ans { font-size: var(--t-base, 1rem); }
.rc-ans b { color: var(--c-gold-ink, #8a6d1f); font-size: var(--t-lg, 1.1rem); }
.rc-exp { font-size: var(--t-sm, .88rem); color: var(--c-muted, #666); line-height: 1.7; }
.rc-more { font-size: var(--t-sm, .85rem); align-self: flex-start; }

@media (max-width: 480px) { .riddle-grid { grid-template-columns: 1fr; } }