/* ============================================================
   スマホ向け基本設定
   - touch-action: none  → スクロール・ピンチを全面禁止（ゲーム中の誤操作防止）
   - user-select: none   → テキスト選択禁止（長押し時の選択メニュー抑止）
   - overflow: hidden    → 画面外へのはみ出し非表示（縦スクロール封じ）
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; overflow: hidden;
  background: #1a0e30;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
body { display: flex; flex-direction: column; align-items: center; }

/* ============================================================
   ヘッダー
   「次の天体が表示されているところ」= #next-wrap（右寄せ）
   「設定ボタン」= #settings-btn（⚙ アイコン、#next-wrap の右隣）
   #header-right で 2つをまとめて flex 配置
   ============================================================ */
#header {
  width: 100%; max-width: 400px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; color: #fff; flex-shrink: 0;
}
#score-el { font-size: 20px; font-weight: bold; }
#hi-el    { font-size: 13px; opacity: 0.75; margin-top: 2px; }
#header-right { display: flex; align-items: center; gap: 10px; }
#next-wrap { font-size: 12px; text-align: center; line-height: 1.3; }
#next-emoji { font-size: 28px; display: block; }

/* 設定ボタン
   スマホ向け: border-radius: 8px（四角）にしてタップ判定を広く取る。
   円（50%）だとクリック判定が角まで届かず押しにくいため。
   -webkit-tap-highlight-color: transparent → iOS のタップ時青枠を消す */
#settings-btn {
  width: 38px; height: 38px; border-radius: 8px; border: none;
  background: rgba(140,100,255,0.22);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
#settings-btn span {
  display: block; width: 18px; height: 2px;
  background: #fff; border-radius: 1px;
}
#settings-btn:hover { background: rgba(140,100,255,0.45); }


/* ============================================================
   ゲームエリア
   canvas は論理サイズ 400×700px 固定。CSS transform で画面にフィット（game.js の resize()）。
   ============================================================ */
#canvas-outer {
  position: relative; width: 100%; max-width: 400px;
  flex: 1; overflow: hidden;
}
canvas { position: absolute; top: 0; left: 0; transform-origin: top left; }

/* ============================================================
   オーバーレイ共通パターン
   「ゲームオーバー時のオーバーレイ」(#overlay) と
   「設定を開いたとき」(#settings-overlay) は同じ見た目:
     - rgba(0,0,0,0.78) + backdrop-filter: blur(6px)
     - canvas の上に absolute で重なりゲーム画面が半透明の向こうに透けて見える
     - .show クラスで display:flex に切り替えて表示
   ============================================================ */
#overlay {
  display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  flex-direction: column; align-items: center; justify-content: center;
  color: #fff; gap: 14px; text-align: center;
}
#overlay.show { display: flex; }
#overlay h2 { font-size: 38px; font-weight: bold; }
#overlay .result { font-size: 20px; }
#new-hi { color: #ffd700; font-size: 17px; }

/* 「もう一度」ボタン（ゲームオーバー画面）
   スマホ向け: padding を大きめに取りタップしやすく。
   -webkit-tap-highlight-color: transparent → iOS タップ枠消し */
#overlay button {
  padding: 13px 36px; font-size: 18px; font-weight: bold;
  background: linear-gradient(135deg, #ff7722, #ff4400);
  color: #fff; border: none; border-radius: 30px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,80,0,0.45);
  -webkit-tap-highlight-color: transparent;
}
/* X シェアボタン（黒ベース、もう一度ボタンより小さめ） */
#share-btn {
  background: #000 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important;
  font-size: 15px !important;
  padding: 10px 28px !important;
}
#share-note {
  font-size: 12px;
  color: #ccc;
  margin: 4px 0 0;
  display: none;
}
#share-note.show { display: block; }

/* ============================================================
   連鎖表示（「N連鎖！」ポップアップ）
   ゲームフィールド中央に浮かぶ。pointer-events:none でゲーム操作を妨げない。
   .show クラスを付け外し＋void reflow でアニメーションをリセット再生できる。
   ============================================================ */
#chain-display {
  position: absolute;
  top: 42%; left: 50%;
  transform: translateX(-50%) scale(1);
  font-size: 42px; font-weight: bold;
  color: #ffe566;
  text-shadow:
    0 0 18px rgba(255, 210, 0, 0.9),
    0 0 36px rgba(255, 160, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  z-index: 20;
}
#chain-display.show {
  animation: chainPop 1.3s ease-out forwards;
}
/* 連鎖終了時のぽん！演出（スケールアップ→フェードアウト） */
#chain-display.chain-final {
  animation: chainFinalPop 0.28s ease-out forwards;
}
@keyframes chainFinalPop {
  0%   { opacity: 1;   transform: translateX(-50%) scale(1.05); }
  22%  { opacity: 1;   transform: translateX(-50%) scale(1.32); }
  100% { opacity: 0;   transform: translateX(-50%) scale(1.22); }
}
@keyframes chainPop {
  0%   { opacity: 0;   transform: translateX(-50%) scale(0.4); }
  18%  { opacity: 1;   transform: translateX(-50%) scale(1.25); }
  30%  { transform: translateX(-50%) scale(0.95); }
  45%  { transform: translateX(-50%) scale(1.0); }
  68%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(-50%) scale(1.0); }
}

/* ============================================================
   スキルバー（ゲーム下部、canvas-outer の下に配置）
   flex-shrink:0 で高さを確保。canvas-outer が残りのスペースを使う。
   ============================================================ */
#skill-bar {
  width: 100%; max-width: 400px; height: 72px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(6,4,18,0.97);
  border-top: 1px solid rgba(140,100,255,0.22);
  padding: 0 12px; gap: 8px;
}
.skill-btn {
  flex: 1; height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  background: rgba(140,100,255,0.10);
  border: 1px solid rgba(140,100,255,0.28);
  border-radius: 10px; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.skill-btn .skill-icon { font-size: 22px; line-height: 1; }
.skill-btn .skill-label { font-size: 10px; opacity: 0.75; }
.skill-btn.active {
  background: rgba(255,120,0,0.25);
  border-color: rgba(255,140,0,0.8);
  box-shadow: 0 0 10px rgba(255,100,0,0.4);
}
/* 選択モード中（upgrade/delete）はボタンをやや暗くして選択中であることを示す */
.skill-btn.select-mode {
  background: rgba(100,60,255,0.25);
  border-color: rgba(140,100,255,0.9);
  box-shadow: 0 0 10px rgba(120,80,255,0.4);
}
.skill-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
/* 所持数バッジ */
.skill-count {
  font-size: 11px; font-weight: bold;
  background: rgba(255,255,255,0.15);
  border-radius: 8px; padding: 0 5px; min-width: 18px;
  text-align: center; line-height: 1.5;
}
.skill-btn.active   .skill-count { background: rgba(255,180,0,0.3); }
.skill-btn:disabled .skill-count { opacity: 0.5; }

/* 報酬待機中: 通常スキルボタンを縮小してクレームボタンにスペースを譲る */
#skill-bar.reward-pending .skill-btn:not(#skill-claim) {
  height: 42px;
  font-size: 0.85em;
  transition: height 0.2s ease, font-size 0.2s ease;
}
#skill-bar.reward-pending .skill-btn:not(#skill-claim) .skill-icon { font-size: 18px; }

/* クレームボタン（報酬受け取りボタン）*/
#skill-claim {
  flex: 1;
  background: rgba(255,200,0,0.15);
  border-color: rgba(255,200,0,0.55);
  animation: claimPulse 1.6s ease-in-out infinite;
}
#skill-claim:hover { background: rgba(255,200,0,0.28); border-color: rgba(255,200,0,0.9); }
#skill-claim .skill-count { background: rgba(255,180,0,0.35); }
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,180,0,0); }
  50%       { box-shadow: 0 0 10px rgba(255,180,0,0.5); }
}

/* ============================================================
   スキル確認パネル（upgrade/delete で天体選択後に表示される下部カード）
   全画面オーバーレイではなく小さなカードとして下部に表示。
   ゲーム画面は背後に見えたまま。
   ============================================================ */
#skill-confirm {
  display: none;
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  background: rgba(12,6,32,0.96);
  border: 1px solid rgba(140,100,255,0.5);
  border-radius: 14px; padding: 14px 20px;
  text-align: center; color: #fff;
  z-index: 20; min-width: 200px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
#skill-confirm.show { display: block; }
#confirm-preview { font-size: 30px; margin-bottom: 12px; line-height: 1.4; white-space: nowrap; }
.confirm-btns { display: flex; gap: 16px; justify-content: center; }
#confirm-ok, #confirm-cancel {
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 24px; font-weight: bold; line-height: 1;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.1s;
}
#confirm-ok {
  background: linear-gradient(135deg, #44cc66, #229944);
  color: #fff;
  box-shadow: 0 3px 12px rgba(40,180,80,0.5);
}
#confirm-ok:active { transform: scale(0.92); box-shadow: 0 1px 6px rgba(40,180,80,0.4); }
#confirm-cancel {
  background: linear-gradient(135deg, #ee4444, #bb1111);
  color: #fff;
  box-shadow: 0 3px 12px rgba(200,40,40,0.5);
}
#confirm-cancel:active { transform: scale(0.92); box-shadow: 0 1px 6px rgba(200,40,40,0.4); }

/* スタート画面（#overlay と同じ半透明+blur デザイン）
   class="show" を HTML に直書きしているので、ページ読み込み直後から表示される。
   JS の init() が show を付け直し、beginGame() が外す。 */
#start-overlay {
  display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  flex-direction: column; align-items: center; justify-content: center;
  color: #fff; gap: 24px; text-align: center;
}
#start-overlay.show { display: flex; }
#start-overlay h2 { font-size: 36px; font-weight: bold; }

/* ============================================================
   4連鎖ルーレット
   ============================================================ */
#roulette-overlay {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: rgba(10,5,28,0.97);
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 16px; padding: 20px 16px 16px;
  z-index: 25;
  box-shadow: 0 8px 40px rgba(0,0,0,0.75), 0 0 30px rgba(255,180,0,0.1);
  color: #fff; text-align: center;
}
#roulette-overlay.show { display: block; }

#roulette-title {
  font-size: 17px; font-weight: bold;
  color: #ffe566; margin-bottom: 14px;
  letter-spacing: 0.04em;
}

#roulette-cards {
  display: flex; flex-direction: column; gap: 7px;
}

.rlt-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 4px solid transparent;
  border-radius: 9px;
  text-align: left;
  transition: background 90ms ease, border-color 90ms ease, box-shadow 90ms ease;
  will-change: background, box-shadow;
}
.rlt-card.active {
  background: rgba(255,200,0,0.13);
  border-color: rgba(255,200,0,0.65);
  border-left-color: #ffcc00;
  box-shadow: 0 0 18px rgba(255,200,0,0.28), inset 0 0 10px rgba(255,200,0,0.08);
}

.rlt-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.rlt-info { display: flex; flex-direction: column; gap: 2px; }
.rlt-name { font-size: 14px; font-weight: bold; color: #fff; }
.rlt-desc { font-size: 11px; color: rgba(255,255,255,0.5); }

#roulette-stop {
  display: block; margin: 15px auto 0;
  padding: 10px 44px; font-size: 16px; font-weight: bold;
  background: linear-gradient(135deg, #ffcc00, #ff8800);
  color: #1a0e30; border: none; border-radius: 26px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,160,0,0.45);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, opacity 0.2s;
}
#roulette-stop:active    { transform: scale(0.95); }
#roulette-stop:disabled  { opacity: 0.4; cursor: default; transform: none; }

.reward-queue-info {
  font-size: 11px; color: rgba(255,200,0,0.6);
  min-height: 16px; text-align: center; margin-top: 6px;
}

/* ============================================================
   連鎖報酬スキル選択パネル（5連鎖以上で表示）
   skill-confirm と同じ下部カードスタイル。3ボタン横並び。
   ============================================================ */
#chain-reward {
  display: none;
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  background: rgba(12,6,32,0.96);
  border: 1px solid rgba(255,200,0,0.5);
  border-radius: 14px; padding: 14px 20px;
  text-align: center; color: #fff;
  z-index: 20; min-width: 240px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
#chain-reward.show { display: block; }

/* 引き込みピーク演出: 下からスライドイン → 報酬ボタンへ吸い込まれる */
#chain-reward.panel-peek {
  animation: peekSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#chain-reward.panel-peek-out {
  animation: peekPullDown 0.38s cubic-bezier(0.55, 0, 1, 0.45) both;
}
@keyframes peekSlideIn {
  from { transform: translateX(-50%) translateY(40px) scale(0.82); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0)   scale(1);    opacity: 1; }
}
@keyframes peekPullDown {
  0%   { transform: translateX(-50%) translateY(0)    scale(1);    opacity: 1; }
  100% { transform: translateX(-50%) translateY(90px) scale(0.28); opacity: 0; }
}
#chain-reward-title {
  font-size: 14px; font-weight: bold;
  color: #ffe566; margin-bottom: 12px;
  letter-spacing: 0.05em;
}
#chain-reward-btns { display: flex; gap: 10px; justify-content: center; }
.chain-reward-btn {
  flex: 1; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,200,0,0.10);
  border: 1px solid rgba(255,200,0,0.35);
  border-radius: 10px; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.chain-reward-btn:hover  { background: rgba(255,200,0,0.25); border-color: rgba(255,200,0,0.7); }
.chain-reward-btn:active { transform: scale(0.94); }
.chain-reward-btn .cr-icon  { font-size: 22px; line-height: 1; }
.chain-reward-btn .cr-label { font-size: 11px; opacity: 0.85; }

/* ============================================================
   デバッグパネル（ゲーム画面右端のオーバーレイ）
   ` キーで表示/非表示。ゲーム進行はそのまま継続。
   ============================================================ */
#debug-panel {
  display: none;
  position: absolute;
  top: 70px; right: 0;
  width: 68px;
  z-index: 30;
  background: rgba(8,4,20,0.92);
  border: 1px solid rgba(80,200,120,0.45);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 6px 4px;
  pointer-events: auto;
}
#debug-panel.show { display: flex; flex-direction: column; align-items: center; gap: 4px; }

#debug-header {
  font-size: 10px; font-weight: bold;
  color: #60ee90; letter-spacing: 0.04em;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(80,200,120,0.25);
  width: 100%; text-align: center;
}

#debug-palette {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
}
.dbg-btn {
  display: flex; align-items: center; gap: 3px;
  width: 100%; padding: 3px 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  color: #ccc; cursor: pointer; font-size: 11px;
  transition: background 0.1s;
  white-space: nowrap; overflow: hidden;
}
.dbg-btn:hover  { background: rgba(80,200,120,0.18); border-color: rgba(80,200,120,0.4); }
.dbg-btn.active {
  background: rgba(80,200,120,0.28);
  border-color: rgba(80,200,120,0.75);
  color: #fff;
}
.dbg-btn .dbg-key   { font-size: 9px; color: rgba(255,255,255,0.3); width: 10px; flex-shrink: 0; }
.dbg-btn .dbg-emoji { font-size: 13px; line-height: 1; flex-shrink: 0; }

#debug-hint {
  font-size: 9px; color: rgba(255,255,255,0.3);
  line-height: 1.6; width: 100%;
  padding-top: 3px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

#debug-count {
  font-size: 9px; color: rgba(80,200,120,0.7);
  width: 100%; text-align: center;
}

/* デバッグモード中はcanvasのカーソルを十字に */
#canvas-outer.debug-active canvas { cursor: crosshair; }

/* 言語セレクター（スタート画面内）
   ピルボタンを横並びに。新言語追加時は .lang-btn を追加するだけ。 */
#lang-selector {
  display: flex; gap: 8px;
}
.lang-btn {
  padding: 6px 18px; font-size: 14px; font-weight: bold;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-btn.active {
  background: rgba(140,100,255,0.45);
  color: #fff;
  border-color: rgba(160,120,255,0.8);
  box-shadow: 0 0 8px rgba(140,100,255,0.4);
}
.lang-btn:not(.active):hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
#start-btn {
  padding: 13px 48px; font-size: 20px; font-weight: bold;
  background: linear-gradient(135deg, #ff7722, #ff4400);
  color: #fff; border: none; border-radius: 30px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,80,0,0.45);
  -webkit-tap-highlight-color: transparent;
}

/* 設定オーバーレイ（#overlay と同じ半透明+blur デザイン） */
#settings-overlay {
  display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  flex-direction: column; align-items: center; justify-content: center;
  color: #fff; gap: 18px; text-align: center;
}
#settings-overlay.show { display: flex; }
#settings-overlay h2 { font-size: 32px; font-weight: bold; }

/* 「ゲームに戻る」ボタン（紫グラデーション） */
#resume-btn {
  padding: 13px 36px; font-size: 18px; font-weight: bold;
  background: linear-gradient(135deg, #7744ff, #4422cc);
  color: #fff; border: none; border-radius: 30px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(100,60,255,0.45);
  -webkit-tap-highlight-color: transparent;
}

/* 「報酬自動表示」トグルボタン（設定内） */
#autoshow-btn {
  padding: 10px 28px; font-size: 15px;
  background: rgba(255,200,0,0.12);
  color: #ffe566; border: 1px solid rgba(255,200,0,0.4);
  border-radius: 24px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
#autoshow-btn:hover { background: rgba(255,200,0,0.22); border-color: rgba(255,200,0,0.7); }

/* 効果音スライダー行 */
#sfx-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: #ccc;
}
#sfx-row input[type=range] {
  width: 130px; accent-color: #9966ff;
}
#sfx-val {
  width: 36px; font-size: 13px; color: #aaa; text-align: right;
}

/* 「リセット」ボタン（オレンジ、「もう一度」と同スタイル） */
#reset-btn {
  padding: 13px 36px; font-size: 18px; font-weight: bold;
  background: linear-gradient(135deg, #ff7722, #ff4400);
  color: #fff; border: none; border-radius: 30px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,80,0,0.45);
  -webkit-tap-highlight-color: transparent;
}