/* ================================================================
   遊ぶワク吉 共通クイズエンジン 専用CSS（v1.1｜スマホ文字サイズGATE対応）
   クラス名は wkq- で名前空間化(ナンプレのwknp-とは別系統)。
   配色トークンはナンプレ本番組み込み時に確定したワク吉ブランドを継承。

   v1.1での変更点(艦長フィードバック反映):
   ・文字サイズGATEを正式ルール化(問題文22-26px/選択肢18-22px/補助文16-18px/
     タイマー26-32px/ボタン高52-60px)。412px幅で実測確認済み(検証方法はREADME参照)
   ・20問進捗ランプ(.wkq-lamps)を追加(60秒モード専用)
   ・結果画面を拡張(XP/ランク/最高コンボ/平均回答時間)
   ================================================================ */

.wkq-root{
  --wkq-paper:#F6F9FB;
  --wkq-paper-deep:#E9F1F6;
  --wkq-ink:#3A4A63;
  --wkq-ink-deep:#22304A;
  --wkq-pink:#F2577E;
  --wkq-pink-soft:#FCE4EC;
  --wkq-green:#2FAE74;
  --wkq-green-soft:#DFF5E7;
  --wkq-brick:#E4534F;
  --wkq-brick-soft:#FBE3E2;
  --wkq-gold:#B8863B;
  --wkq-gold-soft:#F3E6CC;
  --wkq-line-soft:#DCE7EF;
  --wkq-radius:16px;

  /* ===== v1.1 文字サイズGATE(412px幅で実測確認済み。スマホ最優先) ===== */
  --wkq-fs-question: clamp(22px, 5.6vw, 26px);
  --wkq-fs-choice: clamp(18px, 4.6vw, 22px);
  --wkq-fs-sub: clamp(16px, 4.0vw, 18px);
  --wkq-fs-timer: clamp(26px, 7.0vw, 32px);
  --wkq-btn-height: 56px;

  all:initial;
  display:block;
  width:100%;
  max-width:460px;
  margin:0 auto;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  color:var(--wkq-ink-deep);
  box-sizing:border-box;
}
.wkq-root *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; font-family:inherit; }
.wkq-root button{ font:inherit; }

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

.wkq-header{ margin-bottom:10px; }
.wkq-title{ font-size:clamp(19px, 5vw, 22px); font-weight:900; margin:0 0 4px; color:var(--wkq-ink-deep); }
.wkq-intro{ font-size:var(--wkq-fs-sub); color:var(--wkq-ink); line-height:1.5; }

.wkq-mascotbar{
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px;
  padding:8px 12px; margin:10px 0; box-shadow:0 3px 0 var(--wkq-paper-deep);
}
.wkq-mascotbar img{ width:56px; height:auto; border-radius:10px; flex-shrink:0; }
.wkq-mascotbar .wkq-bubble{ font-size:var(--wkq-fs-sub); font-weight:700; color:var(--wkq-ink-deep); min-height:1.2em; }

.wkq-start-btn{
  display:block; width:100%; min-height:var(--wkq-btn-height); padding:0; margin:10px 0;
  border:none; border-radius:999px; background:var(--wkq-pink); color:#fff;
  font-size:var(--wkq-fs-choice); font-weight:900; cursor:pointer; box-shadow:0 4px 0 #C23F63;
}
.wkq-start-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #C23F63; }

/* ---- 20問進捗ランプ(60秒モード専用) ---- */
.wkq-lamps{
  display:flex; flex-wrap:wrap; gap:3.5px; justify-content:center;
  background:#fff; border-radius:12px; padding:8px; margin-bottom:8px;
}
.wkq-lamp{
  width:15px; height:15px; border-radius:50%;
  border:2px solid var(--wkq-line-soft); background:#fff; flex-shrink:0;
  transition:.15s;
}
.wkq-lamp.wkq-lamp-correct{ background:var(--wkq-green); border-color:var(--wkq-green); }
.wkq-lamp.wkq-lamp-wrong{ background:var(--wkq-brick-soft); border-color:var(--wkq-brick); }
.wkq-lamp.wkq-lamp-current{ border-color:var(--wkq-pink); box-shadow:0 0 0 3px var(--wkq-pink-soft); transform:scale(1.15); }

.wkq-timerbar{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; border-radius:999px; padding:8px 16px; margin-bottom:10px;
  font-weight:800; font-size:var(--wkq-fs-timer); color:var(--wkq-pink);
}

.wkq-game-area{ min-height:120px; }
.wkq-question{ background:#fff; border-radius:var(--wkq-radius); padding:16px; box-shadow:0 4px 0 var(--wkq-paper-deep); }
.wkq-question-text{ font-size:var(--wkq-fs-question); font-weight:800; line-height:1.5; margin-bottom:14px; color:var(--wkq-ink-deep); }
.wkq-progress{ text-align:center; font-size:var(--wkq-fs-sub); font-weight:700; color:var(--wkq-ink); margin-bottom:8px; }

.wkq-choices{ display:flex; flex-direction:column; gap:10px; }
.wkq-choices-tf{ flex-direction:row; }
.wkq-choice-btn{
  padding:14px 12px; border-radius:12px; border:2px solid var(--wkq-paper-deep);
  background:#fff; font-size:var(--wkq-fs-choice); font-weight:700; color:var(--wkq-ink-deep);
  cursor:pointer; text-align:left; min-height:var(--wkq-btn-height);
  display:flex; align-items:center;
}
.wkq-choices-tf .wkq-choice-btn{ flex:1; text-align:center; justify-content:center; font-size:var(--wkq-fs-question); }
.wkq-choice-btn:disabled{ opacity:.7; cursor:default; }
.wkq-choice-btn.wkq-correct{ background:var(--wkq-green-soft); border-color:var(--wkq-green); }
.wkq-choice-btn.wkq-wrong{ background:var(--wkq-brick-soft); border-color:var(--wkq-brick); }

.wkq-explanation{
  margin-top:14px; padding:12px; background:var(--wkq-pink-soft); border-radius:10px;
  font-size:var(--wkq-fs-sub); line-height:1.5; color:var(--wkq-ink-deep);
}
.wkq-next-inline{
  display:block; width:100%; min-height:var(--wkq-btn-height); margin-top:12px; padding:0; border:none; border-radius:999px;
  background:var(--wkq-ink-deep); color:#fff; font-size:var(--wkq-fs-choice); font-weight:800; cursor:pointer;
}

.wkq-hintq .wkq-hint-list{ margin-bottom:10px; }
.wkq-hint-line{ font-size:var(--wkq-fs-sub); line-height:1.6; color:var(--wkq-ink); margin-bottom:4px; }
.wkq-hint-scorenote{ font-size:var(--wkq-fs-sub); font-weight:800; color:var(--wkq-gold); margin-bottom:10px; }
.wkq-hint-actions{ display:flex; gap:10px; }
.wkq-hint-actions .wkq-choice-btn{ flex:1; text-align:center; justify-content:center; }
.wkq-hint-answer{ margin-bottom:10px; padding:10px; background:var(--wkq-gold-soft); border-radius:10px; font-weight:800; font-size:var(--wkq-fs-choice); }

/* ---- 結果画面(v1.1で拡張) ---- */
.wkq-result-area{ background:#fff; border-radius:var(--wkq-radius); padding:20px; text-align:center; box-shadow:0 4px 0 var(--wkq-paper-deep); }
.wkq-result-area.wkq-result-best{ box-shadow:0 0 0 3px var(--wkq-pink), 0 4px 0 var(--wkq-paper-deep); }
.wkq-result-score{ font-size:clamp(22px, 6vw, 26px); font-weight:900; color:var(--wkq-ink-deep); margin-bottom:6px; }
.wkq-result-sub{ font-size:var(--wkq-fs-sub); color:var(--wkq-ink); margin-bottom:12px; }

.wkq-stat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0;
  text-align:left;
}
.wkq-stat-cell{ background:var(--wkq-paper); border-radius:10px; padding:8px 10px; }
.wkq-stat-cell .wkq-stat-label{ font-size:12px; color:var(--wkq-ink); font-weight:700; display:block; }
.wkq-stat-cell .wkq-stat-value{ font-size:var(--wkq-fs-choice); color:var(--wkq-ink-deep); font-weight:900; }

.wkq-xp-block{ margin:14px 0; text-align:left; }
.wkq-xp-label{ font-size:var(--wkq-fs-sub); font-weight:800; color:var(--wkq-ink-deep); margin-bottom:4px; display:flex; justify-content:space-between; }
.wkq-xp-bar-track{ height:14px; background:var(--wkq-paper-deep); border-radius:999px; overflow:hidden; }
.wkq-xp-bar-fill{ height:100%; background:var(--wkq-pink); border-radius:999px; transition:width .6s ease-out; width:0%; }
.wkq-rankup-banner{
  margin:10px 0; padding:10px; border-radius:12px; background:var(--wkq-gold-soft);
  color:#8a6415; font-weight:900; font-size:var(--wkq-fs-choice); text-align:center;
}

.wkq-badge{
  display:inline-block; padding:6px 14px; border-radius:999px; background:var(--wkq-green-soft);
  color:var(--wkq-green); font-weight:800; font-size:var(--wkq-fs-sub); margin:0 4px 10px;
}
.wkq-badge-best{ background:var(--wkq-pink-soft); color:var(--wkq-pink); }
.wkq-retry{ background:var(--wkq-pink); color:#fff; border-color:var(--wkq-pink); margin-top:6px; justify-content:center; text-align:center; }
.wkq-next-quiz{ margin-top:8px; justify-content:center; text-align:center; }

/* 広告・商品・関連記事の予定地(実コードは入れない) */
.wkq-placeholder{
  margin-top:16px; padding:14px; border:2px dashed var(--wkq-line-soft); border-radius:12px;
  text-align:center; font-size:var(--wkq-fs-sub); color:#9AA7B8;
}

/* v1.3: 勲章エリアのスタイルは wk-growth.css (wkg-プレフィックス) に統合しました。
   quiz/nanpre両エンジンで共有するため、このファイルには重複定義を置きません。
   wk-growth.css を必ず一緒に読み込んでください。 */