/*
  QRスタンプラリー 参加者画面スタイル
  編集日時 : 2026-10-15 02:45 JST
  改変歴   :
    v1.0.0  2026-10-15 00:35 JST  初版作成
    v1.1.0  2026-10-15 01:56 JST  「QRを読み取る」ボタン、カメラの全画面オーバーレイ、案内枠(.hint)を追加
    v1.2.0  2026-10-15 02:22 JST  カメラのオーバーレイを common.css へ移動(スタッフ画面と共用)。景品交換用QR(.redeem)を追加
    v1.3.0  2026-10-15 02:45 JST  見出し右に音のオン/オフボタン(.sound-toggle)を追加
*/
.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
#progress{font-weight:700;color:var(--accent);white-space:nowrap}
.top-right{display:flex;align-items:center;gap:10px}
button.sound-toggle{width:auto;padding:4px 10px;font-size:13px;font-weight:600;background:transparent;color:var(--sub);border:1px solid var(--line);border-radius:999px;white-space:nowrap}
button.sound-toggle.off{text-decoration:line-through}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cell{aspect-ratio:1;border:2px dashed var(--line);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;font-size:12px;color:var(--sub);overflow:hidden;overflow-wrap:anywhere}
.cell b{font-size:13px;color:var(--ink);line-height:1.3}
.cell.on{border:3px solid var(--accent);background:var(--accent-soft);color:var(--accent)}
.cell.on b{color:var(--accent)}
.cell .mark{font-size:22px;line-height:1}
.cell.pop{animation:pop .6s ease}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.done{text-align:center;border:3px solid var(--ok)}
.clock{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:28px;font-weight:700}
.live{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:middle;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

/* 案内(QR経由で来た人・次回からの読み取り方法) */
.hint{background:var(--infobg);color:var(--info);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:14px;font-weight:600}
.hint p{margin:0}
.hint p+p{margin-top:6px;font-weight:400}
#idHint{font-size:15px}

/* 景品交換用QR(点線枠の中にQR、その下に引き継ぎコード) */
.code.redeem{display:grid;justify-items:center;gap:6px;padding:14px 10px}
.redeem-qr{background:#fff;padding:6px;border-radius:8px;line-height:0}
.redeem-qr svg{width:min(56vw,220px);height:auto;display:block;shape-rendering:crispEdges}
.redeem-text{font-size:28px;line-height:1.2}

@media (prefers-reduced-motion:reduce){.cell.pop,.live{animation:none}}