/* ==========================================================
   百人一首 歌人サイコロクイズ - 専用スタイル
   ========================================================== */

.section.dq-section {
  width: 100%;
  max-width: 900px;
}

/* サイト共通の .section h2（左＋下ボーダーのみ）を、このページでは四辺すべて囲むボーダーにする */
.dq-section h2 {
  border-left: 5px solid #b82343;
  border-bottom: 1px solid #b82343;
  border-right: 5px solid #b82343;
  border-top: 1px solid #b82343;
}

.dq-h1 {
  display: flex;
  align-items: center;
  gap: .3em;
  font-family: "Kaisei HarunoUmi", serif;
  font-size: 1.8rem;
  color: #333;
  margin: .3em 0 .5em;
}
.dq-lead {
  font-size: .95rem;
  line-height: 1.9;
  margin-bottom: 1.2em;
  color: #444;
}

/* ---------- ゲーム全体コンテナ ---------- */
#dq-app {
  position: relative;
  background: linear-gradient(160deg, #fffaf0, #f3ead2);
  border: 1px solid #e4d9b8;
  border-radius: 1.2em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  padding: 1em;
  min-height: 420px;
}

.dq-hidden { display: none !important; }

/* ---------- スタートボタン（選択肢の代わりに表示されるデモ画面用） ---------- */
.dq-demo-start {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.dq-primary-btn {
  display: block;
  width: 100%;
  padding: .75em 1em;
  background: #B82343;
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 2em;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: .05em;
  box-shadow: 0 3px 0 #8a1a30;
  transition: .12s;
  font-family: inherit;
}
.dq-primary-btn:hover { background: #c9385a; }
.dq-primary-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a1a30; }
.dq-primary-btn:disabled { background: #ccc; box-shadow: 0 3px 0 #999; cursor: not-allowed; }

/* 「スタート」「もう一度あそぶ」ボタンは、他のボタンと違って横幅いっぱいにせず、文字幅に合わせて中央に置く。
   親（.dq-demo-start／.dq-result-card）がどちらもtext-align:centerなので、inline-blockにするだけで中央揃えになる */
#dq-start-btn,
#dq-retry-btn {
  display: inline-block;
  width: auto;
}

.dq-secondary-link {
  display: block;
  text-align: center;
  margin-top: .8em;
  font-size: .82rem;
  color: #888;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
.dq-secondary-link:hover { color: #B82343; }

/* ---------- ゲーム画面：HUD ---------- */
.dq-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: .9rem;
  color: #555;
  margin-bottom: .7em;
  padding: 0 .2em;
}
#dq-progress { color: #333; }
#dq-timer { color: #B82343; font-variant-numeric: tabular-nums; }

/* ---------- 出題モード切替 ---------- */
.dq-mode-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;
  margin-bottom: .7em;
}
.dq-mode-label {
  font-size: .8rem;
  color: #888;
  margin-right: .1em;
}
.dq-mode-btn {
  writing-mode: horizontal-tb;
  background: #fff;
  border: 1px solid #d8cba0;
  border-radius: 1.2em;
  padding: .3em .8em;
  font-size: .8rem;
  font-family: "Noto Sans JP", sans-serif;
  color: #666;
  cursor: pointer;
  transition: .15s;
}
.dq-mode-btn:hover { border-color: #B82343; color: #B82343; }
.dq-mode-btn.dq-mode-active {
  background: #B82343;
  border-color: #B82343;
  color: #fff;
  font-weight: 700;
}
/* サイト共通の「.section p { font-size: 1.1rem; }」（style.css）に負けないよう、
   IDを足して詳細度を上げる（#dq-mode-descは<p>要素なので、そのままだと打ち消される） */
#dq-mode-desc.dq-mode-desc {
  font-size: .8rem;
  color: #333;
  margin: 0 0 .8em;
}
/* 上の#dq-mode-desc.dq-mode-descがIDを含み詳細度が高いため、エラー時の色を勝たせるには
   こちらもIDを足す必要がある */
#dq-mode-desc.dq-mode-desc.dq-mode-desc-error {
  color: #B82343;
  font-weight: 700;
}

/* ---------- 歌カード（サイコロの歌） ---------- */
.dq-poem-card {
  background: #fffdf6;
  border: 2px solid #d8cba0;
  border-radius: 1em;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
  padding: 1em .6em;
  margin-bottom: .8em;
  display: flex;
  justify-content: center;
}

.dq-poem-wrap {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: block;
}

.dq-line {
  display: block;
  text-align: start;
  margin: 0 10px;
}

/* ---------- フリップクロード風カード（1文字ずつ） ---------- */
:root {
  --dq-die: clamp(30px, 7vw, 44px);
}

.dq-die {
  display: inline-block;
  position: relative;
  width: var(--dq-die);
  height: var(--dq-die);
  margin: .1em;
  vertical-align: middle;
}

/* 文字の見た目（フォント・色など）を上下の半分で完全に揃えるための共通スタイル。
   実際のカードは各半分側で var(--dq-die) の全体高さを持ち、はみ出した分は
   overflow:hiddenの親（.dq-half-top/.dq-half-bottom）で上半分・下半分だけに
   切り取ることで、1文字がちょうど中央の水平線で割れているように見せている。 */
.dq-half-face {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--dq-die);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: calc(var(--dq-die) * .58);
  color: #333;
  background: #fff;
  border: 1px solid #333;
  border-radius: .15em;
  backface-visibility: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* 下半分：実物のフリップクロックと同じく、ここは動かない（常に固定表示） */
.dq-half-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}
.dq-half-bottom .dq-half-face { bottom: 0; }

/* 上半分：ここだけが下端（＝カード中央の水平線）を軸にぱたぱたとめくれる */
.dq-half-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  perspective: 160px;
}
.dq-half-top-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%; /* 軸＝この半分の下端＝カード中央の水平線 */
  transform: rotateX(0deg);
  /* 表（真っ白）→裏（正解の文字）へ、一度だけパタンとめくれる */
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
/* コマが正解表示になったら、上半分のフラップを1回だけ180度めくって裏面（文字）を見せる */
.dq-die.dq-revealed .dq-half-top-inner {
  transform: rotateX(180deg);
}
.dq-half-top .dq-half-face { top: 0; }
.dq-half-face-back { transform: rotateX(180deg); }

.dq-die.dq-revealed .dq-half-face {
  color: #333;
  border-color: #333;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.dq-die.dq-revealed {
  animation: dqPop .4s ease;
}
@keyframes dqPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ---------- 判明状況バー ---------- */
.dq-status-row {
  text-align: center;
  margin-bottom: .8em;
}
#dq-reveal-status {
  font-size: .78rem;
  color: #888;
  display: block;
  margin-bottom: .3em;
}
.dq-reveal-bar-wrap {
  height: 6px;
  background: #ecdfc0;
  border-radius: 3px;
  overflow: hidden;
  max-width: 320px;
  margin: 0 auto;
}
.dq-reveal-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #D4AF37, #B82343);
  transition: width .35s ease;
}

/* ---------- 歌人 選択肢（横書き・3択） ---------- */
.dq-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .6em;
  margin-bottom: .8em;
}
.dq-choice-btn {
  writing-mode: horizontal-tb;
  background: #fff;
  border: 2px solid #d8cba0;
  border-radius: .8em;
  padding: .7em .5em;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  cursor: pointer;
  transition: .15s;
  text-align: center;
}
/* 歌人名が長く、2列（またはそのときの列幅）に収まりきらない選択肢だけ、行全体いっぱいに
   広げて1行で表示する（JS側で実際の幅を測って自動判定・付与するクラス） */
.dq-choice-btn.dq-choice-wide { grid-column: 1 / -1; }
.dq-choice-btn ruby { ruby-align: center; }
.dq-choice-btn rt { font-size: .55em; color: #999; }
.dq-choice-btn:hover:not(:disabled) { border-color: #B82343; background: #fdeef1; }
.dq-choice-btn:disabled { cursor: not-allowed; opacity: .55; }
.dq-choice-btn.dq-correct {
  border-color: #2E9E5B;
  background: #eaf7ef;
  color: #1b7a44;
  opacity: 1 !important;
  font-weight: 700;
}
.dq-choice-btn.dq-wrong {
  border-color: #B82343;
  background: #fdecec;
  color: #8a1a30;
  opacity: 1 !important;
}

/* ---------- フィードバック ---------- */
.dq-feedback {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  min-height: 1.6em;
  margin-bottom: .3em;
}
.dq-feedback.dq-feedback-correct { color: #1b7a44; }
.dq-feedback.dq-feedback-wrong { color: #8a1a30; }

.dq-next-btn {
  max-width: 320px;
  margin: .6em auto 0;
}

/* ---------- 結果画面 ---------- */
.dq-result-card {
  background: #fffdf6;
  border-radius: 1em;
  padding: 1.6em 1.3em;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
  border: 3px solid #B82343;
  text-align: center;
}
/* サイト共通の「.section p { text-align: justify; }」（style.css）が<p>要素に直接効いてしまい、
   .dq-result-cardのtext-align:centerが打ち消されるため、詳細度を上げて明示的に中央揃えにする */
.dq-result-card p {
  text-align: center;
}
.dq-result-title {
  font-family: "Kaisei HarunoUmi", serif;
  font-size: 1.4rem;
  color: #B82343;
  margin: 0 0 .6em;
}

/* ---------- 結果画面：問題ごとの内訳（0〜31文字のインジケーター） ---------- */
.dq-result-breakdown {
  display: flex;
  flex-direction: column;
  gap: .7em;
  margin: 0 0 1.1em;
}
.dq-result-row-label {
  font-size: .82rem;
  color: #555;
  margin-bottom: .25em;
  text-align: left;
}
.dq-result-row-bar-wrap {
  height: 8px;
  background: #ecdfc0;
  border-radius: 4px;
  overflow: hidden;
}
.dq-result-row-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #D4AF37, #B82343);
  transition: width .6s ease;
}
.dq-result-row-bar-fill.is-wrong {
  background: linear-gradient(90deg, #b5b5b5, #7a7a7a);
}

.dq-result-sub { font-size: .95rem; color: #555; margin-bottom: .3em; }

/* ---------- 結果画面：ランク表示 ---------- */
.dq-result-rank {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin: .9em 0;
}
.dq-result-rank .dq-rank-name {
  font-size: 1.6rem;
  color: #B82343;
  font-family: "Kaisei HarunoUmi", serif;
  margin: 0 .1em;
}

/* ---------- 結果画面：ランクの判定基準（説明） ---------- */
.dq-rank-guide {
  background: #faf6ea;
  border: 1px solid #e6d9ab;
  border-radius: .8em;
  padding: .7em .9em;
  margin: 0 0 1.1em;
  text-align: left;
}
/* サイト共通の「.dq-result-card p { text-align: center; }」に負けないよう詳細度を上げて左揃えにする */
.dq-rank-guide .dq-rank-guide-lead {
  font-size: .78rem;
  color: #888;
  margin: 0 0 .4em;
  text-align: left;
}
.dq-rank-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8rem;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: .2em;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 600px) {
  .dq-h1 { font-size: 1.5rem; }
  .dq-choice-btn { font-size: .9rem; padding: .6em .4em; min-width: 120px; }
}
@media (max-width: 400px) {
  .dq-choices { gap: .4em; grid-template-columns: 1fr 1fr; }
}