/* コメントで勝敗予想（表示） */
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;
}

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

.question {
  font-size: calc(var(--base) * 1.0);
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: calc(var(--base) * 0.5);
  word-break: break-word;
}
.options { display: flex; flex-direction: column; gap: calc(var(--base) * 0.32); }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 0.4);
  min-height: calc(var(--base) * 1.6);
  padding: 0 calc(var(--base) * 0.5);
  border-radius: calc(var(--base) * 0.4);
  overflow: hidden;
}
.opt .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  transition: width 0.5s ease-out;
  z-index: 0;
}
.opt .no, .opt .name, .opt .val { position: relative; z-index: 1; }
.opt .no {
  flex: 0 0 auto;
  width: calc(var(--base) * 1.1);
  height: calc(var(--base) * 1.1);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: calc(var(--base) * 0.62);
}
.opt .name { flex: 1 1 auto; font-weight: 700; font-size: calc(var(--base) * 0.72); word-break: break-word; padding: calc(var(--base) * 0.2) 0; }
.opt .val { flex: 0 0 auto; font-weight: 800; font-size: calc(var(--base) * 0.62); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt.pulse { animation: yosou-pulse 0.5s ease-out; }
@keyframes yosou-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
.foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: calc(var(--base) * 0.5);
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
}

/* pop */
.theme-pop { background: rgba(255, 255, 255, 0.95); color: #23263a; box-shadow: 0 calc(var(--base) * 0.15) calc(var(--base) * 0.5) rgba(0, 0, 0, 0.25); }
.theme-pop .opt { background: #eef1f8; }
.theme-pop .opt .fill { background: linear-gradient(90deg, #ffd1dc, #ffb3c6); }
.theme-pop .opt.lead .fill { background: linear-gradient(90deg, #ffb3c6, #ff7da1); }
.theme-pop .opt .no { background: #ff6b8b; color: #fff; }
.theme-pop .foot { color: #5d6478; }

/* simple */
.theme-simple { background: rgba(16, 18, 26, 0.78); color: #fff; }
.theme-simple .opt { background: rgba(255, 255, 255, 0.10); }
.theme-simple .opt .fill { background: rgba(255, 224, 102, 0.45); }
.theme-simple .opt.lead .fill { background: rgba(255, 224, 102, 0.75); }
.theme-simple .opt .no { background: #ffe066; color: #1a1a1a; }
.theme-simple .foot { color: rgba(255, 255, 255, 0.8); }

/* neon */
.theme-neon { background: rgba(8, 6, 20, 0.82); color: #fff; border: 2px solid #3ff0ff; box-shadow: 0 0 calc(var(--base) * 0.5) #3ff0ff; }
.theme-neon .question { text-shadow: 0 0 10px #3ff0ff; }
.theme-neon .opt { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(63, 240, 255, 0.45); }
.theme-neon .opt .fill { background: linear-gradient(90deg, rgba(255, 79, 216, 0.35), rgba(63, 240, 255, 0.45)); }
.theme-neon .opt.lead .fill { background: linear-gradient(90deg, rgba(255, 79, 216, 0.6), rgba(63, 240, 255, 0.75)); box-shadow: 0 0 12px #3ff0ff; }
.theme-neon .opt .no { background: transparent; border: 2px solid #ff4fd8; color: #ff4fd8; box-shadow: 0 0 8px #ff4fd8; }
.theme-neon .foot { color: #b6ff3f; text-shadow: 0 0 6px #b6ff3f; }

/* 締め切り・結果 */
.yosou.closed:not(.answered) .opt { opacity: 0.85; }
.yosou.answered .opt:not(.answer) { opacity: 0.45; }
.opt .mark {
  position: relative; z-index: 1; display: none; flex: 0 0 auto;
  padding: 0 calc(var(--base) * 0.35);
  border-radius: 999px;
  font-weight: 800; font-size: calc(var(--base) * 0.5); line-height: 1.7;
}
.opt.answer .mark { display: inline-block; }
.opt.answer { animation: yosou-pulse 0.6s ease-out; }
.winners { margin-top: calc(var(--base) * 0.55); padding-top: calc(var(--base) * 0.45); border-top: 2px dashed currentColor; }
.winners[hidden] { display: none; }
.win-head { font-size: calc(var(--base) * 0.72); font-weight: 800; margin-bottom: calc(var(--base) * 0.3); }
.names { display: flex; flex-wrap: wrap; gap: calc(var(--base) * 0.22); }
.names .who, .names .more {
  max-width: 100%;
  padding: calc(var(--base) * 0.08) calc(var(--base) * 0.4);
  border-radius: 999px;
  font-size: calc(var(--base) * 0.5); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.names .more { font-weight: 800; }

.theme-pop .opt.answer { box-shadow: 0 0 0 3px #ff6b8b inset; }
.theme-pop .opt.answer .fill { background: linear-gradient(90deg, #ffb3c6, #ff7da1); }
.theme-pop .opt .mark { background: #ff3d6e; color: #fff; }
.theme-pop .winners { border-top-color: #ffc2d1; }
.theme-pop .win-head { color: #ff3d6e; }
.theme-pop .names .who { background: #fff0f4; color: #23263a; border: 1px solid #ffc2d1; }
.theme-pop .names .more { background: #ff6b8b; color: #fff; }

.theme-simple .opt.answer { box-shadow: 0 0 0 2px #ffe066 inset; }
.theme-simple .opt.answer .fill { background: rgba(255, 224, 102, 0.75); }
.theme-simple .opt .mark { background: #ffe066; color: #1a1a1a; }
.theme-simple .winners { border-top-color: rgba(255, 255, 255, 0.35); }
.theme-simple .win-head { color: #ffe066; }
.theme-simple .names .who { background: rgba(255, 255, 255, 0.14); color: #fff; }
.theme-simple .names .more { background: #ffe066; color: #1a1a1a; }

.theme-neon .opt.answer { border-color: #b6ff3f; box-shadow: 0 0 14px #b6ff3f; }
.theme-neon .opt.answer .fill { background: linear-gradient(90deg, rgba(182, 255, 63, 0.45), rgba(63, 240, 255, 0.6)); }
.theme-neon .opt .mark { background: transparent; border: 2px solid #b6ff3f; color: #b6ff3f; text-shadow: 0 0 6px #b6ff3f; }
.theme-neon .winners { border-top-color: rgba(255, 79, 216, 0.6); }
.theme-neon .win-head { color: #ff4fd8; text-shadow: 0 0 8px #ff4fd8; }
.theme-neon .names .who { background: rgba(63, 240, 255, 0.1); color: #fff; border: 1px solid rgba(63, 240, 255, 0.6); }
.theme-neon .names .more { background: transparent; color: #b6ff3f; border: 1px solid #b6ff3f; }