html, body {
  touch-action: none;  /* タッチ操作のズームを完全に無効化 */
  overscroll-behavior: none; /* スクロールのバウンド効果も無効化（任意） */
}


/* モーダルのスタイル */
.modal_casinoRoulette {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}


.casinoRoulette_h2{
  text-align:center;
  /* font-size:30px;
  font-weight:900; */
  font-size:1.7rem;
  font-weight:bold;

  color:#ffd700; /* ゴールド文字 */

    /* 黒縁取り */
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px  0px 15px rgba(255,215,0,0.9);

  /* letter-spacing:2px;
  margin-bottom:15px; */
}


.casinoRoulette_wrapper{
  position:relative;

  /* width:400px;
  height:400px; */
  width: 80%;      /* 画面幅に対して80% */
  height: 80vw;    /* 正方形にする */

  /* margin:40px auto; */
  margin:10px auto;
  margin-top: -15px;

  border:6px solid #fff3c4;
  border-radius:50%;
  background:#fffbe6;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}

.casinoRoulette_arrow{
  position:absolute;
  top:-25px;
  left:50%;
  transform:translateX(-50%);

  /* font-size:50px; */
  font-size:37px;


  color:#ff4500;
  text-shadow:0 0 6px #fff;
  z-index:10;
}

#casinoRoulette_wheel{
  /* border-radius:50%; */
  width: 100%;   /* wrapper に合わせる */
  height: 100%;  /* wrapper に合わせる */
}

#casinoRoulette_confetti{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:9999;
}

.casinoRoulette_button{
  margin:5px;
  padding:10px 28px;
  font-size:18px;
  border:none;
  border-radius:8px;
  background:linear-gradient(145deg,#ffd700,#ffa500);
  color:#000;
  cursor:pointer;
  box-shadow:0 5px 0 #e68a00;
  transition:.2s;
  font-weight:bold;
}

.casinoRoulette_button:hover{
  transform:translateY(-3px);
}

#casinoRoulette_result{
  /* margin-top:20px; */
  margin-top:10px;
  /* font-size:24px; */
  font-size:1.59rem;
  font-weight:bold;
  min-height:40px;
  /* text-shadow:1px 1px 0 #fff; */
}


/* 発光オーバーレイ */
.casinoOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;

  background: radial-gradient(
    circle at center,
    rgba(255,215,0,0.6) 0%,
    rgba(255,215,0,0.25) 30%,
    rgba(255,215,0,0.1) 50%,
    rgba(255,215,0,0) 70%
  );

  animation: casinoOverlayFlash 3s ease-in-out forwards;
}

@keyframes casinoOverlayFlash {

  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  20%  { opacity: 0; }

  35%  { opacity: 1; }
  50%  { opacity: 0.3; }

  65%  { opacity: 0.9; }
  80%  { opacity: 0.2; }

  100% { opacity: 0; }
}



/* =============================
   ルーレット閉じるボタン
============================= */

.rouletteCloseBtn{
  /* position:absolute; */
  position: relative;
  display: inline-block; /* 重要 */

  /* top:2%; */
  /* left:159px; */
  top: -15px;
  left:110px;

  background:#ff3b3b;
  color:#ffffff;

  border:3px solid #ffffff;
  /* padding:10px 22px; */
  padding:5px 15px;

  /* font-size:17px; */
  font-size:1rem;
  font-weight:bold;

  border-radius:8px;
  cursor:pointer;

  box-shadow:0 4px 8px rgba(0,0,0,0.4);
  z-index:30;

  transition:all 0.2s ease;
}

.rouletteCloseBtn:hover{
  background:#ff5a5a;
  transform:scale(1.08);
}

.rouletteCloseBtn:active{
  transform:scale(0.95);
}





/* =============================
   ゴールド表示ボックス
============================= */

.casinoInfoBox{
  position: absolute;
  top: 70px;
  left: 20px;

  background: linear-gradient(145deg,#fff8dc,#ffe9a8);
  border: 3px solid #ffffff;
  border-radius: 10px;

  padding: 8px 14px;

  font-weight: bold;
  font-size: 14px;

  color: #222;

  box-shadow: 0 4px 8px rgba(0,0,0,0.4);

  z-index: 30;
}

#casinoGoldDisplay{
  color: #b8860b;
}

.casinoCostDisplay{
  font-size: 13px;
  color: #444;
}










/*===============================
パソコン画面用
=================================*/
@media print, screen and (min-width: 820px) {

.casinoRoulette_h2{
  font-size:1.99rem;
  letter-spacing:2px;
  margin-bottom:15px;
}
.casinoRoulette_wrapper{
  margin:40px auto;
  width:400px;
  height:400px;
}
.casinoRoulette_arrow{
  font-size:50px;
}
#casinoRoulette_wheel{
  border-radius:50%;
}
.casinoRoulette_button{
  margin:10px;
  padding:12px 28px;
}
#casinoRoulette_result{
  margin-top:20px;
}
.rouletteCloseBtn{
  top:2%;
  left:159px;
  font-size:1.19rem;
}

.casinoInfoBox{
  position: absolute;
  top: 135px;
  left: 30%;
}


}