/* =========================================================
   くじばこ 固有スタイル(部屋ページ・作成・結果演出)
   tokens.css → ui.css → 本ファイル → renew.css の順に読み込む。
   ★生pxを新設せずトークンを参照する。色は [data-brand="kuji"](renew.css)から。
   ========================================================= */

/* ---------- 作成:モード選択カード(konoのtpl-cardと同仕様) ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min-sm),1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-4)}
.tpl-card{text-align:left;background:var(--surface);border:var(--bw-2) solid var(--line-strong);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);cursor:pointer;font-family:inherit;
  transition:border-color var(--dur-fast),background var(--dur-fast)}
.tpl-card:hover{border-color:var(--primary);background:var(--primary-l)}
.tpl-card.selected{border-color:var(--primary);background:var(--primary-l)}
.tpl-label{display:block;font-weight:700;color:var(--text);margin-bottom:var(--sp-half)}
.tpl-card.selected .tpl-label{color:var(--primary-d)}
.tpl-hint{display:block;font-size:var(--fs-sm);color:var(--muted);line-height:1.5}

/* トップ:モードカードの補足文 */
.mode-sub{color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-1)}

/* ---------- 部屋ページ ---------- */
.room-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.room-title{font-size:var(--fs-3xl);font-weight:700;color:var(--text);word-break:break-word}
.room-meta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-1)}
/* 状態バッジは JS が .badge に .st-open/.st-closed/.st-drawn を付ける(色+文字で伝える) */
.badge.st-open{background:var(--ok-bg);color:var(--ok-text);border:var(--bw) solid #bcd9be}
.badge.st-closed{background:var(--amber-bg);color:var(--amber-text);border:var(--bw) solid var(--bd-amber)}
.badge.st-drawn{background:var(--primary-l);color:var(--primary-d);border:var(--bw) solid var(--bd-primary)}

/* 公平性チップ(タネの指紋)。コミットの常時表示=本体価値なので全画面に出す */
.seed-bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  background:var(--bg-subtle);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-4);min-width:0}
.seed-label{font-size:var(--fs-md);font-weight:700;color:var(--muted);flex:0 0 auto;
  display:inline-flex;align-items:center}
.seed-hash{font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-base);
  color:var(--text);word-break:break-all;min-width:0;flex:1 1 var(--col-min-sm)}
.seed-link{font-size:var(--fs-md);color:var(--primary);flex:0 0 auto;
  display:inline-flex;align-items:center;min-height:var(--tap-min)}

/* 主催者用URLの保存バナー(警告文の中にコピー手段を置く。
   「保存してください」と言いながらコピーボタンが無いのを解消=ゆか3) */
.banner-acts{display:flex;margin-top:var(--sp-2);width:100%}
.banner-note{display:block;margin-top:var(--sp-2);font-size:var(--fs-md);color:var(--muted)}
#saveUrlBanner{align-items:flex-start}
#saveUrlBanner > span:last-child{flex:1 1 auto;min-width:0}

/* ---------- 正直な注記(看板の打消しを同一画面に置く。アルゴス🔴1) ----------
   「できないこと」を目立たない小文字にしない。本文と同じ大きさで、
   注意色の左罫を付けて“わざわざ書いてある”ことが分かる見た目にする。 */
.honest-note{border-left:var(--bw-4) solid var(--amber);background:var(--amber-bg);
  border-color:var(--bd-amber);color:var(--text)}
.honest-note p{margin-bottom:var(--sp-2)}
.honest-note p:last-child{margin-bottom:0}
.honest-note .honest-key{background:var(--surface);border:var(--bw) solid var(--bd-amber);
  border-radius:var(--r-md);padding:var(--sp-3);margin-top:var(--sp-3)}
.article .honest-inline{background:var(--amber-bg);border-left:var(--bw-4) solid var(--amber);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0}

/* ---------- 目撃バー(抽選前にこの画面を見た人=コミットの拘束力の根拠) ---------- */
.witness-bar{display:flex;align-items:flex-start;gap:var(--sp-2);flex-wrap:wrap;min-width:0;
  border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-4);font-size:var(--fs-md)}
.witness-bar > span{flex:1 1 var(--col-min);min-width:0}
.witness-bar .wit-sub,
.witness-line .wit-sub{display:block;color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-half)}
/* ★人数の打消し。数字の「近く」に置く約束なので、小さくしすぎない・畳まない。
   本文と同じ 14px・muted より濃い色で、読み飛ばされない位置に出す。 */
.wit-caveat{display:block;color:var(--text);font-size:var(--fs-md);margin-top:var(--sp-2);
  padding-left:var(--sp-3);border-left:var(--bw-2) solid var(--line-strong)}
.witness-bar .wit-ok{color:var(--ok-text)}
/* ★「記録が見つからない」は事実の報告であって警告ではない(アルゴス🟠C)。
   端末を変えただけの正直な人に警告色を当てない。中立の面で淡々と伝える。 */
.witness-bar .wit-none{color:var(--text)}
.witness-bar:has(.wit-ok){background:var(--ok-bg);border-color:#bcd9be}
.witness-bar:has(.wit-none){background:var(--bg-subtle)}
.witness-bar:has(.wit-info){background:var(--bg-subtle)}
.witness-line{background:var(--bg-subtle);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-3);font-size:var(--fs-md)}
/* 参加者数より目撃者が少ないときは数字を目立たせる(色だけに頼らず、後段の説明文と対で伝える) */
.wit-few{color:var(--amber-text)}

/* 状態バッジの横に添える注記(締め切り後も名簿を変えられる。🔴2) */
.meta-note{display:block;width:100%;color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-1)}
/* 定義リストのラベル補足(①封印の番号/②タネの区別。🟠8) */
.kv-sub{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-sm)}

/* 主催者:2カラム(QR/進行)。狭幅で1カラム */
.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min),1fr));gap:var(--sp-4)}

/* 参加者リスト(主催者画面・高密度) */
.member-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1);
  max-height:40vh;overflow-y:auto;overscroll-behavior-y:contain}
.member-list li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm);font-size:var(--fs-md);min-height:var(--tap-min)}
.member-list li:nth-child(even){background:var(--stripe)}
.member-num{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--primary-d);
  min-width:var(--sp-6);text-align:right}
.member-name{flex:1 1 auto;min-width:0;word-break:break-word}
.member-del{margin-left:auto}

/* 参加者:自分の番号・結果待ち */
.wrap-narrow-center{max-width:var(--maxw-card);margin:0 auto}
.panel-h1{font-size:var(--fs-2xl);font-weight:700;color:var(--primary-d);margin-bottom:var(--sp-3)}
.you-are{color:var(--muted);font-size:var(--fs-md)}
.you-num{font-size:var(--fs-8xl);font-weight:700;color:var(--primary-d);
  font-variant-numeric:tabular-nums;line-height:1.2}
.you-name{font-size:var(--fs-xl);font-weight:700;word-break:break-word;margin-bottom:var(--sp-2)}
.wait-msg{color:var(--text);font-weight:700;margin-top:var(--sp-2)}
.wait-count{font-size:var(--fs-md);margin-top:var(--sp-1)}
/* 待機ドット(処理が動いている合図。reduced-motionでは静止) */
.wait-dots{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-3)}
.wait-dots span{width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-full);background:var(--primary);
  animation:kj-blink 1.2s ease-in-out infinite}
.wait-dots span:nth-child(2){animation-delay:.2s}
.wait-dots span:nth-child(3){animation-delay:.4s}
@keyframes kj-blink{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- 結果 ---------- */
.result-panel{border:var(--bw-2) solid var(--primary);position:relative;overflow:hidden}
.result-eyebrow{color:var(--muted);font-size:var(--fs-md);font-weight:700}
.result-big{font-size:var(--fs-7xl);font-weight:700;line-height:1.25;word-break:break-word;
  color:var(--primary-d);margin:var(--sp-2) 0}
.result-big.is-win{color:var(--ok-text)}
.result-big.is-lose{color:var(--muted);font-size:var(--fs-3xl)}
.result-sub{color:var(--muted);font-size:var(--fs-md)}
/* 出現演出(1回だけ・0.32s=正本レシピ) */
.result-panel.pop{animation:kj-pop var(--dur-in) var(--ease-in)}
@keyframes kj-pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}

/* 結果テーブル */
#resultTable{width:100%;border-collapse:collapse}
#resultTable th,#resultTable td{padding:var(--sp-1) var(--sp-2);border-bottom:var(--bw) solid var(--line);
  font-size:var(--fs-md);text-align:left}
#resultTable th{background:var(--bg-subtle);color:var(--muted);font-size:var(--fs-sm)}
#resultTable td.num,#resultTable th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#resultTable tr.is-me td{background:var(--primary-l);font-weight:700}
#resultTable tr.is-win td:first-child{border-left:var(--bw-4) solid var(--ok)}
.win-chip{display:inline-block;background:var(--ok-bg);color:var(--ok-text);border:var(--bw) solid #bcd9be;
  border-radius:var(--r-pill);padding:0 var(--sp-2);font-size:var(--fs-sm);font-weight:700}

/* 検算の結果表示(色+記号で伝える) */
#verifyResult{font-weight:700;font-size:var(--fs-md)}
#verifyResult.ok{color:var(--ok-text)}
#verifyResult.err{color:var(--warn)}

/* ---------- 紙吹雪(CSSのみ・外部ライブラリなし) ----------
   room.js が .cf を24個生成して1回だけ降らせる。演出は3秒で終わる。 */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:var(--z-toast);overflow:hidden}
.confetti .cf{position:absolute;top:-4%;width:var(--sp-2);height:var(--sp-3);opacity:.9;
  animation:kj-fall 3s ease-in forwards}
@keyframes kj-fall{
  0%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(108vh) rotate(540deg);opacity:.7}
}
@media (prefers-reduced-motion:reduce){
  .confetti{display:none}
  .wait-dots span{animation:none;opacity:.6}
  .result-panel.pop{animation:none}
}

/* ---------- モバイル ---------- */
@media (max-width:640px){
  .member-list{max-height:none}
  .result-big{font-size:var(--fs-6xl)}
}