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

.gacha {
  --base: 26px;
  --n: #9aa3b2; --r: #3fa7ff; --sr: #b062ff; --ssr: #ffc531;
  width: calc(var(--base) * 18);
  max-width: calc(100vw - var(--base));
  margin: calc(var(--base) * 0.5);
  box-sizing: border-box;
}
.gacha.size-S { --base: 19px; }
.gacha.size-M { --base: 26px; }
.gacha.size-L { --base: 36px; }

.stage {
  position: relative;
  min-height: calc(var(--base) * 7.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 待っている間の案内 */
.guide {
  padding: calc(var(--base) * 0.5) calc(var(--base) * 0.8);
  border-radius: calc(var(--base) * 0.6);
  font-size: calc(var(--base) * 0.8);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.guide .word { font-size: 1.25em; }
.guide .limit { display: block; font-size: 0.75em; font-weight: 700; opacity: 0.85; }

/* カプセル */
.capsule {
  display: none;
  width: calc(var(--base) * 5);
  height: calc(var(--base) * 5);
  position: relative;
}
.capsule .cap-top, .capsule .cap-bottom {
  position: absolute; left: 0; right: 0; height: 50%;
  border: calc(var(--base) * 0.22) solid rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
}
.capsule .cap-top { top: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-bottom-width: calc(var(--base) * 0.11); background: #ff6b8a; }
.capsule .cap-bottom { bottom: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; border-top-width: calc(var(--base) * 0.11); background: #fff; }
.mode-shake .capsule { display: block; animation: shake 0.28s ease-in-out infinite; }
@keyframes shake {
  0% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-12deg) translateY(-4%); }
  50% { transform: rotate(0deg) translateY(0); }
  75% { transform: rotate(12deg) translateY(-4%); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* 結果のカード */
.card {
  display: none;
  min-width: calc(var(--base) * 11);
  max-width: 100%;
  padding: calc(var(--base) * 0.6) calc(var(--base) * 0.9);
  border-radius: calc(var(--base) * 0.7);
  text-align: center;
  box-sizing: border-box;
  border: calc(var(--base) * 0.16) solid var(--n);
}
.mode-result .card { display: block; animation: pop 0.45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.card .who { font-size: calc(var(--base) * 0.7); font-weight: 700; word-break: break-all; }
.card .rar {
  display: inline-block;
  margin: calc(var(--base) * 0.25) 0;
  padding: 0 calc(var(--base) * 0.5);
  border-radius: calc(var(--base) * 0.4);
  font-size: calc(var(--base) * 0.9);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--n);
}
.card .prize { font-size: calc(var(--base) * 1.35); font-weight: 900; line-height: 1.25; word-break: break-word; }
.card.rar-R { border-color: var(--r); } .card.rar-R .rar { background: var(--r); }
.card.rar-SR { border-color: var(--sr); } .card.rar-SR .rar { background: var(--sr); }
.card.rar-SSR { border-color: var(--ssr); box-shadow: 0 0 calc(var(--base) * 1.2) rgba(255, 197, 49, 0.85); }
.card.rar-SSR .rar { background: linear-gradient(90deg, #ff5f6d, #ffc531, #4ade80, #3fa7ff, #b062ff); }
.card.rar-SR { box-shadow: 0 0 calc(var(--base) * 0.8) rgba(176, 98, 255, 0.7); }

/* 引いた人の並び */
.hist {
  margin-top: calc(var(--base) * 0.3);
  padding: calc(var(--base) * 0.3) calc(var(--base) * 0.5);
  border-radius: calc(var(--base) * 0.5);
  display: flex; flex-direction: column; gap: calc(var(--base) * 0.12);
  font-size: calc(var(--base) * 0.6);
}
.hist .row { display: flex; align-items: center; gap: calc(var(--base) * 0.35); min-width: 0; }
.hist .b {
  flex: 0 0 auto; min-width: calc(var(--base) * 1.6); text-align: center;
  border-radius: calc(var(--base) * 0.25); font-weight: 900; color: #fff; background: var(--n);
  font-size: 0.85em; padding: 0 0.3em;
}
.hist .rar-R .b { background: var(--r); } .hist .rar-SR .b { background: var(--sr); } .hist .rar-SSR .b { background: #e0a400; }
.hist .nm { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; font-weight: 700; }
.hist .pz { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }

/* テーマ：ポップ（明るい） */
.theme-pop .guide { background: #ffffff; color: #2a2f45; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15); }
.theme-pop .guide .word { color: #ff4f7b; }
.theme-pop .card { background: #ffffff; color: #2a2f45; }
.theme-pop .hist { background: rgba(255, 255, 255, 0.92); color: #2a2f45; }

/* テーマ：シンプル（暗い半透明） */
.theme-simple .guide { background: rgba(14, 16, 24, 0.78); color: #fff; }
.theme-simple .guide .word { color: #ffd54a; }
.theme-simple .card { background: rgba(14, 16, 24, 0.85); color: #fff; }
.theme-simple .hist { background: rgba(14, 16, 24, 0.72); color: #fff; }

/* テーマ：ネオン（光る） */
.theme-neon .guide { background: rgba(10, 6, 30, 0.85); color: #f4eaff; border: 2px solid #ff4fd8; box-shadow: 0 0 14px #ff4fd8; }
.theme-neon .guide .word { color: #5ff7ff; text-shadow: 0 0 8px #5ff7ff; }
.theme-neon .card { background: rgba(10, 6, 30, 0.9); color: #f4eaff; }
.theme-neon .card .prize { text-shadow: 0 0 10px rgba(95, 247, 255, 0.8); }
.theme-neon .hist { background: rgba(10, 6, 30, 0.8); color: #f4eaff; border: 1px solid #5ff7ff; }

@media (prefers-reduced-motion: reduce) {
  .mode-shake .capsule, .mode-result .card { animation: none; }
}