/* =========================================================================
   ベストフォト専用のスタイル
   -------------------------------------------------------------------------
   見た目はクイズ大会と揃える。背景・フォント・ボタン・パネル・見出し・入力欄・
   進行バッジは /shared/css/style.css の共通部品をそのまま使い、ここでは上書きしない。
   ここに書くのは「クイズに無い部品」（写真の一覧・順位・発表カード・投稿の選択欄・
   大画面の2カラム）だけ。色は必ず共通の変数（--accent, --panel, --muted …）から取る。
   ========================================================================= */

/* ---------- 枠組み ---------- */
.photo-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 20px 56px; }
.photo-form { display: flex; flex-direction: column; gap: 14px; }
.connection { font-size: 12px; }
.hint { font-size: 13px; line-height: 1.8; margin: 8px 0 0; }
.photo-page p { overflow-wrap: anywhere; }
.photo-page .panel { margin-bottom: 20px; }
.photo-page select { width: 100%; }
/* label にも section-title を当てるので、ブロックとして並べる */
label.section-title { margin-bottom: 8px; }

/* 操作結果のお知らせ（クイズのトーストと同じ配色） */
.message { overflow-wrap: anywhere; margin: 0; }
.message:not(:empty) {
  padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: rgba(61, 220, 132, .14); color: var(--good); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35);
}
.message.error { background: rgba(255, 82, 82, .14); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255, 82, 82, .35); }

/* ---------- ホスト: 参加案内 ---------- */
.room-bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.photo-qr { width: 132px; height: 132px; background: #fff; padding: 8px; border-radius: 12px; }
.room-bar .photo-code { text-align: left; margin: 4px 0; font-size: 36px; }
.photo-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.photo-actions.horizontal { flex-direction: row; flex-wrap: wrap; align-items: center; }
.small-link, .photo-footnote a, .hint a { color: var(--accent); text-underline-offset: 4px; font-size: 13px; }

/* ---------- ホスト: 進行のステップ表示 ---------- */
.photo-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.photo-steps li {
  padding: 12px 8px; border-bottom: 3px solid var(--panel-2); color: var(--muted);
  font-size: 14px; font-weight: 700; text-align: center;
}
.photo-steps li.active { border-color: var(--accent); color: var(--accent); }

/* お題（進行中の内容なので大きく） */
.photo-prompt { font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.6; overflow-wrap: anywhere; margin: 12px 0 6px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.section-heading > span { font-size: 12px; }

/* ---------- 写真の一覧 ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 16px; }
.photo-card { background: var(--bg2); border: 1px solid var(--panel-2); border-radius: var(--radius-sm); overflow: hidden; min-width: 0; }
.photo-image { display: block; width: 100%; height: 210px; object-fit: contain; background: rgba(0, 0, 0, .35); }
.photo-open { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.photo-detail { padding: 14px; }
.photo-caption { font-size: 14px; line-height: 1.6; margin: 8px 0 12px; color: var(--muted); }
.photo-detail .photo-actions { margin-top: 10px; }
.photo-empty {
  padding: 40px 24px; border: 2px dashed var(--panel-2); color: var(--muted);
  border-radius: var(--radius-sm); text-align: center; font-size: 14px; margin: 0;
}

/* ---------- 入賞の順位 ---------- */
.ranking-list { list-style: none; padding: 0; margin: 16px 0 0; }
.ranking-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--panel-2); }
.ranking-row .photo-image { width: 70px; height: 54px; border-radius: 8px; }
.ranking-row .grow { overflow-wrap: anywhere; min-width: 0; font-weight: 700; }
.rank-number { color: var(--accent); min-width: 36px; font-weight: 900; }

.photo-footnote { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 28px; }

/* ---------- 発表（ホスト・参加者・大画面で共通） ---------- */
.winner-card {
  margin: 20px 0; padding: 24px; text-align: center;
  background: var(--panel); border: 2px solid var(--accent); border-radius: var(--radius);
  box-shadow: 0 0 40px rgba(255, 210, 63, .18);
}
.winner-heading { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; margin: 0 0 18px; }
.winner-rank {
  font-size: clamp(26px, 4vw, 48px); font-weight: 900; line-height: 1.2;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.winner-name { font-size: clamp(21px, 3vw, 36px); font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.winner-image { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: var(--radius-sm); }
.winner-caption { color: var(--text); font-size: 18px; margin: 14px 0 0; }
.winner-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.winner-small { background: var(--bg2); border: 1px solid var(--panel-2); border-radius: var(--radius-sm); overflow: hidden; min-width: 0; }
.winner-small .photo-image { height: 100px; }
.winner-small b { font-size: 12px; padding: 10px; display: block; overflow-wrap: anywhere; }
.winner-enter { animation: photo-reveal .85s ease-out; }
@keyframes photo-reveal { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- 参加者: 投稿 ---------- */
.photo-player .photo-grid { grid-template-columns: 1fr; }
.photo-player .photo-image { height: 260px; }
.photo-picker {
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-align: center;
  padding: 26px 14px; border: 2px dashed var(--panel-2); border-radius: var(--radius-sm); background: var(--bg2);
  transition: border-color var(--t);
}
.photo-picker:hover { border-color: var(--accent); }
.photo-picker:focus-within { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.photo-picker span:last-of-type { font-size: 12px; color: var(--muted); font-weight: 500; }
.picker-icon { font-size: 32px; line-height: 1; color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.upload-preview { width: 100%; max-height: 320px; object-fit: contain; background: rgba(0, 0, 0, .35); border-radius: var(--radius-sm); }

/* ---------- 大画面 ---------- */
.photo-screen .photo-wrap { max-width: 1920px; padding: 24px 40px; }
.screen-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.screen-main { min-width: 0; text-align: center; padding-top: 6vh; }
.screen-phase { justify-content: center; }
.screen-prompt { font-size: clamp(34px, 4.5vw, 76px); font-weight: 900; line-height: 1.5; overflow-wrap: anywhere; margin: 12px 0 22px; }
.screen-hint { line-height: 1.7; }
/* クイズのロビーの参加カード（.join-card）を、右の細い欄に収まる大きさで使う */
.photo-join { padding: 24px 20px; }
.photo-join .join-code { font-size: clamp(36px, 4vw, 56px); letter-spacing: 8px; margin: 4px 0 14px; }
.photo-join .photo-qr { width: 180px; height: 180px; max-width: 100%; padding: 10px; }
.photo-join p { margin: 10px 0 0; }
/* 回線の案内は細い枠に入るので、クイズの大画面より小さく（QRの説明より目立たせない） */
.photo-join .network-tip { font-size: clamp(12px, 1.1vw, 15px); line-height: 1.5; }
.has-winner .screen-main { padding-top: 0; }
.has-winner .screen-prompt { font-size: clamp(22px, 2vw, 36px); margin: 8px 0; }
.has-winner .screen-hint { font-size: 16px; margin: 8px 0; }
.has-winner .winner-card { margin-top: 16px; }

/* ---------- ダイアログ（拡大表示・確認） ---------- */
.photo-page dialog {
  width: min(960px, 95vw); max-height: 94vh; padding: 20px;
  background: var(--bg2); color: var(--text); border: 1px solid var(--panel-2); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.photo-page dialog::backdrop { background: rgba(8, 6, 20, .85); }
.photo-page dialog.confirm-dialog { max-width: 480px; padding: 28px; line-height: 1.9; }
.photo-page dialog img { display: block; width: 100%; max-height: 72vh; object-fit: contain; margin-top: 16px; border-radius: var(--radius-sm); }

@media (min-width: 701px) {
  .photo-screen .photo-wrap { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  .photo-screen .topbar { flex: none; }
  .photo-screen .screen-layout { flex: 1; min-height: 0; align-items: stretch; }
  .photo-screen .screen-main { min-height: 0; display: flex; flex-direction: column; }
  .photo-screen .screen-main > .screen-phase, .photo-screen .screen-prompt, .photo-screen .screen-hint { flex: none; }
  .photo-screen #results { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .photo-screen .winner-card { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 10px 0 0; padding: 20px; }
  .photo-screen .winner-heading { flex: none; margin-bottom: 14px; }
  .photo-screen .winner-image { flex: 1; min-height: 0; height: 100%; max-height: none; object-fit: contain; }
  .photo-screen .winner-caption { flex: none; line-height: 1.5; }
  .photo-screen .photo-join { max-height: 100%; overflow-y: auto; align-self: start; }
  .photo-screen .winner-list { grid-template-columns: 1fr; }
  .photo-screen .winner-small .photo-image { height: 80px; }

  /* 発表中は写真を主役にする。縦の短い画面（1280×650）で1位の写真が高さ約200pxしかなく、
     右の欄の1〜3位のまとめが画面外に出ていた（②のB10）。
     発表中は新しく参加する人はまずいないので、右の欄の参加の案内は畳み、QRとコードは小さく残す */
  .has-winner .screen-phase { display: none; }
  .has-winner .screen-prompt { font-size: clamp(18px, min(2vw, 3.4vh), 36px); line-height: 1.4; margin: 0 0 4px; }
  .has-winner .screen-hint { font-size: clamp(14px, 2.4vh, 18px); margin: 0 0 4px; }
  .photo-screen.has-winner .winner-card { padding: clamp(10px, 2vh, 20px); }
  .photo-screen.has-winner .winner-heading { margin-bottom: clamp(6px, 1.4vh, 14px); gap: 12px 20px; }
  .has-winner .winner-rank { font-size: clamp(24px, min(4vw, 6vh), 48px); }
  .has-winner .winner-name { font-size: clamp(20px, min(3vw, 4.5vh), 36px); }
  .photo-screen.has-winner .winner-caption { font-size: clamp(14px, 2.6vh, 18px); margin-top: clamp(6px, 1.2vh, 14px); }
  .has-winner .photo-join { padding: 16px; }
  .has-winner .photo-join .join-code { font-size: clamp(28px, 3vw, 44px); margin: 2px 0 8px; }
  .has-winner .photo-join .photo-qr { width: clamp(90px, 16vh, 180px); height: clamp(90px, 16vh, 180px); }
  .has-winner .photo-join > p:not(#counts) { display: none; }
  /* 1〜3位のまとめは、写真を左・名前を右の1行にして高さを抑える */
  .has-winner .photo-join .winner-small { display: flex; align-items: center; }
  .has-winner .photo-join .winner-small .photo-image { flex: none; width: 84px; height: clamp(48px, 9vh, 80px); }
  .has-winner .photo-join .winner-small b { font-size: 13px; }
}
@media (max-width: 700px) {
  .photo-wrap { padding: 16px 16px 36px; }
  .room-bar { gap: 16px; }
  .room-bar .photo-qr { width: 104px; height: 104px; }
  .room-bar .photo-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .photo-steps { grid-template-columns: repeat(2, 1fr); }
  .photo-steps li { text-align: left; }
  .ranking-row { gap: 7px; flex-wrap: wrap; }
  .ranking-row .photo-image { width: 50px; }
  .ranking-row .grow { font-size: 13px; }
  .winner-card { padding: 16px; }
  .screen-layout { grid-template-columns: 1fr; gap: 20px; }
  .photo-screen .photo-wrap { padding: 16px; }
  .screen-main { padding-top: 0; }
  .photo-join .photo-qr { width: 150px; height: 150px; }
  /* 縦長の大画面（625×1000）で、発表の枠の下端が画面からはみ出していた（②のB10） */
  .photo-screen.has-winner .winner-image { max-height: 56vh; }
}
@media (prefers-reduced-motion: reduce) { .winner-enter { animation: none; } }