/* 競馬クイズ検定：ゲーム演出スタイル。ダービーのトーンに合わせた濃紺×金。スマホ最適化。 */
.knq {
  --knq-navy: #16213e;
  --knq-navy2: #1f2b52;
  --knq-gold: #f0c040;
  --knq-line: #2e3b66;
  --knq-txt: #eaf0ff;
  max-width: 560px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--knq-txt);
}
.knq * { box-sizing: border-box; }

/* SWELL等テーマの見出し装飾（::before の帯・背景・枠）がウィジェット内に侵入して崩れるのを防ぐ。
   見出しは自前クラスで完全制御する。:where() は詳細度0なので、後述の .knq-title 等が確実に勝つ。 */
.knq :where(h1, h2, h3, h4) {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-weight: 700;
  line-height: 1.4;
  color: inherit;
}
.knq :where(h1, h2, h3, h4)::before,
.knq :where(h1, h2, h3, h4)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
}

/* サーバー側SEOコンテンツ（.kn-quiz-page）の見出しも、テーマ装飾を打ち消して一貫した見た目に統一。
   テーマのCSSより確実に勝たせるため、装飾打ち消しには !important を用いる。 */
.kn-quiz-page h2,
.kn-quiz-page h3 {
  background: none !important;
  border: none !important;
  border-left: 5px solid #c8971f !important;
  padding: 2px 0 2px 12px !important;
  margin: 30px 0 12px !important;
  font-weight: 800;
  line-height: 1.5;
}
.kn-quiz-page h3 { border-left-width: 3px !important; font-size: 1.05em; margin-top: 20px !important; }
.kn-quiz-page h2::before, .kn-quiz-page h2::after,
.kn-quiz-page h3::before, .kn-quiz-page h3::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
}
.kn-quiz-page .kn-quiz-cat { margin: 0 0 18px; }
.kn-quiz-page .kn-quiz-exq { font-weight: 700; margin: 6px 0 2px; }
.kn-quiz-page .kn-quiz-exa { color: #555; margin: 0 0 4px; }
.knq-card {
  background: linear-gradient(160deg, var(--knq-navy) 0%, var(--knq-navy2) 100%);
  border: 1px solid var(--knq-line);
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.knq-badge {
  display: inline-block;
  background: var(--knq-gold);
  color: #23303a;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}
.knq-title { margin: 12px 0 4px; font-size: 22px; color: var(--knq-gold); }
.knq-lead { margin: 8px 0 18px; line-height: 1.7; font-size: 15px; opacity: 0.95; }
.knq-loading, .knq-error { padding: 28px 8px; text-align: center; opacity: 0.9; }
.knq-error { color: #ff9a9a; }

/* ボタン */
.knq-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--knq-line);
  border-radius: 12px;
  background: #23305a;
  color: var(--knq-txt);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, filter 0.15s ease;
}
.knq-btn:active { transform: translateY(1px); }
.knq-btn:hover { filter: brightness(1.12); }
.knq-btn-primary { background: var(--knq-gold); color: #23303a; border-color: #d8a92a; }
.knq-btn-x { background: #000; color: #fff; border-color: #333; }
.knq-mute {
  margin-top: 14px;
  background: transparent;
  border: none;
  color: #9fb0e0;
  font-size: 13px;
  cursor: pointer;
}

/* カテゴリ選択（1ページで全検定を選ぶ入口） */
.knq-select { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.knq-cat-btn {
  padding: 16px 10px;
  border: 1.5px solid var(--knq-line);
  border-radius: 12px;
  background: #1a2547;
  color: var(--knq-txt);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.knq-cat-btn:hover { border-color: var(--knq-gold); }
.knq-cat-btn:active { transform: translateY(1px); }
.knq-back { background: transparent; border: none; color: #9fb0e0; font-size: 13px; cursor: pointer; padding: 0 0 8px; }
@media (max-width: 360px) { .knq-select { grid-template-columns: 1fr; } }

/* 出題 */
.knq-qhead { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.knq-qnum { color: #9fb0e0; font-weight: 700; }
.knq-qcombo { color: #ff8a3d; font-weight: 700; }
.knq-gauge { height: 6px; background: #0e1530; border-radius: 999px; margin: 10px 0 14px; overflow: hidden; }
.knq-gauge-fill { height: 100%; background: linear-gradient(90deg, #46d1a2, var(--knq-gold)); transition: width 0.3s ease; }
.knq-diff { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.knq-diff-easy { background: #24503f; color: #9ff0cf; }
.knq-diff-medium { background: #4a4326; color: #f4dd9a; }
.knq-diff-hard { background: #522434; color: #ffb3c6; }
.knq-bonus-tag { color: var(--knq-gold); font-weight: 700; margin-bottom: 8px; }
.knq-question { font-size: 18px; line-height: 1.6; margin: 6px 0 16px; font-weight: 700; }

.knq-choices { display: flex; flex-direction: column; gap: 10px; }
.knq-choice {
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid var(--knq-line);
  border-radius: 12px;
  background: #1a2547;
  color: var(--knq-txt);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.knq-choice:hover { border-color: var(--knq-gold); }
.knq-choice.knq-locked { cursor: default; opacity: 0.96; }
.knq-choice.knq-right { background: #1f5a43; border-color: #46d1a2; animation: knqpop 0.3s ease; }
.knq-choice.knq-wrong { background: #5a2333; border-color: #ff6b8a; }
@keyframes knqpop { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

.knq-explain { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #0f1836; }
.knq-verdict { font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.knq-ok .knq-verdict { color: #57e3ac; }
.knq-ng .knq-verdict { color: #ff8aa3; }
.knq-exptext { font-size: 14px; line-height: 1.6; opacity: 0.95; }

/* 認定証（共有の主役） */
.knq-result { text-align: center; }
.knq-cert {
  border: 3px solid var(--knq-gold);
  border-radius: 16px;
  padding: 26px 16px;
  background: radial-gradient(circle at 50% 0%, #263566 0%, #131c3a 80%);
  position: relative;
}
.knq-cert-master { box-shadow: 0 0 0 4px rgba(240, 192, 64, 0.25), 0 0 40px rgba(240, 192, 64, 0.3); }
.knq-cert-cat { font-size: 15px; color: #b9c6f0; letter-spacing: 0.08em; }
.knq-cert-label { font-size: 12px; color: #9fb0e0; margin-top: 6px; letter-spacing: 0.3em; }
.knq-cert-rank { font-size: 46px; font-weight: 900; color: var(--knq-gold); margin: 4px 0 8px; text-shadow: 0 2px 12px rgba(240, 192, 64, 0.35); }
.knq-cert-score { font-size: 15px; opacity: 0.95; }
.knq-cert-pct { display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 999px; background: rgba(240, 192, 64, 0.16); color: var(--knq-gold); font-weight: 700; font-size: 14px; }
.knq-actions { margin-top: 16px; }

/* ランキング */
.knq-rank { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: r; }
.knq-rank-row { display: flex; align-items: center; gap: 8px; padding: 10px 6px; border-bottom: 1px solid var(--knq-line); counter-increment: r; }
.knq-rank-row::before { content: counter(r); width: 24px; text-align: center; color: var(--knq-gold); font-weight: 800; }
.knq-rank-name { flex: 1; }
.knq-rank-label { font-size: 12px; color: #b9c6f0; }
.knq-rank-score { font-weight: 700; }

@media (max-width: 480px) {
  .knq-title { font-size: 20px; }
  .knq-question { font-size: 17px; }
  .knq-cert-rank { font-size: 40px; }
}