/* ================================
   地形コンテナ
================================ */
.card-terrain {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: flex-start;

}

/* ================================
   6×6 グリッド
================================ */
.terrain-grid {
  display: grid;
  gap: 2px;
  width: fit-content;
  position: relative;
}

/* ================================
   各セル（色は JS 側でクラス付与）
================================ */
.terrain-cell {
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形を維持 */
}

.mini-terrain-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 0.5fr;
  gap: 2px;
}

.detail-terrain-grid {
  display: grid;
  grid-template-columns: repeat(6, 60px);
  grid-auto-rows: 60px;
  gap: 2px;
  width: 370px;
  justify-items: start;
}

.detail-terrain-cell {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  justify-items: start;
}

/* 色定義（ここに一本化） */
.terrain-cell--risk-high { background: var(--terrain-red); }
.terrain-cell--risk-mid { background: var(--terrain-orange); }
.terrain-cell--risk-low { background: var(--terrain-yellow); }
.terrain-cell--stable { background: var(--terrain-green); }
.terrain-cell--very-stable { background: var(--terrain-deep-green); }

/* ================================
   資産寿命ライン（オーバーレイ）
   → SVG または Canvas で描画する前提
================================ */
.terrain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* ユーザー操作を邪魔しない */
}

/* ================================
   セルホバー（PC 用）
================================ */
.terrain-cell:hover {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

/* ================================
   スマホ用：タップ時の強調
================================ */
.terrain-cell:active {
  outline: 2px solid rgba(255, 255, 255, 0.8);
}