/* 全体のベース設定 */
body {
  /* 端末内蔵の綺麗な丸ゴシックを優先しつつ、Webフォントを指定 */
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN W4', 'Meiryo', 'メイリオ', sans-serif;
  
  /* フォントのギザギザを滑らかにする設定 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  text-align: center;
  background-color: #fff7d6; /* 優しいクリームイエロー */
  color: #333;
  margin: 0;
  padding: 30px 15px; /* スマホで見やすいように余白を調整 */
}

/* コンテンツを中央にまとめる枠 */
.app-container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #ff6b6b;
  font-size: 1.8rem;
  text-shadow: 2px 2px 0px #fff; /* ポップな白フチ風 */
  margin-bottom: 10px;
}

p {
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 30px;
}

/* スロット部分のデザイン */
.slot-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.slot {
  width: 90%; /* スマホの画面幅に合わせて可変 */
  max-width: 320px;
  height: 80px;
  font-size: 1.5rem;
  font-weight: 800;
  background: #fff;
  border: 4px solid #feca57; /* 明るいオレンジの太枠 */
  border-radius: 20px; /* 丸みのある角 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 8px 0 #ff9ff3; /* ポップなピンクの影 */
  color: #ee5253;
  transition: all 0.2s;
}

/* スロット回転中のアニメーション（小刻みに揺れる） */
.spinning {
  animation: shake 0.1s infinite;
  color: #c8d6e5; /* 回っている時はグレーっぽく */
}

@keyframes shake {
  0% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* 止まった時の「ポンッ」と大きくなるアニメーション */
.pop-result {
  animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popUp {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); background-color: #fff200; }
  100% { transform: scale(1); background-color: #fff; }
}

/* ボタンのデザイン（立体感とクリック感） */
button {
  font-family: inherit;
  font-weight: 800;
  font-size: 1.2rem;
  padding: 15px 30px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 0 #c23616; /* ボタンの厚み */
  transition: all 0.1s;
  margin-bottom: 40px;
  width: 80%;
  max-width: 300px;
}

/* ボタンを押したときの動き */
button:active {
  transform: translateY(6px); /* 影の分だけ下に下がる */
  box-shadow: 0 0 0 #c23616; /* 影を消すことで押し込んだように見せる */
}

/* 回転中（連打防止）のボタンの色 */
button:disabled {
  background-color: #ffb8b8;
  box-shadow: 0 6px 0 #e66767;
  cursor: not-allowed;
}

/* Googleマップのスマホ対応（レスポンシブ） */
.map-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* アスペクト比 4:3 を維持 */
  border-radius: 15px; /* マップの角も丸く */
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}