@charset "utf-8";

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  transform: scale(1.05);
}

button:active {
  transform: scale(0.95);
}

.single-button,
.ten-button,
.reset-button {
  color: #fff;
  background-color: #0d0300;
  border: 2px solid #666;
}

.rates-toggle {
  font-size: 1.6rem;
  color: #fff;
  text-decoration: underline;
  background: none;
  padding: 5px;
  margin-bottom: 10px;
  font-weight: normal;
}

.rates-info {
  background-color: rgba(0, 0, 0, 0.45);
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: none;
  max-height: 300px;
  overflow-y: auto;
}

.rates-info.active {
  display: block;
}

.rates-info h3 {
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.rates-info ul {
  list-style-type: none;
  margin-bottom: 10px;
}

.rates-info li {
  font-size: 1.4rem;
  margin-bottom: 3px;
}

.rates-info .note {
  font-size: 0.8em;
  color: #666;
  margin-top: 10px;
}

.stats {
  margin-bottom: 20px;
}

.stats h3 {
  font-size: 1.6rem;
}

.stats-container {
  max-width: 1000px;
  margin-top: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  text-align: center;
}

.stat-item {
  font-size: 1.6rem;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 5px;
  transition: all 0.2s;
}

.char-stats {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.char-stats h3 {
  font-size: 1.6rem;
}

.char-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 5番目の項目を全幅に */
.char-stats-grid .stat-item:nth-child(5) {
  grid-column: 1 / -1;
}

.total-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 格別なキャラタマゴ - 金色系 */
.special-char {
  background-color: rgba(100, 150, 255, 0.4);
}

/* 特別なキャラタマゴ - ピンク〜紫系 */
.unique-char {
  background: linear-gradient(135deg, rgba(255, 100, 150, 0.4) 0%, rgba(150, 100, 255, 0.4) 100%);
}

/* キャラタマゴ - 赤オレンジ系 */
.collab-char {
  background-color: rgba(255, 140, 80, 0.4);
}

/* 激レアキャラお着替え - 水色系 */
.normal-char {
  background-color: rgba(100, 200, 255, 0.35);
}

/* 激レアお着換え&ガチドラメダル - 紫系 */
.costume-char {
  background-color: rgba(200, 100, 255, 0.3);
}

.total-char {
  background-color: rgba(100, 255, 200, 0.3);
}

/* アイテム統計セクション */
.item-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ドラゴンメダル - 赤茶系 */
.kibidango-item {
  background-color: rgba(200, 80, 60, 0.4);
}

/* バッジコイン - 黄色系 */
.urap-item {
  background-color: rgba(220, 200, 60, 0.4);
}

/* トロP - 緑系 */
.trop-item {
  background-color: rgba(80, 200, 130, 0.4);
}

/* 友トレ玉満タン回復 - 青紫系 */
.tomotre-item {
  background-color: rgba(120, 130, 230, 0.4);
}

/* 合計統計のスタイル */
.total-item {
  background-color: rgba(100, 255, 150, 0.15);
  padding: 15px;
}

/* 数値のスタイル */
.stat-value {
  font-size: 2.0rem;
  font-weight: bold;
  margin: 5px 0;
}

.text-xs {
  font-size: 1.2rem;
  color: #cccccc;
}

.ruby-item {
  background-color: rgba(69, 183, 234, 0.15);
  padding: 15px;
}

/* タブレット対応 */
@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .char-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* タブレットでは5番目も通常表示 */
  .char-stats-grid .stat-item:nth-child(5) {
    grid-column: auto;
  }

  .item-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* デスクトップ対応 */
@media (min-width: 1024px) {
  .char-stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .item-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.results h3 {
  margin-bottom: 10px;
}

.results-container {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
  margin-bottom: 100px;
}

.no-results {
  text-align: center;
  color: #fff;
  padding: 20px;
  font-size: 1.6rem;
}

/* ガチャアニメーション */
.animation-container {
  max-width: 1000px;
  min-height: 459px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 926px) {
  .animation-container {
    min-height: 434px;
  }
}

@media (max-width: 812px) {
  .animation-container {
    min-height: 341px;
  }
}

@media (max-width: 428px) {
  .animation-container {
    min-height: 183px;
  }
}

.gacha-animation {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gacha-animation.active {
  display: block;
}

.gacha-result {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  display: none;
}

.gacha-result.active {
  display: inline-block;
}

.gacha-result-card {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 160px;
}

.gacha-result-card .result-icon {
  font-size: 30px;
  margin-bottom: 5px;
}

.result-item {
  margin-bottom: 8px;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.result-character {
  display: flex;
  align-items: center;
}

.result-character .result-icon {
  width: auto;
  margin-right: 10px;
}

.result-character .result-icon img {
  width: 60px;
  max-width: inherit;
}

.result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-details {
  display: flex;
  flex-direction: column;
}

.result-name {
  font-size: 1.6rem;
  font-weight: bold;
}

.result-rarity {
  font-size: 1.0rem;
}

/* 複数激レア表示用のCSS */
.multiple-results-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  max-width: 98%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}

.rare-result-card {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 10px;
  transform: scale(0);
  transition: transform 0.3s ease-out;
  width: 160px;
}

.result-icon img,
.rare-result-icon img {
  max-width: 60%;
  height: auto;
}

.rare-result-name,
#resultName {
  font-size: 1.2rem;
  word-break: break-all;
}

@media (max-width: 926px) {
  .rare-result-card {
    width: 120px;
    margin: 0;
    padding: 10px;
  }

  .rare-result-name,
  #resultName {
    font-size: 10px;
  }
}

@media (max-width: 812px) {
  .rare-result-card {
    width: 120px;
  }

  .rare-result-name,
  #resultName {
    font-size: 10px;
  }
}

@media (max-width: 428px) {
  .rare-result-card {
    width: 60px;
    margin: 0;
    padding: 0;
  }

  .rare-result-name {
    font-size: 12px;
    display: none;
  }
}

@media (max-width: 768px) {
  .heading01 {
    font-size: 2.4rem;
  }

  .char-stats h3 {
    font-size: 1.4rem;
  }

  .button-group {
    font-size: 1.2rem;
  }

  .multiple-results-container {
    gap: 5px;
    margin: 0;
    padding: 0;
  }
}