/* ===== リセット ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== ベース ===== */
body {
  background: #000;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== 16:9 ゲーム画面（レターボックス） ===== */
#game-screen {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0d0d20 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* 背景の装飾グリッド */
#game-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ===== タイトル ===== */
.title {
  font-family: 'Orbitron', 'Noto Sans JP', sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: #FFD700;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 215, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 4px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ===== リールエリア ===== */
.reel-area {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* ===== リール個別ラッパー ===== */
.reel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ラベル */
.reel-label {
  font-size: 18px;
  font-weight: 700;
  color: #FFD700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* ===== リール窓（ガラス風半透明パネル） ===== */
.reel-container {
  width: 300px;
  height: 240px; /* 3アイテム分 (80px × 3) */
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 16px;
  box-shadow:
    0 0 30px rgba(255, 215, 0, 0.2),
    0 0 60px rgba(255, 215, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

/* 上部グラデーションマスク（覗き窓効果） */
.reel-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(10, 10, 26, 0.9) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* 下部グラデーションマスク */
.reel-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(to top, rgba(10, 10, 26, 0.9) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* 中央ハイライト枠 */
.reel-container .reel-highlight {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 80px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(255, 215, 0, 0.4);
  border-bottom: 1px solid rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.05);
  z-index: 5;
  pointer-events: none;
}

/* ===== リールストリップ ===== */
.reel-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  will-change: transform;
}

/* スピン中アニメーション */
.reel-strip.spinning {
  animation: reelSpin 0.3s linear infinite;
}

/* ===== リールアイテム ===== */
.reel-item {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 0 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

/* ===== × デコレーション ===== */
.reel-cross {
  font-family: 'Orbitron', sans-serif;
  font-size: 40px;
  font-weight: 900;
  color: #FFD700;
  text-shadow:
    0 0 15px rgba(255, 215, 0, 0.9),
    0 0 30px rgba(255, 215, 0, 0.5);
  line-height: 1;
  margin-top: 36px; /* ラベル分の調整 */
}

/* ===== SPINボタン ===== */
#spin-btn {
  font-family: 'Orbitron', 'Noto Sans JP', sans-serif;
  font-size: 26px;
  font-weight: 900;
  padding: 18px 60px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  color: #1a1a00;
  cursor: pointer;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow:
    0 6px 30px rgba(255, 165, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
  position: relative;
  z-index: 1;
}

#spin-btn:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow:
    0 8px 40px rgba(255, 165, 0, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

#spin-btn:active:not(:disabled) {
  transform: scale(0.95) translateY(0);
  box-shadow:
    0 3px 15px rgba(255, 165, 0, 0.5),
    0 1px 4px rgba(0, 0, 0, 0.4);
}

/* STOP状態（スピン中、クリックで停止） */
#spin-btn.stopping {
  background: linear-gradient(135deg, #FF4444 0%, #CC0000 50%, #AA0000 100%);
  color: #fff;
  box-shadow:
    0 6px 30px rgba(255, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* スピン中グレーアウト */
#spin-btn.spinning,
#spin-btn:disabled {
  background: linear-gradient(135deg, #555 0%, #333 100%);
  color: #888;
  cursor: not-allowed;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transform: none;
  filter: none;
}

/* ===== 結果表示エリア ===== */
.result-area {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

#result-text {
  font-size: 28px;
  font-weight: 900;
  color: #FFD700;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 215, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.9);
  text-align: center;
  padding: 16px 32px;
  background: rgba(255, 215, 0, 0.07);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  letter-spacing: 1px;
  line-height: 1.6;
  max-width: 1100px;

  /* 初期状態: 非表示 */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s, transform 0.5s;
}

#result-text.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== フラッシュオーバーレイ ===== */
#flash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 215, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
}

#flash-overlay.flash {
  animation: flashAnim 0.4s ease-out forwards;
}

/* ===== パーティクルコンテナ ===== */
#particle-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  overflow: hidden;
}

/* パーティクル（金色の紙吹雪） */
.particle {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation: particleFall linear forwards;
}

/* ===== @keyframes ===== */

/* リールスピン（上方向スクロール） */
@keyframes reelSpin {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-800px); }
}

/* ポンッ拡大演出 */
@keyframes popIn {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); color: #FFD700; }
  100% { transform: scale(1); }
}

/* 画面振動 */
@keyframes shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* フラッシュ */
@keyframes flashAnim {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 紙吹雪が降る */
@keyframes particleFall {
  0%   { top: -20px; opacity: 1; transform: rotate(0deg) translateX(0); }
  70%  { opacity: 1; }
  100% { top: 110vh; opacity: 0; transform: rotate(720deg) translateX(60px); }
}

/* クラスベースのアニメーション */
.reel-item.pop {
  animation: popIn 0.3s ease-out;
}

.reel-container.shake {
  animation: shake 0.2s ease-out;
}