/* ============================================================
   スマホ向け基本設定
   - 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;
}
/* 中国語表示時: 日本語フォントを使わず中国語最適化フォントにフォールバック */
:lang(zh), :lang(zh) * {
  font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
}
body { display: flex; flex-direction: column; align-items: center; }

/* ============================================================
   ヘッダー
   3カラム flex: 左(#header-left) ・ 中央(#next-wrap) ・ 右(#header-right)
   左右を flex:1 にすることで #next-wrap が常に水平中央に配置される
   ============================================================ */
#header {
  width: 100%; max-width: 400px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; color: #fff; flex-shrink: 0;
}
#header-left  { flex: 1; }
#header-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
#score-el { font-size: 20px; font-weight: bold; }
#hi-el    { font-size: 13px; opacity: 0.75; margin-top: 2px; }
#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;
}


/* ============================================================
   ゲームエリア
   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; }
#rank-pct-el {
  font-size: 15px;
  color: #cc88ff;
  letter-spacing: 0.04em;
  animation: rankPctFadeIn 0.6s ease both;
}
@keyframes rankPctFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 「もう一度」ボタン（ゲームオーバー画面）
   スマホ向け: 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-btn.loading {
  background: #222 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  animation: sharePulse 1.2s ease-in-out infinite;
}
@keyframes sharePulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.3; }
}
/* ランキングリンク（ゲームオーバーオーバーレイ内） */
#ranking-link {
  display: inline-block;
  padding: 9px 24px;
  background: rgba(124,92,252,0.2);
  border: 1px solid rgba(124,92,252,0.5);
  border-radius: 8px;
  color: #cc99ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
#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 {
  position: relative;
  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 .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; }
}

/* ── スキル初回タップ時のトースト ── */
#skill-toast {
  position: absolute;
  bottom: calc(100% + 8px); /* スキルバーのすぐ上 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,12,40,0.94);
  border: 1px solid rgba(140,100,255,0.5);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 12px;
  color: #ddd0ff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 120;
  animation: skillToastIn 0.25s ease both;
}
#skill-toast.hiding { animation: skillToastOut 0.3s ease both; }
@keyframes skillToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes skillToastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ── 初回ゲーム時のスキルバー強調パルス ── */
@keyframes skillBarPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 0 3px rgba(140,100,255,0.55), 0 0 18px rgba(140,100,255,0.35); }
}
#skill-bar.skill-bar-highlight {
  animation: skillBarPulse 1s ease-in-out 3; /* 3回パルスして終了 */
}
#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: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; }
.chain-reward-btn .cr-desc  { font-size: 9.5px; opacity: 0.6; text-align: center; line-height: 1.3; }

/* ============================================================
   デバッグパネル（ゲーム画面右端のオーバーレイ）
   ` キーで表示/非表示。ゲーム進行はそのまま継続。
   ============================================================ */
#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.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; }

/* 言語セレクター（設定オーバーレイ内） */
#settings-lang-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#settings-lang-label {
  font-size: 11px; color: #888; letter-spacing: 0.08em; text-transform: uppercase;
}
#settings-lang-row {
  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);
}
/* スタート画面のプレイヤー名エリア */
#start-playername {
  background: rgba(124,92,252,0.15);
  border: 1px solid rgba(124,92,252,0.3);
  border-radius: 16px;
  padding: 8px 14px;
  width: 100%; max-width: 230px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#start-name-view {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #b89ee8;
  max-width: 100%;
}
#start-name-view span:nth-child(2) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#start-name-edit-btn {
  background: transparent; border: none;
  color: #b89ee8; font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0 2px; flex-shrink: 0;
  opacity: 0.6; transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#start-name-editor {
  display: none; gap: 5px; width: 100%;
}
#start-name-input {
  flex: 1; padding: 5px 8px; min-width: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(124,92,252,0.5);
  border-radius: 8px;
  color: #fff; font-size: 13px; outline: none;
  -webkit-tap-highlight-color: transparent;
}
#start-name-input:focus { border-color: rgba(124,92,252,0.85); }
#start-name-save-btn,
#start-name-cancel-btn {
  padding: 5px 10px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
#start-name-save-btn   { background: rgba(124,92,252,0.65); color: #fff; }
#start-name-cancel-btn { background: rgba(255,255,255,0.1); color: #aaa; }
#start-name-hint {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: rgba(255,216,110,0.1);
  border: 1px solid rgba(255,216,110,0.35);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px; color: #ffd86e;
}
#start-name-hint-msg { flex: 1; text-align: left; }
#start-name-hint-ok {
  flex-shrink: 0;
  padding: 3px 9px; font-size: 11px; font-weight: 600;
  background: rgba(255,216,110,0.2);
  border: 1px solid rgba(255,216,110,0.45);
  border-radius: 8px; color: #ffd86e;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
#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 デザイン） */
/* z-index: 12 → #start-overlay（z-index なし＝DOM順で後）より上に表示されるよう明示 */
#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; text-align: center;
  z-index: 12; overflow-y: auto;
}
#settings-overlay.show { display: flex; }
#settings-overlay h2 { font-size: 32px; font-weight: bold; }

/* メニューパネル / 設定サブパネル — 共通レイアウト */
#menu-panel,
#settings-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; width: 100%; padding: 32px 20px;
}
#settings-panel { display: none; }

/* 「← 戻る」ボタン（設定サブパネル上部） */
#settings-back-btn {
  margin-top: auto;
  padding: 10px 22px; font-size: 15px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px; color: #aaa;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

/* メニュー内「設定」ボタン */
#menu-settings-btn {
  padding: 9px 28px; font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 24px; color: #ccc;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}

/* 「ゲームに戻る」ボタン（紫グラデーション） */
#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;
}

/* 効果音スライダー行 */
#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;
}

/* ── 表示名エディタ（設定オーバーレイ内） ── */
#displayname-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; max-width: 260px;
}
#displayname-label-row {
  font-size: 12px; color: #aaa; letter-spacing: 0.05em;
}
#displayname-edit-row {
  display: flex; gap: 6px; width: 100%;
}
#displayname-input {
  flex: 1; padding: 8px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(124,92,252,0.4);
  border-radius: 8px;
  color: #fff; font-size: 14px;
  outline: none; min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
#displayname-input:focus {
  border-color: rgba(124,92,252,0.85);
  background: rgba(255,255,255,0.12);
}
#displayname-save {
  padding: 8px 14px;
  background: rgba(124,92,252,0.55);
  border: none; border-radius: 8px;
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
#displayname-status {
  font-size: 11px; color: #88ff88; min-height: 16px;
}
#displayname-status:not([data-ok="1"]) { color: #ff8888; }

/* ランキングリンク・ゲーム一覧リンク（設定メニュー内・スタート画面） */
#settings-ranking-link,
#start-ranking-link,
#start-games-link {
  display: inline-block;
  padding: 9px 24px;
  background: rgba(124,92,252,0.18);
  border: 1px solid rgba(124,92,252,0.5);
  border-radius: 24px;
  color: #cc99ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
/* プロフィールリンク（設定メニュー内） */
#settings-profile-link {
  display: inline-block;
  padding: 9px 24px;
  background: rgba(62,207,255,0.12);
  border: 1px solid rgba(62,207,255,0.35);
  border-radius: 24px;
  color: #7de8ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}

/* 「リセット」ボタン（オレンジ、「もう一度」と同スタイル） */
#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;
}

/* ============================================================
   デバイス適応 UI
   ② hover: hover  → マウスデバイスのみホバーエフェクトを適用
      タッチデバイスでは :hover が残留してしまう問題を防ぐ
   ③ pointer: coarse → タッチ/スタイラス向けにタップ領域を拡大
   ============================================================ */

/* ── ② マウス専用ホバーエフェクト ── */
@media (hover: hover) {
  #settings-btn:hover           { background: rgba(140,100,255,0.45); }
  #ranking-link:hover           { background: rgba(124,92,252,0.35); border-color: rgba(124,92,252,0.8); }
  #skill-claim:hover            { background: rgba(255,200,0,0.28); border-color: rgba(255,200,0,0.9); }
  .chain-reward-btn:hover       { background: rgba(255,200,0,0.25); border-color: rgba(255,200,0,0.7); }
  .dbg-btn:hover                { background: rgba(80,200,120,0.18); border-color: rgba(80,200,120,0.4); }
  .lang-btn:not(.active):hover  { background: rgba(255,255,255,0.18); color: #fff; }
  #start-name-edit-btn:hover    { opacity: 1; }
  #start-name-hint-ok:hover     { background: rgba(255,216,110,0.35); }
  #settings-back-btn:hover      { background: rgba(255,255,255,0.1); }
  #menu-settings-btn:hover      { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }
  #autoshow-btn:hover           { background: rgba(255,200,0,0.22); border-color: rgba(255,200,0,0.7); }
  #displayname-save:hover       { background: rgba(124,92,252,0.8); }
  #settings-ranking-link:hover,
  #start-ranking-link:hover,
  #start-games-link:hover       { background: rgba(124,92,252,0.32); border-color: rgba(124,92,252,0.8); }
  #settings-profile-link:hover  { background: rgba(62,207,255,0.24); border-color: rgba(62,207,255,0.65); }
  .ach-open-btn:hover           { background: rgba(255,200,0,0.24); border-color: rgba(255,200,0,0.7); }
  #ach-close-btn:hover          { background: rgba(255,255,255,0.2); }
  .ach-section-hdr:hover        { background: rgba(255,255,255,0.10); }
}

/* ============================================================
   実績システム
   ============================================================ */

/* 実績ボタン（スタート画面・メニュー・ゲームオーバー） */
.ach-open-btn {
  display: inline-block;
  padding: 9px 24px;
  background: rgba(255,200,0,0.12);
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 24px;
  color: #ffe566;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}

/* 実績オーバーレイ（position:absolute は canvas-outer 内） */
#achievement-overlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  flex-direction: column;
  color: #fff;
  z-index: 15;
  overflow: hidden;
}
#achievement-overlay.show { display: flex; }

#ach-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
#ach-title {
  font-size: 20px; font-weight: bold; flex: 1;
}
#ach-stats {
  font-size: 12px; color: #aaa;
}
#ach-close-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.1);
  border: none; border-radius: 50%;
  color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

/* スクロール可能エリア（touch-action: pan-y でモバイルでも縦スクロール可） */
#ach-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 10px 12px 24px;
  display: flex; flex-direction: column; gap: 8px;
}

/* アコーディオンセクション */
.ach-section { display: flex; flex-direction: column; }

.ach-section-hdr {
  width: 100%;
  display: flex; flex-direction: column;
  padding: 11px 14px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff; font-size: 14px; font-weight: bold;
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  gap: 8px;
}
.ach-cat-hdr-row {
  display: flex; align-items: center; gap: 8px;
}
.ach-cat-icon  { font-size: 18px; line-height: 1; }
.ach-cat-name  { flex: 1; }
.ach-cat-prog  { font-size: 12px; color: #aaa; font-weight: normal; }
.ach-cat-arrow { font-size: 10px; color: #666; }

/* カテゴリ達成度プログレスバー */
.ach-cat-bar-wrap {
  width: 100%; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.ach-cat-bar {
  height: 100%;
  background: linear-gradient(90deg, #7755ff, #bb66ff);
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 0;
}

/* セクション内容（折り畳み時は display:none） */
.ach-section-body {
  display: none;
  flex-direction: column; gap: 6px;
  padding: 8px 0 2px;
}

/* 実績カード */
.ach-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid #555;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  transition: opacity 0.15s;
}
.ach-card-off { opacity: 0.42; }
.ach-card-on  { opacity: 1; }
.ach-card-icon {
  font-size: 28px; line-height: 1; flex-shrink: 0;
  width: 36px; text-align: center;
}
.ach-card-info { flex: 1; min-width: 0; }
.ach-card-name {
  font-size: 13px; font-weight: bold; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ach-card-cond {
  font-size: 11px; color: #999; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ach-card-rarity {
  font-size: 10px; font-weight: 700;
  margin-top: 5px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ach-card-sub {
  font-size: 11px; color: #bbaadd; margin-top: 5px;
  font-style: italic; line-height: 1.4; white-space: normal;
}

/* 虹色（secret レア度） */
@keyframes achRainbowBorder {
  0%   { border-color: #ff4466; }
  16%  { border-color: #ff8800; }
  33%  { border-color: #ffdd00; }
  50%  { border-color: #44ee44; }
  66%  { border-color: #44aaff; }
  83%  { border-color: #cc44ff; }
  100% { border-color: #ff4466; }
}
@keyframes achRainbowText {
  0%   { color: #ff4466; }
  16%  { color: #ff8800; }
  33%  { color: #ffdd00; }
  50%  { color: #44ee44; }
  66%  { color: #44aaff; }
  83%  { color: #cc44ff; }
  100% { color: #ff4466; }
}
.ach-rainbow-border { animation: achRainbowBorder 2.5s linear infinite; }
.ach-rainbow-text   { animation: achRainbowText   2.5s linear infinite; }

/* トースト通知 */
#ach-toast {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center; gap: 10px;
  background: rgba(10,5,28,0.97);
  border: 1px solid #777;
  border-radius: 12px;
  padding: 10px 16px;
  z-index: 50;
  min-width: 190px; max-width: 310px;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.ach-toast-queue {
  flex-shrink: 0; align-self: center;
  font-size: 11px; font-weight: 700; color: #aaa;
  background: rgba(255,255,255,0.10);
  border-radius: 10px; padding: 2px 8px;
  margin-left: 2px;
}
.ach-toast-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.ach-toast-body { flex: 1; min-width: 0; overflow: hidden; }
.ach-toast-title {
  font-size: 10px; color: #aaa;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ach-toast-name { font-size: 13px; font-weight: bold; color: #fff; }
.ach-toast-sub  { font-size: 11px; color: #bbaadd; margin-top: 2px; font-style: italic; opacity: 0.85; }

@keyframes achToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.88); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}
@keyframes achToastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
  to   { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(0.88); }
}
.ach-toast-in  { animation: achToastIn  0.35s cubic-bezier(0.22,1,0.36,1) both; }
.ach-toast-out { animation: achToastOut 0.42s cubic-bezier(0.4,0,1,1) both; }

/* ── ③ タッチデバイス向けタップ領域拡大 ── */
@media (pointer: coarse) {
  /* スキルボタン・設定ボタンは最低 48px の高さ（Apple HIG 推奨） */
  #settings-btn        { width: 44px; height: 44px; }
  #skill-claim         { min-height: 48px; }
  .chain-reward-btn    { min-height: 52px; padding: 14px 16px; }
  #autoshow-btn        { min-height: 48px; }
  #settings-back-btn,
  #menu-settings-btn   { min-height: 48px; }
  #resume-btn,
  #reset-btn,
  #start-btn           { padding: 16px 48px; }
  .ach-open-btn        { padding: 12px 28px; font-size: 15px; }
  #ach-close-btn       { width: 40px; height: 40px; font-size: 18px; }
  /* 表示名編集ボタンも少し広く */
  #start-name-edit-btn { padding: 4px 8px; font-size: 16px; }
  #displayname-save    { padding: 10px 18px; }
}