* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #080503; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff; }
body { display: grid; place-items: center; overflow-x: hidden; }
.stage { width: min(100vw, 520px); padding: 0; }
.machine { position: relative; width: 100%; aspect-ratio: 1024 / 1365; overflow: hidden; user-select: none; touch-action: manipulation; background: #120900; box-shadow: 0 0 24px rgba(255, 172, 38, .28); }
.machine-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 1; }

.hud { position: absolute; z-index: 6; top: 1.4%; left: 14%; right: 14%; height: 4.6%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 1px solid rgba(255, 61, 34, .45); border-radius: 5px; background: rgba(20, 0, 0, .72); color: #ff3838; font-weight: 800; font-size: clamp(10px, 2.5vw, 14px); text-shadow: 0 0 8px #ff0000; letter-spacing: .03em; }
#status { text-align: right; color: #ffd38b; text-shadow: 0 0 7px #a00000; }

.hotspot { position: absolute; z-index: 8; border: 0; padding: 0; background: transparent; cursor: pointer; }
.hotspot:disabled { cursor: not-allowed; }
.hotspot.ready { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 16px #ff2727); }
.hotspot:active { transform: scale(.96); }

.max-bet { left: 4.5%; top: 56.4%; width: 11.7%; height: 5.4%; border-radius: 12px; }
.lever { left: 2.6%; top: 64.2%; width: 10.8%; height: 8.8%; border-radius: 50%; transform-origin: 50% 90%; }
.lever.enabled { animation: leverPulse .85s infinite alternate; }
.lever.pulled { transform: translateY(4%) rotate(13deg); }
@keyframes leverPulse { from { filter: drop-shadow(0 0 4px #fff); } to { filter: drop-shadow(0 0 16px #ffda7a); } }

/* 真ん中のリール窓。1リールにつき画像1枚だけ表示 */
.reel-window { position: absolute; z-index: 4; left: 20.4%; top: 34.2%; width: 58.8%; height: 26.4%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2%; padding: .7% .8% 1%; overflow: hidden; border-radius: 10px; background: rgba(14, 8, 0, .52); box-shadow: inset 0 0 14px rgba(0,0,0,.85), 0 0 10px rgba(255,190,80,.45); }
.reel { position: relative; overflow: hidden; border-radius: 7px; background: #120900; box-shadow: inset 0 0 16px rgba(0,0,0,.75); display: grid; place-items: center; }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; z-index: 3; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(#0009, transparent); }
.reel::after { bottom: 0; background: linear-gradient(transparent, #0009); }
.reel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel.spinning .reel-img { filter: blur(2.2px); animation: reelShake .07s infinite linear; }
@keyframes reelShake { 50% { transform: translateY(-9px) scale(1.04); opacity: .82; } }

.stop { top: 66.5%; width: 8.7%; height: 5.3%; border-radius: 50%; }
.stop-left { left: 31.3%; }
.stop-center { left: 45.9%; }
.stop-right { left: 60.2%; }
.stop.enabled { background: rgba(255, 20, 20, .08); box-shadow: 0 0 16px 5px rgba(255, 33, 33, .65); }

.result-lamp { position: absolute; z-index: 6; right: 6.4%; top: 38.5%; width: 9.2%; height: 3.3%; display: grid; place-items: center; color: #ff2d2d; background: rgba(0,0,0,.45); border-radius: 4px; font-weight: 900; font-size: clamp(9px, 2.5vw, 14px); text-shadow: 0 0 8px #f00; letter-spacing: .08em; pointer-events: none; }
.result-lamp.win { color: #fff4a1; text-shadow: 0 0 8px #fff, 0 0 18px #ff1a1a; animation: winBlink .25s steps(2) infinite; }
@keyframes winBlink { 50% { opacity: .28; } }

@media (max-width: 420px) {
  .hud { left: 12%; right: 12%; font-size: 10px; padding: 0 6px; }
  .reel-window { top: 34.2%; height: 26.5%; }
}

button, .hotspot {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


/* プレミア演出 */
.premium-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  opacity:0;
  pointer-events:none;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at center,
    rgba(255,220,120,.25),
    rgba(0,0,0,.82));
  transition:opacity .45s ease;
}

.premium-overlay.show{
  opacity:1;
}

.premium-overlay::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    linear-gradient(120deg,
    transparent 20%,
    rgba(255,255,255,.12) 40%,
    transparent 60%);
  animation: premiumShine 3s linear infinite;
}

@keyframes premiumShine{
  from{ transform:translateX(-40%) rotate(8deg);}
  to{ transform:translateX(40%) rotate(8deg);}
}

.premium-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:
    saturate(1.12)
    contrast(1.08)
    brightness(.92);
}

.premium-text{
  position:absolute;
  bottom:7%;
  left:0;
  right:0;
  text-align:center;
  font-size:clamp(22px,6vw,44px);
  font-weight:900;
  letter-spacing:.18em;
  color:#fff6c0;
  text-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 24px rgba(255,210,70,.95),
    0 0 50px rgba(255,140,0,.9);
  animation: premiumPulse 1.2s ease-in-out infinite;
}

@keyframes premiumPulse{
  50%{
    transform:scale(1.04);
    opacity:.85;
  }
}