/* コメントで数当て（配信画面） */
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;
}

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

.head {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--base) * 0.4);
  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.8); 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; }
.state {
  flex: 0 0 auto; white-space: nowrap;
  padding: calc(var(--base) * 0.08) calc(var(--base) * 0.42); border-radius: 999px;
  font-size: calc(var(--base) * 0.48); font-weight: 800;
}
.state[hidden] { display: none; }
.rule {
  margin: calc(var(--base) * 0.12) 0 calc(var(--base) * 0.3);
  font-size: calc(var(--base) * 0.52); font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.body {
  position: relative;
  display: flex; gap: calc(var(--base) * 0.45);
  min-height: calc(var(--base) * 10.4);
}
.left {
  flex: 0 0 calc(var(--base) * 8.6); min-width: 0;
  display: flex; flex-direction: column; gap: calc(var(--base) * 0.2);
  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.4);
  border-radius: calc(var(--base) * 0.45); box-sizing: border-box;
}
.left[hidden], .right[hidden] { display: none; }
.ans-label { font-size: calc(var(--base) * 0.46); font-weight: 800; opacity: 0.8; }
.ans { display: flex; gap: calc(var(--base) * 0.16); }
.digit {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--base) * 2.1);
  border-radius: calc(var(--base) * 0.3);
  font-size: calc(var(--base) * 1.45); font-weight: 900; font-variant-numeric: tabular-nums;
}
.count { margin-top: calc(var(--base) * 0.1); font-size: calc(var(--base) * 0.62); font-weight: 900; font-variant-numeric: tabular-nums; align-self: flex-start; }
.count.bump { animation: kz-bump 0.45s ease-out; }
@keyframes kz-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.best { font-size: calc(var(--base) * 0.46); font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.best[hidden] { display: none; }
.legend { margin-top: auto; font-size: calc(var(--base) * 0.38); font-weight: 700; line-height: 1.4; opacity: 0.8; }

.right { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--base) * 0.14); }
.band {
  display: flex; align-items: center; gap: calc(var(--base) * 0.3); min-width: 0;
  height: calc(var(--base) * 1.15); padding: 0 calc(var(--base) * 0.4);
  border-radius: calc(var(--base) * 0.32); box-sizing: border-box;
  font-size: calc(var(--base) * 0.56); font-weight: 900; white-space: nowrap; overflow: hidden;
}
.band[hidden] { display: none; }
.band-tag { flex: 0 0 auto; padding: 0 calc(var(--base) * 0.3); border-radius: 999px; font-size: calc(var(--base) * 0.44); }
.band-ans { flex: 0 0 auto; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.band-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.band-name[hidden] { display: none; }
.band-no { flex: 0 0 auto; font-size: calc(var(--base) * 0.46); opacity: 0.85; }
.band-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--base) * 0.1 * var(--rh)); }
.row {
  display: flex; align-items: center; gap: calc(var(--base) * 0.3);
  height: calc(var(--base) * 0.98 * var(--rh)); padding: 0 calc(var(--base) * 0.35);
  border-radius: calc(var(--base) * 0.28); box-sizing: border-box; min-width: 0;
}
.row .g { flex: 0 0 auto; font-weight: 900; font-size: calc(var(--base) * 0.66 * var(--rh)); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.row .hb { flex: 0 0 auto; display: inline-flex; gap: calc(var(--base) * 0.18); font-weight: 900; font-size: calc(var(--base) * 0.5 * var(--rh)); white-space: nowrap; }
.row .name { flex: 1 1 auto; min-width: 3em; font-weight: 700; font-size: calc(var(--base) * 0.44 * var(--rh)); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.row .mark {
  flex: 0 1 auto; min-width: 3em; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 calc(var(--base) * 0.26); border-radius: 999px;
  font-size: calc(var(--base) * 0.38 * var(--rh)); font-weight: 900; font-variant-numeric: tabular-nums;
}
.row.none { justify-content: center; font-size: calc(var(--base) * 0.5); font-weight: 700; opacity: 0.65; }
.row.in { animation: kz-in 0.45s ease-out; }
@keyframes kz-in { 0% { transform: translateX(calc(var(--base) * 0.6)); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.more { text-align: right; font-size: calc(var(--base) * 0.44); font-weight: 800; opacity: 0.8; }
.more[hidden] { display: none; }

.wait {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--base) * 0.45);
  font-size: calc(var(--base) * 0.9); font-weight: 900; letter-spacing: 0.04em;
}
.wait[hidden] { display: none; }

/* 正解の時に少しだけ大きく出す（数秒で消え、一覧の上の帯だけが残る） */
.win {
  position: absolute; left: 50%; top: 50%;
  width: 84%; box-sizing: border-box;
  padding: calc(var(--base) * 0.5) calc(var(--base) * 0.6);
  border-radius: calc(var(--base) * 0.55);
  display: none; flex-direction: column; align-items: center; gap: calc(var(--base) * 0.12);
  transform: translate(-50%, -50%);
  text-align: center; z-index: 3; pointer-events: none;
}
.win.show { display: flex; animation: kz-win 4.5s ease-out forwards; }
@keyframes kz-win {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  8% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  14% { transform: translate(-50%, -50%) scale(1); }
  88% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
}
.win-head { font-size: calc(var(--base) * 1.0); font-weight: 900; letter-spacing: 0.1em; }
.win-ans { display: flex; gap: calc(var(--base) * 0.16); width: 60%; }
.win-ans .digit { height: calc(var(--base) * 1.9); font-size: calc(var(--base) * 1.35); }
.win-name { max-width: 100%; font-size: calc(var(--base) * 0.7); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-name[hidden] { display: none; }
.win-no { font-size: calc(var(--base) * 0.56); font-weight: 800; }

/* pop（橙） */
.theme-pop { background: rgba(255, 255, 255, 0.95); color: #2b2420; box-shadow: 0 calc(var(--base) * 0.15) calc(var(--base) * 0.5) rgba(0, 0, 0, 0.25); }
.theme-pop .title { color: #e2610b; }
.theme-pop .rule { color: #6b5446; }
.theme-pop .state { background: #ff7a1a; color: #fff; }
.theme-pop .state.st-stop { background: #8a7f78; }
.theme-pop .state.st-reveal { background: #5d6478; }
.theme-pop .left { background: #fff1e4; border: 2px solid #ffc08a; }
.theme-pop .digit { background: #fff; color: #e2610b; border: 2px solid #ffb06b; }
.theme-pop .digit.hidden { color: #c9a184; background: #fff8f1; border-style: dashed; }
.theme-pop.ended .left .digit { background: #ff7a1a; color: #fff; border-color: #ff7a1a; }
.theme-pop .count { color: #e2610b; }
.theme-pop .best { color: #6b5446; }
.theme-pop .row { background: #f5f0ec; }
.theme-pop .row .g { color: #2b2420; }
.theme-pop .row .h { color: #e2610b; }
.theme-pop .row .b { color: #2f7dd6; }
.theme-pop .row.hit-all { background: #ffe1c7; box-shadow: 0 0 0 2px #ff7a1a inset; }
.theme-pop .mark { background: #ffd23f; color: #3a2600; }
.theme-pop .band.win-band { background: linear-gradient(90deg, #ff7a1a, #ffae42); color: #fff; }
.theme-pop .band.win-band .band-tag { background: #fff; color: #e2610b; }
.theme-pop .band.reveal-band { background: #5d6478; color: #fff; }
.theme-pop .band.reveal-band .band-tag { background: #fff; color: #5d6478; }
.theme-pop .band.stop-band { background: #eeeae6; color: #6b5446; justify-content: center; }
.theme-pop .wait { background: #f5f0ec; color: #6b5446; }
.theme-pop .win { background: linear-gradient(135deg, #ff7a1a, #ffae42); color: #fff; box-shadow: 0 calc(var(--base) * 0.2) calc(var(--base) * 0.6) rgba(0, 0, 0, 0.3); }
.theme-pop .win .digit { background: #fff; color: #e2610b; border: 0; }

/* simple（暗い半透明） */
.theme-simple { background: rgba(18, 16, 14, 0.8); color: #fff; }
.theme-simple .title { color: #ffb36b; }
.theme-simple .rule { color: rgba(255, 255, 255, 0.85); }
.theme-simple .state { background: rgba(255, 179, 107, 0.2); color: #ffb36b; }
.theme-simple .state.st-stop, .theme-simple .state.st-reveal { background: rgba(255, 255, 255, 0.18); color: #fff; }
.theme-simple .left { background: rgba(255, 179, 107, 0.1); border-left: calc(var(--base) * 0.16) solid #ffb36b; }
.theme-simple .digit { background: rgba(255, 255, 255, 0.1); color: #ffb36b; }
.theme-simple .digit.hidden { color: rgba(255, 255, 255, 0.55); }
.theme-simple.ended .left .digit { background: #ffb36b; color: #1a120a; }
.theme-simple .count { color: #ffb36b; }
.theme-simple .row { background: rgba(255, 255, 255, 0.08); }
.theme-simple .row .h { color: #ffb36b; }
.theme-simple .row .b { color: #8fd3ff; }
.theme-simple .row.hit-all { background: rgba(255, 179, 107, 0.25); }
.theme-simple .mark { background: #ffe066; color: #1a1a1a; }
.theme-simple .band.win-band { background: #ffb36b; color: #1a120a; }
.theme-simple .band.win-band .band-tag { background: #1a120a; color: #ffb36b; }
.theme-simple .band.reveal-band { background: rgba(255, 255, 255, 0.2); }
.theme-simple .band.reveal-band .band-tag { background: #fff; color: #1a120a; }
.theme-simple .band.stop-band { background: rgba(255, 255, 255, 0.1); justify-content: center; }
.theme-simple .wait { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); }
.theme-simple .win { background: rgba(26, 18, 10, 0.94); border: 2px solid #ffb36b; color: #fff; }
.theme-simple .win-head { color: #ffb36b; }
.theme-simple .win .digit { background: #ffb36b; color: #1a120a; }

/* neon（光る橙） */
.theme-neon { background: rgba(14, 8, 4, 0.84); color: #fff; border: 2px solid #ff9a3d; box-shadow: 0 0 calc(var(--base) * 0.5) #ff9a3d; }
.theme-neon .title { color: #ff9a3d; text-shadow: 0 0 10px #ff9a3d; }
.theme-neon .rule { color: #ffd2a8; }
.theme-neon .state { border: 2px solid #ff9a3d; color: #ff9a3d; text-shadow: 0 0 6px #ff9a3d; }
.theme-neon .state.st-stop, .theme-neon .state.st-reveal { border-color: #9fd8ff; color: #9fd8ff; text-shadow: 0 0 6px #4aa8ff; }
.theme-neon .left { background: rgba(255, 154, 61, 0.08); border: 1px solid rgba(255, 154, 61, 0.7); box-shadow: 0 0 12px rgba(255, 154, 61, 0.4) inset; }
.theme-neon .digit { border: 1px solid #ff9a3d; color: #ff9a3d; text-shadow: 0 0 10px #ff9a3d; box-sizing: border-box; }
.theme-neon .digit.hidden { border-style: dashed; color: rgba(255, 210, 168, 0.7); text-shadow: none; }
.theme-neon.ended .left .digit { background: rgba(255, 154, 61, 0.25); color: #fff; }
.theme-neon .count { color: #ff9a3d; text-shadow: 0 0 6px #ff9a3d; }
.theme-neon .best { color: #ffd2a8; }
.theme-neon .row { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 154, 61, 0.35); }
.theme-neon .row .h { color: #ff9a3d; text-shadow: 0 0 6px #ff9a3d; }
.theme-neon .row .b { color: #6fe3ff; text-shadow: 0 0 6px #3fc8ff; }
.theme-neon .row.hit-all { border-color: #ff9a3d; box-shadow: 0 0 10px rgba(255, 154, 61, 0.6); }
.theme-neon .mark { background: transparent; border: 1px solid #ffe066; color: #ffe066; text-shadow: 0 0 6px #ffe066; }
.theme-neon .band.win-band { border: 1px solid #ff9a3d; color: #ff9a3d; text-shadow: 0 0 8px #ff9a3d; box-shadow: 0 0 10px rgba(255, 154, 61, 0.5); }
.theme-neon .band.win-band .band-tag { border: 1px solid #ff9a3d; }
.theme-neon .band.reveal-band { border: 1px solid #9fd8ff; color: #9fd8ff; }
.theme-neon .band.reveal-band .band-tag { border: 1px solid #9fd8ff; }
.theme-neon .band.stop-band { border: 1px solid rgba(159, 216, 255, 0.5); color: #9fd8ff; justify-content: center; }
.theme-neon .wait { border: 1px solid rgba(255, 154, 61, 0.4); color: #ffd2a8; text-shadow: 0 0 6px #ff9a3d; }
.theme-neon .win { background: rgba(14, 8, 4, 0.94); border: 2px solid #ff9a3d; box-shadow: 0 0 calc(var(--base) * 0.8) #ff9a3d; color: #fff; }
.theme-neon .win-head { color: #ff9a3d; text-shadow: 0 0 12px #ff9a3d; }