/* インカム 共通スタイル（第163S）。参加者 index.html とセンター center.html で共用 */
:root {
  --bg0:#05080e; --bg1:#0c1422; --panel:rgba(22,32,48,.72); --edge:rgba(120,160,210,.16); --edge2:rgba(120,160,210,.32);
  --fg:#e9eef5; --dim:#7f8da0; --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --a:#25c4ff; --b:#ffb547; --all:#ff4d5e; --pgm:#ff3b47; --pvw:#2fd27a; --ok:#2fd27a; --ng:#ff5b5b;
}
* { box-sizing:border-box; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; color:var(--fg); font:16px/1.45 -apple-system,"Hiragino Sans",sans-serif; }
html { background:var(--bg0); }
body {
  min-height:100dvh; padding:12px 14px calc(16px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% -10%, #17304f 0%, var(--bg1) 45%, var(--bg0) 100%) fixed;
  max-width:720px; margin:0 auto;
}
body.center { max-width:960px; }
.hidden { display:none !important; }

/* ---- ヘッダ ---- */
.top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.top .mk { width:34px; height:45px; flex:none; }
.brand { font:700 15px/1 var(--mono); letter-spacing:.32em; }
.brand small { display:block; margin-top:4px; font-size:10px; letter-spacing:.2em; color:var(--dim); font-weight:500; }
.leds { margin-left:auto; display:flex; gap:12px; font:600 10px/1 var(--mono); letter-spacing:.12em; color:var(--dim); }
.led { display:flex; align-items:center; gap:5px; }
.led::before { content:""; width:8px; height:8px; border-radius:50%; background:#3a4556; }
.led.ok::before { background:var(--ok); box-shadow:0 0 8px var(--ok); }
.led.ng::before { background:var(--ng); box-shadow:0 0 8px var(--ng); animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.3; } }

/* ---- カード ---- */
.card { background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:14px; margin-bottom:12px;
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.label { font:600 11px/1 var(--mono); letter-spacing:.18em; color:var(--dim); margin:0 0 8px; text-transform:uppercase; }
input,select { width:100%; font-size:17px; padding:12px 14px; border-radius:12px; border:1px solid var(--edge2); background:rgba(5,9,16,.7); color:var(--fg); outline:none; -webkit-user-select:text; user-select:text; }
input:focus,select:focus { border-color:var(--a); box-shadow:0 0 0 3px rgba(37,196,255,.18); }
button { font:inherit; border:0; color:#fff; cursor:pointer; }
.btn { border-radius:12px; padding:12px 16px; background:#243246; border:1px solid var(--edge2); }
.btn.go { width:100%; margin-top:14px; font-size:19px; font-weight:700; letter-spacing:.08em;
          background:linear-gradient(180deg,#2aa7ff,#1468d6); border:0; box-shadow:0 8px 24px rgba(20,104,214,.45); }
.btn.quit { width:100%; margin-top:6px; background:transparent; color:#ff8a8a; border-color:rgba(255,91,91,.35); }

/* ---- まもくん（参加前のあいさつ）---- */
.hello { display:flex; align-items:flex-end; gap:12px; margin:6px 0 14px; }
.hello .mk { width:84px; height:112px; flex:none; animation:breathe 3s ease-in-out infinite; }
.bubble { position:relative; background:#fbf7ef; color:#3b2a1a; border-radius:14px; padding:10px 14px; font-size:15px; font-weight:600; margin-bottom:34px; }
.bubble::after { content:""; position:absolute; left:-7px; bottom:12px; border:7px solid transparent; border-right-color:#fbf7ef; border-left:0; }
@keyframes breathe { 50% { transform:translateY(-3px); } }
.mk .mic { transition:fill .1s; }
.mk.talk .mic { fill:var(--all); filter:drop-shadow(0 0 4px var(--all)); }
.mk.hear { animation:bob .35s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(-2px); } }

/* ---- 自分 ---- */
.me { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.me .name { font-size:22px; font-weight:800; letter-spacing:.02em; }
.chip { font:700 12px/1 var(--mono); letter-spacing:.08em; padding:6px 10px; border-radius:999px; border:1px solid var(--edge2); color:var(--dim); background:transparent; }
.chip.A.on { color:#001520; background:var(--a); border-color:var(--a); box-shadow:0 0 12px rgba(37,196,255,.5); }
.chip.B.on { color:#201000; background:var(--b); border-color:var(--b); box-shadow:0 0 12px rgba(255,181,71,.45); }
.chip.none { border-style:dashed; }

/* ---- シーン名・PGM ---- */
.scene { display:none; align-items:center; gap:8px; margin-bottom:10px; font:700 14px/1 var(--mono); letter-spacing:.06em; }
.scene.on { display:flex; }
.scene .tag { padding:5px 8px; border-radius:6px; font-size:11px; letter-spacing:.16em; }
.scene .tag.pgm { background:var(--pgm); box-shadow:0 0 12px rgba(255,59,71,.55); }
.scene .tag.pvw { background:var(--pvw); color:#002010; }
.scene .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scene .pv { color:var(--dim); margin-left:6px; }
#pgmWrap { position:relative; background:#000; border-radius:14px; overflow:hidden; aspect-ratio:16/9; display:none; margin-bottom:6px; border:1px solid var(--edge2); box-shadow:0 10px 30px rgba(0,0,0,.5); }
#pgmWrap video { width:100%; height:100%; object-fit:contain; display:block; }
#pgmMsg { position:absolute; right:10px; bottom:8px; font:600 11px/1 var(--mono); color:var(--dim); }

/* ---- 話している人 ---- */
.talkers { min-height:20px; font-size:14px; color:var(--dim); text-align:center; margin:0 0 6px; }
.talkers b { color:#fff; }
.eq { display:inline-flex; gap:2px; align-items:flex-end; height:12px; margin-right:6px; vertical-align:-1px; }
.eq i { width:3px; background:var(--ok); border-radius:1px; animation:eq .6s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay:.15s; } .eq i:nth-child(3) { animation-delay:.3s; }
@keyframes eq { 0%,100% { height:3px; } 50% { height:12px; } }

/* ---- 参加者の PTT（1 ボタン）---- */
.pttWrap { display:flex; justify-content:center; padding:4px 8px 14px; }
#ptt { width:100%; height:min(30vh,240px); border-radius:12px; touch-action:none; position:relative;
       background:linear-gradient(180deg, #2b3c55, #121b29); border:2px solid var(--edge2);
       box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.08); transition:transform .08s, box-shadow .15s; }
#ptt::before { content:""; position:absolute; inset:-8px; border-radius:18px; border:2px solid rgba(37,196,255,.25); pointer-events:none; }
#ptt .t1 { display:block; font-size:38px; font-weight:800; letter-spacing:.1em; }
#ptt .t2 { display:block; margin-top:6px; font:600 11px/1 var(--mono); letter-spacing:.2em; color:var(--dim); }
#ptt.on { transform:scale(.985); background:linear-gradient(180deg, #ff6b77, #b3132a); border-color:#ff9aa4;
          box-shadow:0 0 0 8px rgba(255,77,94,.18), 0 0 60px rgba(255,77,94,.6); }
#ptt.on::before { border-color:rgba(255,77,94,.6); animation:ring 1s ease-out infinite; }
#ptt.on .t2 { color:#ffe1e4; }
@keyframes ring { from { transform:scale(1); opacity:1; } to { transform:scale(1.05); opacity:0; } }

/* ---- 設定（たたむ）---- */
details.card summary { list-style:none; cursor:pointer; font:600 11px/1 var(--mono); letter-spacing:.18em; color:var(--dim); }
details.card summary::-webkit-details-marker { display:none; }
details.card summary::after { content:" ＋"; } details.card[open] summary::after { content:" －"; }
details.card .body { display:grid; gap:10px; margin-top:12px; }
input[type=range] { padding:0; border:0; background:transparent; accent-color:var(--a); }
#status { color:var(--dim); font-size:12px; white-space:pre-wrap; }

/* ---- センター ---- */
.cgrid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:820px) { .cgrid { grid-template-columns:1.25fr 1fr; } }
.roster { list-style:none; margin:0; padding:0; }
.roster li { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--edge); }
.roster li:last-child { border-bottom:0; }
.roster .who { flex:1; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roster .who small { color:var(--dim); font-weight:500; margin-left:6px; font-size:12px; }
.roster li.talk { background:linear-gradient(90deg, rgba(47,210,122,.16), transparent); border-radius:10px; }
.roster li.unassigned .who { color:#ffd38a; }
.roster .chip { cursor:pointer; min-width:42px; text-align:center; padding:9px 10px; }
.roster .empty { color:var(--dim); font-size:14px; padding:10px 4px; }
.sendbar { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.send.A { grid-column:1 / -1; height:170px; font-size:32px; }
.send { height:110px; border-radius:16px; touch-action:none; font-size:22px; font-weight:800; letter-spacing:.06em; position:relative;
        border:2px solid var(--edge2); background:#141f30; box-shadow:0 12px 30px rgba(0,0,0,.45); transition:transform .08s, box-shadow .15s; }
.send small { display:block; font:600 10px/1 var(--mono); letter-spacing:.2em; color:var(--dim); margin-top:6px; }
.send.A { border-color:rgba(37,196,255,.55); } .send.B { border-color:rgba(255,181,71,.55); } .send.ALL { border-color:rgba(255,77,94,.6); }
.send.A.on { background:var(--a); color:#001520; box-shadow:0 0 40px rgba(37,196,255,.6); }
.send.B.on { background:var(--b); color:#201000; box-shadow:0 0 40px rgba(255,181,71,.55); }
.send.ALL.on { background:var(--all); box-shadow:0 0 40px rgba(255,77,94,.65); }
.send.on { transform:scale(.98); } .send.on small { color:inherit; }
.keys { margin-top:8px; text-align:center; font:600 10px/1 var(--mono); letter-spacing:.14em; color:var(--dim); }
.gnames { display:grid; gap:8px; }
.gname { display:flex; align-items:center; gap:10px; }
.gname .chip { min-width:36px; text-align:center; }
.gname input { padding:9px 12px; font-size:16px; }
.send .nm { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 6px; }
body[data-role=member] .card.me { padding:10px 14px; margin-bottom:8px; }
body[data-role=member] .me .name { font-size:19px; }
body[data-role=member] .top { margin-bottom:8px; }
body[data-role=member] .scene { margin-bottom:6px; }
/* ロック（参加者の話すボタン）*/
.lockRow { display:flex; padding:0 8px 6px; }
.lockbtn { width:100%; font:700 13px/1 var(--mono); letter-spacing:.08em; padding:10px 14px; border-radius:10px; border:1px solid var(--edge2); background:#1a2433; color:var(--dim); }
.lockbtn.locked { background:#3a2a10; border-color:#c98a1e; color:#ffd38a; }
#ptt.locked { opacity:.45; filter:grayscale(.6); }
#ptt.locked .t2 { color:#ffd38a; }
#ptt.shake { animation:shake .3s; }
@keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.talkers:empty { min-height:0; margin:0; }
.lockbtn { position:relative; overflow:hidden; touch-action:none; }
.lockbtn span { position:relative; }
.lockbtn .fill { position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(255,211,138,.28); }
.lockbtn.hold .fill { width:100%; transition:width var(--hold,1000ms) linear; }
/* センターの押しっぱなし */
.latchBar { display:none; margin:0 0 8px; padding:9px 12px; border-radius:10px; background:var(--all); color:#fff; font-weight:700; font-size:14px; animation:blink 1.2s infinite; }
.latchBar.on { display:block; }
.send.latch::after { content:"LATCH"; position:absolute; top:8px; right:10px; font:700 10px/1 var(--mono); letter-spacing:.14em; }
/* テキスト */
.textBanner { position:sticky; top:8px; z-index:20; margin-bottom:10px; padding:14px; border-radius:12px; background:#fff3c4; color:#2a1d00;
              box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 3px #ffb547; animation:pop .25s ease-out; }
@keyframes pop { from { transform:translateY(-12px); opacity:0; } }
.tb-head { display:flex; justify-content:space-between; font:700 12px/1 var(--mono); letter-spacing:.08em; color:#8a6100; margin-bottom:8px; }
.tb-body { font-size:24px; font-weight:800; line-height:1.35; word-break:break-word; -webkit-user-select:text; user-select:text; }
.tb-btns { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; }
.tb-btns button { padding:12px 4px; border-radius:10px; background:#2a1d00; color:#ffe9a8; font-weight:700; font-size:15px; }
.tb-btns button.close { background:transparent; color:#8a6100; border:1px solid #c9a24a; }
.msgs { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.msgs li { padding:8px 10px; border-radius:10px; background:rgba(5,9,16,.55); border:1px solid var(--edge); font-size:14px; }
.msgs li .meta { font:600 11px/1.4 var(--mono); color:var(--dim); display:flex; justify-content:space-between; gap:8px; }
.msgs li .meta b { color:#ffd38a; font-weight:700; }
.msgs li .body { margin-top:2px; font-weight:700; word-break:break-word; }
.msgs li .reps { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
.msgs li .reps span { font-size:12px; padding:3px 8px; border-radius:999px; background:#1d3a28; color:#9fe3b3; }
.msgs .empty { color:var(--dim); background:transparent; border:0; }
.textForm { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:520px) { .textForm { grid-template-columns:150px 1fr 90px; } }
.roster .who { cursor:pointer; }
.ver { text-align:center; font:600 10px/1 var(--mono); color:#3a4556; margin-top:14px; }