/*
  QRスタンプラリー 共通スタイル
  編集日時 : 2026-10-15 02:22 JST
  改変歴   :
    v1.0.0  2026-10-15 00:35 JST  初版作成
    v1.2.0  2026-10-15 02:22 JST  カメラで読み取るオーバーレイ(.scanner)と読み取りボタン(.scan-btn)を index.css から移して共用にした。スタッフ画面の見出しの下に余白
*/
:root{--bg:#f6f4ef;--card:#fff;--ink:#1f2328;--sub:#5d6670;--line:#e3ded3;--accent:#c2410c;--accent-soft:#fbe9df;--ok:#15803d;--okbg:#e8f5ec;--err:#b42318;--errbg:#fdecea;--info:#1d4ed8;--infobg:#e8effd;--warn:#b45309}
@media (prefers-color-scheme:dark){:root{--bg:#16181b;--card:#1f2226;--ink:#eceae6;--sub:#a3a9b0;--line:#33373c;--accent:#fb8c4a;--accent-soft:#3a261b;--ok:#4ade80;--okbg:#173322;--err:#f87171;--errbg:#3a1d1d;--info:#93b4ff;--infobg:#1c2742;--warn:#fbbf24}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.6;-webkit-text-size-adjust:100%}
.wrap{max-width:520px;margin:0 auto;padding:16px 16px 40px}
.wrap.wide{max-width:1000px}
h1{font-size:20px;margin:0}
h2{font-size:17px;margin:0 0 8px}
p{margin:6px 0}
.sub{color:var(--sub);font-size:14px}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.row{display:grid;gap:10px;margin-top:12px}
button{font:inherit;border:0;border-radius:10px;padding:12px 16px;background:var(--accent);color:#fff;font-weight:700;width:100%;cursor:pointer;touch-action:manipulation}
button.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.armed{background:var(--warn);color:#fff}
button.inline{width:auto;padding:8px 14px}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
input.code-in{text-transform:uppercase;letter-spacing:.15em;text-align:center;font-size:20px}
label{display:block;font-size:13px;color:var(--sub);margin-top:10px}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:32px;font-weight:700;letter-spacing:.12em;text-align:center;padding:10px;border:2px dashed var(--accent);border-radius:12px;margin:10px 0}
.toast{border-radius:12px;padding:12px 14px;margin-bottom:12px;font-weight:600}
.toast.ok{background:var(--okbg);color:var(--ok)}
.toast.err{background:var(--errbg);color:var(--err)}
.toast.info{background:var(--infobg);color:var(--info)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.err-text{color:var(--err)}
.ok-text{color:var(--ok)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* カメラでQRを読み取るオーバーレイ(参加者画面・スタッフ画面) */
.scan-btn{font-size:20px;padding:18px 16px;margin-bottom:14px;border-radius:14px;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.scanner{position:fixed;inset:0;z-index:100;background:#000;color:#fff;overflow:hidden}
.scanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;left:50%;top:42%;width:min(70vw,70vh,340px);aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
.scan-bar{position:absolute;left:0;right:0;bottom:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(0,0,0,.75) 30%);display:grid;gap:12px}
.scan-msg{margin:0;text-align:center;font-weight:700;font-size:16px;min-height:3.2em;text-shadow:0 1px 3px #000}
.scan-msg.err{color:#ffb4a8}
.scanner button.secondary{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.35)}
html.scanning,html.scanning body{overflow:hidden}
.wrap>h1{margin-bottom:12px}