/* 投影画面。教室のプロジェクターで後ろの席から読める文字サイズにする。 */
:root{
  --bg:#0b0f1a; --panel:#141b2d; --panel2:#1b2438; --line:#2a3452;
  --ink:#eef2ff; --sub:#98a3c4; --accent:#37e6c4; --accent2:#ff5da2;
  --sans:'Hiragino Sans','Noto Sans JP',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* .chat や .idle が display を持つので、hidden 属性を確実に勝たせる */
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;
  background-image:radial-gradient(circle at 12% -10%,rgba(55,230,196,.12),transparent 55%),
                   radial-gradient(circle at 92% 0%,rgba(255,93,162,.10),transparent 45%);
}
.stage{height:100dvh;display:flex;flex-direction:column;gap:20px;padding:28px 34px}

/* ===== アンケート ===== */
/* アンケートとコメントが同時に出ることがある。アンケートが画面を占有して
   コメントが押し出されないよう、縮められる指定にしておく。 */
.poll{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:28px 32px;flex:0 1 auto;min-height:0;overflow:hidden}
.poll-q{font-size:34px;font-weight:800;margin-bottom:22px;line-height:1.35}
.bars{display:flex;flex-direction:column;gap:13px}
.bar{position:relative;background:var(--panel2);border-radius:12px;overflow:hidden;height:56px}

/* コメントと同時表示のときは詰める（両方が読める状態を優先する） */
.poll.compact{padding:18px 24px}
.poll.compact .poll-q{font-size:25px;margin-bottom:14px}
.poll.compact .bars{gap:8px}
.poll.compact .bar{height:40px}
.poll.compact .bar-label{font-size:18px}
.poll.compact .bar-num{font-size:17px}
.poll.compact .poll-total{font-size:14px;margin-top:10px}
.bar-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(55,230,196,.85),rgba(55,230,196,.45));
  transition:width .6s cubic-bezier(.22,1,.36,1)}
.bar-row{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.bar-label{font-size:23px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.bar-num{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.bar-num .pct{color:var(--sub);font-size:16px;margin-left:9px}
.poll-total{text-align:right;color:var(--sub);font-size:17px;margin-top:16px}
.poll-total span{color:var(--accent);font-weight:800;font-size:22px}

/* ===== コメント（Twitch風） ===== */
.chat{flex:1;min-height:0;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:13px;padding:18px 26px;
  border-bottom:1px solid var(--line);font-size:24px;font-weight:800}
.chat-head .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);
  animation:live 1.6s ease-in-out infinite;flex:0 0 auto}
@keyframes live{0%,100%{opacity:.3}50%{opacity:1}}
.chat-head .count{margin-left:auto;color:var(--sub);font-size:18px;font-weight:700}

.chat-body{flex:1;min-height:0;overflow:hidden;padding:14px 26px 22px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px}

.msg{display:flex;align-items:baseline;gap:11px;font-size:25px;line-height:1.5;
  animation:slide .35s cubic-bezier(.22,1,.36,1)}
@keyframes slide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.msg .who{font-weight:800;flex:0 0 auto;max-width:230px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.msg .body{word-break:break-word}

/* 会場ごとに名前の色を変える（どこから来た意見か一目で分かる） */
.v-tokyo    .who{color:#5fd0ff}
.v-kobe     .who{color:#37e6c4}
.v-fukuoka  .who{color:#ffb454}
.v-shizuoka .who{color:#c792ea}
.v-online   .who{color:#ff5da2}

/* ===== 待機 ===== */
.idle{flex:1;display:grid;place-content:center;text-align:center;gap:14px}
.idle-logo{font-size:46px;font-weight:800;letter-spacing:.02em}
.idle-logo b{color:var(--accent)}
.idle-sub{color:var(--sub);font-size:19px}

/* ===== ?only=chat — スライドの右端に細く並べる用 =====
   幅が狭いので、余白と文字を詰めて1行でも多く見せる。 */
html.only-chat .stage{padding:0;gap:0}
html.only-chat .chat{border-radius:0;border:none;border-left:1px solid var(--line)}
html.only-chat .chat-head{font-size:18px;padding:14px 16px}
html.only-chat .chat-head .count{font-size:15px}
html.only-chat .chat-body{padding:10px 16px 14px;gap:8px}
html.only-chat .msg{font-size:19px;line-height:1.45}
html.only-chat .msg .who{max-width:none;display:block}
html.only-chat .idle-logo{font-size:24px;line-height:1.4}
html.only-chat .idle-sub{font-size:14px}

/* ===== ?only=poll — スライドの代わりに大きく出す用 ===== */
html.only-poll .poll{flex:1;display:flex;flex-direction:column;justify-content:center}
html.only-poll .bars{flex:0 0 auto}