/* コメントで投票（表示） */
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;
}

.vote {
  --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;
}
.vote.size-S { --base: 19px; }
.vote.size-M { --base: 26px; }
.vote.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: vote-pulse 0.5s ease-out; }
@keyframes vote-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;
}
.vote.closed .opt:not(.win) { opacity: 0.55; }
.opt.win .name::after { content: "　👑"; }

/* 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; }