body {
  margin: 0;
  overflow: hidden;
  background-color: #f0f0f0;
  background-image: url('assets/BG.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* 画面に固定 */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  touch-action: none;
  width: 100vw;
  height: 100vh;
  user-select: none;
  -webkit-user-select: none;
}

input {
  user-select: auto;
  -webkit-user-select: auto;
}

#shake-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#flash-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  /* 全ての手前にフラッシュを表示 */
}

#fgCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  /* UIレイヤーより手前に表示 */
}

#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

body.tutorial-active #ui-layer {
  z-index: 1550 !important;
  /* tutorial-mask (1500) より上に */
}

.header {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  position: relative;
  height: 100px;
}

.header-item {
  display: flex;
  align-items: center;
}

.header-item.left {
  position: absolute;
  left: 20px;
  top: 15px;
}

.header-item.right {
  position: absolute;
  right: 20px;
  top: 15px;
}

/*
   中央のコンテナ: 画面の水平中央(50%)に配置
*/
.header-item.center {
  position: absolute;
  left: 50%;
  top: 20px;
  /* ここでは transform を使わず、子要素で制御します */
}

.header-text {
  display: none;
}

/* 共通座布団（タイム・スコア用） */
.ui-cushion {
  background: rgba(255, 255, 255, 0.95);
  border: 6px solid #333;
  /* 少し太くしてポップに */
  border-radius: 18px;
  padding: 8px 10px;
  font-family: 'Lilita One', cursive;
  font-size: 32px;
  /* 大きく */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 中央寄せ */
  gap: 6px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
  /* 立体感を出す影 */
  white-space: nowrap;
  transition: transform 0.2s;
}

/* タイム専用 */
.time-box {
  border-color: #4caf50;
  color: #4caf50;
  min-width: 100px;
}

/* スコア専用 */
.score-box {
  border-color: #4caf50;
  color: #4caf50;
  min-width: 160px;
}

.ui-icon {
  font-size: 22px;
}

.ui-label {
  font-size: 20px;
  font-weight: 900;
}

/*
   目標数値（赤枠）:
   親の center(50%) に対して transform で自身の幅の半分戻すことで
   枠の中心が画面の中心に完全一致します。
*/
.target-cushion {
  position: relative;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 8px solid #0288d1;
  /* 太く(4px->8px)し、青色(#d32f2f->#0288d1)に変更 */
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 48px;
  font-weight: 900;
  color: #0288d1;
  /* 青色に変更 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lilita One', cursive;
}

/*
   現在値（いま）:
   中央固定された赤枠の左外側に絶対配置します。
   これにより、この要素の幅が変わっても赤枠の位置は1ミリも動きません。
*/
#current-sum-box {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 15px;
  /* 赤枠との距離 */
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 900;
  border: 4px solid #ccc;
  white-space: nowrap;
  pointer-events: auto;
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}

.glow-pop {
  animation: popGlow 0.5s ease-out;
}

@keyframes popGlow {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    text-shadow: none;
  }

  50% {
    transform: translateX(-50%) scale(1.4);
    box-shadow: 0 0 30px 10px rgba(0, 150, 255, 0.8);
    text-shadow: 0 0 20px #00bfff;
    border-color: #00bfff;
    color: #01579b;
  }

  100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    text-shadow: none;
  }
}

.footer {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  /* 子要素のボタンのみクリック可能にするため、親は none にする */
}

#reset-btn,
.stage-btn {
  pointer-events: auto;
  padding: 18px 40px;
  font-size: 24px;
  font-weight: 900;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.1s;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
}

.stage-btn[data-stage="1"] {
  background: linear-gradient(to bottom, #4fc3f7, #0288d1);
  box-shadow: 0 8px 0 #01579b, 0 12px 20px rgba(0, 0, 0, 0.3);
}

.stage-btn[data-stage="2"] {
  background: linear-gradient(to bottom, #ffb74d, #f57c00);
  box-shadow: 0 8px 0 #e65100, 0 12px 20px rgba(0, 0, 0, 0.3);
}

.about-btn {
  background: linear-gradient(to bottom, #7e57c2, #5e35b1);
  box-shadow: 0 6px 0 #4527a0, 0 10px 15px rgba(0, 0, 0, 0.2);
  margin-top: 10px;
  padding: 12px 30px;
  /* ステージボタン(18px 40px)より小さく */
  font-size: 18px;
  /* ステージボタン(24px)より小さく */
  font-weight: 900;
  border-radius: 50px;
  border: none;
  color: white;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
  transition: all 0.1s;
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
}

.about-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}


#reset-btn {
  background-color: #0288d1;
  box-shadow: 0 6px 0 #01579b;
  padding: 15px 25px;
  font-size: 20px;
  border-radius: 12px;
}

#reset-btn:active,
.stage-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.stage-select {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 10px;
  align-items: center;
}

.over-text {
  color: red;
  font-weight: bold;
  margin-left: 10px;
  display: none;
  animation: blink 0.5s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  pointer-events: auto;
  z-index: 10;
}

/* タイトル画面（オーバーレイ）表示時はゲームUIを隠す */
#overlay[style*="display: flex"]~#ui-layer,
#overlay[style*="display: flex"]+#ui-layer,
#overlay:not([style*="display: none"])~#ui-layer {
  display: none !important;
}

/* あるいは、よりシンプルにスクリプト制御とHTML順序に依存しない形に */
body:has(#overlay:not([style*="display: none"])) #ui-layer {
  display: none !important;
}

.title-logo {
  max-width: 80%;
  width: 600px;
  height: auto;
  margin-bottom: 5px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  animation: logoBounce 3s ease-in-out infinite;
}

@keyframes logoBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

#result-score {
  font-size: 48px;
  margin: 20px 0;
  color: #ffd700;
  font-weight: bold;
}

/* 「ぐるり算とは」モーダル */
#about-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  /* 初期状態は非表示 */
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 20px;
  box-sizing: border-box;
}

.modal-content {
  background: white;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  border-radius: 20px;
  padding: 30px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
}

.nakano-img {
  width: 100%;
  max-width: 300px;
  border-radius: 15px;
  margin-bottom: 25px;
  border: 5px solid #0288d1;
}

.text-block {
  text-align: left;
  line-height: 1.6;
  width: 100%;
}

.text-block h3 {
  color: #0288d1;
  border-left: 5px solid #0288d1;
  padding-left: 10px;
  margin-bottom: 15px;
  font-family: 'Lilita One', cursive;
}

.text-block p {
  margin-bottom: 15px;
  font-size: 16px;
}

.text-block.english {
  color: #666;
  font-size: 14px;
}

.text-block.english h3 {
  color: #555;
  border-left-color: #999;
}

hr {
  width: 100%;
  border: none;
  border-top: 1px dashed #ccc;
  margin: 20px 0;
}

.close-btn {
  margin-top: 20px;
  padding: 15px 40px;
  font-size: 20px;
  font-weight: 900;
  color: white;
  background: #666;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 0 #444;
}

.close-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #222;
}


/* HITOFUDE BONUS メッセージ */
.bonus-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: #ffeb3b;
  font-size: 110px;
  font-weight: 900;
  line-height: 0.85;
  text-align: center;
  -webkit-text-stroke: 4px #f57f17;
  text-shadow: 10px 10px 0px #e65100, 0 0 30px rgba(255, 235, 59, 0.6);
  pointer-events: none;
  z-index: 101;
  white-space: pre-line;
  font-family: 'Lilita One', 'Arial Black', 'Impact', sans-serif;
  opacity: 0;
}

.bonus-pop {
  animation: bonusPop 2.0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  /* 1.5s -> 2.0s */
}

@keyframes bonusPop {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-10deg);
    opacity: 0;
  }

  15% {
    transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
    opacity: 1;
  }

  25% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }

  85% {
    /* 表示時間を長く */
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -70%) scale(1.5) rotate(0deg);
    opacity: 0;
  }
}

/* 画面揺れアニメーション - 振れ幅を大きく */
.shake-anim {
  animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

/* 画面全体が光るエフェクト */
.flash-effect {
  animation: flash 0.8s ease-out forwards;
}

@keyframes flash {
  0% {
    background-color: rgba(255, 255, 255, 0.6);
  }

  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-6px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(8px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-12px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(12px, 0, 0);
  }
}

/* 追加スタイル: ランキング & 設定 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2500;
  padding: 20px;
  box-sizing: border-box;
}

.pop-in {
  animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes modalPopIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.settings-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 4px solid #fff;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background 0.2s;
  padding: 0;
  margin-right: auto;
  pointer-events: auto;
  /* ボタン単体でもクリックを有効化 */
  position: relative;
  z-index: 100;
}

.settings-btn:active {
  transform: scale(0.9) rotate(45deg);
  background: rgba(255, 255, 255, 0.5);
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 30px 0;
}

.menu-item-btn {
  padding: 20px;
  font-size: 24px;
  font-weight: 900;
  border: none;
  border-radius: 20px;
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  box-shadow: 0 8px 0 #ccc, 0 10px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.1s;
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
  color: #333;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
}

.menu-item-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #bbb, 0 5px 10px rgba(0, 0, 0, 0.1);
}

.menu-item-btn.sound-btn {
  background: linear-gradient(to bottom, #4fc3f7, #0288d1);
  color: white;
  box-shadow: 0 8px 0 #01579b, 0 10px 20px rgba(0, 0, 0, 0.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.menu-item-btn.ranking-btn {
  background: linear-gradient(to bottom, #ffd54f, #ffb300);
  color: white;
  box-shadow: 0 8px 0 #ff8f00, 0 10px 20px rgba(0, 0, 0, 0.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.menu-item-btn.danger {
  background: linear-gradient(to bottom, #ff8a80, #f44336);
  color: white;
  box-shadow: 0 8px 0 #c62828, 0 10px 20px rgba(0, 0, 0, 0.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.menu-item-btn.danger:active {
  box-shadow: 0 2px 0 #b71c1c;
}

.modal-content h3 {
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
  font-size: 42px;
  color: #0288d1;
  margin-top: 0;
  margin-bottom: 20px;
  -webkit-text-stroke: 1px #01579b;
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
}

.ranking-content {
  max-width: 550px;
  width: 100%;
  border: 8px solid #4caf50;
}

.ranking-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}

.tab-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 15px;
  background: #eee;
  box-shadow: 0 5px 0 #ccc;
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
  cursor: pointer;
  font-size: 22px;
  color: #888;
  transition: all 0.1s;
}

.tab-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #ccc;
}

.tab-btn.active {
  background: linear-gradient(to bottom, #81c784, #4caf50);
  color: white;
  box-shadow: 0 5px 0 #388e3c;
}

.ranking-list {
  width: 100%;
  max-height: 40vh;
  overflow-y: auto;
  border: 4px solid #eee;
  border-radius: 15px;
  padding: 5px;
  margin-bottom: 20px;
  background: #fafafa;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 2px solid #eee;
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
  font-size: 22px;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-rank {
  width: 40px;
  font-weight: 900;
  color: #888;
  text-align: left;
}

.ranking-name {
  flex: 1;
  margin-left: 10px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

.ranking-score {
  font-weight: 900;
  color: #4caf50;
}

#player-name {
  width: 100%;
  padding: 18px;
  font-size: 32px;
  text-align: center;
  border: 5px solid #4caf50;
  border-radius: 15px;
  margin: 20px 0;
  font-family: 'Lilita One', 'Arial Black', 'Impact', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
  box-sizing: border-box;
  color: #333;
  outline: none;
  background: #fff;
}

#player-name:focus {
  border-color: #388e3c;
  background: #f9fff9;
}

/* モーダル内のスコア表示 */
.modal-score-display {
  font-family: 'Lilita One', cursive;
  font-size: 48px;
  color: #f57c00;
  margin: 10px 0;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

/* モーダル内のボタングループ */
.modal-btn-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}

.modal-btn-group .close-btn {
  margin-top: 0;
  /* ラッパーで制御するためリセット */
  flex: 1;
  max-width: 200px;
  white-space: nowrap;
}

/* プライマリボタン（登録する）の色付きスタイル */
.close-btn.primary {
  background: linear-gradient(to bottom, #81c784, #4caf50);
  box-shadow: 0 6px 0 #388e3c;
}

.close-btn.primary:active {
  box-shadow: 0 2px 0 #2e7d32;
}

/* セカンダリボタン（登録しない）のスタイル */
.close-btn.secondary {
  background: #9e9e9e;
  box-shadow: 0 6px 0 #757575;
}

.close-btn.secondary:active {
  box-shadow: 0 2px 0 #616161;
}

/* --- チュートリアル関連 --- */
.stage-btn.tutorial-btn {
  background: linear-gradient(to bottom, #ff80ab, #f06292);
  box-shadow: 0 6px 0 #ad1457, 0 10px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 0px;
  padding: 12px 30px;
  /* サイズを少し小さく */
  font-size: 20px;
  /* フォントも少し小さく */
}

#tutorial-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4000;
  /* メッセージとボタンを最前面に */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#tutorial-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  /* 少し濃く */
  display: none;
  z-index: 1500;
  /* ボール(1505)より下に */
  pointer-events: none;
}

#tutorial-mask.show {
  display: block;
}

.tutorial-message-box {
  background: transparent;
  /* 座布団なし */
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 80%;
  text-align: center;
  pointer-events: none;
  box-shadow: none;
  position: absolute;
  bottom: 25%;
  z-index: 3000;
  user-select: none;
  -webkit-user-select: none;
}

.tutorial-message-box button {
  pointer-events: auto;
}

#tutorial-text {
  font-size: 28px;
  /* 少し大きく */
  font-weight: 900;
  color: white;
  /* 白文字 */
  margin-bottom: 30px;
  line-height: 1.6;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', sans-serif;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
}

#tutorial-text .eng-sub {
  display: block;
  font-size: 18px;
  opacity: 0.8;
  font-weight: normal;
  margin-top: 10px;
  font-family: 'Lilita One', cursive;
}

/* チュートリアル中は他のUIを隠す */
body.tutorial-active .time-box,
body.tutorial-active .score-box,
body.tutorial-active .settings-btn {
  display: none !important;
}

/* チュートリアル中にボール（キャンバス）を暗くしない */
body.tutorial-active #gameCanvas,
body.tutorial-active #fgCanvas {
  z-index: 1505 !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* やりなおすボタンを右側に保持 */
body.tutorial-active #reset-btn {
  margin-left: auto;
}

/* 目標数値を光らせる */
body.tutorial-active .header-item.center {
  z-index: 1600 !important;
  position: relative;
}

body.tutorial-active .target-cushion {
  box-shadow: 0 0 40px 15px rgba(255, 255, 255, 0.6), 0 6px 12px rgba(0, 0, 0, 0.3);
  border: 10px solid #03a9f4;
  /* 太く明るい青に */
  transform: translateX(-50%) scale(1.15);
  /* 少し大きく */
  background: white;
  color: #01579b;
}

#tutorial-layer #tutorial-mask.show {
  display: block;
}