@charset "Shift_JIS";
/* CSSコメントはこの形式で！ */

/* 🌌 全体の背景と文字色 */
body {
  text-align: center;
  font-family: sans-serif;
  background: #000000;
  color: white;
}

/* 🎰 スロットのリール枠 */
.reel-window {
  max-width: 250px;
  width: 100%;
  height: 250px;
  overflow: hidden;
  border: 4px solid #888;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(255,255,255,0.3);
  margin: 10px;
}

/* 🎞️ リールの中身 */
.reel-strip {
  display: flex;
  flex-direction: column;
}

.reel-strip img {
  width: 100%;
  height: auto;
}

/* 🎞️ 回転アニメーション */
@keyframes slide {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5000px); }
}

.spin {
  animation: slide 1.5s linear infinite;
}

/* ✨ 揃ったときの光る演出 */
.glow {
  box-shadow: 0 0 20px 10px gold;
  border-color: gold;
  transform: scale(1.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

/* 🖱️ ボタンスタイル（スタート・ストップ・リプレイ共通） */
button {
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  background-color: #ffffff;
  color: #000000;
  border: none;
  border-radius: 6px;
  margin: 5px;
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  background-color: #C0C0C0;
  color: #000000;
}

/* 🖼️ タイトル画像 */
.title-img {
  width: 200px;
  margin-top: 20px;
}

/* 🧮 スコア表示 */
#score {
  font-size: 24px;
  margin-top: 10px;
  color: white;
}

/* 🎰 スロット全体のレイアウト */
.slot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
}

/* 🎮 ボタン並び（スタート＆リプレイ） */
.control {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
}

/* 📘 遊び方セクション */
#howto {
  margin-top: 30px;
  padding: 10px;
  color: white;
  font-size: 18px;
  line-height: 1.6;
}

#howto h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #FFD700;
}

/* 🔍 検索窓風リンク表示 */
#link-box {
  margin-top: 20px;
  padding: 12px 20px;
  background-color: white;
  border-radius: 8px;
  display: inline-block;
  text-align: center;
}

#congrats-message {
  font-size: 24px;
  font-weight: bold;
  color: #d40000;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

#link-guide {
  font-size: 18px;
  color: #333333;
  margin-bottom: 8px;
}

#link-url {
  display: inline-block;
  padding: 12px 20px;
  font-size: 18px;
  border: 2px solid #999;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-decoration: none;
  color: #0066cc;
  font-weight: bold;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}

/* 📢 広告枠 */
#ad-box, .ad-box {
  width: 120px;
  height: 400px;
  border: 2px solid #333;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #222;
  text-align: center;
}

/* 📢 広告の中身2行構成 */
.ad-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ad-label {
  font-weight: bold;
  margin-bottom: 10px;
}

.ad-content {
  font-size: 12px;
}


/* 📦 スロット本体の囲い */
.slot-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 🌊 スロット＋広告枠の並び（PC表示用） */
#slot-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap; /* ← これがポイント！ */
}

/* 🌟 スコア＆説明の表示位置 */
#game-info {
  margin-top: 20px;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 600px) {
  #slot-container {
    flex-direction: column;
    align-items: center;
  }

  .slot-box {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .control {
    display: flex;
    flex-direction: column;
    align-items: center;
    order: -1;
    margin-bottom: 10px;
  }

  /* 🎯 リプレイ → スタート順に並べる */
  .control button:nth-child(2) {
    order: -1; /* リプレイを先に表示！ */
    margin-bottom: 20px; /* スタートとの間に余白！ */
  }

  .control button:nth-child(1) {
    order: 0; /* スタートを後に表示！ */
  }

  .slot {
    order: 0;
  }

  #game-info {
    order: 1;
  }

  .ad-box {
    width: 90%;
    height: auto;
    margin: 20px auto;
    position: relative;
    z-index: 0;
  }

  /* 🎯 下の広告枠に余白追加（最後の広告枠） */
  .ad-box:last-of-type {
    margin-bottom: 30px;
  }

  h1 {
    position: relative;
    z-index: 1;
  }

  .reel {
    width: 80%;
  }

  .reel-window {
    width: 100%;
    height: 250px;
  }

  button {
    font-size: 16px;
    padding: 8px 16px;
  }

  #score {
    font-size: 20px;
  }

  #howto {
    font-size: 16px;
  }

  #howto h2 {
    font-size: 20px;
  }

  #link-box {
    width: 80%;
    font-size: 14px;
    padding: 8px;
  }

  #link-url {
    font-size: 14px;
    padding: 10px;
  }

  #replay-button {
    font-size: 14px;
    padding: 8px 14px;
  }
}