/* ============================================
   ミニゲーム共通スタイル
   ============================================ */
.game-shell {
  min-height: 100vh;
  background: var(--c-sumi);
  color: var(--c-kinari);
  display: flex;
  flex-direction: column;
  /* base.css の body { padding-top: 64px } を打ち消す — ゲームページは観光サイトのfixedヘッダーを持たない */
  padding-top: 0 !important;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3, 16px) var(--sp-5, 32px);
  border-bottom: 1px solid rgba(246,239,225,0.12);
  background: rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
}
.game-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-washi);
  font-family: var(--f-mincho);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.game-back:hover { color: var(--c-yamabuki); }

.game-title {
  font-family: var(--f-mincho);
  font-size: 18px;
  letter-spacing: 0.18em;
}
.game-title small {
  display: block;
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--c-washi);
  opacity: 0.6;
  margin-top: 2px;
  text-align: center;
}

.game-hud {
  display: flex;
  gap: var(--sp-4, 23px);
  font-family: var(--f-mincho);
  font-size: 13px;
}
.hud-item { display: flex; align-items: baseline; gap: 6px; }
.hud-item__label { font-size: 10px; letter-spacing: 0.2em; opacity: 0.6; }
.hud-item__value { font-family: var(--f-en); font-size: 18px; color: var(--c-yamabuki); }

.game-main {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.game-canvas-wrap {
  position: relative;
  width: min(100%, 905px);          /* 640 × √2 ≒ 905 */
  aspect-ratio: 1.4142 / 1;         /* 白銀比 横 (A判) */
  margin: var(--sp-4, 23px);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
  touch-action: none;
}
.game-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(28, 27, 24, 0.78);
  backdrop-filter: blur(8px);
  z-index: 10;
  text-align: center;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
}

/* ===== 生成アート背景 (タイトル画面) =====
   .game-overlay--art に --art-img を与えると、
   生成画像 + 暗幕 + ぼかしで上質なタイトル背景になる */
.game-overlay--art {
  background: none;
  backdrop-filter: none;
}
.game-overlay--art::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background-image: var(--art-img);
  background-size: cover;
  background-position: var(--art-pos, center);
  animation: kenBurnsBg 26s ease-in-out infinite alternate;
}
.game-overlay--art::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(16, 12, 10, 0.55) 0%,
    rgba(16, 12, 10, 0.38) 45%,
    rgba(16, 12, 10, 0.82) 100%);
}
.game-overlay--art h2,
.game-overlay--art p {
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.8);
}
@keyframes kenBurnsBg {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* ===== 祝い粒子 (結果画面) =====
   celebration.jpg は黒背景 + 金/青の光粒子。
   screen ブレンドで黒が透過し、光だけが乗る */
.game-overlay--celebrate::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("../assets/images/gen/celebration.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
  animation: celebrateDrift 18s ease-in-out infinite alternate;
}
.game-overlay--celebrate > div { position: relative; z-index: 2; }
@keyframes celebrateDrift {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.12) translateY(-2%); }
}
.game-overlay h2 {
  font-family: var(--f-mincho);
  font-size: clamp(var(--fs-xl, 31px), 4vw, var(--fs-2xl, 39px));
  margin-bottom: 14px;
  letter-spacing: 0.12em;
}
.game-overlay p {
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 2;
  color: var(--c-washi);
  font-size: 14px;
}
.game-overlay.is-hidden { display: none; }

.game-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 11px);
  padding: var(--sp-3, 16px) var(--sp-5, 32px);
  background: var(--c-ebicha);
  color: var(--c-kinari);
  border: 0;
  border-radius: 999px;
  font-family: var(--f-mincho);
  font-size: 15px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all 0.25s ease;
}
.game-btn:hover { background: var(--c-shu); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(199, 71, 42, 0.5); }
.game-btn--ghost { background: transparent; border: 1px solid var(--c-washi); }
.game-btn--ghost:hover { background: var(--c-washi); color: var(--c-sumi); }

.game-instructions {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(246,239,225,0.1);
  padding: var(--sp-3, 16px) var(--sp-5, 32px);
  text-align: center;
  font-size: 12px;
  color: var(--c-washi);
  opacity: 0.7;
  font-family: var(--f-mincho);
  letter-spacing: 0.12em;
}

.score-row { display: flex; gap: var(--sp-4, 23px); justify-content: center; margin: var(--sp-4, 23px) 0; }
.score-row > div {
  text-align: center;
  padding: var(--sp-3, 16px) var(--sp-5, 32px);
  background: rgba(246,239,225,0.08);
  border-radius: 4px;
}
.score-row .label {
  font-size: 11px; letter-spacing: 0.2em; opacity: 0.6;
  font-family: var(--f-en); margin-bottom: 6px;
}
.score-row .value {
  font-family: var(--f-en); font-size: var(--fs-xl, 31px); color: var(--c-yamabuki);
}

/* ============================================
   v2: 渡瀬島トンマナ + スマホレスポンシブ
   - 正本11パレットへ寄せる: 海ティール #5CB8B6 / 鬼灯橙 #E0A86E
   - 白銀比スケール: 8 11 16 23 32 45 64
   ============================================ */

/* ダーク背景用の渡瀬カラー */
:root {
  --w-teal: #7fd0ce;       /* W1の明色 (ダーク上のアクセント) */
  --w-teal-deep: #2d6d72;  /* W5 */
  --w-hozuki: #e0a86e;     /* W3 鬼灯橙 */
  --w-hozuki-d: #c98b4e;
}

/* ヘッダー: 渡瀬大橋ライン + HUDをティールへ */
.game-header {
  border-bottom: 2px solid rgba(92, 184, 182, 0.45);
}
.hud-item__value { color: var(--w-teal); }
.game-title small { color: rgba(127, 208, 206, 0.75); opacity: 1; }

/* ボタン: 海老茶 → 鬼灯橙 (差し色として) */
.game-btn {
  background: var(--w-hozuki);
  color: #221a12;
  min-height: 45px;
}
.game-btn:hover {
  background: var(--w-hozuki-d);
  box-shadow: 0 10px 24px -8px rgba(224, 168, 110, 0.45);
}
.game-btn--ghost {
  background: transparent;
  color: var(--c-kinari, #f6efe1);
  border: 1px solid rgba(246, 239, 225, 0.5);
}
.game-btn--ghost:hover { background: rgba(246, 239, 225, 0.92); color: #221a12; }

/* スコア値もティールに */
.score-row .value { color: var(--w-teal); }

/* 操作説明帯: 青海波 (夜の海) */
.game-instructions {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%237fd0ce' stroke-opacity='0.08' stroke-width='1.4'%3E%3Cpath d='M0 40a40 40 0 0 1 80 0M-20 40a40 40 0 0 1 80 0M20 40a40 40 0 0 1 80 0'/%3E%3C/g%3E%3C/svg%3E"),
    rgba(0, 0, 0, 0.4);
  background-size: 80px 40px, auto;
}

/* ============ スマホ ============ */
@media (max-width: 640px) {
  /* ヘッダーをコンパクト1行に: [← back] [title] [HUD] でファーストビューを節約 */
  .game-header {
    padding: 6px 12px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .game-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.1em;
    min-width: 0;
  }
  /* 英文サブタイトルはモバイルでは非表示 (HOTARU GARI 等) */
  .game-title small { display: none; }
  /* 戻るボタンは矢印のみ */
  .game-back { font-size: 0; min-width: 28px; }
  .game-back::before {
    content: "←";
    font-size: 18px;
    line-height: 1;
  }
  .game-back svg { display: none; }
  .game-hud {
    gap: 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .hud-item__label { font-size: 9px; }
  .hud-item__value { font-size: 14px; }
  .jar-mini { transform: scale(0.85); transform-origin: center; }

  /* スマホはヘッダー+キャンバス+フッター(操作説明)を1画面に収める。
     100vh ではブラウザのアドレスバー/ツールバー込みになり下が見切れるため
     100svh (small viewport height) を使う。グリッド構成で各行を固定 */
  .game-shell {
    height: 100svh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* main: キャンバスを上から詰める + あふれを丸める */
  .game-main {
    place-items: center;
    padding: 6px 0;
    min-height: 0;  /* grid 子のオーバーフロー対策 */
  }

  /* キャンバス: aspect-ratioを残しつつ親領域に収まるよう max-height を制限 */
  .game-canvas-wrap {
    aspect-ratio: 1 / 1.2;
    margin: 0 8px;
    width: auto;
    max-width: calc(100% - 16px);
    height: 100%;
    max-height: 100%;
  }

  /* フッター (操作説明): 1行化 + 文字を縮めて高さを抑える */
  .game-instructions {
    padding: 6px 12px;
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .game-overlay { padding: 16px; }
  .game-overlay h2 { font-size: 24px; }
  .game-overlay p { font-size: 12px; line-height: 1.9; max-width: 100%; }
  .game-btn {
    padding: 11px 23px;
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .game-overlay .game-btn { display: block; width: 100%; margin: 8px 0 0 !important; }

  .score-row { gap: 11px; flex-wrap: wrap; }
  .score-row > div { padding: 11px 16px; }
  .score-row .value { font-size: 24px; }

  .game-instructions {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}