* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at top, #1a1a1a 0%, #000 70%);
  color: #fff;
  touch-action: manipulation;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 12px) 6px env(safe-area-inset-bottom);
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  gap: 14px;
}
.app.shake {
  animation: screenShake 0.55s ease-in-out 2;
}
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-6px, 4px); }
  20%, 40%, 60%, 80%      { transform: translate(6px, -4px); }
}

/* ---------- Reels ---------- */
.reels {
  display: flex;
  gap: 6px;
  width: 100%;
  background: linear-gradient(180deg, #3a2a0d 0%, #1a1208 100%);
  padding: 6px;
  border-radius: 14px;
  border: 3px solid #c8a85a;
  box-shadow:
    0 0 30px rgba(200, 168, 90, 0.3),
    inset 0 4px 16px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 2;
}
.reel {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background: #2e8b57;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reel img {
  width: 98%;
  height: 98%;
  object-fit: contain;
  transition: filter 0.2s;
}
.reel.spinning img { filter: blur(2px); }
.reel.stop-flash { animation: reelStop 0.3s ease-out; }
@keyframes reelStop {
  0%   { transform: translateY(-6px); }
  60%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* ペア時 (テキストなし、控えめに光るだけ) */
.reel.match-pair {
  box-shadow: 0 0 18px #ffd700, inset 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 3つ揃い時 - 派手な光 */
.reel.match-triple {
  animation: reelJackpot 0.45s ease-in-out infinite alternate;
  box-shadow: 0 0 50px #ffd700, 0 0 100px #ff8c00, inset 0 0 28px rgba(255, 215, 0, 0.8);
  z-index: 3;
}
@keyframes reelJackpot {
  from { background: #ffd700; transform: scale(1); }
  to   { background: #ff8c00; transform: scale(1.06); }
}

/* ---------- History (出目履歴) ---------- */
.history {
  flex: 1 1 0;
  min-height: 60px;
  width: 100%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid #5c4a1f;
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.history::-webkit-scrollbar { width: 6px; }
.history::-webkit-scrollbar-thumb { background: #5c4a1f; border-radius: 3px; }
.history::-webkit-scrollbar-track { background: transparent; }

.history-row {
  display: flex;
  gap: 2px;
  justify-content: center;
  padding: 1px 4px;
  border-radius: 4px;
}
.history-row img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: #2e8b57;
  border-radius: 3px;
  flex-shrink: 0;
}
.history-row.pair {
  background: rgba(255, 215, 0, 0.18);
}
.history-row.triple {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.5), rgba(255, 140, 0, 0.5), rgba(255, 215, 0, 0.5));
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
  animation: historyTriplePop 0.5s ease-out;
}
@keyframes historyTriplePop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ---------- Spin Stack (5 buttons stacked vertically) ---------- */
.spin-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
}

.spin-btn {
  /* 色はカスタムプロパティで切り替え (nth-child で上書き) */
  --btn-light: #ff7676;
  --btn-dark:  #c62828;
  --btn-base:  #7a1818;
  --btn-glow:  rgba(255, 80, 80, 0.4);

  flex: 0 0 auto;
  min-height: 36px;
  width: 100%;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #fff;
  font-family: inherit;
  background: linear-gradient(180deg, var(--btn-light) 0%, var(--btn-dark) 100%);
  border: 2px solid #ffd700;
  border-radius: 50px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow:
    0 3px 0 var(--btn-base),
    0 4px 10px var(--btn-glow);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.spin-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 var(--btn-base),
    0 2px 6px var(--btn-glow);
}
.spin-btn.selected {
  animation: btnSelected 0.6s ease-out;
}
@keyframes btnSelected {
  0% {
    filter: brightness(2.2) saturate(1.6);
    box-shadow: 0 0 26px gold, 0 3px 0 var(--btn-base), 0 4px 10px var(--btn-glow);
  }
  100% {
    filter: brightness(1) saturate(1);
    box-shadow: 0 3px 0 var(--btn-base), 0 4px 10px var(--btn-glow);
  }
}

/* 5 colors — 赤・橙・緑・青・紫 */
.spin-btn:nth-child(1) { /* Red (default) */
  --btn-light: #ff7676;
  --btn-dark:  #c62828;
  --btn-base:  #7a1818;
  --btn-glow:  rgba(255, 80, 80, 0.4);
}
.spin-btn:nth-child(2) { /* Orange */
  --btn-light: #ffb74d;
  --btn-dark:  #e65100;
  --btn-base:  #6e3300;
  --btn-glow:  rgba(255, 152, 0, 0.4);
}
.spin-btn:nth-child(3) { /* Green */
  --btn-light: #81c784;
  --btn-dark:  #2e7d32;
  --btn-base:  #1b4d1b;
  --btn-glow:  rgba(76, 175, 80, 0.4);
}
.spin-btn:nth-child(4) { /* Blue */
  --btn-light: #64b5f6;
  --btn-dark:  #1565c0;
  --btn-base:  #0d3a78;
  --btn-glow:  rgba(33, 150, 243, 0.4);
}
.spin-btn:nth-child(5) { /* Purple */
  --btn-light: #ba68c8;
  --btn-dark:  #7b1fa2;
  --btn-base:  #4a1466;
  --btn-glow:  rgba(156, 39, 176, 0.4);
}

.spin-stack.disabled .spin-btn {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Flash overlay (jackpot screen flash) ---------- */
.flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 215, 0, 0.85) 0%, rgba(255, 140, 0, 0.4) 30%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  z-index: 150;
}
.flash.show { animation: flashAnim 1.4s ease-out; }
@keyframes flashAnim {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  35%  { opacity: 0.4; }
  55%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---------- Rays (ray of light radiating from center on jackpot) ---------- */
.rays {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(255, 215, 0, 0.35) 0deg,
    transparent 12deg,
    rgba(255, 215, 0, 0.35) 30deg,
    transparent 42deg,
    rgba(255, 140, 0, 0.35) 60deg,
    transparent 72deg,
    rgba(255, 215, 0, 0.35) 90deg,
    transparent 102deg,
    rgba(255, 140, 0, 0.35) 120deg,
    transparent 132deg,
    rgba(255, 215, 0, 0.35) 150deg,
    transparent 162deg,
    rgba(255, 140, 0, 0.35) 180deg,
    transparent 192deg,
    rgba(255, 215, 0, 0.35) 210deg,
    transparent 222deg,
    rgba(255, 140, 0, 0.35) 240deg,
    transparent 252deg,
    rgba(255, 215, 0, 0.35) 270deg,
    transparent 282deg,
    rgba(255, 140, 0, 0.35) 300deg,
    transparent 312deg,
    rgba(255, 215, 0, 0.35) 330deg,
    transparent 342deg
  );
  opacity: 0;
  z-index: 90;
  mix-blend-mode: screen;
}
.rays.show { animation: raysAnim 2s linear; }
@keyframes raysAnim {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.5); }
  20%  { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(360deg) scale(1.4); }
}

/* ---------- Confetti ---------- */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 160;
}
.confetti span {
  position: absolute;
  top: -20px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to {
    transform: translateY(110vh) rotate(1080deg);
    opacity: 0;
  }
}