/* scenes.css: 各画面(育成/図鑑/街/バトル)別スタイル */

/* ========== 育成シーン ========== */
#scene-insect {
  text-align: center;
}

/* 虫が徘徊するステージ (デジモン風)。底に淡い地面 */
.insect-stage {
  position: relative;
  width: 100%;
  height: 180px;
  margin: var(--sp-2) 0;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, transparent 68%, var(--c-surface-alt) 68%);
}

/* ステージ内を動くスプライト。枠の背景は消してムシ本体だけ動かす */
.sprite-placeholder.sprite-roam {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  background: transparent;
  /* 移動の transition はホップ時だけ JS で付ける (再描画の初期配置で左上から滑り込むのを防ぐ) */
}

/* 躍動アニメ: 待機呼吸 / ホップ(ため→伸び→着地) / 進行方向の向き。
   reduced-motion は base.css が animation を中立へ潰すため自動で静止する。 */
.sprite-roam .bug-rig {
  animation: bug-idle 2.4s ease-in-out infinite;
}
.sprite-roam .bug-rig.is-hop {
  animation: bug-hop .45s ease-out;
}
.sprite-roam .bug-rig.react-happy {
  animation: bug-react-happy .6s ease-out; /* お世話/タップ/進化で喜ぶ (Phase2) */
}
.sprite-roam[data-facing="left"] .sprite-img {
  transform: scaleX(-1);
}

@keyframes bug-idle {
  0%, 100% { transform: translateY(0)   scaleX(1)   scaleY(1); }
  50%      { transform: translateY(-2%) scaleX(.98) scaleY(1.04); }
}
@keyframes bug-hop {
  0%   { transform: translateY(0)    scaleX(1.08) scaleY(.90); } /* ため(沈む) */
  35%  { transform: translateY(-40%) scaleX(.92)  scaleY(1.12); } /* 伸び(跳ぶ) */
  70%  { transform: translateY(0)    scaleX(1.12) scaleY(.86); } /* 着地(潰れる) */
  100% { transform: translateY(0)    scaleX(1)    scaleY(1); }   /* 収束(中立) */
}
@keyframes bug-react-happy {
  0%, 100% { transform: translateY(0)    scaleX(1)    scaleY(1); }
  20%      { transform: translateY(-32%) scaleX(.90)  scaleY(1.15); }
  45%      { transform: translateY(0)    scaleX(1.12) scaleY(.85); }
  70%      { transform: translateY(-16%) scaleX(.97)  scaleY(1.07); }
  88%      { transform: translateY(0)    scaleX(1.04) scaleY(.96); }
}

.insect-title {
  margin: var(--sp-1) 0;
  font-size: var(--fs-md);
}

.timer-line {
  margin: var(--sp-1) 0;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.weight-line {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-align: right;
}

.care-buttons {
  margin: var(--sp-3) 0;
}

.env-select {
  margin: var(--sp-3) 0;
}

.env-select-label {
  margin-bottom: var(--sp-1);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.graduate-sign {
  margin-top: var(--sp-2);
  color: var(--c-danger);
  font-weight: 700;
}

.graduate-choice {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--sp-2);
}

/* 選択肢内ではボタンの上マージンを揃える (fight-btn の auto マージンを打ち消す) */
.graduate-choice .fight-btn {
  margin-top: 0;
}

.graduate-note {
  margin-top: var(--sp-2);
  color: var(--c-text-muted);
}

.insect-waiting {
  margin-top: var(--sp-8);
  color: var(--c-text-muted);
}

/* ========== 図鑑シーン ========== */
.pokedex-header {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: var(--sp-2) 0;
}

.pokedex-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
}

.pokedex-card {
  padding: var(--sp-2);
  text-align: center;
  cursor: pointer;
  /* .card の見た目を継承 (JS で両クラス付与) */
}

.pokedex-card .card-name { font-weight: 700; margin-top: var(--sp-1); }
.pokedex-card .card-count { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* 図鑑レベル別の枠 (frame) */
.pokedex-card.frame-none   { border-style: dashed; opacity: 0.85; }
.pokedex-card.frame-simple { border-color: var(--c-border); }
.pokedex-card.frame-brown  { border-color: #b07a3c; }
.pokedex-card.frame-gold   { border-color: var(--c-gold); box-shadow: 0 0 0 2px rgba(201, 138, 28, 0.3) inset, var(--shadow-card); }
.pokedex-card.frame-hologram {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    linear-gradient(120deg, #6ec4c4, #c98adc, #f4a93b, #6ec4c4) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: holo-border 4s linear infinite;
}

@keyframes holo-border {
  to { background-position: 0 0, 300% 0; }
}

/* 図鑑レベル別のスプライト演出 (art) */
.pokedex-card.art-sway .sprite-placeholder {
  animation: sprite-sway 1.8s ease-in-out infinite alternate;
}
.pokedex-card.art-glow .sprite-placeholder {
  box-shadow: 0 0 14px rgba(201, 138, 28, 0.7);
}
.pokedex-card.art-special .sprite-placeholder {
  background: linear-gradient(120deg, #d8f0f0, #efd8f0, #f0e6d0);
  background-size: 200% 200%;
  animation: sprite-holo 3s ease-in-out infinite;
}

@keyframes sprite-sway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}
@keyframes sprite-holo {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.pokedex-detail {
  margin-top: var(--sp-3);
  padding: var(--sp-2);
  border-top: 2px solid var(--c-border);
}

.pokedex-detail h3 { margin: var(--sp-1) 0; }
.pokedex-detail p { margin: var(--sp-1) 0; }

.pokedex-meta {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-2);
}

.trivia-section { margin: var(--sp-2) 0; }

.trivia-label {
  display: inline-block;
  padding: 1px var(--sp-2);
  background: var(--c-surface-alt);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary-dark);
}

.trivia-text { margin: var(--sp-1) 0 0; line-height: 1.7; }

.pokedex-hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-align: center;
}

/* ========== 街シーン ========== */
.town-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-2);
}

.town-header h2 { margin: 0; font-size: var(--fs-md); }
.town-meta { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* 森ジオラマ (③) */
.town-forest { margin: var(--sp-2) 0 var(--sp-3); }
.forest-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 200;
  border-radius: var(--r-md);
  overflow: hidden;
  /* 画像が読めない時は末尾の単色にフォールバック (退行ゼロ) */
  background: url('../assets/sprites/scene/forest_diorama.png') center bottom / cover no-repeat, var(--c-surface-alt);
  image-rendering: pixelated;
}
.forest-walkers { position: absolute; left: 0; right: 0; bottom: 14%; height: 36%; pointer-events: none; } /* 草原帯(上から約50〜86%)。虫はタップ不要で奥の巣へのクリックを通す */
.forest-walker { position: absolute; left: 0; top: 0; width: 32px; height: 32px; will-change: transform; }
.forest-walker .sprite-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.forest-nests { position: absolute; inset: 0; }
.forest-nest {
  position: absolute;
  width: 40px;
  transform: translateX(-50%);     /* left% を中心基準に */
  text-align: center;
  cursor: pointer;
  font-size: 24px;                 /* 絵文字フォールバック時のサイズ */
}
.forest-nest:active { transform: translateX(-50%) scale(0.95); }
.forest-nest .town-sprite-img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; display: block; margin: 0 auto; }
.forest-nest-sign {
  display: inline-block;
  margin-top: 1px;
  padding: 0 3px;
  font-size: 9px;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  white-space: nowrap;
}

/* 建物タイル */
.town-buildings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}

.town-building {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  padding: var(--sp-2);
  text-align: center;
  cursor: pointer;
  transition: transform 0.08s;
}

.town-building:active { transform: scale(0.97); }

/* Lv バッジ (タイル左上) */
.town-building-lv {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  padding: 1px 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--c-accent-dark);
  border-radius: var(--r-pill);
}

.town-building-emoji { font-size: 40px; line-height: 1.1; }
.town-building-emoji .town-sprite-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;
}

/* 屋号(看板) */
.town-sign {
  display: inline-block;
  margin: var(--sp-1) auto 0;
  padding: 2px var(--sp-2);
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.25;
  text-wrap: balance;   /* 長い和名の折返しを均等に */
  border-radius: var(--r-sm);
}
/* 完全体名の分割表示: 各セグメントは割らず、境目でだけ折返す */
.town-sign-seg { white-space: nowrap; }

.town-building-meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  word-break: keep-all;   /* 「1匹」「巣穴・草むら」を割らず空白位置で折返す */
}

/* 建物レベルが上がるほど枠を豪華に */
.town-building[data-level="3"] { border-color: var(--c-accent); }
.town-building[data-level="4"] { border-color: var(--c-accent-dark); }
.town-building[data-level="5"] { border-color: var(--c-gold); box-shadow: 0 0 0 2px var(--c-gold) inset, var(--shadow-card); }

/* 「会いに行く」ダイジェスト = 下部せり出しドロワー */
.town-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 40;
}
.town-detail-backdrop.is-open { opacity: 1; visibility: visible; }

.town-detail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--sp-3);
  background: var(--c-surface);
  border-top: 2px solid var(--c-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);   /* 既定は画面外に隠れている */
  transition: transform 0.25s ease;
}
.town-detail.is-open { transform: translateY(0); }

.town-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.town-detail h3 { margin: var(--sp-1) 0; }
.town-detail-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--c-surface-alt);
  color: var(--c-text);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.town-member-row {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  padding: 2px 0;
}

/* まちの きろく (進化→街の因果ログ) */
.town-chronicle {
  margin-top: var(--sp-3);
  padding: var(--sp-2);
  border-top: 2px solid var(--c-border);
}

.town-chronicle-title { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-md); }

.town-chronicle-empty {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  padding: var(--sp-1) 0;
}

.chronicle-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}

.chronicle-row + .chronicle-row { margin-top: 2px; }

.chronicle-row.is-highlight {
  background: var(--c-surface-alt);
  font-weight: 700;
}

.chronicle-icon { flex-shrink: 0; }

.chronicle-text { flex: 1; color: var(--c-text); line-height: 1.4; }

.chronicle-time {
  flex-shrink: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* ========== バトルシーン ========== */
.battle-stamina { margin: var(--sp-1) 0; font-weight: 700; }
.battle-stamina.is-empty { color: var(--c-danger); }
.battle-streak { margin: var(--sp-1) 0; color: var(--c-accent-dark); }

.battle-select { margin: var(--sp-2) 0; }
.battle-select-label { margin-bottom: var(--sp-1); color: var(--c-text-muted); }

.battle-result-headline { margin: var(--sp-2) 0; }
.battle-result-detail { font-size: var(--fs-base); color: var(--c-text-muted); line-height: 1.7; }

.battle-locked { font-weight: 700; color: var(--c-text-muted); }
.battle-locked.is-empty { color: var(--c-danger); }

/* ミニゲーム (角突き相撲=タップ連打) */
.mg-screen {
  text-align: center;
  padding: var(--sp-4) 0;
}

.mg-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.mg-countdown {
  font-size: 48px;
  font-weight: 700;
  color: var(--c-accent-dark);
  margin: var(--sp-6) 0;
}

.mg-time {
  height: 10px;
  background: var(--c-meter-track);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 0 auto var(--sp-4);
  max-width: 280px;
}

.mg-time-bar {
  height: 100%;
  background: var(--c-danger);
  border-radius: inherit;
}

.mg-tap-btn {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: none;
  background: var(--c-accent);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  touch-action: manipulation;
  user-select: none;
}

.mg-tap-btn:active {
  transform: scale(0.94);
  background: var(--c-accent-dark);
}

.mg-power {
  height: 16px;
  background: var(--c-meter-track);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: var(--sp-4) auto 0;
  max-width: 280px;
}

.mg-power-bar {
  height: 100%;
  background: var(--c-primary);
  border-radius: inherit;
  transition: width 0.05s linear;
}

.mg-taps {
  margin-top: var(--sp-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}