/* ============================================================
   Quiz.css — みんなでクイズ
   デザイン方針：
   ・配色・角丸・シャドウ・書体はすべて Style.css の共通トークン
     （--bg / --surface / --border / --text / --text-secondary /
      --r-sm / --r-md / --r-lg / --shadow）をそのまま使い、CardMaker
     （Cardmaker.css）と完全に同じ見た目のトーンに揃える。
     独自のフォントや背景色は定義しない（Quiz.htmlもStyle.cssを読み込む
     前提。bodyの背景・文字色・書体もCardMaker同様、style.css側の
     ものを上書きしない）。
   ・ボタンはCardMakerの .btn と同じ規格（高さ48px・角丸var(--r-md)・
     押下時 transform:scale(.97) + opacity:.85・disabledはopacity:.4）
     に統一する。
   ・カード状の要素（手動問題入力・招待コード表示など）はCardMakerの
     .card-block / .deck-card と同じく、白いサーフェス(var(--surface))
     + var(--shadow) + var(--r-lg) の組み合わせにする。
   ・確認モーダルはCardMakerの .modal-overlay / .modal-sheet と同じ
     「下から出てくるボトムシート（デスクトップ幅では中央カード）」
     パターンに統一する。
   ・4択ボタンだけはCardMaker側に相当するパーツが無いため、早押しクイズ
     の定番である「色×図形(▲◆●■)」の専用デザインを維持しつつ、使う色は
     アプリ全体の意味付け（青=ブランド／緑=正解・完了／赤=危険／
     金・琥珀=強調）に揃えている。
   ============================================================ */

:root{
  /* CardMakerには無い、クイズ専用の意味付けカラーだけをここで追加する。
     背景・境界線・文字色・角丸・影は Style.css の共通トークンをそのまま使う。 */
  --accent: #2563EB;        /* ブランドカラー（CardMakerの主要ボタン色と共通） */
  --accent-soft: #EFF4FF;   /* CardMakerの block-action-btn 等と共通の薄い青 */
  --accent-ink: #ffffff;
  --good: #16a34a;          /* completed-card 等と共通の緑（正解） */
  --good-soft: #dcfce7;
  --bad: #EF4444;           /* btn-danger 等と共通の赤（不正解・危険操作） */
  --bad-soft: #FEF2F2;
  --warn: #b45309;          /* unsure-badge 等と共通の琥珀（一番乗りバッジ） */
  --warn-soft: #fffbeb;
  --warn-line: #fcd34d;
  --gold: #f59e0b;          /* 表彰台1位の演出用 */

  --choice-a: var(--bad);    /* ▲ 赤 */
  --choice-b: var(--accent); /* ◆ 青 */
  --choice-c: var(--gold);   /* ● 金 */
  --choice-d: var(--good);   /* ■ 緑 */
}

/* Style.cssで既に *,*::before,*::after は border-box + margin/padding:0 に
   リセット済みだが、CardMaker.cssと同様に明示しておく（安全側） */
*, *::before, *::after{ box-sizing:border-box; }

/* ★ CardMaker.cssと同じ方針：bodyの背景・文字色・書体はStyle.cssの
   ものをそのまま使い、ここでは上書きしない。 */

button{ font-family:inherit; cursor:pointer; }
input, select{ font-family:inherit; }

/* ── 画面切り替え ───────────────────────── */
.screen{
  display:none;
  min-height:100vh;
  min-height:100dvh;
  flex-direction:column;
}
.screen.active{ display:flex; }

/* ── ヘッダー（CardMakerの .topbar と同じ規格） ───────────────────────── */
.qz-header{
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  height:calc(56px + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) 1rem 0;
  position:sticky; top:0; z-index:100; flex-shrink:0;
}
.qz-brand{
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:16px; letter-spacing:-.01em;
  color:var(--text);
}
.qz-brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:var(--r-sm);
  background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:14px;
}
.qz-brand-sm{
  font-weight:700; font-size:15px; color:var(--text-secondary);
  max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.qz-back, .qz-icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg); color:var(--text-secondary); font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s; flex-shrink:0;
}
.qz-back:active, .qz-icon-btn:active{ background:var(--border); }
.qz-account{ font-size:13px; color:var(--text-secondary); }

/* ── 本文レイアウト（CardMakerの .inner と同じ最大幅） ───────────────────────── */
.qz-body{
  flex:1; width:100%; max-width:520px; margin:0 auto;
  padding:1.25rem 1rem 6rem; display:flex; flex-direction:column; gap:14px;
}
.qz-body-center{ justify-content:center; align-items:center; text-align:center; }

.loading-wrap{ margin:auto; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--text-secondary); }
.loading-dot{
  width:14px; height:14px; border-radius:50%; background:var(--accent);
  animation:qzPulse 1s ease-in-out infinite;
}
@keyframes qzPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.6); opacity:.4; } }

/* ── ホーム ───────────────────────── */
.qz-hero-title{
  font-weight:800; font-size:26px; line-height:1.3; letter-spacing:-.02em;
  margin:10px 0 2px; color:var(--text);
}
.qz-hero-sub{ color:var(--text-secondary); font-size:14px; margin:0 0 18px; }

.qz-home-actions{ width:100%; display:flex; flex-direction:column; gap:12px; }
.qz-big-btn{
  width:100%; border-radius:var(--r-md);
  padding:16px 18px; display:flex; align-items:center; gap:14px;
  font-weight:700; font-size:15px;
  transition:opacity .12s, transform .1s;
}
.qz-big-btn:active{ transform:scale(.97); opacity:.85; }
.qz-big-btn-icon{ font-size:24px; }
.qz-big-btn-join{ background:var(--surface); color:var(--accent); border:1.5px solid var(--accent); justify-content:flex-start; box-shadow:var(--shadow); }
.qz-big-btn-host{ background:var(--accent); color:#fff; border:none; justify-content:flex-start; box-shadow:var(--shadow); }

/* ── 入力系（CardMakerの .set-name-input / .modal-input と同じ規格） ───────────────────────── */
.qz-label{ color:var(--text-secondary); font-size:14px; margin:0; }
.qz-field{ display:flex; flex-direction:column; gap:6px; text-align:left; width:100%; }
.qz-field-label{ font-size:13px; color:var(--text-secondary); font-weight:600; }
.qz-input{
  width:100%; padding:13px 14px; border-radius:var(--r-md);
  border:2px solid var(--border); background:var(--surface); color:var(--text); font-size:15px;
  outline:none; transition:border-color .15s;
}
.qz-input:focus{ border-color:var(--accent); }
.qz-hint{ font-size:12.5px; color:var(--text-secondary); line-height:1.6; margin:0; text-align:left; }
.qz-error{ color:var(--bad); font-size:13px; min-height:18px; }

.qz-code-input{
  width:100%; max-width:280px; text-align:center;
  font-weight:700; font-size:34px; letter-spacing:.3em;
  padding:16px 8px 16px 18px; border-radius:var(--r-md);
  border:2px solid var(--border); background:var(--surface); color:var(--accent);
  outline:none; transition:border-color .15s;
}
.qz-code-input:focus{ border-color:var(--accent); }

/* ── 参加：ルーム一覧（コード入力の代わりに、タイトルを見て選ぶ） ───────────────────────── */
.qz-room-list{ display:flex; flex-direction:column; gap:8px; width:100%; }
.qz-room-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; padding:14px 16px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .1s, opacity .12s;
}
.qz-room-row:active{ transform:scale(.98); opacity:.85; }
/* ★ 進行中で途中参加不可のルーム：状況は見えるがタップはできない状態 */
.qz-room-row-disabled{ opacity:.55; box-shadow:none; }
.qz-room-row-main{ min-width:0; }
.qz-room-row-title{
  font-weight:700; font-size:15px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.qz-room-row-sub{ font-size:12.5px; color:var(--text-secondary); margin-top:2px; }
.qz-room-row-count{
  flex:none; display:flex; align-items:center; gap:4px; font-weight:700; font-size:13px;
  color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:5px 10px;
}

/* ── ボタン（CardMakerの .btn と同じ規格：高さ48px・角丸var(--r-md)） ───────────────────────── */
.qz-cta{
  width:100%; height:48px; padding:0 1.25rem; border:none; border-radius:var(--r-md);
  background:var(--accent); color:#fff;
  font-weight:600; font-size:15px;
  margin-top:6px; transition:opacity .12s, transform .1s;
}
.qz-cta:disabled{ opacity:.4; cursor:not-allowed; }
.qz-cta:active:not(:disabled){ transform:scale(.97); opacity:.85; }

.qz-toggle-group{ display:flex; gap:8px; }
.qz-toggle-opt{
  flex:1; padding:11px 8px; border-radius:var(--r-md); border:1.5px solid var(--border);
  background:var(--surface); color:var(--text-secondary); font-weight:700; font-size:13.5px;
  transition:all .15s;
}
.qz-toggle-opt.active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.qz-toggle-opt:disabled{ opacity:.5; }

/* ── 手動問題作成（CardMakerの .card-block と同じ規格） ───────────────────────── */
.qz-manual-card{
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow);
  border-left:4px solid transparent; transition:border-color .2s;
  padding:14px; display:flex; flex-direction:column; gap:8px; margin-bottom:12px;
}
.qz-manual-card:focus-within{ border-left-color:var(--accent); }
.qz-manual-card-head{ display:flex; justify-content:space-between; align-items:center; }
.qz-manual-card-head b{ font-size:13px; color:var(--text-secondary); }
.qz-manual-remove{ background:none; border:none; color:var(--bad); font-size:13px; padding:2px 6px; font-weight:600; }
.qz-manual-choice-row{ display:flex; align-items:center; gap:8px; }
.qz-manual-choice-row input[type=radio]{ accent-color:var(--good); width:18px; height:18px; flex:none; }
.qz-add-q-btn{
  width:100%; padding:12px; border-radius:var(--r-md); border:1.5px dashed var(--border);
  background:transparent; color:var(--text-secondary); font-weight:600; font-size:14px;
}
.qz-add-q-btn:active{ background:var(--bg); }

/* ── 詳細設定への入口ボタン（本体は専用画面screen-host-advanced） ───────────────────────── */
.qz-advanced-toggle-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:var(--r-md); border:1.5px solid var(--border);
  background:var(--surface); color:var(--text-secondary); font-weight:700; font-size:13.5px;
  margin-bottom:.25rem;
}
.qz-advanced-toggle-btn:active{ background:var(--bg); }

/* ── デッキ選択（CardMakerのホーム画面へ行って選ぶ方式） ───────────────────────── */
.qz-deck-picker-btn{
  width:100%; padding:14px; border-radius:var(--r-md); border:1.5px dashed var(--accent);
  background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14.5px;
}
.qz-deck-picker-btn:active{ opacity:.85; }
.qz-deck-chip-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.qz-deck-chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:var(--r-md); background:var(--surface);
  border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--text);
}
.qz-deck-chip-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qz-deck-chip-remove{ flex:none; background:none; border:none; color:var(--text-secondary); font-size:16px; padding:2px 6px; line-height:1; }

/* ── 待機室（CardMakerの .deck-card / .card-block と同じ白いサーフェス） ───────────────────────── */
.qz-player-grid{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:100%;
  padding:6px 0 14px;
}
.qz-player-chip{
  display:flex; align-items:center; gap:6px; padding:8px 12px 8px 8px;
  border-radius:999px; background:var(--surface); border:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text);
}
.qz-avatar{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:11px; color:#fff; flex:none;
}
.qz-waiting-anim{ margin-bottom:6px; animation:qzBreathe 1.6s ease-in-out infinite; }
@keyframes qzBreathe{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }

/* ── カウントダウン（スタート直後、最初の問題の前だけ） ───────────────────────── */
.qz-countdown-num{
  font-weight:800; font-size:130px; line-height:1; color:var(--accent);
  animation:qzCountPop .5s ease;
}
@keyframes qzCountPop{ from{ transform:scale(1.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ── 「第N問」表示（毎問の直前） ─────────────────────────
   ★ 追加：「ちょっとさびしい」との指摘を受け、弾むポップイン＋背後に広がって
   消える光の輪、の2つを足した（表示時間QUIZ_INTRO_DURATION_SEC=2秒のうち
   最初の0.5秒程度だけ動き、残りは静止する）。 */
.qz-intro-qnum-wrap{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
}
.qz-intro-ring{
  position:absolute; top:50%; left:50%; width:80px; height:80px; margin:-40px 0 0 -40px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--accent) 0%, rgba(37,99,235,0) 72%);
  opacity:0;
  animation:qzIntroRing .6s ease-out .05s both;
}
@keyframes qzIntroRing{
  0%   { transform:scale(.25); opacity:.5; }
  100% { transform:scale(2.8); opacity:0; }
}
.qz-intro-qnum{
  position:relative; z-index:1;
  font-weight:800; font-size:40px; line-height:1.3; color:var(--text);
  animation:qzIntroPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes qzIntroPop{ from{ transform:scale(.3); opacity:0; } to{ transform:scale(1); opacity:1; } }
.qz-intro-sub{ color:var(--text-secondary); font-size:14px; margin-top:8px; }

/* ★ 追加：ホストの詳細設定「ボーナス問題」対象の問題に付ける予告バッジ
   （「第N問」画面・出題画面の両方で使う共通クラス）。 */
.qz-bonus-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line);
  padding:6px 14px; border-radius:999px; font-size:13px; font-weight:800;
  margin-bottom:10px;
  animation:qzBonusPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes qzBonusPop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ── 出題画面・途中経過：スクロールしないと見えない要素が出ないよう画面ぴったりに
   収め、ページ自体はスクロールさせない（タイマーバーが見切れる不具合の対策）。
   参加者が多く一覧が入りきらない場合は、途中経過リストの中だけスクロールする。 ── */
#screen-host-play, #screen-player-play, #screen-ranking{
  height:100vh; height:100dvh; overflow:hidden;
}
/* ★ 追加：上記3画面の表示中だけ、body自体のスクロールもJS側（showScreenQ）で止める。
   画面側はheight:100dvh固定・overflow:hiddenで収めているが、それだけだとブラウザの
   誤差でページがわずかに上下スクロールできてしまうことがあったための保険。
   ★ 追加：「まだスワイプできちゃう」との指摘を受け、touch-action:noneも追加した。
   overflow:hidden/overscroll-behavior（html側で全ページ共通に設定済み）だけでは
   iOS Safari等でタッチのスワイプ操作そのもの（弾む・わずかに動く挙動）を
   止めきれない端末があったため、ジェスチャーの解釈自体をブラウザにさせない
   より強い指定にした。.qz-scroll-list（途中経過の参加者一覧）だけは、人数が
   多い場合に備えて縦スワイプを明示的に許可し直す。 */
body.qz-fixed-screen{ overflow:hidden; touch-action:none; }
#screen-host-play .qz-body, #screen-player-play .qz-body, #screen-ranking .qz-body{
  flex:1; min-height:0; overflow:hidden;
  /* ★ 追加：「ボタンがちょっと下すぎ」との指摘を受け、ホームインジケーター等の
     セーフエリア分を下側の余白に足した（選択肢欄の下寄せ＝margin-top:autoと
     組み合わせても、常にセーフエリアより上に収まるようにするため）。 */
  padding-bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
#screen-ranking .qz-body{ display:flex; flex-direction:column; }
/* ★ 追加：選択肢欄を下寄せする仕組みを margin-top:auto（アニメーションできない）
   から、専用の空要素（.qz-choice-spacer）のflex-growをトグルする方式に変更した。
   flex-growは数値なのでtransitionで滑らかに補間でき、正解発表の前後で
   選択肢がパッと切り替わらず、スーッとスライドするようになる。 */
.qz-choice-spacer{ flex-grow:0; transition:flex-grow .35s ease; }
.qz-choice-spacer.qz-choices-bottom{ flex-grow:1; }
.qz-scroll-list{ flex:1; min-height:0; width:100%; overflow-y:auto; touch-action:pan-y; }
#rk-my-rank{ font-weight:700; font-size:15px; color:var(--accent); flex-shrink:0; }

/* ── 出題画面 共通 ───────────────────────── */
.qz-progress-label{ font-weight:700; font-size:13px; color:var(--text-secondary); }
.qz-my-score{ font-weight:700; font-size:14px; color:var(--accent); }
.qz-timerbar-track{
  width:100%; height:8px; border-radius:999px; background:var(--bg); overflow:hidden; margin-top:4px;
}
.qz-timerbar-fill{
  height:100%; width:100%; background:linear-gradient(90deg, var(--good), var(--gold) 60%, var(--bad));
  transform-origin:left center; transition:transform .25s linear;
}
.qz-question-text{
  font-weight:700; font-size:21px; line-height:1.4;
  margin:14px 0 4px; color:var(--text);
}
.qz-answered-count{ color:var(--text-secondary); font-size:13px; margin-bottom:6px; }

.qz-choice-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px;
}
.qz-choice-btn{
  position:relative; border:none; border-radius:var(--r-lg); padding:20px 14px 20px 46px;
  min-height:78px; text-align:left; font-weight:700; font-size:15px; color:#fff;
  display:flex; align-items:center; line-height:1.35;
  box-shadow:var(--shadow);
  transition:transform .1s ease, opacity .2s ease, filter .2s ease;
}
.qz-choice-btn:active{ transform:scale(.96); }
.qz-choice-btn::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; background:rgba(255,255,255,.9);
}
.qz-choice-a{ background:var(--choice-a); } .qz-choice-a::before{ clip-path:polygon(50% 0,100% 100%,0 100%); }
.qz-choice-b{ background:var(--choice-b); } .qz-choice-b::before{ clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.qz-choice-c{ background:var(--choice-c); color:#3b2405; } .qz-choice-c::before{ background:rgba(0,0,0,.7); border-radius:50%; }
.qz-choice-d{ background:var(--choice-d); } .qz-choice-d::before{ border-radius:3px; }

.qz-choice-btn[disabled]{ pointer-events:none; }
.qz-choice-btn.qz-dim{ opacity:.35; filter:grayscale(.3); }

/* ★ 自分が押した選択肢を一目で分かるようにする：どの色のボタンでも
   はっきり見える濃色の枠＋右上のチェックバッジで「選択中」を強調し、
   他の選択肢は.qz-dimで薄くして目立たなくする。
   正解発表(reveal)時は .qz-correct-flash / .qz-wrong-flash が
   同じ場所の枠・バッジ色を上書きして「正解／自分の誤答」を示す。 */
.qz-choice-btn.qz-picked{
  outline:4px solid #fff; outline-offset:-4px;
  box-shadow:0 0 0 4px rgba(17,24,39,.4), var(--shadow);
  transform:scale(1.02);
}
.qz-choice-btn.qz-picked::after{
  content:"✓ 選択中"; position:absolute; top:8px; right:8px;
  background:#111827; color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.02em; padding:3px 8px; border-radius:999px; line-height:1.4;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.qz-choice-btn.qz-correct-flash{
  outline:4px solid #fff; outline-offset:-4px;
  box-shadow:0 0 0 4px rgba(22,163,74,.45), var(--shadow);
}
.qz-choice-btn.qz-correct-flash::after{
  content:"✓ 正解"; position:absolute; top:8px; right:8px;
  background:#16a34a; color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.02em; padding:3px 8px; border-radius:999px; line-height:1.4;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.qz-choice-btn.qz-wrong-flash{
  outline:4px solid #fff; outline-offset:-4px;
  box-shadow:0 0 0 4px rgba(239,68,68,.45), var(--shadow);
}
.qz-choice-btn.qz-wrong-flash::after{
  content:"✕ 選んだ答え"; position:absolute; top:8px; right:8px;
  background:#dc2626; color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.02em; padding:3px 8px; border-radius:999px; line-height:1.4;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}

.qz-answer-feedback{
  margin-top:16px; padding:16px; border-radius:var(--r-md); text-align:center;
  font-weight:700; font-size:16px;
}
.qz-answer-feedback.ok{ background:var(--good-soft); color:#15803d; border:1px solid #bbf7d0; }
.qz-answer-feedback.ng{ background:#fee2e2; color:#dc2626; border:1px solid #fecaca; }
.qz-waiting-note{ color:var(--text-secondary); font-size:13px; text-align:center; margin-top:10px; }

/* ── ホスト：正解発表パネル（CardMakerの .unsure-badge と同じ琥珀色） ───────────────────────── */
.qz-reveal-panel{ margin-top:8px; }
.qz-first-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--warn-soft);
  color:var(--warn); border:1px solid var(--warn-line); border-radius:999px;
  padding:8px 14px; font-size:13.5px; font-weight:700; margin-bottom:10px;
}
.qz-mini-leaderboard{ display:flex; flex-direction:column; gap:6px; }

/* ── 順位・スコア一覧 共通 ───────────────────────── */
.qz-lb-row{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border);
}
.qz-lb-rank{ font-weight:700; width:20px; text-align:center; color:var(--text-secondary); font-size:13px; }
.qz-lb-name{ flex:1; text-align:left; font-size:14px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qz-lb-score{ font-weight:700; font-size:14px; color:var(--accent); }
/* ★ 追加：正解発表(reveal)中、他の参加者がこの問題に正解したか(◯)・不正解か(✕)を表示 */
.qz-lb-mark{ width:22px; text-align:center; font-weight:800; font-size:14px; flex-shrink:0; }
.qz-lb-mark.correct{ color:#16a34a; }
.qz-lb-mark.wrong{ color:#dc2626; }
.qz-lb-mark.unanswered{ color:var(--text-dim); }
/* ★ 追加：途中経過・最終結果のリストで自分の行をひと目で分かるようにする */
.qz-lb-row-me{ border-color:var(--accent); background:var(--accent-soft); }
.qz-lb-row-me .qz-lb-name{ color:var(--accent); }

/* ── 途中経過画面（#rk-list）だけのモーション追加 ─────────────
   結果画面・正解発表中のミニ順位表も同じ.qz-lb-rowを使っているため、
   #rk-list配下に限定してここだけ動きを増やす。 */
#rk-list .qz-lb-rank{ display:inline-flex; align-items:center; justify-content:center; gap:3px; width:auto; min-width:20px; }
/* ★ 順位が上下した行に付ける矢印バッジ（絵文字/Unicode矢印は使わず、他の
   クイズ用図形＝▲◆●■と同じCSS三角形で表現し、OS依存の見た目を避ける）。 */
.qz-rank-move{
  display:inline-block; width:0; height:0; flex-shrink:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  animation:qzRankPop .4s cubic-bezier(.34,1.56,.64,1);
}
.qz-rank-move.up{ border-bottom:6px solid #16a34a; }
.qz-rank-move.down{ border-top:6px solid #dc2626; }
@keyframes qzRankPop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
/* ★ この部屋で途中経過を初めて見せる回（比較対象が無くFLIPできない）は、
   上から順に少し遅れてふわっと現れる演出にする */
@keyframes qzRowIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }

/* ── 結果画面 ───────────────────────── */
.qz-podium{ display:flex; align-items:flex-end; gap:10px; width:100%; max-width:360px; margin:10px 0 22px; }
.qz-podium-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.qz-podium-bar{ width:100%; border-radius:var(--r-sm) var(--r-sm) 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:8px; }
.qz-podium-1 .qz-podium-bar{ height:110px; background:linear-gradient(180deg,#fde68a,var(--gold)); }
.qz-podium-2 .qz-podium-bar{ height:82px; background:#cbd5e1; }
.qz-podium-3 .qz-podium-bar{ height:64px; background:#e0b088; }
.qz-podium-medal{ font-size:20px; }
.qz-podium-name{ font-size:12.5px; font-weight:700; color:var(--text); max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qz-podium-score{ font-size:12px; color:var(--text-secondary); }
.qz-full-leaderboard{ width:100%; display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }

/* ── モーダル（CardMakerの .modal-overlay / .modal-sheet と同じボトムシート） ───────────────────────── */
.qz-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:300; display:none; align-items:flex-end; justify-content:center;
}
.qz-modal-overlay.active{ display:flex; animation:qzFadeIn .15s ease; }
@keyframes qzFadeIn{ from{ opacity:0; } }
@media (min-width:520px){ .qz-modal-overlay{ align-items:center; } }
.qz-modal{
  width:100%; background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -8px 40px rgba(0,0,0,.15);
  animation:qzSheetUp .22s ease;
}
/* CardMakerの .modal-handle 相当（見た目だけなのでHTMLを増やさず疑似要素で表現） */
.qz-modal::before{
  content:""; display:block; width:36px; height:4px; background:var(--border);
  border-radius:2px; margin:0 auto .9rem;
}
@keyframes qzSheetUp{ from{ transform:translateY(30px); opacity:0; } }
@media (min-width:520px){
  .qz-modal{ border-radius:var(--r-lg); max-width:340px; margin:1rem; padding:1.25rem; animation:none; }
  .qz-modal::before{ display:none; }
}
.qz-modal-title{ font-weight:700; font-size:16px; margin-bottom:6px; color:var(--text); }
.qz-modal-desc{ color:var(--text-secondary); font-size:13.5px; line-height:1.6; margin-bottom:16px; }
.qz-modal-actions{ display:flex; gap:8px; }
.qz-modal-btn{
  flex:1; height:44px; border-radius:var(--r-md); font-weight:600; font-size:14px;
  transition:opacity .12s, transform .1s;
}
.qz-modal-btn:active{ transform:scale(.97); opacity:.85; }
.qz-modal-btn-cancel{ background:transparent; color:var(--text-secondary); border:1.5px solid var(--border); }
.qz-modal-btn-ok{ background:var(--bad-soft); color:var(--bad); border:1.5px solid #fecaca; }

@media (min-width:600px){
  .qz-choice-grid{ grid-template-columns:1fr 1fr; }
}