/* body には背景を直接持たせず、固定レイヤーを使う */
body {
  font-family: sans-serif;
  text-align: center;
  color: #fff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
button { padding: 10px 20px; margin: 10px; }

.score-display {
  position: fixed;
  top: 5%;
  left: 13%;
  height: 60px;    /* 右上に配置（戻るボタンが左上なのでバランス良い） */
  background: rgba(0,0,0,0.55);
  padding: 10px 25px;
  font-size: 1.2em;
  color: #fff;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 999;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gacha-buttons {
  position: fixed;
  bottom: 30px;        /* 画面下からの距離 */
  left: 5%;          /* 左端からの距離 */
  display: flex;
  flex-direction: column;  /* 縦並び */
  align-items: flex-start;
  gap: 20px;           /* ボタン間のスペース */
  z-index: 1000;       /* 前面に出す */
}

/* 共通ボタン画像設定 */
.gacha-buttons img {
  width: 350px;        /* 好みで調整可 */
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  user-select: none;
  border-radius: 15px;
}

/* ホバー・クリック時の軽いアニメ */
.gacha-buttons img:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.gacha-buttons img:active {
  transform: scale(0.95);
  filter: brightness(0.8);
}
.info-panel {
  position: fixed;
  bottom: 30px;
  right: 5%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  padding: 15px 25px;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  color: #fff;
  font-size: 0.95em;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 260px;

  /* スクロール対応 */
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}
/* 画像（キャラアイコン） */
.info-panel img#charImage {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

/* テキスト */
.info-panel p {
  margin: 0;
  line-height: 1.4em;
}

/* テスト用ボタン */
.info-panel button {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.info-panel button:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}
.info-panel button:active {
  transform: scale(0.95);
}

/* === ガチャ演出メインレイヤー === */
#gachaOverlay {
  position: fixed;
  inset: 0;
  display: none; /* ガチャ開始時にJSでdisplay:flexなどに */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  background: rgba(0, 0, 0, 0); /* 最初は透明 */
  animation: overlayFadeIn 0.8s ease-out forwards;
}

@keyframes overlayFadeIn {
  0% { background: rgba(0, 0, 0, 0); }
  100% { background: rgba(0, 0, 0, 0.8); }
}



/* 差し込み背景レイヤー */
#gachaBackground {
  position: absolute;
  inset: 0;
  background-image: url("../images/gacha2.jpg"); /* ←差し込み背景 */
  background-size: cover;
  background-position: center;
  filter: brightness(0.9) blur(2px);
  transform: scale(1.1);
  opacity: 0;
  z-index: 0;
  animation: bgAppear 1s ease-out forwards;
}
@keyframes bgAppear {
  from { opacity: 0; transform: scale(1.2); }
  to   { opacity: 1; transform: scale(1.05); }
}

/* === 光の爆発エフェクト === */
.lightBurst {
  position: absolute;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(255,255,150,0.9), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(20px);
  animation: burst 2s ease-out forwards;
}
@keyframes burst {
  0% { transform: scale(0.4); opacity: 0; }
  20% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}


/* === キャラ表示領域 === */
#charDisplay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 10;
  opacity: 0;
  animation: charFadeIn 1s ease-out 1s forwards;
}
@keyframes charFadeIn {
  to { opacity: 1; transform: translateY(-10px); }
}

/* キャラ画像を大きく中央に配置 */
#charDisplay img {
  max-height: 86vh;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
  animation: floatChar 2.5s ease-in-out infinite alternate;
}
@keyframes floatChar {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}
.char-info-block {
  position: absolute;
  bottom: 0;                  /* 下に固定 */
  left: 0;
  width: 100%;                /* 横幅いっぱい */
  height: 30vh;               /* 画面の下30%を占領 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.35); /* 今より明るめの透過 */
  backdrop-filter: blur(8px);      /* モザイク（ぼかし）効果を少しだけ */
  box-shadow: 0 0 40px rgba(0,0,0,0.4);
  border-radius: 0;                /* 四隅をまっすぐに */
  opacity: 0;
  animation: infoAppear 1.2s ease-out 1s forwards;
  z-index: 9999;
}

/* 上段を横並びにするラッパーを追加 */
.char-info-top {
  display: flex;
  flex-direction: row;      /* 横並び */
  align-items: center;      /* 縦方向中央揃え */
  gap: 12px;                /* 横の間隔 */
  justify-content: center;  /* 横方向中央揃え */
  width: auto;              /* 横幅をコンテンツに合わせる */
}

/* セリフ用：背景削除 */
.char-greeting {
  margin-top: 10px;
  font-size: 1.4em;
  background: none !important; /* 背景削除 */
  border-radius: 0;
  padding: 0;
}
@keyframes infoAppear {
  to {
    opacity: 1;
    transform: translate(-50%, 0); /* translateY削除し、中央基準に統一 */
  }
}
@keyframes textSlideIn {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
#singleResult {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 20;
  pointer-events: none; /* 背景クリックを邪魔しない */
}

/* キャラ画像をでっかく中央に表示（他と干渉しない） */
#singleResult img {
  position: relative;
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
  top: 13%;
  object-fit: contain;
  transform: scale(1.2);
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.4));
  animation: bigAppear 1s cubic-bezier(0.2, 0.8, 0.3, 1.1);
  z-index: 25;
}

/* 拡大アニメーション */
@keyframes bigAppear {
  0% { transform: scale(0.3) rotate(3deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(0); opacity: 1; }
  100% { transform: scale(1.2); opacity: 1; }
}

/* 文字群（上書きで下に寄せる） */
#singleResult .char-name,
#singleResult .char-rarity,
#singleResult .char-greeting {
  position: relative;
  z-index: 30;
  text-align: center;
  width: 100%;
  text-shadow: 0 0 15px rgba(0,0,0,0.6);
  z-index: 99999;
}


#singleResult .char-name {
  font-size: 2.6em;
  margin-top: 15px;
}

#singleResult .char-rarity {
  font-size: 1.3em;
  color: #ffd700;
  margin-top: 8px;
}

#singleResult .char-greeting {
  margin-top: 20px;
  font-size: 1.2em;
  background: rgba(0,0,0,0.55);
  border-radius: 12px;
  display: inline-block;
  padding: 12px 20px;
  backdrop-filter: blur(5px);
}

/* SSR限定・光輝アニメ（任意） */
#singleResult img.ssr-glow {
  animation: bigAppear 1s ease-out, ssrGlow 3s linear infinite;
}

@keyframes ssrGlow {
  0% { filter: drop-shadow(0 0 40px gold); }
  50% { filter: drop-shadow(0 0 80px orange); }
  100% { filter: drop-shadow(0 0 40px gold); }
}
/* === 10連結果グリッド === */
.resultGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: 80%;
  max-width: 900px;
  margin-top: 40px;
  justify-items: center;
  align-items: center;
  z-index: 5;
}

.resultGrid img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
  transform: scale(0.8);
  opacity: 0;
  animation: popIn 0.3s ease-out forwards;
}

/* 順次表示 */
@keyframes popIn {
  from { transform: scale(0.5) rotate(10deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
/* 各画像が順に表示されるように */
.resultGrid img:nth-child(1) { animation-delay: 0.1s; }
.resultGrid img:nth-child(2) { animation-delay: 0.3s; }
.resultGrid img:nth-child(3) { animation-delay: 0.5s; }
.resultGrid img:nth-child(4) { animation-delay: 0.7s; }
.resultGrid img:nth-child(5) { animation-delay: 0.9s; }
.resultGrid img:nth-child(6) { animation-delay: 1.1s; }
.resultGrid img:nth-child(7) { animation-delay: 1.3s; }
.resultGrid img:nth-child(8) { animation-delay: 1.5s; }
.resultGrid img:nth-child(9) { animation-delay: 1.7s; }
.resultGrid img:nth-child(10){ animation-delay: 1.9s; }

/* レアリティによる枠色例（任意） */
.resultGrid img[data-rarity="R"]    { border-color: #66aaff; box-shadow: 0 0 15px #66aaff55; }
.resultGrid img[data-rarity="SR"]   { border-color: #a86bff; box-shadow: 0 0 18px #a86bff66; }
.resultGrid img[data-rarity="SSR"]  { border-color: #ffd700; box-shadow: 0 0 25px #ffd70077; }

.char-info-top .char-name,
.char-info-top .char-rarity {
  writing-mode: horizontal-tb; /* 横書き */
  white-space: nowrap;          /* 改行防止 */
  display: inline-block;        /* 横並びを妨げない */
  margin: 0;                    /* 不要な余白を消す */
}
.ssr-border {
  border-radius: 10px;
  padding: 5px;
  position: relative;
}
.ssr-border::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
  z-index: -1;
  border-radius: 12px;
}
.pc-roll-sequence {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 5;
}

.pc-roll-card {
  position: absolute;
  width: 380px;
  text-align: center;
  opacity: 0;
  transform: translateX(120%);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.pc-roll-card img {
  width: 280px;
  height: auto;
}

.pc-roll-card .pc-rarity {
  font-size: 1.4rem;
  margin-top: 8px;
}

.pc-roll-card .pc-name {
  font-size: 1.2rem;
}

.pc-roll-card .pc-greeting {
  font-size: 0.9rem;
  color: #ddd;
}
#prePullOverlay {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0.55);
  z-index:9980;
  touch-action:none; /* スマホでドラッグを奪われないため */
}

#prePullBall {
  position:relative;
  width:100px;
  height:100px;
  border-radius:50%;
  background:white;
  box-shadow:0 0 40px rgba(255,255,255,0.9);
  transition:opacity .15s ease;
}

#prePullRays {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  filter:blur(8px);
  background:conic-gradient(
    from 0deg,
    rgba(255,255,255,.0) 0deg,
    rgba(255,255,255,.9) 45deg,
    rgba(255,255,255,.0) 90deg
  );
  animation: spin 1.5s linear infinite;
}
#rarityEffect {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  transform-origin: center;

  width: 130%;
  height: 130%;

  object-fit: contain;
  pointer-events: none;

  z-index: 9;
}
/* 10連専用の空アニメ版 lightBurst */
.lightBurstTen{
  position:absolute;
  width:900px;
  height:900px;
  border-radius:50%;
  opacity:0;
  filter:blur(20px);
  z-index:99999;
  pointer-events:none;
}

.lightBurstTen.burst-active{
  animation:burstFlash 2s ease-out forwards;
}
@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@media (min-width: 769px) {
  .overlay-top,
  .overlay-middle,
  .ten-roll-sequence,
  .overlay-bottom {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* スマホ版の調整が影響しないよう、PCの基準を固定 */
  #gachaOverlay {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }