* { 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;
  }
}


/* KOD図柄の見切れ防止 */
.reel-img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  padding: 3%;
  box-sizing: border-box;
}

.reel{
  overflow: hidden;
}


/* KOD専用フリーズ演出 */
.kod-freeze-overlay{
  position:absolute;
  inset:0;
  z-index:50;
  pointer-events:none;
  background:#000;
  opacity:0;
  transition:opacity .18s linear;
  overflow:hidden;
}

.kod-freeze-overlay.blackout{
  opacity:1;
}

.kod-freeze-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  filter:
    saturate(.03)
    contrast(.58)
    brightness(1.9);
}

.kod-freeze-overlay.reveal .kod-freeze-image{
  animation:kodSlowImageReveal 10s linear forwards;
}

@keyframes kodSlowImageReveal{
  0%{
    opacity:.16;
    filter:saturate(.03) contrast(.58) brightness(1.9);
  }
  20%{
    opacity:.28;
    filter:saturate(.12) contrast(.66) brightness(1.72);
  }
  45%{
    opacity:.48;
    filter:saturate(.36) contrast(.78) brightness(1.48);
  }
  70%{
    opacity:.72;
    filter:saturate(.72) contrast(.92) brightness(1.22);
  }
  100%{
    opacity:1;
    filter:saturate(1.1) contrast(1.08) brightness(.98);
  }
}

.kod-freeze-overlay.reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 18%,
      rgba(255,255,255,.50),
      rgba(255,210,70,.22) 22%,
      rgba(0,0,0,0) 58%);
  opacity:0;
  animation:kodHolyLight 10s linear forwards;
}

@keyframes kodHolyLight{
  0%{ opacity:.05; }
  30%{ opacity:.18; }
  65%{ opacity:.34; }
  100%{ opacity:.42; }
}


/* スタート画面・ルール説明 修正版 */
.start-screen{
  position:fixed;
  inset:0;
  z-index:200;
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.start-screen.hide{
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
}

.start-screen-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.start-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.1) 55%, rgba(0,0,0,.35));
}

.start-screen-buttons{
  position:absolute;
  z-index:205;
  right:5%;
  bottom:4%;
  width:42%;
  max-width:240px;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:auto;
}

.start-screen-button{
  width:100%;
  border-radius:12px;
  font-weight:900;
  letter-spacing:.08em;
  touch-action:manipulation;
  cursor:pointer;
}

.start-main-button{
  height:54px;
  font-size:24px;
  color:#fff2b0;
  background:linear-gradient(180deg, #b40a0a, #640000 55%, #1d0000);
  border:2px solid rgba(255,220,120,.98);
  box-shadow:0 0 18px rgba(255,70,20,.72), inset 0 0 16px rgba(255,220,120,.35);
  text-shadow:0 0 10px rgba(255,255,255,.75), 0 0 18px rgba(255,210,90,.7);
}

.start-rules-button{
  height:46px;
  font-size:18px;
  color:#ffe8a0;
  background:linear-gradient(180deg, #560000, #180000);
  border:2px solid rgba(255,210,90,.92);
  box-shadow:inset 0 0 14px rgba(255,210,90,.28), 0 0 14px rgba(255,70,20,.35);
}

.start-screen-button:active{
  transform:scale(.96);
}

.rules-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.rules-modal.show{
  display:flex;
}

.rules-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(2px);
}

.rules-modal-content{
  position:relative;
  z-index:301;
  width:96vw;
  height:96vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rules-image{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 0 22px rgba(255,210,90,.55), 0 0 46px rgba(255,60,20,.35);
}

.rules-close-button{
  position:absolute;
  top:8px;
  right:8px;
  z-index:302;
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  background:rgba(0,0,0,.82);
  color:#fff;
  font-size:30px;
  font-weight:900;
  line-height:38px;
  touch-action:manipulation;
}


/* =========================================================
   スマホ画面崩れ対策版
   - 端末の縦横比が違っても、1024:1365の筐体比率を維持
   - 画面からはみ出す場合は自動縮小
   - ボタンやリール位置は筐体に対する%指定のまま維持
========================================================= */

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #050301;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(4px, env(safe-area-inset-top))
    max(4px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(4px, env(safe-area-inset-left));
}

/* stage自体を端末内に必ず収める */
.stage {
  width: min(100vw, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px) * 1024 / 1365), 520px) !important;
  height: auto !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px);
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* dvh非対応ブラウザ向け */
@supports not (height: 100dvh) {
  .stage {
    width: min(100vw, calc((100vh - 8px) * 1024 / 1365), 520px) !important;
    max-height: calc(100vh - 8px);
  }
}

.machine {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1024 / 1365 !important;
  max-height: 100%;
  flex: 0 0 auto;
}

/* 画像は筐体全面に固定。これがズレると全部ズレるのでcover固定 */
.machine-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* スマホのダブルタップ拡大・選択を抑制 */
button,
.hotspot,
.start-screen-button,
.rules-close-button {
  touch-action: manipulation !important;
  -webkit-user-select: none;
  user-select: none;
}

/* スタート画面も端末全面に維持 */
.start-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

.start-screen-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* スタート画面ボタンはKに被りにくく、端末幅に応じて縮む */
.start-screen-buttons {
  right: max(5%, env(safe-area-inset-right)) !important;
  bottom: max(3.8%, env(safe-area-inset-bottom)) !important;
  width: min(42%, 240px) !important;
  max-width: 240px !important;
}

/* 低い端末ではボタンを少し小さくして画像を崩さない */
@media (max-height: 700px) {
  .start-main-button {
    height: 46px !important;
    font-size: 20px !important;
  }

  .start-rules-button {
    height: 40px !important;
    font-size: 16px !important;
  }

  .start-screen-buttons {
    gap: 8px !important;
    bottom: max(2.6%, env(safe-area-inset-bottom)) !important;
  }
}

/* 横向きは崩れやすいので中央に縮小表示 */
@media (orientation: landscape) {
  .stage {
    width: min(45vw, calc((100dvh - 8px) * 1024 / 1365), 420px) !important;
  }

  .start-screen-buttons {
    width: min(30%, 220px) !important;
    right: 4% !important;
    bottom: 5% !important;
  }
}