/* コメントで投票 無料版（表示。見た目はシンプルだけ） */
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: "　👑"; }

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