/* コメントで質問コーナー（配信画面） */
html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  font-family: "Yu Gothic UI", "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  padding: 10px 14px; background: rgba(20, 24, 33, 0.92); color: #fff;
  font-size: 14px; line-height: 1.6; border-radius: 10px; z-index: 10;
}
.hint a { color: #8fd3ff; }
.notice {
  position: fixed; left: 12px; top: 12px; padding: 10px 14px;
  background: rgba(160, 30, 40, 0.92); color: #fff; font-size: 14px; border-radius: 10px; z-index: 11;
}

.qb {
  --base: 26px;
  width: calc(var(--base) * 29.5);
  max-width: calc(100vw - var(--base));
  margin: calc(var(--base) * 0.5);
  padding: calc(var(--base) * 0.6) calc(var(--base) * 0.7);
  border-radius: calc(var(--base) * 0.7);
  box-sizing: border-box;
}
.qb.size-S { --base: 19px; }
.qb.size-M { --base: 26px; }
.qb.size-L { --base: 36px; }

.head {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--base) * 0.4);
  margin-bottom: calc(var(--base) * 0.35);
  min-height: calc(var(--base) * 1.1);
}
.head.no-title { justify-content: flex-end; }
.title {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(var(--base) * 0.78); font-weight: 900; line-height: 1.25; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head.no-title .title { display: none; }
.counts {
  flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--base) * 0.25);
  font-size: calc(var(--base) * 0.5); font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.counts .nums, .counts .state { padding: calc(var(--base) * 0.08) calc(var(--base) * 0.42); border-radius: 999px; }
.counts .state[hidden] { display: none; }
.counts .bump { animation: qb-bump 0.45s ease-out; }
.more.bump { animation: qb-bump 0.45s ease-out; }
@keyframes qb-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* 今答えている質問 */
.cur {
  position: relative;
  height: calc(var(--base) * 5.3);
  padding: calc(var(--base) * 0.35) calc(var(--base) * 0.55);
  border-radius: calc(var(--base) * 0.45);
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--base) * 0.18);
  overflow: hidden;
}
.cur-text {
  font-weight: 900; line-height: 1.32;
  overflow-wrap: anywhere; word-break: normal;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.cur-text.len-s { font-size: calc(var(--base) * 1.15); -webkit-line-clamp: 2; }
.cur-text.len-m { font-size: calc(var(--base) * 0.92); -webkit-line-clamp: 3; }
.cur-text.len-l { font-size: calc(var(--base) * 0.8); -webkit-line-clamp: 3; }
.cur-text.len-xl { font-size: calc(var(--base) * 0.68); -webkit-line-clamp: 4; }
.cur.empty .cur-text { font-size: calc(var(--base) * 0.78); text-align: center; -webkit-line-clamp: 3; }
.cur-meta {
  display: flex; align-items: center; gap: calc(var(--base) * 0.3); min-width: 0;
  font-size: calc(var(--base) * 0.52); font-weight: 800;
}
.cur-meta[hidden] { display: none; }
.cur-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.cur-name::before { content: "— "; }
.cur-name[hidden] { display: none; }
.mark {
  flex: 0 0 auto; white-space: nowrap;
  padding: calc(var(--base) * 0.03) calc(var(--base) * 0.3); border-radius: 999px;
  font-size: calc(var(--base) * 0.44); font-weight: 900; font-variant-numeric: tabular-nums;
}
.mark[hidden] { display: none; }
.cur.pop { animation: qb-pop 0.5s ease-out; }
@keyframes qb-pop {
  0% { transform: translateY(calc(var(--base) * 0.25)); opacity: 0.2; }
  60% { transform: translateY(calc(var(--base) * -0.04)); opacity: 1; }
  100% { transform: translateY(0); }
}

/* 次の質問 */
.next-wrap { margin-top: calc(var(--base) * 0.3); }
.qb.no-next .next-wrap { display: none; }
.next-label { font-size: calc(var(--base) * 0.48); font-weight: 800; opacity: 0.8; margin-bottom: calc(var(--base) * 0.12); }
.next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--base) * 0.14); }
.next-item {
  display: flex; align-items: center; gap: calc(var(--base) * 0.3);
  height: calc(var(--base) * 1.15); padding: 0 calc(var(--base) * 0.35);
  border-radius: calc(var(--base) * 0.32); box-sizing: border-box; min-width: 0;
}
.next-item .no {
  flex: 0 0 auto; width: calc(var(--base) * 0.78); height: calc(var(--base) * 0.78); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: calc(var(--base) * 0.44);
}
.next-item .text { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: calc(var(--base) * 0.56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-item .name { flex: 0 1 auto; max-width: 28%; min-width: 0; font-weight: 700; font-size: calc(var(--base) * 0.44); opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-item .mark { font-size: calc(var(--base) * 0.38); }
.next-item.none { justify-content: center; font-size: calc(var(--base) * 0.5); font-weight: 700; opacity: 0.65; }
.next-item.in { animation: qb-in 0.45s ease-out; }
@keyframes qb-in { 0% { transform: translateX(calc(var(--base) * 0.6)); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.more { margin-top: calc(var(--base) * 0.14); text-align: right; font-size: calc(var(--base) * 0.48); font-weight: 800; opacity: 0.85; }
.more[hidden] { display: none; }

/* pop */
.theme-pop { background: rgba(255, 255, 255, 0.95); color: #1f2a33; box-shadow: 0 calc(var(--base) * 0.15) calc(var(--base) * 0.5) rgba(0, 0, 0, 0.25); }
.theme-pop .title { color: #0b8f86; }
.theme-pop .counts .nums { background: #14b8a6; color: #fff; }
.theme-pop .counts .state { background: #7a8597; color: #fff; }
.theme-pop .cur { background: linear-gradient(120deg, #d6f7f1, #b9eee6); border: 2px solid #5fd6c6; }
.theme-pop .cur.empty { background: #eef3f6; border-color: #d3dde3; color: #4d5a66; }
.theme-pop .cur-name { color: #0b6e66; }
.theme-pop .mark { background: #ffb020; color: #3a2600; }
.theme-pop .next-item { background: #eef3f6; }
.theme-pop .next-item .no { background: #14b8a6; color: #fff; }
.theme-pop .next-label, .theme-pop .more { color: #4d5a66; }

/* simple */
.theme-simple { background: rgba(14, 20, 24, 0.8); color: #fff; }
.theme-simple .title { color: #7ff0dc; }
.theme-simple .counts .nums { background: rgba(127, 240, 220, 0.18); color: #7ff0dc; }
.theme-simple .counts .state { background: rgba(255, 255, 255, 0.2); color: #fff; }
.theme-simple .cur { background: rgba(127, 240, 220, 0.12); border-left: calc(var(--base) * 0.18) solid #7ff0dc; }
.theme-simple .cur.empty { background: rgba(255, 255, 255, 0.07); border-left-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); }
.theme-simple .cur-name { color: #7ff0dc; }
.theme-simple .mark { background: #ffe066; color: #1a1a1a; }
.theme-simple .next-item { background: rgba(255, 255, 255, 0.08); }
.theme-simple .next-item .no { background: rgba(127, 240, 220, 0.85); color: #0e1418; }

/* neon */
.theme-neon { background: rgba(6, 10, 22, 0.84); color: #fff; border: 2px solid #4dffb8; box-shadow: 0 0 calc(var(--base) * 0.5) #4dffb8; }
.theme-neon .title { color: #4dffb8; text-shadow: 0 0 10px #4dffb8; }
.theme-neon .counts .nums { border: 2px solid #4dffb8; color: #4dffb8; text-shadow: 0 0 6px #4dffb8; }
.theme-neon .counts .state { border: 2px solid #ff5fa2; color: #ff5fa2; text-shadow: 0 0 6px #ff5fa2; }
.theme-neon .cur { background: rgba(77, 255, 184, 0.08); border: 1px solid rgba(77, 255, 184, 0.7); box-shadow: 0 0 12px rgba(77, 255, 184, 0.45) inset; }
.theme-neon .cur-text { text-shadow: 0 0 8px rgba(77, 255, 184, 0.6); }
.theme-neon .cur.empty { border-color: rgba(120, 200, 255, 0.5); box-shadow: none; }
.theme-neon .cur.empty .cur-text { color: #9fd8ff; text-shadow: 0 0 6px #4aa8ff; }
.theme-neon .cur-name { color: #4dffb8; }
.theme-neon .mark { background: transparent; border: 1px solid #ffd84d; color: #ffd84d; text-shadow: 0 0 6px #ffd84d; }
.theme-neon .next-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(77, 255, 184, 0.35); }
.theme-neon .next-item .no { background: transparent; border: 1px solid #4dffb8; color: #4dffb8; box-sizing: border-box; }
.theme-neon .next-label, .theme-neon .more { color: #9fffe0; }